@charset "UTF-8";
/* collection
=================================================================== */
.collection {
  position: relative;
  overflow: hidden;
  background: url(../img/contents/collection/bg.gif) repeat left top;
  background-size: 44px auto; }
  .collection:after {
    content: " ";
    display: block;
    width: 100%;
    height: 77px;
    position: absolute;
    left: 0;
    top: -10px;
    background: url(../img/contents/cafe/flag.png) no-repeat center top;
    background-size: 2492px auto; }

.text.cafe {
  width: 492px;
  height: 45px;
  text-indent: -9999px;
  background: url(../img/contents/collection/text.png) no-repeat center center;
  background-size: 100% auto;
  margin: 141px auto 38px; }

.note__container {
  position: relative;
  width: 1105px;
  margin: 0 auto; }
  .note__container .note__top {
    height: 198px;
    background: url(../img/contents/collection/note__top.png) no-repeat left top;
    background-size: 100% auto;
    position: relative; }
    .note__container .note__top h2 {
      width: 497px;
      height: 66px;
      position: absolute;
      top: 60px;
      left: 30px;
      text-indent: -9999px;
      background: url(../img/contents/collection/title.gif) no-repeat left top;
      background: url(../img/contents/collection/title.gif) no-repeat left top;
      background-size: 100% auto; }
    .note__container .note__top .count__balloon {
      position: absolute;
      right: 66px;
      bottom: 52px;
      width: 119px;
      height: 99px;
      background: url(../img/contents/collection/balloon.png) no-repeat right bottom;
      background-size: 100% auto;
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      z-index: 0; }
      .note__container .note__top .count__balloon p {
        left: 8px;
        position: absolute;
        top: 11px;
        width: 100px;
        text-align: center; }
        .note__container .note__top .count__balloon p strong {
          font-size: 36px;
          margin-right: 3px; }
        .note__container .note__top .count__balloon p span {
          font-size: 20px; }
    .note__container .note__top .count__book {
      position: absolute;
      right: 37px;
      bottom: 14px;
      width: 73px;
      height: 68px;
      background: url(../img/contents/collection/book.png) no-repeat right bottom;
      background-size: 100% auto;
      z-index: 1; }
  .note__container .note__tab {
    position: absolute;
    left: 15px;
    top: 147px;
    z-index: 2; }
    .note__container .note__tab li {
      width: 93px;
      height: 86px;
      text-indent: -9999px;
      -ms-transition-duration: 0.3s;
      -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
      -webkit-transition-duration: 0.3s;
      -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
      　-moz-transition-duration: 0.3s;
      -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
      　transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
      background: url(../img/contents/collection/tab1.png) no-repeat left top;
      background-size: 100% auto;
      float: left;
      cursor: pointer;
      margin-right: -3px; }
      .note__container .note__tab li:hover, .note__container .note__tab li.selected {
        margin-top: -10px; }
      .note__container .note__tab li.note__tab--2 {
        background: url(../img/contents/collection/tab2__on.png) no-repeat left top;
        background-size: 100% auto; }
      .note__container .note__tab li.note__tab--3 {
        background: url(../img/contents/collection/tab3__on.png) no-repeat left top;
        background-size: 100% auto; }
      .note__container .note__tab li.note__tab--4 {
        background: url(../img/contents/collection/tab4__on.png) no-repeat left top;
        background-size: 100% auto; }
      .note__container .note__tab li.note__tab--5 {
        background: url(../img/contents/collection/tab5__on.png) no-repeat left top;
        background-size: 100% auto; }
  .note__container .note__sheet {
    position: relative;
    z-index: 5;
    margin-top: -10px;
    overflow: hidden;
    -ms-transition-duration: 0.3s;
    -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    　-moz-transition-duration: 0.3s;
    -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    　transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
    .note__container .note__sheet .note__sheet--container {
      width: 6495px; }
    .note__container .note__sheet section {
      width: 1105px;
      padding-left: 25px;
      padding-top: 23px;
      float: left;
      margin-right: 60px;
      margin-bottom: 46px;
      margin-top: 13px;
      background: url(../img/contents/collection/note__sheet--middle.png) repeat-y left top;
      background-size: 100% auto;
      position: relative; }
      .note__container .note__sheet section:before, .note__container .note__sheet section:after {
        content: " ";
        display: block;
        position: absolute;
        width: 100%;
        left: 0; }
      .note__container .note__sheet section:before {
        background: url(../img/contents/collection/note__sheet--top.png) no-repeat left top;
        background-size: 100% auto;
        height: 10px;
        top: -10px; }
      .note__container .note__sheet section:after {
        background: url(../img/contents/collection/note__sheet--bottom.png) no-repeat left top;
        background-size: 100% auto;
        height: 46px;
        bottom: -46px; }
      .note__container .note__sheet section ul {
        width: 1039px;
        height: 473px;
        background: url(../img/contents/collection/note__flame2.png) no-repeat left bottom;
        background-size: 100% auto;
        position: relative;
        margin-top: -15px; }
        .note__container .note__sheet section ul.sheet__1 {
          background: url(../img/contents/collection/note__flame.jpg) no-repeat left top;
          background-size: 100% auto;
          margin-top: 0; }
        .note__container .note__sheet section ul li {
          position: absolute;
          height: 180px;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: auto 165px;
          background-color: #fef9eb;
          -ms-transition-duration: 0.3s;
          -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
          -webkit-transition-duration: 0.3s;
          -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
          　-moz-transition-duration: 0.3s;
          -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
          　transition-duration: 0.3s;
          transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
          .note__container .note__sheet section ul li.active {
            cursor: pointer; }
            .note__container .note__sheet section ul li.active:hover {
              opacity: 0.6; }
          .note__container .note__sheet section ul li img {
            width: auto;
            height: 100%;
            position: relative;
            z-index: 1; }
          .note__container .note__sheet section ul li:after {
            content: "1";
            display: block;
            position: absolute;
            color: #fff;
            font-size: 40px;
            top: 12px;
            left: 33px;
            font-family: "kelvingrove",serif;
            z-index: 0; }
          .note__container .note__sheet section ul li.c1 {
            top: 32px;
            left: 48px;
            width: 180px;
            background-image: url(../img/contents/collection/town/off__m.jpg); }
          .note__container .note__sheet section ul li.c2 {
            top: 32px;
            left: 306px;
            width: 180px;
            background-image: url(../img/contents/collection/town/off__m.jpg); }
            .note__container .note__sheet section ul li.c2:after {
              content: "2"; }
          .note__container .note__sheet section ul li.c3 {
            top: 260px;
            left: 61px;
            width: 411px;
            background-image: url(../img/contents/collection/town/off__l.jpg); }
            .note__container .note__sheet section ul li.c3:after {
              content: "3";
              left: 144px; }
          .note__container .note__sheet section ul li.c4 {
            top: 260px;
            left: 563px;
            width: 234px;
            background-image: url(../img/contents/collection/town/off__m.jpg); }
            .note__container .note__sheet section ul li.c4:after {
              content: "4";
              left: 59px; }
          .note__container .note__sheet section ul li.c5 {
            top: 260px;
            left: 870px;
            width: 130px;
            background-image: url(../img/contents/collection/town/off__s.jpg); }
            .note__container .note__sheet section ul li.c5:after {
              content: "5";
              left: 29px; }
          .note__container .note__sheet section ul li.c6 {
            top: 32px;
            left: 574px;
            width: 411px;
            background-image: url(../img/contents/collection/town/off__l.jpg); }
            .note__container .note__sheet section ul li.c6:after {
              content: "6";
              left: 144px; }
          .note__container .note__sheet section ul li.c7:after {
            content: "7"; }
          .note__container .note__sheet section ul li.c8:after {
            content: "8"; }
          .note__container .note__sheet section ul li.c9:after {
            content: "9"; }
          .note__container .note__sheet section ul li.c10:after {
            content: "10";
            left: 47px; }
          .note__container .note__sheet section ul li.c11:after {
            content: "11";
            left: 18px; }
          .note__container .note__sheet section ul li.c12:after {
            content: "12";
            left: 130px; }
          .note__container .note__sheet section ul li.c13:after {
            content: "13";
            left: 20px; }
          .note__container .note__sheet section ul li.c14:after {
            content: "14";
            left: 19px; }
          .note__container .note__sheet section ul li.c15:after {
            content: "15";
            left: 130px; }
          .note__container .note__sheet section ul li.c16:after {
            content: "16";
            left: 47px; }
          .note__container .note__sheet section ul li.c17:after {
            content: "17";
            left: 16px; }
          .note__container .note__sheet section ul li.c18:after {
            content: "18";
            left: 130px; }
          .note__container .note__sheet section ul li.c19:after {
            content: "19";
            left: 20px; }
          .note__container .note__sheet section ul li.c20:after {
            content: "20";
            left: 22px; }
          .note__container .note__sheet section ul li.c21:after {
            content: "21";
            left: 134px; }
          .note__container .note__sheet section ul li.c22:after {
            content: "22";
            left: 49px; }
          .note__container .note__sheet section ul li.c23:after {
            content: "23";
            left: 18px; }
          .note__container .note__sheet section ul li.c24:after {
            content: "24";
            left: 132px; }
      .note__container .note__sheet section.cafe li {
        background-size: auto 100%; }
        .note__container .note__sheet section.cafe li:after {
          display: none; }
        .note__container .note__sheet section.cafe li.c1 {
          background-image: url(../img/contents/collection/cafe/cafe__01--off.jpg); }
        .note__container .note__sheet section.cafe li.c2 {
          background-image: url(../img/contents/collection/cafe/cafe__02--off.jpg); }
        .note__container .note__sheet section.cafe li.c3 {
          background-image: url(../img/contents/collection/cafe/cafe__03--off.jpg); }
        .note__container .note__sheet section.cafe li.c4 {
          background-image: url(../img/contents/collection/cafe/cafe__04--off.jpg); }
        .note__container .note__sheet section.cafe li.c5 {
          background-image: url(../img/contents/collection/cafe/cafe__05--off.jpg); }
        .note__container .note__sheet section.cafe li.c6 {
          background-image: url(../img/contents/collection/cafe/cafe__06--off.jpg); }

.btn__back {
  text-indent: -9999px;
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  　-moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  　transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  width: 146px;
  height: 120px;
  background: url(../img/common/btn__back.png) no-repeat center center;
  background-size: 100% auto;
  margin: 0 auto 20px; }
  .btn__back a {
    height: 100%; }
  .btn__back:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }

.footer {
  margin-bottom: 20px;
  margin-left: 30px;
  z-index: 50; }