@import url("https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100..900&display=swap");
/*********************************
 *
 * COMMON
 *
 *********************************/
body {
  position: relative;
  color: #000;
  font-family: "M PLUS 2", sans-serif;
  font-weight: 700; }
  @media screen and (max-width: 768px) {
    body {
      font-size: 2.6vw; }
      body .pc {
        display: none !important; } }
  @media screen and (min-width: 769px) {
    body {
      font-size: 0.95vw; }
      body::after {
        display: block;
        content: "";
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background: url("../images/bg-pc.jpg") center top no-repeat;
        background-size: cover;
        z-index: -1; }
      body a {
        transition: 0.3s; }
        body a:hover {
          opacity: 0.8; }
      body .sp {
        display: none !important; } }
  body a {
    text-decoration: none; }
  body img {
    width: 100%;
    height: auto; }
  @media screen and (min-width: 1540px) {
    body {
      font-size: 10px; } }
  body ul.l_1em li {
    margin: 0 0 0 1em;
    text-indent: -1em; }

/*********************************
 *
 * HEADER
 *
 *********************************/
header {
  width: 42%;
  max-width: 500px;
  margin: 0 auto;
  background: #ffffff; }
  @media screen and (max-width: 768px) {
    header {
      width: 100%;
      max-width: none; } }
  header .header_inner {
    width: 90%;
    margin: 0 auto;
    padding: 2em 0; }
    @media screen and (max-width: 768px) {
      header .header_inner {
        padding: 1.3em 0; } }
    header .header_inner img {
      width: 23.3%; }
      @media screen and (max-width: 768px) {
        header .header_inner img {
          width: 25%; } }

/*********************************
 *
 * MV
 *
 *********************************/
#mv {
  width: 42%;
  max-width: 500px;
  margin: 0 auto;
  background: #dcf5ff; }
  @media screen and (max-width: 768px) {
    #mv {
      width: 100%;
      max-width: none; } }
  #mv p {
    width: 88%;
    margin: 0 auto;
    padding: 0.5em 0 2.5em 0; }

/*********************************
 *
 * DATE
 *
 *********************************/
#date {
  width: 42%;
  max-width: 500px;
  margin: 0 auto;
  padding: 1.2em 0;
  background: #19b2c3;
  color: #ffffff;
  font-size: 160%;
  text-align: center; }
  @media screen and (max-width: 768px) {
    #date {
      width: 100%;
      max-width: none; } }
  #date h2 {
    font-weight: 700; }
  #date p {
    padding: 0;
    font-size: 120%; }

/*********************************
 *
 * PRESENT
 *
 *********************************/
#present {
  width: 42%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 0 3em 0;
  background: url("../images/bg.png");
  background-size: 2em auto; }
  @media screen and (max-width: 768px) {
    #present {
      width: 100%;
      max-width: none; } }
  #present .img {
    padding: 3em 0 0 0; }
  #present ul {
    width: 80%;
    margin: 1.8em auto 0 auto;
    font-size: 88%;
    font-weight: 500;
    line-height: 1.8; }
    @media screen and (max-width: 768px) {
      #present ul {
        font-size: 95%; } }

/*********************************
 *
 * ABOUT
 *
 *********************************/
#about {
  width: 42%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0.5em 0 0 0;
  background: #009fe8; }
  @media screen and (max-width: 768px) {
    #about {
      width: 100%;
      max-width: none; } }
  #about h2 {
    width: 63.4%;
    margin: 0 auto;
    padding: 3em 0 0 0; }
  #about .about_lead {
    background: url("../images/about_lead_bg.png") no-repeat;
    background-size: 100% auto; }
    #about .about_lead p {
      padding: 24% 0 0 0;
      color: #17294e;
      font-size: 110%;
      line-height: 1.9;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #about .about_lead p {
          padding: 21% 0 0 0;
          font-size: 120%; } }
    #about .about_lead p + p {
      padding: 1.5em 0 12% 0; }
  #about ul.about_nav {
    width: 96%;
    margin: 2.5em auto 0 auto;
    display: flex;
    justify-content: space-between; }
    #about ul.about_nav li {
      width: 31%;
      cursor: pointer; }
  #about .tab {
    padding: 0 0 3em 0; }
    #about .tab .about_inner {
      width: 84%;
      margin: 0 auto; }
    #about .tab h3 {
      width: 86%;
      margin: 0 auto;
      padding: 4em 0 0 0; }
    #about .tab .about_box {
      margin: 1.7em 0 0 0;
      padding: 1.8em 1em;
      background: #ffffff;
      border-radius: 1em;
      text-align: center; }
      #about .tab .about_box.line {
        border: 8px solid #fff571; }
      #about .tab .about_box img {
        width: 63%; }
      #about .tab .about_box p.note {
        margin: 0.8em 0 0 0;
        color: #17294e;
        font-size: 140%;
        font-weight: 800; }
        @media screen and (max-width: 768px) {
          #about .tab .about_box p.note {
            font-size: 150%; } }
      #about .tab .about_box .notice {
        margin: 0.7em 0 0 0;
        font-size: 90%; }
        @media screen and (max-width: 768px) {
          #about .tab .about_box .notice {
            font-size: 100%; } }
    #about .tab .about_box + .about_box {
      margin: 2.1em 0 0 0; }
    #about .tab dl.atn {
      display: flex;
      flex-wrap: wrap;
      margin: 3em 0 0 0;
      font-weight: 500;
      font-size: 90%;
      line-height: 1.8; }
      @media screen and (max-width: 768px) {
        #about .tab dl.atn {
          font-size: 100%; } }
      #about .tab dl.atn dt {
        width: 3em; }
      #about .tab dl.atn dd {
        width: calc(100% - 3em); }
  #about #tab1 {
    background: #66c5f1; }
  #about #tab2 {
    display: none;
    background: #f1a5b8; }
  #about #tab3 {
    display: none;
    background: #ffac4e; }
  #about .more_btn {
    padding: 3em 0;
    text-align: center; }
    #about .more_btn img {
      width: 74%; }

