@charset "UTF-8";
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative; }

#anpanman {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  position: relative;
  /*メインビジュアル*/ }
  #anpanman *,
  #anpanman *::before,
  #anpanman *::after {
    box-sizing: border-box; }
  #anpanman h1, #anpanman h2, #anpanman h3, #anpanman div, #anpanman p, #anpanman ul, #anpanman li {
    margin: 0;
    padding: 0; }
  #anpanman li {
    list-style: none; }
  #anpanman img {
    max-width: 100%;
    height: auto;
    line-height: 0;
    vertical-align: bottom; }
  #anpanman a:hover {
    opacity: 0.8; }
  #anpanman .pcOnly {
    display: none; }
    @media only screen and (min-width: 640px) {
      #anpanman .pcOnly {
        display: inline; } }
  #anpanman .spOnly {
    display: inline; }
    @media only screen and (min-width: 640px) {
      #anpanman .spOnly {
        display: none; } }
  @media only screen and (min-width: 1050px) {
    #anpanman a[href*="tel:"] {
      pointer-events: none;
      cursor: default;
      text-decoration: none; } }
  @media only screen and (min-width: 420px) {
    #anpanman a[href*="tel:"] {
      pointer-events: none;
      cursor: default;
      text-decoration: none; } }
  #anpanman .kv_wrap {
    width: 100%;
    height: calc(1228 / 750 * 100vw);
    margin: 0 auto;
    background-color: #fcd46e;
    background-image: url("../../img/bg_kv_sp.svg");
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat; }
    @media only screen and (min-width: 640px) {
      #anpanman .kv_wrap {
        height: calc(946 / 1050 * 100vw);
        background-image: url("../../img/bg_kv_pc.svg");
        background-size: auto 100%; } }
    @media only screen and (min-width: 1050px) {
      #anpanman .kv_wrap {
        height: 946px; } }
    #anpanman .kv_wrap .kv {
      position: relative;
      width: 100%;
      margin: 0 auto;
      padding: calc(5 / 750 * 100vw) 0 0; }
      @media only screen and (min-width: 640px) {
        #anpanman .kv_wrap .kv {
          padding: calc(12 / 1050 * 100vw) 0 0; } }
      @media only screen and (min-width: 1050px) {
        #anpanman .kv_wrap .kv {
          width: 1050px;
          padding: 12px 0 0; } }
      #anpanman .kv_wrap .kv h1 {
        width: calc(700 / 750 * 100vw);
        margin: 0 calc(8 / 750 * 100vw) 0 auto; }
        @media only screen and (min-width: 640px) {
          #anpanman .kv_wrap .kv h1 {
            width: calc(869 / 1050 * 100vw);
            margin: 0 calc(48 / 1050 * 100vw) 0 auto; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .kv_wrap .kv h1 {
            width: 869px;
            margin: 0 48px 0 auto; } }
      #anpanman .kv_wrap .kv .kv_ill {
        position: absolute;
        top: calc(400 / 750 * 100vw);
        right: calc(9 / 750 * 100vw);
        width: calc(187 / 750 * 100vw); }
        @media only screen and (min-width: 640px) {
          #anpanman .kv_wrap .kv .kv_ill {
            width: calc(227 / 1050 * 100vw);
            top: calc(350 / 1050 * 100vw);
            right: calc(18 / 1050 * 100vw); } }
        @media only screen and (min-width: 1050px) {
          #anpanman .kv_wrap .kv .kv_ill {
            width: 227px;
            top: 350px;
            right: 18px; } }
      #anpanman .kv_wrap .kv .kv_cont {
        width: calc(632 / 750 * 100vw);
        margin: calc(20 / 750 * 100vw) auto 0; }
        @media only screen and (min-width: 640px) {
          #anpanman .kv_wrap .kv .kv_cont {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: calc(850 / 1050 * 100vw);
            margin: calc(51 / 1050 * 100vw) auto 0; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .kv_wrap .kv .kv_cont {
            width: 850px;
            margin: 51px auto 0; } }
        #anpanman .kv_wrap .kv .kv_cont .kv_period {
          width: calc(490 / 750 * 100vw);
          margin: 0 auto 0 0; }
          @media only screen and (min-width: 640px) {
            #anpanman .kv_wrap .kv .kv_cont .kv_period {
              width: calc(716 / 1050 * 100vw);
              margin: 0 auto 0 0; } }
          @media only screen and (min-width: 1050px) {
            #anpanman .kv_wrap .kv .kv_cont .kv_period {
              width: 716px;
              margin: 0 auto 0 0; } }
        #anpanman .kv_wrap .kv .kv_cont .kv_line {
          position: relative;
          width: 100%;
          margin: calc(25 / 750 * 100vw) auto 0; }
          @media only screen and (min-width: 640px) {
            #anpanman .kv_wrap .kv .kv_cont .kv_line {
              width: calc(418 / 1050 * 100vw);
              margin: calc(24 / 1050 * 100vw) auto 0; } }
          @media only screen and (min-width: 1050px) {
            #anpanman .kv_wrap .kv .kv_cont .kv_line {
              width: 418px;
              margin: 24px auto 0; } }
          #anpanman .kv_wrap .kv .kv_cont .kv_line .kv_line_bt {
            position: absolute;
            bottom: calc(29 / 750 * 100vw);
            left: 0;
            right: 0;
            margin: auto;
            width: calc(396 / 750 * 100vw); }
            @media only screen and (min-width: 640px) {
              #anpanman .kv_wrap .kv .kv_cont .kv_line .kv_line_bt {
                display: none; } }
        #anpanman .kv_wrap .kv .kv_cont .kv_card {
          position: relative;
          width: 100%;
          margin: calc(21 / 750 * 100vw) auto 0; }
          @media only screen and (min-width: 640px) {
            #anpanman .kv_wrap .kv .kv_cont .kv_card {
              width: calc(418 / 1050 * 100vw);
              margin: calc(24 / 1050 * 100vw) auto 0; } }
          @media only screen and (min-width: 1050px) {
            #anpanman .kv_wrap .kv .kv_cont .kv_card {
              width: 418px;
              margin: 24px auto 0; } }
          #anpanman .kv_wrap .kv .kv_cont .kv_card .kv_card_bt {
            position: absolute;
            bottom: calc(29 / 750 * 100vw);
            left: 0;
            right: 0;
            margin: auto;
            width: calc(396 / 750 * 100vw); }
            @media only screen and (min-width: 640px) {
              #anpanman .kv_wrap .kv .kv_cont .kv_card .kv_card_bt {
                width: calc(300 / 1050 * 100vw);
                bottom: calc(30 / 1050 * 100vw); } }
            @media only screen and (min-width: 1050px) {
              #anpanman .kv_wrap .kv .kv_cont .kv_card .kv_card_bt {
                width: 330px;
                bottom: 30px; } }
  #anpanman .prize_wrap {
    width: 100%;
    background: #f5ad3e;
    padding: calc(57 / 750 * 100vw) 0 calc(42 / 750 * 100vw); }
    @media only screen and (min-width: 640px) {
      #anpanman .prize_wrap {
        padding: calc(24 / 1050 * 100vw) 0 calc(35 / 1050 * 100vw); } }
    @media only screen and (min-width: 1050px) {
      #anpanman .prize_wrap {
        padding: 33px 0 35px; } }
    #anpanman .prize_wrap .prize01 {
      width: calc(632 / 750 * 100vw);
      margin: 0 auto 0; }
      @media only screen and (min-width: 640px) {
        #anpanman .prize_wrap .prize01 {
          width: calc(850 / 1050 * 100vw);
          margin: 0 auto 0; } }
      @media only screen and (min-width: 1050px) {
        #anpanman .prize_wrap .prize01 {
          width: 850px;
          margin: 0px auto 0; } }
    #anpanman .prize_wrap .prize02 {
      position: relative;
      width: calc(632 / 750 * 100vw);
      margin: calc(70 / 750 * 100vw) auto 0; }
      @media only screen and (min-width: 640px) {
        #anpanman .prize_wrap .prize02 {
          width: calc(850 / 1050 * 100vw);
          margin: calc(30 / 1050 * 100vw) auto 0; } }
      @media only screen and (min-width: 1050px) {
        #anpanman .prize_wrap .prize02 {
          width: 850px;
          margin: 30px auto 0; } }
      #anpanman .prize_wrap .prize02 .present_bt {
        position: absolute;
        width: calc(534 / 750 * 100vw);
        bottom: calc(55 / 750 * 100vw);
        right: 0;
        left: 0;
        margin: auto; }
        @media only screen and (min-width: 640px) {
          #anpanman .prize_wrap .prize02 .present_bt {
            width: calc(366 / 1050 * 100vw);
            bottom: calc(20 / 1050 * 100vw);
            right: calc(22 / 1050 * 100vw);
            left: inherit; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .prize_wrap .prize02 .present_bt {
            width: 366px;
            bottom: 20px;
            right: 22px;
            left: inherit; } }
    #anpanman .prize_wrap .prize03 {
      width: calc(632 / 750 * 100vw);
      margin: calc(70 / 750 * 100vw) auto 0; }
      @media only screen and (min-width: 640px) {
        #anpanman .prize_wrap .prize03 {
          width: calc(850 / 1050 * 100vw);
          margin: calc(30 / 1050 * 100vw) auto 0; } }
      @media only screen and (min-width: 1050px) {
        #anpanman .prize_wrap .prize03 {
          width: 850px;
          margin: 30px auto 0; } }
    #anpanman .prize_wrap .note {
      width: calc(632 / 750 * 100vw);
      padding: 0 1.5em 2.5em;
      font-size: calc(16 / 750 * 100vw);
      text-align: right;
      margin: 0.5em auto 0; }
      @media only screen and (min-width: 640px) {
        #anpanman .prize_wrap .note {
          width: calc(850 / 1050 * 100vw);
          font-size: calc(12 / 1050 * 100vw); } }
      @media only screen and (min-width: 1050px) {
        #anpanman .prize_wrap .note {
          width: 850px;
          font-size: 12px; } }
  #anpanman .contents {
    background: #ed7814;
    width: 100%;
    padding: calc(56 / 750 * 100vw) 0 calc(46 / 750 * 100vw); }
    @media only screen and (min-width: 640px) {
      #anpanman .contents {
        padding: calc(45 / 1050 * 100vw) 0 calc(46 / 1050 * 100vw); } }
    @media only screen and (min-width: 1050px) {
      #anpanman .contents {
        padding: 45px 0px 46px; } }
    #anpanman .contents__cont {
      width: calc(632 / 750 * 100vw);
      margin: 0 auto;
      background: #FFF;
      padding: calc(15 / 750 * 100vw) calc(14 / 750 * 100vw) calc(42 / 750 * 100vw);
      border-radius: 3.5vw; }
      @media only screen and (min-width: 640px) {
        #anpanman .contents__cont {
          border-radius: calc(41 / 1050 * 100vw);
          padding: calc(10 / 1050 * 100vw) calc(10 / 1050 * 100vw) calc(46 / 1050 * 100vw);
          width: calc(847 / 1050 * 100vw); } }
      @media only screen and (min-width: 1050px) {
        #anpanman .contents__cont {
          border-radius: 41px;
          padding: 10px 10px 46px;
          width: 847px; } }
    #anpanman .contents .prod_img {
      width: 100%;
      margin: 0 auto; }
    #anpanman .contents .detail_block {
      width: 100%;
      margin: 0 auto; }
      @media only screen and (min-width: 640px) {
        #anpanman .contents .detail_block {
          width: calc(778 / 1050 * 100vw); } }
      @media only screen and (min-width: 1050px) {
        #anpanman .contents .detail_block {
          width: 778px; } }
      #anpanman .contents .detail_block h2 {
        background: #e10012;
        padding: 0.15em;
        text-align: center;
        color: #FFF;
        font-weight: bold;
        font-size: 1.3rem;
        margin: 2em auto 0;
        border-radius: 2em;
        line-height: 1em;
        padding: 0.4em 0.2em 0.2em; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block h2 {
            font-size: 1.5rem; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block h2 {
            font-size: 1.5rem; } }
      #anpanman .contents .detail_block h3 {
        font-weight: bold;
        padding: 0.15em;
        border-bottom: 2px solid #e10012;
        color: #e10012;
        line-height: 1em;
        text-align: center;
        font-size: 1.1em;
        margin: 1.5em auto 0; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block h3 {
            font-size: 1.3rem; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block h3 {
            font-size: 1.3rem; } }
      #anpanman .contents .detail_block h4 {
        display: inline-block;
        color: #FFF;
        background: #000;
        padding: 0.3em 0.5em;
        border-radius: 0 1.5vw 1.5vw 0;
        font-size: 1.1rem;
        font-weight: bold;
        margin: 1em auto 0;
        line-height: 1em; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block h4 {
            font-size: 1.3rem;
            border-radius: 0 calc(7 / 1050 * 100vw) calc(7 / 1050 * 100vw) 0; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block h4 {
            font-size: 1.3rem;
            border-radius: 0 7px 7px 0; } }
      #anpanman .contents .detail_block p {
        line-height: 1.3em;
        font-size: 0.8em;
        margin: 0.8em auto 0; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block p {
            font-size: 1rem; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block p {
            font-size: 1rem; } }
        #anpanman .contents .detail_block p.note {
          text-indent: -1em;
          margin-left: 1em; }
      #anpanman .contents .detail_block p + p {
        margin-top: 0.3em; }
      #anpanman .contents .detail_block p + h3 {
        margin-top: 2em; }
      #anpanman .contents .detail_block .column {
        width: 100%;
        border: calc(6 / 1050 * 100vw) solid #e10011;
        border-radius: calc(20 / 1050 * 100vw);
        margin: 1em auto 0;
        padding: 1em 0.5em 1.2em; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .column {
            width: calc(684 / 1050 * 100vw);
            border-radius: calc(8 / 1050 * 100vw);
            border: 2px solid #e10011; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block .column {
            width: 684px;
            border-radius: 8px; } }
        #anpanman .contents .detail_block .column p {
          color: #e07712;
          font-weight: bold;
          font-size: 0.8em;
          text-align: center;
          padding: 0;
          margin: 0 auto; }
          @media only screen and (min-width: 640px) {
            #anpanman .contents .detail_block .column p {
              font-size: 1rem; } }
          @media only screen and (min-width: 1050px) {
            #anpanman .contents .detail_block .column p {
              font-size: 1rem; } }
        #anpanman .contents .detail_block .column .column_note {
          color: #e07712;
          font-weight: bold;
          font-size: 0.7em;
          text-align: center;
          padding: 0;
          margin: 0.5em auto 0; }
          @media only screen and (min-width: 640px) {
            #anpanman .contents .detail_block .column .column_note {
              font-size: 0.9rem; } }
          @media only screen and (min-width: 1050px) {
            #anpanman .contents .detail_block .column .column_note {
              font-size: 0.9rem; } }
        #anpanman .contents .detail_block .column .bt_download {
          width: 70vw;
          margin: 1em auto 0; }
          @media only screen and (min-width: 640px) {
            #anpanman .contents .detail_block .column .bt_download {
              width: calc(452 / 1050 * 100vw); } }
          @media only screen and (min-width: 1050px) {
            #anpanman .contents .detail_block .column .bt_download {
              width: 452px; } }
      #anpanman .contents .detail_block .adobe {
        width: calc(540 / 750 * 100vw);
        margin: 0.5em auto; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .adobe {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: calc(684 / 1050 * 100vw);
            margin: 0.5em auto; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block .adobe {
            width: 684px; } }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .adobe .adobe_text {
            width: calc(550 / 1050 * 100vw);
            padding-right: 1em; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block .adobe .adobe_text {
            width: 550px; } }
        #anpanman .contents .detail_block .adobe .adobe_text p {
          font-size: 0.7em;
          margin: 0 0 0 1em;
          text-indent: -1em; }
        #anpanman .contents .detail_block .adobe .adobe_bt {
          width: 34vw;
          margin: 0.5em auto 0; }
          @media only screen and (min-width: 640px) {
            #anpanman .contents .detail_block .adobe .adobe_bt {
              width: calc(114 / 1050 * 100vw);
              margin: 0 0.5em 0; } }
          @media only screen and (min-width: 1050px) {
            #anpanman .contents .detail_block .adobe .adobe_bt {
              width: 114px; } }
      #anpanman .contents .detail_block .plural_wrap {
        width: 100%;
        background: #e1f9fb;
        border: 1px solid #000;
        margin: 2em auto 0;
        padding: calc(35 / 750 * 100vw) 0 calc(30 / 750 * 100vw); }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .plural_wrap {
            width: calc(778 / 1050 * 100vw);
            padding: calc(17 / 750 * 100vw) 0 calc(17 / 750 * 100vw); } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block .plural_wrap {
            width: 778px;
            padding: 17px 0 17px; } }
        #anpanman .contents .detail_block .plural_wrap ul {
          width: calc(527 / 750 * 100vw);
          margin: 0 auto; }
          @media only screen and (min-width: 640px) {
            #anpanman .contents .detail_block .plural_wrap ul {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              width: calc(737 / 1050 * 100vw); } }
          @media only screen and (min-width: 1050px) {
            #anpanman .contents .detail_block .plural_wrap ul {
              width: 737px; } }
          #anpanman .contents .detail_block .plural_wrap ul .plural01 {
            width: 100%; }
            @media only screen and (min-width: 640px) {
              #anpanman .contents .detail_block .plural_wrap ul .plural01 {
                width: calc(340 / 1050 * 100vw); } }
            @media only screen and (min-width: 1050px) {
              #anpanman .contents .detail_block .plural_wrap ul .plural01 {
                width: 340px; } }
          #anpanman .contents .detail_block .plural_wrap ul .plural02 {
            width: 100%;
            margin: calc(30 / 750 * 100vw) 0 0; }
            @media only screen and (min-width: 640px) {
              #anpanman .contents .detail_block .plural_wrap ul .plural02 {
                width: calc(363 / 1050 * 100vw);
                margin: 0; } }
            @media only screen and (min-width: 1050px) {
              #anpanman .contents .detail_block .plural_wrap ul .plural02 {
                width: 363px; } }
        #anpanman .contents .detail_block .plural_wrap .plural_note {
          width: calc(527 / 750 * 100vw);
          margin: 1.5em auto 0; }
          @media only screen and (min-width: 640px) {
            #anpanman .contents .detail_block .plural_wrap .plural_note {
              width: calc(737 / 1050 * 100vw);
              margin: 1.5em auto 0; } }
          @media only screen and (min-width: 1050px) {
            #anpanman .contents .detail_block .plural_wrap .plural_note {
              width: 737px; } }
          #anpanman .contents .detail_block .plural_wrap .plural_note li {
            font-size: 0.7rem;
            line-height: 1.3em;
            text-indent: -1em;
            padding-left: 1em; }
            @media only screen and (min-width: 640px) {
              #anpanman .contents .detail_block .plural_wrap .plural_note li {
                font-size: 0.9rem; } }
            @media only screen and (min-width: 1050px) {
              #anpanman .contents .detail_block .plural_wrap .plural_note li {
                font-size: 0.9rem; } }
          #anpanman .contents .detail_block .plural_wrap .plural_note li + li {
            margin-top: 0.3em; }
      #anpanman .contents .detail_block .text_block {
        width: calc(540 / 750 * 100vw);
        margin: calc(67 / 750 * 100vw) auto 0; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .text_block {
            width: 100%;
            margin: calc(40 / 1050 * 100vw) auto 0; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block .text_block {
            margin: 40px auto 0; } }
      #anpanman .contents .detail_block .address_block {
        width: calc(540 / 750 * 100vw);
        margin: 2em auto; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .address_block {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 2em auto 3em; } }
        #anpanman .contents .detail_block .address_block h5 {
          width: 100%;
          border: 2px solid #e10011;
          border-radius: 3vw;
          margin: 2em auto 0;
          padding: 0.5em;
          color: #e10011;
          font-size: 1em;
          line-height: 1em;
          text-align: center;
          white-space: nowrap; }
          @media only screen and (min-width: 640px) {
            #anpanman .contents .detail_block .address_block h5 {
              width: 5em;
              margin: 0 0.5em 0 0;
              border-radius: 5px;
              font-size: 1.2em; } }
          @media only screen and (min-width: 1050px) {
            #anpanman .contents .detail_block .address_block h5 {
              font-size: 1.2em; } }
        #anpanman .contents .detail_block .address_block .text {
          width: auto;
          font-size: 0.8em; }
          @media only screen and (min-width: 640px) {
            #anpanman .contents .detail_block .address_block .text {
              font-size: 0.93em;
              margin: 0; } }
      #anpanman .contents .detail_block .attention {
        line-height: 1.3em;
        font-size: 1em;
        margin: 0.9em auto 0;
        color: #e20010;
        font-weight: bold;
        text-decoration: underline; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .attention {
            font-size: 0.95rem; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block .attention {
            font-size: 0.95rem; } }
      #anpanman .contents .detail_block .account {
        line-height: 1.2em;
        font-size: 1.1em;
        margin: 0.9em auto 0;
        font-weight: bold; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .account {
            font-size: 1.2rem; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block .account {
            font-size: 1.2rem; } }
        #anpanman .contents .detail_block .account span {
          display: block;
          margin: 0.5em 0 0 1em;
          font-size: 0.7em;
          line-height: 1.2em;
          font-weight: normal;
          text-indent: -1em; }
          @media only screen and (min-width: 640px) {
            #anpanman .contents .detail_block .account span {
              font-size: 0.8rem; } }
          @media only screen and (min-width: 1050px) {
            #anpanman .contents .detail_block .account span {
              font-size: 0.8rem; } }
      #anpanman .contents .detail_block .account + .account {
        margin-top: 0.3em; }
      #anpanman .contents .detail_block .line_flow_wrap {
        width: 100%;
        border: 1.25vw solid #00a45a;
        padding: 7.8vw 3.9vw;
        margin: 4.375vw auto 0; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .line_flow_wrap {
            border: none;
            padding: 0;
            margin: calc(16 / 1050 * 100vw) 0 0; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block .line_flow_wrap {
            margin: 16px 0 0; } }
        #anpanman .contents .detail_block .line_flow_wrap .flow {
          position: relative;
          width: 100%; }
          #anpanman .contents .detail_block .line_flow_wrap .flow .bt_friend {
            position: absolute;
            width: 64vw;
            top: 58vw;
            left: 0;
            right: 0;
            margin: 0 auto; }
            @media only screen and (min-width: 640px) {
              #anpanman .contents .detail_block .line_flow_wrap .flow .bt_friend {
                display: none; } }
      #anpanman .contents .detail_block .bt_rule {
        width: calc(397 / 750 * 100vw);
        margin: calc(67 / 750 * 100vw) auto; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .bt_rule {
            width: calc(342 / 1050 * 100vw);
            margin: calc(40 / 1050 * 100vw) auto; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block .bt_rule {
            width: 342px;
            margin: 40px auto; } }
      #anpanman .contents .detail_block .period {
        width: calc(481 / 750 * 100vw);
        margin: 0.8em auto 0; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .period {
            width: calc(411 / 1050 * 100vw);
            margin: 0.8em auto 0 0; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block .period {
            width: 411px; } }
      #anpanman .contents .detail_block .term {
        width: calc(421 / 750 * 100vw);
        margin: 0.8em auto 0; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .term {
            width: calc(621 / 1050 * 100vw);
            margin: 0.8em auto 0 0; } }
        @media only screen and (min-width: 1050px) {
          #anpanman .contents .detail_block .term {
            width: 621px; } }
      #anpanman .contents .detail_block .inquiry {
        width: 100%;
        margin: 0.8em auto 0; }
        @media only screen and (min-width: 640px) {
          #anpanman .contents .detail_block .inquiry {
            margin: 0.8em auto 0 0; } }
    #anpanman .contents .bt_movie {
      width: 71vw;
      margin: 10vw auto 0; }
      @media only screen and (min-width: 640px) {
        #anpanman .contents .bt_movie {
          width: calc(366 / 1050 * 100vw);
          margin: calc(43 / 1050 * 100vw) auto 0; } }
      @media only screen and (min-width: 1050px) {
        #anpanman .contents .bt_movie {
          width: 366px;
          margin: 43px auto 0; } }
    #anpanman .contents .copy {
      width: 85vw;
      margin: 5vw auto 0;
      text-align: right;
      font-size: 0.7em;
      color: #FFF; }
      @media only screen and (min-width: 640px) {
        #anpanman .contents .copy {
          width: calc(847 / 1050 * 100vw);
          margin: calc(20 / 1050 * 100vw) auto 0;
          font-size: 1rem; } }
      @media only screen and (min-width: 1050px) {
        #anpanman .contents .copy {
          width: 847px;
          margin: 20px auto 0; } }

