@charset "UTF-8";
html {
  font-size: 62.5%;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  word-wrap: break-word; }

body {
  font-size: 1.6rem;
  background-color: #fff;
  margin: 0;
  padding: 0;
  color: #323232;
  overflow-x: hidden; }

*,
*::before,
*::after {
  box-sizing: border-box; }

h1, h2, h3, div, p, ul, li {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

img {
  max-width: 100%;
  height: auto;
  line-height: 0;
  vertical-align: bottom; }

.pcOnly {
  display: none; }
  @media only screen and (min-width: 769px) {
    .pcOnly {
      display: inline; } }

.spOnly {
  display: inline; }
  @media only screen and (min-width: 769px) {
    .spOnly {
      display: none; } }

@media only screen and (min-width: 420px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }
.head {
  width: 100%;
  margin: 0 auto; }
  @media only screen and (min-width: 769px) {
    .head {
      width: calc(960/960 * 100%); } }
  @media only screen and (min-width: 960px) {
    .head {
      width: 960px; } }
  .head img {
    width: 100%; }
  .head .logo {
    width: 72vw;
    margin: 8.266vw auto 0; }
    @media only screen and (min-width: 769px) {
      .head .logo {
        width: calc(657/960 * 100%);
        margin: calc(58/960 * 100%) auto 0; } }
    @media only screen and (min-width: 960px) {
      .head .logo {
        width: 657px;
        margin: 58px auto 0; } }
  .head .head_inquiry {
    width: 70vw;
    margin: 6vw auto 6.4vw; }
    @media only screen and (min-width: 769px) {
      .head .head_inquiry {
        width: calc(688/960 * 100%);
        margin: calc(40/960 * 100%) auto calc(33/960 * 100%); } }
    @media only screen and (min-width: 960px) {
      .head .head_inquiry {
        width: 688px;
        margin: 40px auto 33px; } }

.mv_wrap {
  width: 100%;
  background: url("../img/mv_bg_sp.jpg");
  background-size: auto 100%;
  background-position: top center;
  background-repeat: no-repeat; }
  @media only screen and (min-width: 769px) {
    .mv_wrap {
      background: url("../img/mv_bg_pc.jpg");
      background-size: auto 100%;
      background-position: center center;
      background-repeat: no-repeat; } }
  @media only screen and (min-width: 960px) {
    .mv_wrap {
      background-size: auto 100%; } }
  @media only screen and (min-width: 2000px) {
    .mv_wrap {
      background-size: 100% auto;
      background-position: center center; } }
  .mv_wrap .mv {
    width: 100%;
    padding: 6.666vw 0 5.333vw;
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .mv_wrap .mv {
        width: calc(960/960 * 100%);
        padding: calc(92/960 * 100%) calc(0/960 * 100%) calc(133/960 * 100%); } }
    @media only screen and (min-width: 960px) {
      .mv_wrap .mv {
        width: 960px;
        padding: 92px 0 133px; } }
    .mv_wrap .mv img {
      width: 100%; }

.flow_wrap {
  width: 100%;
  margin: 0 auto;
  background: linear-gradient(180deg, #ccf7de 0%, #ccf7de 70%, #cff0f8 70%, #cff0f8 100%); }
  @media only screen and (min-width: 769px) {
    .flow_wrap {
      background: linear-gradient(90deg, #ccf7de 0%, #ccf7de 50%, #cff0f8 50%, #cff0f8 100%); } }
  .flow_wrap .flow {
    width: 100%;
    margin: 0 auto;
    display: inline-block; }
    @media only screen and (min-width: 769px) {
      .flow_wrap .flow {
        width: calc(960/960 * 100%);
        padding: 0 0 calc(70/960 * 100%);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap; } }
    @media only screen and (min-width: 960px) {
      .flow_wrap .flow {
        width: 960px;
        padding: 0px 0 70px; } }
    .flow_wrap .flow h2 {
      width: 70%;
      margin: -1.5vw auto 6.4vw; }
      @media only screen and (min-width: 769px) {
        .flow_wrap .flow h2 {
          width: calc(688/960 * 100%);
          margin: calc(-8/960 * 100%) auto calc(68/960 * 100%); } }
      @media only screen and (min-width: 960px) {
        .flow_wrap .flow h2 {
          width: 688px;
          margin: -8px auto 68px; } }
    .flow_wrap .flow .line {
      width: 100%;
      padding: 0 16vw; }
      @media only screen and (min-width: 769px) {
        .flow_wrap .flow .line {
          width: 50%;
          padding: 0; } }
      .flow_wrap .flow .line img {
        width: 100%; }
      .flow_wrap .flow .line .bt {
        width: 50vw;
        margin: 7vw auto 8vw; }
        @media only screen and (min-width: 769px) {
          .flow_wrap .flow .line .bt {
            width: calc(379/960 * 100%);
            margin: calc(65/960 * 100%) auto calc(70/960 * 100%); } }
        @media only screen and (min-width: 960px) {
          .flow_wrap .flow .line .bt {
            width: 379px;
            margin: 65px auto 70px; } }
    .flow_wrap .flow .web {
      width: 100%;
      background: #cff0f8;
      padding: 7.8vw 16vw 0; }
      @media only screen and (min-width: 769px) {
        .flow_wrap .flow .web {
          width: 50%;
          padding: 0; } }
      .flow_wrap .flow .web img {
        width: 100%; }
      .flow_wrap .flow .web .bt {
        width: 50vw;
        margin: 7vw auto 8vw; }
        @media only screen and (min-width: 769px) {
          .flow_wrap .flow .web .bt {
            width: calc(379/960 * 100%);
            margin: calc(65/960 * 100%) auto calc(82/960 * 100%); } }
        @media only screen and (min-width: 960px) {
          .flow_wrap .flow .web .bt {
            width: 379px;
            margin: 65px auto 82px; } }
    .flow_wrap .flow .inquiry {
      width: 70%;
      margin: 0vw auto 7vw; }
      @media only screen and (min-width: 769px) {
        .flow_wrap .flow .inquiry {
          width: calc(688/960 * 100%);
          margin: calc(0/960 * 100%) auto calc(0/960 * 100%); } }
      @media only screen and (min-width: 960px) {
        .flow_wrap .flow .inquiry {
          width: 688px;
          margin: 0px auto 0px; } }

.term_wrap {
  width: 100%;
  background: #0053a4; }
  .term_wrap .term {
    width: 100%;
    margin: 0 auto;
    padding: 4.5vw 11vw 7vw; }
    @media only screen and (min-width: 769px) {
      .term_wrap .term {
        width: calc(960/960 * 100%);
        padding: 0; } }
    @media only screen and (min-width: 960px) {
      .term_wrap .term {
        width: 960px; } }

.prod {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 10vw; }
  @media only screen and (min-width: 769px) {
    .prod {
      width: calc(960/960 * 100%);
      padding: 0 0 calc(75/960 * 100%); } }
  @media only screen and (min-width: 960px) {
    .prod {
      width: 960px;
      padding: 0 0 75px; } }
  .prod h2 {
    width: 70%;
    margin: 8.4vw auto 8vw; }
    @media only screen and (min-width: 769px) {
      .prod h2 {
        width: calc(688/960 * 100%);
        margin: calc(30/960 * 100%) auto calc(30/960 * 100%); } }
    @media only screen and (min-width: 960px) {
      .prod h2 {
        width: 688px;
        margin: 30px auto 30px; } }
  .prod .prod_list {
    width: 70%;
    margin: 0 auto 1em; }
    @media only screen and (min-width: 769px) {
      .prod .prod_list {
        width: calc(600/960 * 100%);
        font-size: 2.2rem; } }
    @media only screen and (min-width: 960px) {
      .prod .prod_list {
        width: 600px; } }
    .prod .prod_list li {
      margin-bottom: 0.2em; }
  .prod .note {
    width: 70%;
    font-size: 70%;
    padding-left: 1em;
    text-indent: -1em;
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .prod .note {
        width: calc(960/960 * 100%);
        text-align: center;
        font-size: 1.3rem; } }
    @media only screen and (min-width: 960px) {
      .prod .note {
        width: 960px; } }

.prize_wrap {
  width: 100%;
  background-image: url("../img/bg_prize_sp.jpg");
  background-color: #00abe8;
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat; }
  @media only screen and (min-width: 769px) {
    .prize_wrap {
      background-image: url("../img/bg_prize_pc.jpg");
      background-size: 100% auto;
      background-position: top center;
      background-repeat: no-repeat; } }
  @media only screen and (min-width: 960px) {
    .prize_wrap {
      background-size: auto auto; } }
  @media only screen and (min-width: 2000px) {
    .prize_wrap {
      background-size: 100% auto;
      background-position: top center; } }
  .prize_wrap .contents {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 10vw; }
    @media only screen and (min-width: 769px) {
      .prize_wrap .contents {
        width: calc(960/960 * 100%);
        margin: 0 auto;
        padding: 0 0 calc(50/960 * 100%); } }
    @media only screen and (min-width: 960px) {
      .prize_wrap .contents {
        width: 960px;
        margin: 0 auto;
        padding: 0 0 50px; } }
    .prize_wrap .contents h2 {
      width: 70%;
      margin: -3.4vw 15vw 2.666vw;
      display: inline-block; }
      @media only screen and (min-width: 769px) {
        .prize_wrap .contents h2 {
          width: calc(688/960 * 100%);
          margin: calc(-33/960 * 100%) calc(136/960 * 100%) calc(48/960 * 100%); } }
      @media only screen and (min-width: 960px) {
        .prize_wrap .contents h2 {
          width: 688px;
          margin: -33px 136px 48px; } }
    .prize_wrap .contents .prize {
      width: 70%;
      margin: 0 auto 2.5vw;
      background: #0b62ae; }
      @media only screen and (min-width: 769px) {
        .prize_wrap .contents .prize {
          width: calc(783/960 * 100%);
          margin: 0 auto calc(20/960 * 100%);
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap; } }
      @media only screen and (min-width: 960px) {
        .prize_wrap .contents .prize {
          width: 783px;
          margin: 0 auto 20px; } }
      .prize_wrap .contents .prize .half {
        width: 100%; }
        @media only screen and (min-width: 769px) {
          .prize_wrap .contents .prize .half {
            width: 50%; } }
        @media only screen and (min-width: 960px) {
          .prize_wrap .contents .prize .half {
            width: 50%; } }
    .prize_wrap .contents .text {
      width: 80%;
      margin: 0 auto 6vw; }
      @media only screen and (min-width: 769px) {
        .prize_wrap .contents .text {
          width: calc(783/960 * 100%);
          margin: 0 auto calc(45/960 * 100%); } }
      @media only screen and (min-width: 960px) {
        .prize_wrap .contents .text {
          width: 783px;
          margin: 0 auto 45px; } }
      .prize_wrap .contents .text p {
        padding-left: 1em;
        text-indent: -1em;
        color: #FFF;
        font-size: 1.5rem;
        line-height: 1.3em;
        margin-bottom: 8px; }
        @media only screen and (min-width: 769px) {
          .prize_wrap .contents .text p {
            font-size: 1.7rem; } }
        .prize_wrap .contents .text p.yellow {
          font-size: 1.8rem;
          color: #ffff00;
          font-weight: bold; }
          @media only screen and (min-width: 769px) {
            .prize_wrap .contents .text p.yellow {
              font-size: 2.4rem; } }
    .prize_wrap .contents .apply {
      width: 70%;
      margin: 0 auto 2.5vw;
      background: #FFF;
      padding: 5vw;
      height: 50vw;
      overflow-y: scroll; }
      @media only screen and (min-width: 769px) {
        .prize_wrap .contents .apply {
          width: calc(783/960 * 100%);
          margin: 0 auto calc(20/960 * 100%);
          padding: calc(20/960 * 100%);
          height: calc(450/960 * 100vw); } }
      @media only screen and (min-width: 960px) {
        .prize_wrap .contents .apply {
          width: 783px;
          margin: 0 auto 20px;
          padding: 30px;
          height: 450px; } }
      .prize_wrap .contents .apply h2 {
        display: block;
        width: 100%;
        font-size: 1.8rem;
        font-weight: bold;
        text-align: left;
        margin: 1em 0 0.8em 0;
        border-bottom: dotted 2px #CCC; }
        @media only screen and (min-width: 769px) {
          .prize_wrap .contents .apply h2 {
            font-size: 1.9rem; } }
        .prize_wrap .contents .apply h2:first-child {
          margin-top: 0; }
      .prize_wrap .contents .apply h3 {
        font-size: 1.6rem;
        font-weight: bold;
        text-align: left;
        margin: 1em 0 0.3em; }
        @media only screen and (min-width: 769px) {
          .prize_wrap .contents .apply h3 {
            font-size: 1.7rem;
            margin: 1.5em 0 0.3em; } }
        .prize_wrap .contents .apply h3:first-child {
          margin-top: 0; }
      .prize_wrap .contents .apply ul {
        margin: 0 0 1.5em 1em; }
        .prize_wrap .contents .apply ul li {
          font-size: 1.4rem;
          list-style: disc;
          line-height: 1.5em;
          margin-bottom: 0.2em; }
          @media only screen and (min-width: 769px) {
            .prize_wrap .contents .apply ul li {
              font-size: 1.5rem; } }
      .prize_wrap .contents .apply ul.circle {
        margin: 0 0 1.5em 1em; }
        .prize_wrap .contents .apply ul.circle li {
          font-size: 1.4rem;
          list-style: circle;
          line-height: 1.5em;
          margin-bottom: 0.2em; }
          @media only screen and (min-width: 769px) {
            .prize_wrap .contents .apply ul.circle li {
              font-size: 1.5rem; } }
      .prize_wrap .contents .apply ol {
        margin: 0 0 1.5em 0em; }
        .prize_wrap .contents .apply ol li {
          font-size: 1.4rem;
          list-style: decimal;
          line-height: 1.5em;
          margin: 0 0 0.2em -1.5em; }
          @media only screen and (min-width: 769px) {
            .prize_wrap .contents .apply ol li {
              font-size: 1.5rem; } }
        .prize_wrap .contents .apply ol ul.circle {
          margin: 0 0 1.5em 2.5em; }
          .prize_wrap .contents .apply ol ul.circle li {
            font-size: 1.4rem;
            list-style: circle;
            line-height: 1.5em;
            margin-bottom: 0.2em; }
            @media only screen and (min-width: 769px) {
              .prize_wrap .contents .apply ol ul.circle li {
                font-size: 1.5rem; } }
      .prize_wrap .contents .apply p {
        font-size: 1.4rem;
        list-style: disc;
        line-height: 1.5em;
        margin-bottom: 0.2em; }
        @media only screen and (min-width: 769px) {
          .prize_wrap .contents .apply p {
            font-size: 1.5rem; } }
        .prize_wrap .contents .apply p.kome {
          padding-left: 1em;
          text-indent: -1em; }
      .prize_wrap .contents .apply dl {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 1.4rem;
        line-height: 1.5em; }
        @media only screen and (min-width: 769px) {
          .prize_wrap .contents .apply dl {
            font-size: 1.5rem; } }
        .prize_wrap .contents .apply dl dt {
          width: 3rem; }
        .prize_wrap .contents .apply dl dd {
          width: 100%;
          margin: -1.5em 0 0.3em 3rem; }
  .prize_wrap .footer_wrap {
    width: 100%;
    background: #000;
    color: #fff;
    padding: 1em; }
    .prize_wrap .footer_wrap .footer {
      width: 100%;
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .prize_wrap .footer_wrap .footer {
          width: calc(960/960 * 100vw); } }
      @media only screen and (min-width: 960px) {
        .prize_wrap .footer_wrap .footer {
          width: 960px; } }
      .prize_wrap .footer_wrap .footer p {
        color: #FFF;
        text-align: center;
        margin-bottom: 0.5em; }
        .prize_wrap .footer_wrap .footer p a {
          color: #FFF;
          text-decoration: none; }
          .prize_wrap .footer_wrap .footer p a:hover {
            text-decoration: underline; }