/*********************************
 *
 * HOWTO
 *
 *********************************/
#howto {
  width: 42%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0.5em 0 0 0;
  background: url("../images/bg.png");
  background-size: 2em auto; }
  @media screen and (max-width: 768px) {
    #howto {
      width: 100%;
      max-width: none; } }
  #howto h2 {
    width: 63.4%;
    margin: 0 auto;
    padding: 3em 0 0 0; }
  #howto ul.howto_nav {
    width: 96%;
    margin: 1em auto 0 auto;
    display: flex;
    justify-content: space-between; }
    #howto ul.howto_nav li {
      width: 48.5%;
      cursor: pointer; }
  #howto .tab {
    padding: 0 0 5em 0; }
    #howto .tab .howto_inner {
      width: 84%;
      margin: 0 auto; }
    #howto .tab .ttl {
      padding: 2em 0 0 0;
      color: #fff;
      font-size: 130%;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #howto .tab .ttl {
          font-size: 160%; } }
      #howto .tab .ttl span {
        display: inline-block;
        margin: 0 0 0.4em 0;
        padding: 0 3em;
        background: #ffffff;
        border-radius: 2em;
        color: #52c5d2;
        font-size: 90%; }
    #howto .tab h3 {
      width: 44.2%;
      margin: 0 auto;
      padding: 3em 0 0 0; }
      @media screen and (max-width: 768px) {
        #howto .tab h3 {
          padding: 2em 0 0 0; } }
    #howto .tab .howto_box {
      margin: 1.2em 0 0 0;
      padding: 1.5em 1.5em 1.8em 1.5em;
      background: #ffffff;
      border-radius: 1em;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #howto .tab .howto_box {
          padding: 1.5em 1em 1.8em 1em; } }
      #howto .tab .howto_box p.note {
        color: #17294e;
        font-size: 145%;
        line-height: 1.4; }
        @media screen and (max-width: 768px) {
          #howto .tab .howto_box p.note {
            font-size: 150%;
            line-height: 1.5; } }
      #howto .tab .howto_box .btn {
        width: 82%;
        margin: 1.3em auto 0 auto; }
      #howto .tab .howto_box .img {
        margin: 1.7em 0 0 0; }
      #howto .tab .howto_box ul.notice {
        margin: 2em 0 0 0;
        font-size: 90%;
        line-height: 1.6;
        text-align: left; }
        @media screen and (max-width: 768px) {
          #howto .tab .howto_box ul.notice {
            font-size: 95%; } }
      #howto .tab .howto_box .notice {
        margin: 0.7em 0 0 0;
        font-size: 90%; }
    #howto .tab .arw {
      margin: 2.3em auto 0 auto;
      text-align: center; }
      #howto .tab .arw img {
        width: 12%; }
  #howto #htab1 {
    background: #52c5d2; }
  #howto #htab2 {
    display: none;
    background: #e1a092; }

/*********************************
 *
 * PRECAUTIONS
 *
 *********************************/