.fix_btarea {
  position: fixed;
  width: 15.5vw;
  right: 2.5vw;
  bottom: -32vw;
  z-index: 150;
  cursor: pointer;
  transition: .3s; }
  @media only screen and (min-width: 640px) {
    .fix_btarea {
      display: block;
      width: calc(100/1050 * 100vw);
      right: calc(18/1050 * 100vw);
      bottom: calc(-207/1050 * 100vw); } }
  @media only screen and (min-width: 1050px) {
    .fix_btarea {
      width: 100px;
      right: 18px;
      bottom: -207px; } }
  .fix_btarea.active {
    bottom: 1.5vw; }
    @media only screen and (min-width: 640px) {
      .fix_btarea.active {
        bottom: calc(20/1050 * 100vw); } }
    @media only screen and (min-width: 1050px) {
      .fix_btarea.active {
        bottom: 20px; } }
  .fix_btarea.end {
    bottom: 113.333vw; }
    @media only screen and (min-width: 640px) {
      .fix_btarea.end {
        bottom: 270px; } }
    @media only screen and (min-width: 1050px) {
      .fix_btarea.end {
        bottom: 270px; } }
  .fix_btarea .fix_line {
    width: 15.5vw;
    margin-bottom: 0.5em !important; }
    @media only screen and (min-width: 640px) {
      .fix_btarea .fix_line {
        width: calc(100/1050 * 100vw); } }
    @media only screen and (min-width: 1050px) {
      .fix_btarea .fix_line {
        width: 100px; } }
    .fix_btarea .fix_line:hover {
      filter: saturate(70%); }
  .fix_btarea .ptop {
    width: 15.5vw; }
    @media only screen and (min-width: 640px) {
      .fix_btarea .ptop {
        width: calc(100/1050 * 100vw); } }
    @media only screen and (min-width: 1050px) {
      .fix_btarea .ptop {
        width: 100px; } }
    .fix_btarea .ptop:hover {
      filter: hue-rotate(340deg); }

.effect-fade-upin {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 0.75s ease-out; }

.effect-fade-upin.active {
  opacity: 1;
  transform: translate(0, 0); }