@charset "UTF-8";
/*
**  ===================================================================
**  各種設定：var,reset,base-font,break-point
**  ===================================================================
*/
/*
**  ===================================================================
**  button CSS ※block { } block__element { } block_modifier { }（key_value）
**  ===================================================================
*/
/*
**  ===================================================================
**  utility CSS ※prefix「u-」
**  ===================================================================
*/
.clearfix:after {
  content: "";
  clear: both;
  display: block; }

.u-tl {
  text-align: left; }

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

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

.u-rel {
  position: relative;
  z-index: 1; }

.u-mt0 {
  margin-top: 0%; }

.u-mb0 {
  margin-bottom: 0%; }

.u-mr0 {
  margin-right: 0%; }

.u-ml0 {
  margin-left: 0%; }

.u-mt1 {
  margin-top: 1%; }

.u-mb1 {
  margin-bottom: 1%; }

.u-mr1 {
  margin-right: 1%; }

.u-ml1 {
  margin-left: 1%; }

.u-mt2 {
  margin-top: 2%; }

.u-mb2 {
  margin-bottom: 2%; }

.u-mr2 {
  margin-right: 2%; }

.u-ml2 {
  margin-left: 2%; }

.u-mt3 {
  margin-top: 3%; }

.u-mb3 {
  margin-bottom: 3%; }

.u-mr3 {
  margin-right: 3%; }

.u-ml3 {
  margin-left: 3%; }

.u-mt4 {
  margin-top: 4%; }

.u-mb4 {
  margin-bottom: 4%; }

.u-mr4 {
  margin-right: 4%; }

.u-ml4 {
  margin-left: 4%; }

.u-mt5 {
  margin-top: 5%; }

.u-mb5 {
  margin-bottom: 5%; }

.u-mr5 {
  margin-right: 5%; }

.u-ml5 {
  margin-left: 5%; }

.u-mt6 {
  margin-top: 6%; }

.u-mb6 {
  margin-bottom: 6%; }

.u-mr6 {
  margin-right: 6%; }

.u-ml6 {
  margin-left: 6%; }

.u-mt7 {
  margin-top: 7%; }

.u-mb7 {
  margin-bottom: 7%; }

.u-mr7 {
  margin-right: 7%; }

.u-ml7 {
  margin-left: 7%; }

.u-mt8 {
  margin-top: 8%; }

.u-mb8 {
  margin-bottom: 8%; }

.u-mr8 {
  margin-right: 8%; }

.u-ml8 {
  margin-left: 8%; }

.u-mt9 {
  margin-top: 9%; }

.u-mb9 {
  margin-bottom: 9%; }

.u-mr9 {
  margin-right: 9%; }

.u-ml9 {
  margin-left: 9%; }

.u-mt10 {
  margin-top: 10%; }

.u-mb10 {
  margin-bottom: 10%; }

.u-mr10 {
  margin-right: 10%; }

.u-ml10 {
  margin-left: 10%; }

.u-pt0 {
  padding-top: 0%; }

.u-pb0 {
  padding-bottom: 0%; }

.u-pr0 {
  padding-right: 0% !important; }

.u-pl0 {
  padding-left: 0% !important; }

.u-pt1 {
  padding-top: 1%; }

.u-pb1 {
  padding-bottom: 1%; }

.u-pr1 {
  padding-right: 1% !important; }

.u-pl1 {
  padding-left: 1% !important; }

.u-pt2 {
  padding-top: 2%; }

.u-pb2 {
  padding-bottom: 2%; }

.u-pr2 {
  padding-right: 2% !important; }

.u-pl2 {
  padding-left: 2% !important; }

.u-pt3 {
  padding-top: 3%; }

.u-pb3 {
  padding-bottom: 3%; }

.u-pr3 {
  padding-right: 3% !important; }

.u-pl3 {
  padding-left: 3% !important; }

.u-pt4 {
  padding-top: 4%; }

.u-pb4 {
  padding-bottom: 4%; }

.u-pr4 {
  padding-right: 4% !important; }

.u-pl4 {
  padding-left: 4% !important; }

.u-pt5 {
  padding-top: 5%; }

.u-pb5 {
  padding-bottom: 5%; }

.u-pr5 {
  padding-right: 5% !important; }

.u-pl5 {
  padding-left: 5% !important; }

.u-pt6 {
  padding-top: 6%; }

.u-pb6 {
  padding-bottom: 6%; }

.u-pr6 {
  padding-right: 6% !important; }

.u-pl6 {
  padding-left: 6% !important; }

.u-pt7 {
  padding-top: 7%; }

.u-pb7 {
  padding-bottom: 7%; }

.u-pr7 {
  padding-right: 7% !important; }

.u-pl7 {
  padding-left: 7% !important; }

.u-pt8 {
  padding-top: 8%; }

.u-pb8 {
  padding-bottom: 8%; }

.u-pr8 {
  padding-right: 8% !important; }

.u-pl8 {
  padding-left: 8% !important; }

.u-pt9 {
  padding-top: 9%; }

.u-pb9 {
  padding-bottom: 9%; }

.u-pr9 {
  padding-right: 9% !important; }

