@charset "UTF-8";
/**
 * マドリーム vol68 新着一覧CSS
 * Created on: 2026.02.10
 * Modified on: yyyy.mm.dd
 */
/*--------------------------------------------------------
　BREAK POINT
--------------------------------------------------------*/
/*--------------------------------------------------------
　FONT
--------------------------------------------------------*/
/*--------------------------------------------------------
　COLOR
--------------------------------------------------------*/
/**
 * マドリーム vol68 新着一覧CSS
 * Created on: 2026.02.10
 * Modified on: yyyy.mm.dd
 */
/*--------------------------------------------------------
　THEME COLOR
--------------------------------------------------------*/
/*--------------------------------------------------------
　THEME ANIMATION
--------------------------------------------------------*/
/*--------------------------------------------------------
　NEW
--------------------------------------------------------*/
.new-block {
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF1D8), color-stop(25%, #FCD185), color-stop(90%, #FCD185), to(#ffffff));
  background: linear-gradient(to bottom, #FFF1D8 0%, #FCD185 25%, #FCD185 90%, #ffffff 100%);
  padding-bottom: 130px;
}
.new-titlebox {
  width: 100%;
  height: 350px;
  text-align: center;
  position: relative;
}
.new-titlebox-inner {
  background: url("/book/vol68/images/new/title_bg.png") no-repeat center 100px/1200px auto;
  padding: 100px 16px 0 0;
  position: relative;
  z-index: 1;
}
.new-titlebox .new-summary {
  margin-top: 47px;
  font-size: 16px;
  line-height: 2;
  color: #7F5948;
}
.new-shoplist {
  width: 840px;
  margin: 0 auto;
  padding-top: 156px;
  padding-bottom: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.new-shoplist li {
  background: #FFFFFF;
  width: 360px;
  min-height: 350px;
  margin-bottom: 50px;
  font-family: "Noto Sans JP", sans-serif;
  color: #444444;
  line-height: 1.3;
}
.new-shoplist li.townguide .category {
  background: #A78475;
}
.new-shoplist li.townguide .genre,
.new-shoplist li.townguide .recommend {
  color: #A78475;
}
.new-shoplist li.renovation .category {
  background: #87B8AC;
}
.new-shoplist li.renovation .genre,
.new-shoplist li.renovation .recommend {
  color: #87B8AC;
}
.new-shoplist li.interior .category {
  background: #545B5D;
}
.new-shoplist li.interior .genre,
.new-shoplist li.interior .recommend {
  color: #D6AB67;
}
.new-shoplist li.interior .txtbox {
  font-size: 16px;
}
.new-shoplist li.chumon .category {
  background: #D6AB67;
}
.new-shoplist li.bunjo .category {
  background: #D6AB67;
}
.new-shoplist li.kanri .category, .new-shoplist li.toushiguide .category {
  background: #D6AB67;
}
.new-shoplist li.kanri .genre,
.new-shoplist li.kanri .recommend, .new-shoplist li.toushiguide .genre,
.new-shoplist li.toushiguide .recommend {
  color: #D6AB67;
}
.new-shoplist li.maker .category {
  background: #D6AB67;
}
.new-shoplist li.maker .genre,
.new-shoplist li.maker .recommend {
  color: #D6AB67;
}
.new-shoplist li a {
  display: block;
  height: 100%;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  opacity: 1;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.new-shoplist li a:hover {
  opacity: 0.7;
}
.new-shoplist li a {
  position: relative;
}
.new-shoplist li .img {
  margin-bottom: 8px;
  position: relative;
}
.new-shoplist li .img .ico {
  position: absolute;
  bottom: 5px;
  right: 5px;
}
.new-shoplist li .category {
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 7px 14px 6px;
  background: #D6AB67;
}
.new-shoplist li .txtbox {
  position: relative;
}
.new-shoplist li .txtbox > span {
  display: block;
}
.new-shoplist li .genre {
  font-size: 16px;
  color: #D6AB67;
  position: absolute;
  top: 0;
  right: 0;
}
.new-shoplist li .bold {
  font-size: 18px;
  font-weight: bold;
}
.new-shoplist li .recommend {
  font-size: 16px;
  font-weight: bold;
  color: #D6AB67;
  margin: 5px 0;
}
.new-shoplist li .name {
  font-size: 16px;
  margin: 5px 0;
}
.new-shoplist li .small {
  font-size: 14px;
  margin: 7px 0;
}
.new-shoplist li .ico-group > span {
  display: inline-block;
  margin: 0 10px 0 0;
}
.new-shoplist li .ico-group .ico-movie {
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
}
.new-shoplist li .ico-group .ico-movie img {
  width: 25px;
  display: inline;
  vertical-align: middle;
  margin-right: 4px;
  margin-bottom: 3px;
}

.nextpreview-block {
  background: #D3B68C;
  padding: 107px 0;
  margin-top: 70px;
}
.nextpreview-block-inner {
  width: 650px;
  margin: 0 auto;
  padding: 50px 0;
  border-radius: 15px;
  background: #FFFFFF;
  color: #444444;
  text-align: center;
  position: relative;
}
.nextpreview-block .circle {
  width: 118px;
  height: 118px;
  background: #000;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
  color: #FFFFFF;
  position: absolute;
  top: -88px;
  left: 10px;
  -webkit-transform: rotate(-12deg);
          transform: rotate(-12deg);
}
.nextpreview-block .ttl {
  font-family: "Noto Serif JP", serif;
  font-size: 42px;
  line-height: 1.4;
  letter-spacing: 0.067em;
  color: #D3B68C;
}
.nextpreview-block .release {
  font-size: 24px;
  margin: 16px 0 14px;
}
.nextpreview-block .note {
  font-size: 16px;
}

.book-bottom-area {
  position: relative;
  background: #FFFFFF;
  margin-bottom: 0;
  padding-bottom: 100px;
}

/*--------------------------------------------------------
　SCROLL ANIMATION
--------------------------------------------------------*/
.is-fadein {
  opacity: 0;
  -webkit-transition: opacity 1s cubic-bezier(0.545, 0.08, 0.52, 0.975), all 1s ease;
  transition: opacity 1s cubic-bezier(0.545, 0.08, 0.52, 0.975), all 1s ease;
}
.is-fadein.is-done {
  opacity: 1;
}

.is-fadeup {
  opacity: 0;
  -webkit-transform: translate(0, 100px);
          transform: translate(0, 100px);
  -webkit-transition: opacity 1s cubic-bezier(0.545, 0.08, 0.52, 0.975), all 1s ease;
  transition: opacity 1s cubic-bezier(0.545, 0.08, 0.52, 0.975), all 1s ease;
}
.is-fadeup.is-done {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.is-fadedown {
  opacity: 0;
  -webkit-transform: translate(0, -100px);
          transform: translate(0, -100px);
  -webkit-transition: opacity 1s cubic-bezier(0.545, 0.08, 0.52, 0.975), all 1s ease;
  transition: opacity 1s cubic-bezier(0.545, 0.08, 0.52, 0.975), all 1s ease;
}
.is-fadedown.is-done {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.is-fadeleft {
  opacity: 0;
  -webkit-transform: translate(-40px, 0);
          transform: translate(-40px, 0);
  -webkit-transition: opacity 1s cubic-bezier(0.545, 0.08, 0.52, 0.975), all 1s ease;
  transition: opacity 1s cubic-bezier(0.545, 0.08, 0.52, 0.975), all 1s ease;
}
.is-fadeleft.is-done {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.is-faderight {
  opacity: 0;
  -webkit-transform: translate(40px, 0);
          transform: translate(40px, 0);
  -webkit-transition: opacity 1s cubic-bezier(0.545, 0.08, 0.52, 0.975), all 1s ease;
  transition: opacity 1s cubic-bezier(0.545, 0.08, 0.52, 0.975), all 1s ease;
}
.is-faderight.is-done {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}/*# sourceMappingURL=new.css.map */