@charset "UTF-8";
/*----------------------------------------
       Reset
----------------------------------------*/
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;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

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

ul, li {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  outline: none; }

del {
  text-decoration: line-through; }

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

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

/*--------------------------
Common Styles
---------------------------*/
* {
  box-sizing: border-box;
  -webkit-appearance: none;
  word-wrap: break-word;
  overflow-wrap: break-word; }

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

li {
  list-style-type: none; }

html {
  font-size: 62.5%;
  width: 100%;
  position: relative; }

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

body {
  font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', 'Noto Sans Japanese Light', Meiryo, Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  position: relative; }

body * {
  text-rendering: optimizeLegibility; }

a img:hover {
  opacity: 0.8; }

a img.btn:hover {
  opacity: 1;
  filter: saturate(180%); }

.only_pc {
  display: none; }
  @media only screen and (min-width: 960px) {
    .only_pc {
      display: inherit; } }

.only_sp {
  display: inherit; }
  @media only screen and (min-width: 960px) {
    .only_sp {
      display: none; } }

@media only screen and (min-width: 960px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }

/*--------------------------
contents
---------------------------*/
#contents {
  width: 100vw;
  margin: 0 auto;
  /*メインビジュアル*/
  /*応募期間*/
  /*プレゼント内容*/
  /*対象商品*/
  /*応募方法*/ }
  @media only screen and (min-width: 960px) {
    #contents {
      width: 100%; } }
  #contents #mainVisual {
    width: 100vw;
    background: url("../img/mv_bk.jpg") no-repeat;
    background-size: cover; }
    @media only screen and (min-width: 960px) {
      #contents #mainVisual {
        width: 100%;
        background-size: auto;
        background-repeat: repeat-x; } }
    #contents #mainVisual .cont {
      width: 100vw; }
      @media only screen and (min-width: 960px) {
        #contents #mainVisual .cont {
          width: 960px;
          margin: 0 auto; } }
  #contents .period {
    width: 100vw; }
    @media only screen and (min-width: 960px) {
      #contents .period {
        width: 960px;
        margin: 0 auto; } }
  #contents .present {
    width: 100vw; }
    @media only screen and (min-width: 960px) {
      #contents .present {
        width: 100%;
        background: url("../img/present_bk.png") center center repeat-x; } }
    #contents .present .cont {
      width: 100vw; }
      @media only screen and (min-width: 960px) {
        #contents .present .cont {
          width: 960px;
          margin: 0 auto; } }
  #contents .lineup {
    width: 100vw; }
    @media only screen and (min-width: 960px) {
      #contents .lineup {
        width: 100%; } }
    #contents .lineup .cont {
      width: 100vw; }
      @media only screen and (min-width: 960px) {
        #contents .lineup .cont {
          width: 960px;
          margin: 0 auto; } }
  #contents .apply {
    width: 100vw;
    background: url("../img/bk.jpg");
    background-size: 100% 100%;
    padding: 7.2vw 4vw; }
    @media only screen and (min-width: 960px) {
      #contents .apply {
        width: 100%;
        padding: 50px 0 70px; } }
    #contents .apply .cont {
      width: 92vw; }
      @media only screen and (min-width: 960px) {
        #contents .apply .cont {
          width: 960px;
          margin: 0 auto; } }
      #contents .apply .cont #applyBox {
        width: 100%;
        margin: 0 auto;
        background: #fff;
        border-radius: 10px;
        padding: 4vw 0; }
        @media only screen and (min-width: 960px) {
          #contents .apply .cont #applyBox {
            width: 824px;
            margin: 0 auto;
            padding: 37px 0;
            border-radius: 15px; } }
        #contents .apply .cont #applyBox h2 {
          width: 84vw;
          text-align: center;
          margin: 0 auto 3.8vw; }
          @media only screen and (min-width: 960px) {
            #contents .apply .cont #applyBox h2 {
              width: 780px;
              margin: 0 auto 36px; } }
        #contents .apply .cont #applyBox .sel {
          width: 84vw;
          margin: 0 auto 3.8vw;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          align-items: flex-start; }
          @media only screen and (min-width: 960px) {
            #contents .apply .cont #applyBox .sel {
              width: 708px;
              margin: 0 auto 30px; } }
          #contents .apply .cont #applyBox .sel a img {
            width: 40vw;
            margin: 1.7vw 0 0 0; }
            @media only screen and (min-width: 960px) {
              #contents .apply .cont #applyBox .sel a img {
                width: 340px;
                margin: 10px 0 0 0; } }
        #contents .apply .cont #applyBox #lineBox {
          width: 84vw;
          background: #01b901;
          border-radius: 10px;
          margin: 0 auto 4.1vw;
          padding: 3.2vw 0 6vw; }
          @media only screen and (min-width: 960px) {
            #contents .apply .cont #applyBox #lineBox {
              width: 743px;
              margin: 0 auto 40px;
              padding: 37px 0;
              border-radius: 15px; } }
          #contents .apply .cont #applyBox #lineBox h3 {
            width: 78vw;
            margin: 0 auto 2.4vw; }
            @media only screen and (min-width: 960px) {
              #contents .apply .cont #applyBox #lineBox h3 {
                width: 703px;
                height: 48px;
                margin: 0 auto 22px; } }
          #contents .apply .cont #applyBox #lineBox .lineCont {
            width: 78vw;
            margin: 0 auto; }
            @media only screen and (min-width: 960px) {
              #contents .apply .cont #applyBox #lineBox .lineCont {
                width: 664px; } }
            #contents .apply .cont #applyBox #lineBox .lineCont h4 {
              border-radius: 15px;
              background: #fff001;
              text-align: center;
              color: #2d663d;
              font-weight: bold;
              padding: 0.2em;
              line-height: 1.2em;
              font-size: 1.3rem;
              margin: 3.7vw 0 2vw; }
              @media only screen and (min-width: 960px) {
                #contents .apply .cont #applyBox #lineBox .lineCont h4 {
                  width: 664px;
                  font-size: 1.7rem;
                  margin: 34px 0 15px;
                  padding: 0.3em; } }
            #contents .apply .cont #applyBox #lineBox .lineCont p {
              color: #fff;
              line-height: 1.2em;
              font-size: 1.2rem; }
              @media only screen and (min-width: 960px) {
                #contents .apply .cont #applyBox #lineBox .lineCont p {
                  font-size: 1.5rem; } }
              @media only screen and (min-width: 960px) {
                #contents .apply .cont #applyBox #lineBox .lineCont p img {
                  width: auto;
                  height: auto; } }
            #contents .apply .cont #applyBox #lineBox .lineCont .indent {
              margin: 0 0 0 1em;
              text-indent: -1em; }
            #contents .apply .cont #applyBox #lineBox .lineCont .period {
              text-align: center;
              width: 100%; }
            #contents .apply .cont #applyBox #lineBox .lineCont .note {
              margin: 5vw 0; }
              @media only screen and (min-width: 960px) {
                #contents .apply .cont #applyBox #lineBox .lineCont .note {
                  margin: 35px 0 10px 0; } }
            #contents .apply .cont #applyBox #lineBox .lineCont .line {
              margin: 3.7vw 0 0 0; }
              @media only screen and (min-width: 960px) {
                #contents .apply .cont #applyBox #lineBox .lineCont .line {
                  display: flex;
                  justify-content: space-around;
                  align-items: flex-end;
                  justify-content: space-between;
                  margin: 35px 0 0 0; } }
              #contents .apply .cont #applyBox #lineBox .lineCont .line .add {
                width: 100%;
                text-align: center; }
                @media only screen and (min-width: 960px) {
                  #contents .apply .cont #applyBox #lineBox .lineCont .line .add {
                    width: 492px; } }
                #contents .apply .cont #applyBox #lineBox .lineCont .line .add p {
                  margin-bottom: 0; }
                #contents .apply .cont #applyBox #lineBox .lineCont .line .add .bt {
                  margin-bottom: 3vw; }
                  @media only screen and (min-width: 960px) {
                    #contents .apply .cont #applyBox #lineBox .lineCont .line .add .bt {
                      margin-bottom: 15px; } }
                  #contents .apply .cont #applyBox #lineBox .lineCont .line .add .bt img {
                    width: 45vw; }
                    @media only screen and (min-width: 960px) {
                      #contents .apply .cont #applyBox #lineBox .lineCont .line .add .bt img {
                        width: 267px; } }
                #contents .apply .cont #applyBox #lineBox .lineCont .line .add .lineid {
                  width: 100%;
                  background: #fff001;
                  font-weight: bold;
                  padding: 0.1em;
                  color: #000;
                  font-size: 1.8rem;
                  margin-bottom: 3vw; }
                  @media only screen and (min-width: 960px) {
                    #contents .apply .cont #applyBox #lineBox .lineCont .line .add .lineid {
                      width: 80%;
                      margin: 0 auto 15px;
                      font-size: 2.2rem; } }
                #contents .apply .cont #applyBox #lineBox .lineCont .line .add .frend {
                  font-weight: bold;
                  color: #fff001;
                  margin-bottom: 3vw;
                  font-size: 1.5rem; }
                  @media only screen and (min-width: 960px) {
                    #contents .apply .cont #applyBox #lineBox .lineCont .line .add .frend {
                      font-size: 2.2rem;
                      margin-bottom: 0; } }
                  #contents .apply .cont #applyBox #lineBox .lineCont .line .add .frend a {
                    color: #fff001; }
                  #contents .apply .cont #applyBox #lineBox .lineCont .line .add .frend a:hover {
                    opacity: 0.8; }
              #contents .apply .cont #applyBox #lineBox .lineCont .line .barcode {
                width: 25vw;
                margin: 0 auto; }
                @media only screen and (min-width: 960px) {
                  #contents .apply .cont #applyBox #lineBox .lineCont .line .barcode {
                    width: 120px;
                    margin-right: 20px; } }
        #contents .apply .cont #applyBox #cardBox {
          width: 84vw;
          background: #fff;
          border: solid 3px #ee8100;
          border-radius: 10px;
          margin: 0 auto 4vw;
          padding: 3.2vw 0 4vw; }
          @media only screen and (min-width: 960px) {
            #contents .apply .cont #applyBox #cardBox {
              border: solid 6px #ee8100;
              width: 743px;
              margin: 0 auto 48px;
              padding: 30px 0;
              border-radius: 15px; } }
          #contents .apply .cont #applyBox #cardBox h3 {
            width: 78vw;
            margin: 0 auto 2.4vw; }
            @media only screen and (min-width: 960px) {
              #contents .apply .cont #applyBox #cardBox h3 {
                width: 703px;
                height: 48px;
                margin: 0 auto 22px; } }
          #contents .apply .cont #applyBox #cardBox .cardCont {
            width: 78vw;
            margin: 0 auto; }
            @media only screen and (min-width: 960px) {
              #contents .apply .cont #applyBox #cardBox .cardCont {
                width: 664px; } }
            #contents .apply .cont #applyBox #cardBox .cardCont h4 {
              border-radius: 15px;
              background: #f08000;
              text-align: center;
              color: #fff;
              font-weight: bold;
              padding: 0.2em;
              line-height: 1.2em;
              font-size: 1.3rem;
              margin: 3.7vw 0 2vw; }
              @media only screen and (min-width: 960px) {
                #contents .apply .cont #applyBox #cardBox .cardCont h4 {
                  width: 664px;
                  font-size: 1.7rem;
                  margin: 34px 0 15px;
                  padding: 0.3em; } }
            #contents .apply .cont #applyBox #cardBox .cardCont p {
              color: #000;
              line-height: 1.2em;
              font-size: 1.2rem; }
              @media only screen and (min-width: 960px) {
                #contents .apply .cont #applyBox #cardBox .cardCont p {
                  font-size: 1.5rem; } }
              @media only screen and (min-width: 960px) {
                #contents .apply .cont #applyBox #cardBox .cardCont p img {
                  width: auto;
                  height: auto; } }
            #contents .apply .cont #applyBox #cardBox .cardCont .indent {
              margin: 0 0 0 1em;
              text-indent: -1em; }
            #contents .apply .cont #applyBox #cardBox .cardCont .period {
              text-align: center;
              width: 100%; }
        #contents .apply .cont #applyBox .noteBox {
          width: 84vw;
          margin: 0 auto; }
          @media only screen and (min-width: 960px) {
            #contents .apply .cont #applyBox .noteBox {
              width: 743px; } }
          #contents .apply .cont #applyBox .noteBox h3 {
            border-radius: 15px;
            background: #e40011;
            text-align: center;
            color: #fff;
            font-weight: bold;
            padding: 0.2em;
            line-height: 1.2em;
            font-size: 1.3rem;
            margin: 5vw 0 2vw; }
            @media only screen and (min-width: 960px) {
              #contents .apply .cont #applyBox .noteBox h3 {
                width: 100%;
                font-size: 1.7rem;
                margin: 24px auto 15px;
                padding: 0.3em; } }
          #contents .apply .cont #applyBox .noteBox h4 {
            font-weight: bold;
            font-size: 1.3rem;
            margin-bottom: 2vw; }
            @media only screen and (min-width: 960px) {
              #contents .apply .cont #applyBox .noteBox h4 {
                margin-bottom: 5px;
                font-size: 1.7rem; } }
          #contents .apply .cont #applyBox .noteBox p {
            margin-bottom: 3.7vw;
            color: #000;
            line-height: 1.2em;
            font-size: 1.2rem; }
            @media only screen and (min-width: 960px) {
              #contents .apply .cont #applyBox .noteBox p {
                font-size: 1.5rem;
                margin-bottom: 34px; } }
          #contents .apply .cont #applyBox .noteBox p.indent {
            margin: 0 0 0 1em;
            text-indent: -1em; }
          #contents .apply .cont #applyBox .noteBox .inquiry {
            text-align: center; }
            @media only screen and (min-width: 960px) {
              #contents .apply .cont #applyBox .noteBox .inquiry {
                margin-bottom: 0; } }
            @media only screen and (min-width: 960px) {
              #contents .apply .cont #applyBox .noteBox .inquiry img {
                width: auto; } }

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