.u-pl9 {
  padding-left: 9% !important; }

.u-pt10 {
  padding-top: 10%; }

.u-pb10 {
  padding-bottom: 10%; }

.u-pr10 {
  padding-right: 10% !important; }

.u-pl10 {
  padding-left: 10% !important; }

/*
**  ===================================================================
**  site-header CSS ※block { } block__element { } block_modifier { }（key_value）
**  ===================================================================
*/
.header-nav {
  padding: 3% 3% 0; }
  .header-nav ul {
    padding: 4% 0; }
  .header-nav li {
    margin-bottom: 2%; }
    .header-nav li:last-child {
      margin-bottom: 0; }

.page-header__note {
  background-color: #003686;
  text-align: left;
  padding: 3%;
  font-size: 85%;
  color: #ffffff; }
  .page-header__note__yellow {
    color: #fff100; }
  .page-header__note__red {
    color: #e60012;
    font-weight: bold; }

/*
**  ===================================================================
**  site-footer CSS ※block { } block__element { } block_modifier { }（key_value）
**  ===================================================================
*/
/*
**  ===================================================================
**  site-navigation CSS ※block { } block__element { } block_modifier { }（key_value）
**  ===================================================================
*/
/*
**  ===================================================================
**  site-section CSS ※block { } block__element { } block_modifier { }（key_value）
**  ===================================================================
*/
/*
**  ===================================================================
**  site-contents CSS ※block { } block__element { } block_modifier { }（key_value）
**  ===================================================================
*/
ul, h2, h3, h4, h5, p, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  list-style: none; }

h2, h3, h4 {
  line-height: 0; }

#dstpArea {
  font-size: 90%;
  margin: 0;
  padding: 0;
  text-align: center; }
  #dstpArea h2 {
    margin: 0;
    padding: 0; }
  #dstpArea img {
    width: 100%;
    vertical-align: top;
    margin: 0; }
  #dstpArea .page-body {
    padding: 5% 3%; }
    #dstpArea .page-body .inner-frame-body {
      background-color: #ffffff;
      border: 3px solid #003686;
      border-radius: 10px;
      padding: 2.7% 2.7% 5%; }
      #dstpArea .page-body .inner-frame-body__note {
        font-size: 12px;
        color: #000000;
        line-height: 18px;
        text-align: left;
        padding-top: 5px; }
      #dstpArea .page-body .inner-frame-body__note__red {
        color: #e60012; }
      #dstpArea .page-body .inner-frame-body .block01-ttl {
        position: relative;
        height: 250px; }
      #dstpArea .page-body .inner-frame-body .frame__badge01 {
        position: absolute;
        top: -10px;
        left: 0; }
      #dstpArea .page-body .inner-frame-body .frame-border01 {
        border-bottom: 2px solid #003686;
        padding-bottom: 6%;
        margin-bottom: 6%; }
      #dstpArea .page-body .inner-frame-body .sec-body {
        padding: 0 3%; }
      #dstpArea .page-body .inner-frame-body .howto-image {
        margin-bottom: 5%;
        clear: both;
        overflow: hidden; }
        #dstpArea .page-body .inner-frame-body .howto-image p {
          width: 38%;
          float: left; }
        #dstpArea .page-body .inner-frame-body .howto-image dl {
          width: 58%;
          float: right; }
          #dstpArea .page-body .inner-frame-body .howto-image dl dd {
            text-align: left; }
        #dstpArea .page-body .inner-frame-body .howto-image ul {
          clear: both;
          overflow: hidden; }
          #dstpArea .page-body .inner-frame-body .howto-image ul li {
            float: left;
            width: 280px; }
            #dstpArea .page-body .inner-frame-body .howto-image ul li dt {
              margin-bottom: 15px; }
            #dstpArea .page-body .inner-frame-body .howto-image ul li dd {
              color: #000000;
              font-size: 14px;
              text-align: left; }
    #dstpArea .page-body .pos-100m {
      position: relative; }
      #dstpArea .page-body .pos-100m__btn {
        position: absolute;
        width: 85%;
        top: 88%;
        left: 6%; }
    #dstpArea .page-body .pos-snoopy {
      position: relative; }
      #dstpArea .page-body .pos-snoopy__btn {
        position: absolute;
        width: 85%;
        top: 94%;
        left: 7%; }
    #dstpArea .page-body .pos-rilakkuma {
      position: relative; }
      #dstpArea .page-body .pos-rilakkuma__btn {
        position: absolute;
        width: 85%;
        top: 93.5%;
        left: 7%; }
    #dstpArea .page-body .pos-kitty {
      position: relative; }
      #dstpArea .page-body .pos-kitty__btn {
        position: absolute;
        width: 85%;
        top: 92%;
        left: 7%; }
    #dstpArea .page-body .pos-sanrio {
      position: relative; }
      #dstpArea .page-body .pos-sanrio__btn {
        position: absolute;
        width: 85%;
        top: 93.5%;
        left: 7%; }
    #dstpArea .page-body .pos-point {
      position: relative; }
      #dstpArea .page-body .pos-point__btn {
        position: absolute;
        width: 85%;
        top: 85.5%;
        left: 7%; }