#precautions {
  width: 42%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 0 4em 0;
  background: url("../images/bg.png");
  background-size: 2em auto; }
  @media screen and (max-width: 768px) {
    #precautions {
      width: 100%;
      max-width: none; } }
  #precautions h2 {
    width: 63.4%;
    margin: 0 auto;
    padding: 3em 0 0 0; }
  #precautions .precautions_inner {
    width: 84%;
    margin: 0 auto; }
    #precautions .precautions_inner ul.lead {
      padding: 1em 0 0 0;
      color: #17294e;
      font-size: 90%;
      line-height: 1.8; }
      @media screen and (max-width: 768px) {
        #precautions .precautions_inner ul.lead {
          font-size: 95%; } }
    #precautions .precautions_inner .precautions_box {
      overflow-y: scroll;
      height: 300px;
      margin: 1.5em 0 0 0;
      padding: 2em 1.5em 2em 1.5em;
      background: #ffffff;
      border: 2px solid #cccccc;
      line-height: 1.6; }
      #precautions .precautions_inner .precautions_box h2 {
        width: 100%;
        padding: 0;
        color: #17294e;
        font-size: 105%;
        font-weight: 800;
        text-align: center; }
        @media screen and (max-width: 768px) {
          #precautions .precautions_inner .precautions_box h2 {
            font-size: 110%; } }
      #precautions .precautions_inner .precautions_box p.note {
        margin: 1.2em 0 0 0;
        font-size: 90%;
        font-weight: 600; }
        @media screen and (max-width: 768px) {
          #precautions .precautions_inner .precautions_box p.note {
            font-size: 100%; } }
      #precautions .precautions_inner .precautions_box dl dt {
        padding: 1.5em 0 0 0;
        color: #17294e;
        font-size: 105%;
        font-weight: 800; }
        @media screen and (max-width: 768px) {
          #precautions .precautions_inner .precautions_box dl dt {
            font-size: 120%; } }
      #precautions .precautions_inner .precautions_box dl dd {
        padding: 3px 0 0 0;
        font-size: 90%;
        font-weight: 600; }
        @media screen and (max-width: 768px) {
          #precautions .precautions_inner .precautions_box dl dd {
            font-size: 95%; } }
      #precautions .precautions_inner .precautions_box a {
        color: #17294e;
        text-decoration: underline; }

/*********************************
 *
 * l_cnt
 *
 *********************************/
#l_cnt {
  position: fixed;
  width: 25%;
  top: 50%;
  left: 50%;
  transform: translate(-195%, -50%); }
  @media screen and (min-width: 1540px) {
    #l_cnt {
      max-width: 340px;
      transform: translate(-225%, -50%); } }

/*********************************
 *
 * r_cnt
 *
 *********************************/
#r_cnt {
  position: fixed;
  width: 25%;
  top: 50%;
  right: 50%;
  transform: translate(195%, -50%); }
  @media screen and (min-width: 1540px) {
    #r_cnt {
      max-width: 340px;
      transform: translate(225%, -50%); } }
  #r_cnt ul {
    width: 90%;
    top: 0;
    left: 7.5%; }
    #r_cnt ul li {
      margin: 0 0 0.9em 0; }
      @media screen and (min-width: 1540px) {
        #r_cnt ul li {
          margin: 0 0 13px 0; } }
      #r_cnt ul li:first-child {
        margin: 0 0 1.4em 0; }
        @media screen and (min-width: 1540px) {
          #r_cnt ul li:first-child {
            margin: 0 0 20px 0; } }

/*********************************
 *
 * FOOTER
 *
 *********************************/
footer {
  width: 42%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0.5em 0 4em 0;
  background: #484e85;
  color: #fff;
  font-weight: 500;
  text-align: center; }
  @media screen and (max-width: 768px) {
    footer {
      width: 100%;
      max-width: none; } }
  footer a {
    color: #ffffff; }
  footer .footer_inner {
    width: 86%;
    margin: 0 auto; }
  footer .ttl {
    padding: 2em 0 0 0;
    font-size: 115%; }
    @media screen and (max-width: 768px) {
      footer .ttl {
        font-size: 130%; } }
  footer .mail {
    margin: 8px 0 0 0;
    font-size: 190%;
    font-weight: 500; }
    @media screen and (max-width: 768px) {
      footer .mail {
        font-size: 210%; } }
  footer .date {
    margin: 8px 0 0 0;
    font-size: 130%; }
    @media screen and (max-width: 768px) {
      footer .date {
        font-size: 140%; } }
  footer .notice {
    margin: 1em 0 0 0;
    font-size: 85%;
    line-height: 1.8; }
    @media screen and (max-width: 768px) {
      footer .notice {
        font-size: 100%; } }
  footer ul.copy {
    display: flex;
    justify-content: center;
    margin: 2em 0 0 0; }
    @media screen and (max-width: 768px) {
      footer ul.copy {
        font-size: 110%; } }
    footer ul.copy li {
      padding: 0 1em; }