@charset "utf-8";

/* ======================================================
 * peggy.css
 * ------------------------------------------------------
 * @media print, screen and (min-width: 768px)
 * - Header
 * - Gnav
 * - Main
 * - Footer
 * - Page Component
 * - Clearfix
 * PC Media Queries
 * @media only screen and (max-width: 767px)
 * - Header
 * - Gnav
 * - Main
 * - Footer
 * - Page Component
 * - Clearfix
 * SP Media Queries
 * Print
====================================================== */

/* ------------------------------------------------------
 * Fonts
------------------------------------------------------ */
@font-face {
  font-family: 'Montserrat Bold';
  src: url("/sp/english/peggy/shared/font/Montserrat-Bold.woff") format('woff'),
       url("/sp/english/peggy/shared/font/Montserrat-Bold.ttf") format('truetype');
}
@font-face {
  font-family: 'Montserrat Black';
  src: url("/sp/english/peggy/shared/font/Montserrat-Black.woff") format('woff'),
       url("/sp/english/peggy/shared/font/Montserrat-Black.ttf") format('truetype');
}

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width: 768px) {
  
  body {
    position: relative;
    background-image: url("/sp/english/peggy/img/peggy_bg01.gif");
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 6px auto;
		font: 1.4rem/1.5 "Yu Gothic Medium", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
  .contentWrap {
    position: relative;
    overflow: hidden;
  }
  
  /* ------------------------------------------------------
   * Header
  ------------------------------------------------------ */
  #header .headerInner {
    position: relative;
    height: 50px;
    max-width: 1840px;
    margin: 0 auto;
  }
  #header .headerLogoWrap {
    position: absolute;
    top: 67.5704%;
    left: 3.85%;
    width: 21.7392%;
    z-index: 1000;
  }
  #header .headerLogoWrap #productLogo {
    position: relative;
    width: 62%;
  }
  #header .headerLogoWrap .productText {
    position: relative;
    padding-top: 7.5%;
    z-index: 10;
  }
  #header .navWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-image: url("/sp/english/peggy/img/peggy_bg01.gif");
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 6px auto;
    z-index: 10;
  }
  #header .navWrap.is-fixed {
    -webkit-box-shadow: 0px 3px 1px -1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 3px 1px -1px rgba(0,0,0,0.1);
    box-shadow: 0px 3px 1px -1px rgba(0,0,0,0.1);
  }
  #header .menueButton {
    display: none;
  }
  
  /* ------------------------------------------------------
   * Gnav
  ------------------------------------------------------ */
  #globalNavi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 1840px;
    margin: 0 auto;
    padding: 1.305% 3.85%;
  }
  #globalNavi .navList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 33.807%;
    min-width: 500px;
    line-height: 1;
  }
  #globalNavi .navList > li > a {
    overflow: hidden;
    position: relative;
    display: block;
    padding: 6px 0 2px;
  }
  #globalNavi .navList > li > a::after {
    position: absolute;
    bottom: 0;
    left: -100%;
    content: "";
    width: 100%;
    height: 2px;
    background-color: #000;
    -webkit-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s;
  }
  #globalNavi .navList > li.is-current > a::after,
  #globalNavi .navList > li:hover > a::after {
    left: 0;
  }
  #globalNavi .navList > li.nav01 { width: 7.395%; }
  #globalNavi .navList > li.nav02 { width: 9.076%; }
  #globalNavi .navList > li.nav03 { width: 13.448%; }
  #globalNavi .navList > li.nav04 { width: 13.448%; }
  #globalNavi .navList > li.nav05 { width: 11.43%; }
  #globalNavi .navList > li.nav06 { width: 9.75%; }
  .loadingBar {
    width: 0;
    height: 10px;
    background: #000;
    -webkit-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s;
  }
  
  /* ------------------------------------------------------
   * Main
  ------------------------------------------------------ */
  #mainContents {
    display: block;
    padding: 0 0 5.435%;
  }
  #mainContents .contentsInner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
  }
  .section + .section .whiteBox {
    background-color: #fff;
  }
  /* individual setting */
  .howToUseSection { padding-top: 10.418%; }
  .featuresOfHARUPEGGYSection { padding-top: 10.418%; }
  .customizePartsSection { margin-top: 4.168%; }
  
  /* ------------------------------------------------------
   * Footer
  ------------------------------------------------------ */
  #footer {
    background-color: #000;
    line-height: 1;
  }
  #footer #pagetop {
    position: absolute;
    right: 2.174%;
    width: 1.848%;
    max-width: 34px;
  }
  #footer #pagetop.is-fixed {
    position: fixed;
  }
  #footer .footerInner {
    width: 100%;
    max-width: 1840px;
    margin: 0 auto;
    padding: 2.174%;
  }
  #footer #corporateLogo {
    width: 6.705%;
    margin: 0 auto;
  }
  #footer .copyright {
    padding-top: 1.137%;
    color: #fff;
    text-align: center;
  }
  /* ------------------------------------------------------
   * Page Component
  ------------------------------------------------------ */
  /* ----- headLine ----- */
  .headLine02 {
    padding: 10.418% 0 4.168%;
    text-align: center;
  }
  .whiteBox .headLine02 {
    padding: 5.418% 0 4.168%;
  }
  .headLine03 {
    padding: 0 0 2%;
  }
  .headLine04 {
    margin-bottom: 2.084%;
    padding-bottom: 1.042%;
    border-bottom: 5px solid #000;
  }
  .headLine04 > span {
    display: block;
  }
  .headLine04 > .headLineCaption {
    padding-top: 1.042%;
  }
  .headLine05 {
    margin-bottom: 1.042%;
    padding-bottom: .521%;
    border-bottom: 1px solid #7f7f80;
    font-size: 1.6rem;
  }
  .boxLayoutWhite + .boxLayoutWhite .headLine05 {
    margin-bottom: 2.326%;
    padding-bottom: 2.326%;
  }
  
  /* individual setting */
  .headLine02 .aboutPEGGY { width: 30.418%; }
  .headLine02 .howToUse { width: 38.373%; }
  .headLine02 .featuresOfPEGGY { width: 50.373%; }
  .headLine02 .featuresOfHARUPEGGY { width: 66.42%; }
  .headLine02 .howToAssemble { width: 52.5%; }
  .headLine02 .gallery { width: 24.375%; }
  .headLine02 .lineUp { width: 20.418%; }
  .headLine03 .l-hook { width: 28.424%; }
  .headLine03 .miniContainer { width: 60.53%; }
  .headLine03 .penStand { width: 41.58%; }
  .headLine03 .attach { width: 21.424%; }
  .headLine03 .hang { width: 15.53%; }
  .headLine03 .putInside { width: 29.58%; }
  .headLine03 .customize { width: 32.056%; }
  .headLine03 .miniShelf { width: 41.056%; }
  .headLine04 .pegboard { width: 16.25%; }
  .headLine04 .products { width: 16.25%; }
  .headLine04 .customizeParts { width: 20.0%; }
  
  /* ----- mainSlideWrap ----- */
  .mainSlideWrap {
    overflow: hidden;
    max-width: 1840px;
    margin: 0 auto;
    padding: 0 3.85%;
  }
  
  /* ----- whiteBox ----- */
  .whiteBox {
    padding: 0 0 5.209%;
  }
  .whiteBox > .headLine02,
  .whiteBox > p,
  .whiteBox > .productImage2 {
    padding-left: 5.209%;
    padding-right: 5.209%;
  }
  /* ----- textParagraph ----- */
  .textParagraph {
    margin-top: 1em;
  }
  /* ----- lineHeight ----- */
  .lineHeight2 {
    line-height: 2em;
  }
  /* ----- imageWrap ----- */
  .imageWrap {
    position: relative;
  }
  .imageWrap .textWrap {
    position: absolute;
    top: 22.73%;
    left: 6.25%;
    width: 50%;
  }
  .imageWrap .textWrap > *:first-child {
    margin-top: 0 !important;
  }
  
  /* ----- productImage ----- */
  .productImage2,
  .productImage3 {
    margin-top: 4.688%;
    text-align: center;
  }
  
  /* ----- detailWrap ----- */
  .detailWrap {
    margin-top: 5.209%;
    padding: 0 5.209%;
  }
  .detailWrap > *:first-child {
    margin-top: 0 !important;
  }
  .detailWrap > .detailBlock:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  .detailWrap .detailBlock {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin-top: 3.49%;
    padding-bottom: 3.49%;
    border-bottom: 1px solid #7f7f80;
  }
  .detailWrap .detailBlock .textItem {
    width: 44.187%;
    font-size: 1.2rem;
  }
  .detailWrap .detailBlock .textItem .detailTextWrap {
    margin-top: 7.898%;
  }
  .detailWrap .detailBlock .textItem2 .detailTextWrap {
    margin-top: 7.898%;
  }
  .detailWrap .detailBlock .imgItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 55.814%;
  }
  .detailWrap .detailBlock .imgItem > figure {
    width: 47.918%;
  }
  
  .textItem2 {
    width: 60%;
    font-size: 1.2rem;
  }
  .detailJC{
    justify-content: center!important;
    padding: 5% 5% 7%!important;
  }
  /* ----- ABOUT PEGGY ----- */
  .aboutPeggyCol {
    display: flex;
    justify-content: space-between;
  }
  .aboutPeggyColBg1 {
    background-color: #E6EDEF;
  }
  .aboutPeggyColText {
    display: flex;
    justify-content: center;
    margin-top: 13%;
  }
  .aboutPeggyColBg2 {
    background-color: #FFF9F2;
  }
  .aboutPeggyColItem {
    width: 48%;
  }
  .aboutPeggyColImg {
    padding-top: 13%;
  }
  .aboutPeggyColBtnSub a:hover {
    opacity: 0.5;
  }
  .aboutPeggyColBg1 > .aboutPeggyColImg {
    padding-top: 25%;
  }
  .aboutPeggyColBtnSub {
    display: flex;
    justify-content: center;
    padding-top: 3%;
  }
  /* ----- tileWrap ----- */
  .tileWrap {
    background-color: #fff;
  }
  .tileWrap .tileInner {
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
  }
  .tileWrap .tileInner .tileBlockWrap {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .tileWrap .tileInner .tileHead {
    width: 100%;
    padding: 1.38% 1.878%;
    border-bottom: 1px solid #000;
    font-size: 1.6rem;
    text-align: center;
    line-height: 1;
  }
  .tileBlock {
    width: 50%;
    border-bottom: 1px solid #000;
  }
  .tileBlock:nth-child(2n+1) {
    border-right: 1px solid #000;
  }
  .tileBlock.wide:nth-child(2n+1) {
    border-right: none;
  }
  .tileBlock .tileBlockInner {
    padding: 10.462%;
  }
  .tileBlock.wide .tileBlockInner {
    padding: 5.22%;
  }
  .tileBlock .tileBlockInner .tileDetaile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 1.2rem;
  }
  .tileBlock .tileBlockInner .number {
    width: 10.57%;
    padding-top: .5em;
  }
  .tileBlock .tileBlockInner .number > img {
    width: 50%;
  }
  .tileBlock .tileBlockInner .tileDetaile .textItem {
    width: 89.43%;
  }
  .tileBlock .tileBlockInner .tileDetaile .imgItem {
    width: 100%;
    padding: 13.225% 10.57% 0;
  }
  .tileBlock.wide {
    width: 100%;
  }
  .tileBlock.wide .tileBlockInner .number {
    width: 4.663%;
  }
  .tileBlock.wide .tileBlockInner .tileDetaile .textItem {
    width: 95.337%;
  }
  .tileBlock .tileBlockInner .gridLayout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 2.335%;
  }
  .tileBlock .tileBlockInner .gridLayout > .gridItem {
    width: 46.788%;
  }
  .tileBlock .tileBlockInner .gridLayout > .gridItem:nth-child(2n+1) {
    padding-left: 4.663%;
  }
  .tileBlock .tileBlockInner .gridLayout > .gridItem:nth-child(2n) {
    padding-right: 4.663%;
  }
  .tileBlock .tileBlockInner .gridLayout > .gridItem .gridTitle {
    font-size: 1.6rem;
  }
  .tileBlock .tileBlockInner .gridLayout > .gridItem .gridImage {
    margin-top: 2.22%;
  }
  .tileBlock .tileBlockInner .tileTitle {
    margin: 0 auto;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
  }
  .tileBlock .tileBlockInner .tileInnerColumn {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-flow: row wrap;
    margin: 3em auto 0;
    width: 100%;
  }
  .tileBlock .tileBlockInner .tileInnerColumn .colItem {
    width: 48%;
    margin: 4% 0 0 4%;
    text-align: center;
  }
  .tileBlock .tileBlockInner .tileInnerColumn .colItem:nth-of-type(-n+2) {
    margin-top: 0;
  }
  .tileBlock .tileBlockInner .tileInnerColumn .colItem:nth-of-type(2n+1) {
    margin-left: 0;
  }
  .tileBlock .tileBlockInner .tileInnerColumn .colImage {
    max-width: 320px;
    margin: 1em auto 0;
  }
  .tileBlock .tileBlockInner .tileInnerMadia {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin: 0 auto;
  }
  .tileBlock .tileBlockInner .tileInnerMadia .madiaImage {
    width: 37.5%;
    max-width: 320px;
  }
  .tileBlock .tileBlockInner .tileInnerMadia .madiaText {
    width: calc(100% - 37.5% - 4%);
    margin: 0 0 0 4%;
  }
  .tileBlock .tileBlockInner .tileInnerMadia .madiaText p + p {
    margin: 1em 0 0;
  }
  
  /* ----- galleryWrap ----- */
  .galleryWrap .galleryList {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .galleryWrap .galleryList > .galleryItemColImg {
    overflow: hidden;
    position: relative;
    width: 32.084%;
    margin: 1.874% 0 0 1.874%;
  }
  .galleryWrap .galleryList .galleryItemColImg:nth-child(3n+1) {
    margin-left: 0;
  }
  .galleryWrap .galleryList .galleryItemColImg > a::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    -webkit-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s;
  }
  .galleryWrap .galleryList .galleryItemColImg:hover > a::after {
    opacity: .3;
  }
  .galleryWrap .galleryList .galleryItemColImg > a img {
    -webkit-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s;
  }
  .galleryWrap .galleryList .galleryItemColImg:hover > a img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  .galleryItemColImg:nth-child(n+10) {
    display: none;
  }
  .js-more-display.is-current .peggy-gallrey-button-wrap {
    display: none !important;
  }
  .peggy-gallrey-button-wrap {
    margin: 30px 0 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }
/* ----- galleryButton----- */
  .peggy-gallrey-button--more {
    appearance: none;
    display: block;
    padding: 10px 45px;
    width: calc((100% - 60px) / 3);
    text-align: center;
    font-size: 16px;
    font-size: 1.6rem;
    background-color: #fff;
    background-image: url(/sp/english/peggy/img/peggy_ic04.png);
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 22px auto;
    border: 1px solid #231815;
    border-radius: 0;
    -webkit-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s;
    cursor: pointer;
    image-rendering: -webkit-optimize-contrast;
  }
  .peggy-gallrey-button--more:hover {
    color: #fff;
    background-color: #231815;
    background-image: url(/sp/english/peggy/img/peggy_ic05.png);
  }
  .peggy-gallrey-button--more02 {
    background: transparent;
    border: none;
    -webkit-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s;
    cursor: pointer;
  }
  .peggy-gallrey-button--more02:hover {
    opacity: 0.7;
  }
  /* ----- boxLayoutWhite ----- */
  .boxWrap {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .boxWrap2 {
    margin-top: 2.084%;
  }
  .boxLayoutWhite {
    background-color: #fff;
    margin-left: 2.084%;
    padding: 2.084%;
  }
  .boxLayoutWhite + .boxLayoutWhite {
    width: 48.958%;
    margin-top: 2.084%;
  }
  .boxLayoutWhite:first-child,
  .boxLayoutWhite:nth-child(2n) {
    margin-left: 0;
  }
  .boxLayoutWhite .boxInner {
    position: relative;
  }
  .boxLayoutWhite .boxInner .figureWrap {
    position: absolute;
    right: 0;
    bottom: 0;
    text-align: right;
  }
  
  .pegboardSection .boxLayoutWhite .boxInner { padding-bottom: 16.306%; }
  .boxLayoutWhite.pgp01Section .boxInner { padding-bottom: 39.538%; }
  .boxLayoutWhite.pgp02Section .boxInner { padding-bottom: 34.885%; }
  .boxLayoutWhite.pgp03Section .boxInner { padding-bottom: 30.235%; }
  .boxLayoutWhite.pgp04Section .boxInner { padding-bottom: 21.28%; }
  .pegboardSection .boxLayoutWhite .boxInner .figureWrap {
    right: 2%;
    width: 87.718%;
  }
  .boxLayoutWhite.pgp01Section .boxInner .figureWrap {
    right: 4.652%;
    width: 51.4%;
  }
  .boxLayoutWhite.pgp02Section .boxInner .figureWrap {
    right: 4.652%;
    width: 69.306%;
  }
  .boxLayoutWhite.pgp03Section .boxInner .figureWrap {
    right: 3.49%;
    width: 57.445%;
  }
  .boxLayoutWhite.pgp04Section .boxInner .figureWrap {
    right: 3.49%;
    width: 66.516%;
  }
  .boxLayoutWhite.pgp04Section .boxInner .figureWrap + .section > .squareList {
    padding-right: 23%;
  }
  .pegboardContentsCol {
    display: flex;
    justify-content: space-between;
  }
  .pegboardTextBlack {
    font-size: 1.2rem;
    margin-top: 5%;
    color: #fff;
    background-color: #000;
    border-radius: 10px;
    padding: 1em;
  }
  /* ----- squareList ----- */
  .squareList > li {
    position: relative;
    margin-top: 1.088%;
    padding-left: 1.2em;
    font-size: 1.2rem;
  }
  .squareList.inline > li {
    display: inline-block;
    margin-right: 1.5em;
  }
  .squareList > li::before {
    position: absolute;
    left: 0;
    top: .3em;
    content: "";
    width: .8em;
    height: .8em;
    background-color: #409dbb;
  }
  
  /* ----- leadText ----- */
  .leadText {
    font-size: 1.6rem;
  }
  
  /* ----- exText ----- */
  .exText {
    font-size: 2.0rem;
  }
  
  /* ----- noteText ----- */
  .noteText {
    margin-top: 1.088%;
    padding-left: 1em;
    text-indent: -1em;
    font-size: 1.2rem;
  }
  
  /* ----- noteBox ----- */
  .noteBox {
    margin-top: 4.168%;
  }
  .noteBox .squareList > * {
    margin-top: 0.544%;
  }
  .noteBox .squareList > *:first-child {
    margin-top: 0;
  }
  
  /* ----- pagetopSp ----- */
  .pagetopSp {
    display: none;
  }
  
  .showSP {
    display: none;
  }
  
  /* ----- JS Support ----- */
  .slick-dots {
    padding-top: .272%;
    text-align: center;
  }
  .slick-dots > li {
    overflow: hidden;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 0.435%;
    background-color: #7f7f80;
    border-radius: 50%;
    line-height: 1;
  }
  .slick-dots > li.slick-active {
    background-color: #000;
  }
  .slick-dots > li > button {
    display: block;
    width: 10px;
    height: 10px;
    background: none;
    border: none;
    font-size: 0;
    outline: none;
    cursor: pointer;
  }
  .slick-prev,
  .slick-next {
    overflow: hidden;
    width: 4.018%;
    height: 8.968%;
    position: absolute;
    top: 50%;
    margin-top: -4.2635%;
    background: none;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto 100%;
    border: none;
    text-indent: -1000px;
    z-index: 100;
    cursor: pointer;
    outline: none;
  }
  .slick-prev {
    left: -2.233%;
    background-image: url("/sp/english/peggy/img/peggy_ic02.png");
  }
  .slick-next {
    right: -2.233%;
    background-image: url("/sp/english/peggy/img/peggy_ic03.png");
  }
  .slick-counter {
    position: absolute;
    top: -8.034% !important;
    font-size: 2.6rem;
    font-weight: 700;
    font-family: "Montserrat Black", "Yu Gothic Medium", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
  .modalContent {
    display: none;
  }
  .carouselList {
    width: 100%;
    max-width: 1120px;
    max-height: 747px;
  }
  .carouselItem {
    position: relative;
    margin: 0 50px;
  }
  .carouselItem::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    opacity: .6;
  }
  .carouselItem.slick-current::after {
    opacity: 0;
  }
  .modalContent .carouselList {
    overflow: hidden !important;
  }
  [data-parallax] {
    position: relative;
    -webkit-transition: all .5s ease-out 0s;
    transition: all .5s ease-out 0s;
  }
  [data-parallax="false"] {
    opacity: 1;
    top: 0;
  }
  [data-parallax="true"] {
    opacity: 0;
    top: 100px;
  }
  
  #cboxContent {
    background: transparent;
    margin-top: 0;
  }
  #cboxLoadedContent {
    background: transparent;
    border: none;
  }
  .peggy-gallrey_modal-inner {
    position: relative;
    margin: 0 60px;
    border-radius: 10px;
    padding: 60px;
    background: #ffffff;
  }
  #colorbox.peggy-gallrey #cboxNext, #colorbox.peggy-gallrey #cboxPrevious {
    display: block!important;
    position: absolute;
    top: 50%;
    margin-top: -31px;
    background: url(/sp/english/peggy/img/peggy_ic06.png) no-repeat;
    width: 32px;
    height: 63px;
    text-indent: -9999px;
    -webkit-background-size: contain;
    background-size: contain;
  }
  #colorbox.peggy-gallrey #cboxNext {
    transform: rotate(180deg);
    right: 7px;
  }
  #colorbox.peggy-gallrey #cboxPrevious {
    left: 7px;
  }
  #colorbox.peggy-gallrey #cboxClose {
    position: absolute;
    top: 0;
    right: 4px;
    display: block;
    background: url(/sp/english/peggy/img/peggy_ic07.png) no-repeat;
    width: 36px;
    height: 36px;
    text-indent: -9999px;
    -webkit-background-size: contain;
    background-size: contain;
  }
  
  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  .carouselList::after {
    display: block;
    clear: both;
    content: "";
  }
}

/* ======================================================
 * PC Media Queries
====================================================== */

@media only screen and (min-width: 1040px) {
  #header .headerLogoWrap {
    left: 40px;
  }
  #globalNavi,
  .mainSlideWrap {
    padding-left: 40px;
    padding-right: 40px;
  }
}
/***
@media only screen and (min-width: 320px) and (max-width: 767px) {
}
@media only screen and (max-width: 736px) {
}
@media only screen and (max-width: 667px) {
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 568px) {
}
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 414px) {
}
@media only screen and (max-width: 375px) {
}
@media only screen and (max-width: 360px) {
}
@media only screen and (max-width: 320px) {
}
***/


/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width: 767px) {
  body {
    position: relative;
    background-image: url("/sp/english/peggy/img/peggy_bg01.gif");
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 6px auto;
		font: 1.3rem/1.5 "Yu Gothic Medium", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #000;
  }
  
  /* ------------------------------------------------------
   * Header
  ------------------------------------------------------ */
  #header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top: none;
    z-index: 10;
  }
  #header .headerInner {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4%;
  }
  #header #productLogo {
    width: 37.105%;
  }
  #header .headerLogoWrap .productText {
    display: none;
  }
  #header .navWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  #header .menueButton {
    position: absolute;
    top: 32.15%;
    right: 4.8%;
    display: block;
    width: 5.334%;
    height: 35.74%;
    cursor: pointer;
    z-index: 20;
  }
  #header .menueButton .menueButtonLine {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 20%;
    background-color: #000;
    -webkit-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s;
  }
  #header .menueButton .menueButtonLine:nth-child(1) { top: 0; margin-top: 0; }
  #header .menueButton .menueButtonLine:nth-child(2) { top: 50%; margin-top: -10%; }
  #header .menueButton .menueButtonLine:nth-child(3) { top: 100%; margin-top: -20%; }
  #header .menueButton.is-active .menueButtonLine:nth-child(1) {
    top: 50%;
    left: 0;
    right: auto;
    margin-top: -10%;
    transform: rotate(-45deg);
  }
  #header .menueButton.is-active .menueButtonLine:nth-child(2) {
    display: none;
  }
  #header .menueButton.is-active .menueButtonLine:nth-child(3) {
    top: 50%;
    right: 0;
    left: auto;
    margin-top: -10%;
    transform: rotate(45deg);
  }
  
  /* ------------------------------------------------------
   * Gnav
  ------------------------------------------------------ */
  #globalNavi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 4px solid #000;
    background-image: url("/sp/english/peggy/img/peggy_bg01.gif");
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 6px auto;
    line-height: 1;
    opacity: 0;
    z-index: -100;
    -webkit-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s;
  }
  #globalNavi.is-active {
    width: 100%;
    height: 100vh;
    opacity: 1;
    z-index: 10;
  }
  #globalNavi .navList {
    display: none;
  }
  #globalNavi.is-active .navList {
    display: block;
  }
  #globalNavi .navList,
  #globalNavi .navList > li {
    width: 100% !important;
  }
  #globalNavi .navList > li > a {
    display: block;
    padding: 4.908% 0;
    text-align: center;
  }
  #globalNavi .navList > li > a > img {
    padding-bottom: 1.365%;
  }
  #globalNavi .navList > li.is-current > a > img {
    border-bottom: 3px solid #000;
  }
  #globalNavi .navList > li.nav01 > a > img { width: 14.714%; }
  #globalNavi .navList > li.nav02 > a > img { width: 17.44%; }
  #globalNavi .navList > li.nav03 > a > img { width: 25.346%; }
  #globalNavi .navList > li.nav04 > a > img { width: 26.434%; }
  #globalNavi .navList > li.nav05 > a > img { width: 22.346%; }
  #globalNavi .navList > li.nav06 > a > img { width: 19.075%; }
  
  /* ------------------------------------------------------
   * Main
  ------------------------------------------------------ */
  #mainContents {
    display: block;
    padding: 14.67% 0 0;
  }
  #mainContents .contentsInner {
    padding: 0 4%;
  }
  .section + .section {
    padding-top: 14.495%;
  }
  /* individual setting */
  .aboutSection { padding-top: 14.495%; }
  .howToUseSection,
  .gallerySection {
    margin-top: 14.495%;
    margin-left: -4%;
    margin-right: -4%;
    background-color: #fff;
  }
  .aboutSection { padding-top: 14.495%; }
  .featuresOfHARUPEGGYSection,
  .gallerySection {
    margin-top: 14.495%;
    margin-left: -4%;
    margin-right: -4%;
    background-color: #fff;
  }
  .gallerySection {
    padding-bottom: 14.495%;
  }
  .howToUseSection .gp-al-center { text-align: left !important; }
  .pegboardSection,
  .customizePartsSection {
    background-color: #fff;
    border: 1px solid #000;
  }
  .featuresOfHARUPEGGYSection .gp-al-center { text-align: left !important; }
  .pegboardSection,
  .customizePartsSection {
    background-color: #fff;
    border: 1px solid #000;
  }
  .customizePartsSection {
    margin-top: 14.495%;
    padding-top: 0 !important;
  }
  .boxWrapBorder {
    border-top: 1px solid #000;
  }
  
  /* ------------------------------------------------------
   * Footer
  ------------------------------------------------------ */
  #footer {
    background-color: #000;
    line-height: 1;
    z-index: 1;
  }
  #footer #pagetop {
    display: none !important;
  }
  #footer .footerInner {
    padding: 4%;
  }
  #footer #corporateLogo {
    width: 33.915%;
    margin: 0 auto;
  }
  #footer .copyright {
    padding-top: 2.9%;
    color: #fff;
    font-size: 1rem;
    text-align: center;
  }
  
  /* ------------------------------------------------------
   * Page Component
  ------------------------------------------------------ */
  /* ----- headLine ----- */
  .headLine02 {
    padding: 0 0 8.7%;
    text-align: center;
  }
  .whiteBox .headLine02 {
    padding-top: 0;
  }
  .headLine03 {
    padding: 0 0 2.9%;
  }
  .headLine04 > span {
    display: block;
  }
  .headLine04 > span:first-child {
    padding: 4.085% 2.92% 2.92%;
    border-bottom: 1px solid #000;
    text-align: center;
    line-height: 1;
  }
  .headLine04 > .headLineCaption {
    padding: 5.832%;
    font-size: 1.3rem;
  }
  .customizePartsSection .headLine04 > .headLineCaption {
    border-bottom: 1px solid #000;
    margin-bottom: 2.916%;
  }
  .headLine05 {
    font-size: 1.3rem;
  }
  /* individual setting */
  .headLine02 .aboutPEGGY { width: 50.145%; }
  .headLine02 .howToUse { width: 63.42%; }
  .headLine02 .featuresOfPEGGY { width: 79.42%; }
  .headLine02 .featuresOfHARUPEGGY { width: 100%; }
  .headLine02 .howToAssemble { width: 86.96%; }
  .headLine02 .gallery { width: 40.29%; }
  .headLine02 .lineUp { width: 33.915%; }
  .headLine03 .l-hook { width: 30.88%; }
  .headLine03 .miniContainer { width: 65.97%; }
  .headLine03 .penStand { width: 44.565%; }
  .headLine03 .miniShelf { width: 41.056%; }
  .headLine03 .attach { width: 23.424%; }
  .headLine03 .hang { width: 18.53%; }
  .headLine03 .putInside { width: 34.58%; }
  .headLine03 .customize { width: 38.056%; }
  .headLine04 .pegboard { width: 24.15%; }
  .headLine04 .products { width: 25.15%; }
  .headLine04 .customizeParts { width: 40.25%; }
  
  /* ----- whiteBox ----- */
  .howToUseSection .whiteBox {
    padding-bottom: 5.37%;
  }
  .featuresOfHARUPEGGYSection .whiteBox {
    padding-bottom: 5.37%;
  }
  .whiteBox > .headLine02,
  .whiteBox > p,
  .whiteBox > .productImage2 {
    padding-left: 4%;
    padding-right: 4%;
  }
  .headLine02Sp0 {
    padding-bottom: 0;
  }
  /* ----- imageWrap ----- */
  .productImage1 {
    margin-top: 8.7%;
  }
  
  /* ----- productImage ----- */
  .productImage2 {
    margin-top: 5.8%;
    text-align: center;
  }
  
  /* ----- detailWrap ----- */
  .detailWrap {
    margin-top: 10.148%;
    padding: 0 4%;
  }
  .detailWrapMt5 {
    margin-top: 5%;
  }
  .detailWrap > *:first-child {
    margin-top: 0 !important;
  }
  .detailWrap .detailBlock {
    padding: 8.754% 0;
    border-top: 1px solid #7f7f80;
  }
  .detailWrap .detailBlock:first-child {
    border-top: none;
  }
  .detailWrap .detailBlock .textItem {
    font-size: 1.4rem;
    font-size: 14px;
  }
  .detailWrap .detailBlock .textItem .detailTextWrap {
    margin-top: 5.835%;
  }
  .detailWrap .detailBlock .textItem2 {
    font-size: 1.4rem;
    font-size: 14px;
  }
  .detailWrap .detailBlock .textItem2 .detailTextWrap {
    margin-top: 5.835%;
  }
  .detailWrap .detailBlock .imgItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin-top: 8.754%;
  }
  .detailWrap .detailBlock .imgItem2 {
    margin-top: 8.754%;
  }
  .detailWrap .detailBlock .imgItem > figure {
    width: 50%;
  }
  .detailWrap .detailBlock .imgItem > figure:nth-child(2n+1) {
    text-align: right;
  }
  .detailWrap .detailBlock .imgItem > figure:nth-child(2n) {
    text-align: left;
  }
  /* ----- ABOUT PEGGY ----- */
  .aboutPeggyCol {
  }
  .aboutPeggyColBg1 {
    background-color: #E6EDEF;
  }
  .aboutPeggyColText {
    display: flex;
    justify-content: center;
    margin: 7% 3% 0;
  }
  .aboutPeggyColBg2 {
    background-color: #FFF9F2;
  }
  .aboutPeggyColBg1 ,
  .aboutPeggyColBg2 {
    padding-top: 3%;
  }
  .aboutPeggyColItem {
    width: 100%;
  }
  .aboutPeggyColItem + .aboutPeggyColItem .aboutPeggyColBg2, 
  .aboutPeggyColItem + .aboutPeggyColItem .aboutPeggyColBg1 {
    padding-top: 6%;
  }
  .aboutPeggyColImg {
    padding-top: 7%;
  }
  .aboutPeggyColBtnSub {
    display: flex;
    justify-content: center;
  }
  .peggyBtnLabel {
    width: 60%;
    display: block;
    margin: 0 auto;
  }
  /* ----- tileWrap ----- */
  .tileWrap .tileInner {
    background-color: #fff;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
  }
  .tileWrap .tileInner .tileHead {
    padding: 2.62%;
    border-bottom: 1px solid #000;
    font-size: 1.6rem;
    text-align: center;
  }
  .tileWrap .tileInner .tileHeadImage {
    padding: 5.814% 18.898%;
    border-bottom: 1px solid #000;
  }
  .tileWrap .tileInner .tileHeadImageV2 {
    padding: 5.832%;
    border-bottom: 1px solid #000;
  }
  .tileBlockWrap {
    display: none;
  }
  .tileBlock {
    border-bottom: 1px solid #000;
  }
  .tileBlock .tileBlockInner {
    padding: 5.832%;
  }
  .tileBlock .tileBlockInner .number {
    margin-bottom: 7.31%;
    text-align: center;
  }
  .tileBlock .tileBlockInner .number > img {
    width: 4.625%;
  }
  .tileBlock .tileBlockInner .tileDetaile {
    font-size: 1.3rem;
  }
  .tileBlock .tileBlockInner .tileDetaile .textItem {
    padding-bottom: 9.135%;
  }
  .tileBlock .tileBlockInner .gridLayout {
    margin-top: 6.602%;
    font-size: 1.1rem;
  }
  .tileBlock .tileBlockInner .gridLayout > .gridItem + .gridItem {
    margin-top: 6.602%;
  }
  .tileBlock .tileBlockInner .gridLayout > .gridItem .gridImage {
    margin-top: 3.658%;
  }
  .tileBlock .tileBlockInner .tileTitle {
    margin: 0 auto;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
  }
  .tileBlock .tileBlockInner .tileInnerColumn {
    margin: 6.602% 0 0;
  }
  .tileBlock .tileBlockInner .tileInnerColumn .colItem {
    font-size: 1.6rem;
    margin: 3.658% 0 0;
    text-align: center;
  }
  .tileBlock .tileBlockInner .tileInnerColumn .colItem:first-of-type {
    margin-top: 0;
  }
  .tileBlock .tileBlockInner .tileInnerColumn .colImage {
    margin: 1em auto 0;
  }
  .tileBlock .tileBlockInner .tileInnerMadia {
    width: 100%;
    margin: 0 auto;
  }
  .tileBlock .tileBlockInner .tileInnerMadia .madiaImage {
    width: 100%;
  }
  .tileBlock .tileBlockInner .tileInnerMadia .madiaText {
    width: 100%;
  }
  .tileBlock .tileBlockInner .tileInnerMadia .madiaText p + p {
    margin: 1em 0 0;
  }
  .tileButtonWrap {
    position: relative;
    margin-top: 8.7%;
    text-align: center;
    z-index: 5;
  }
  .tileButtonWrap .tileButton {
    width: 43.48%;
    margin: 0 auto;
    cursor: pointer;
  }
  .open,
  .is-active .colose {
    display: none;
  }
  .colose,
  .is-active .open {
    display: block;
  }
  
  /* ----- galleryWrap ----- */
  .galleryWrap > * {
    padding: 0 4.35%;
  }
  .galleryWrap .galleryList {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  }
  .galleryWrap .galleryList .galleryItemColImg {
    margin-top: 3.94%;
    width: calc((100% - 15px) / 2);
  }
  .galleryWrap .galleryList .galleryItemColImg:nth-child(n+11) {
    display: none;
  }
  .peggy-gallrey-button-wrap {
    margin: 30px 0 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  /* ----- galleryButton----- */
  .peggy-gallrey-button--more {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    margin: 0;
    padding: 12px 45px;
    width: 100%;
    text-align: center;
    font-size: 15px;
    font-size: 1.5rem;
    background-color: #fff;
    background-image: url(/sp/english/peggy/img/peggy_ic04.png);
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 15px auto;
    border: 1px solid #231815;
    border-radius: 0;
    image-rendering: -webkit-optimize-contrast;
  }
  .peggy-gallrey-button--more02 {
    width: 47%;
    border: none;
    background: transparent;
    margin: 0 auto;
    cursor: pointer;
  }
  .js-more-display.is-current .peggy-gallrey-button-wrap {
    display: none !important;
  }
  /* ----- boxLayoutWhite ----- */
  .boxLayoutWhite {
    padding: 5.0832%;
  }
  .boxLayoutWhite + .boxLayoutWhite .figureWrap {
    padding: 3.25% 0 6.492%;
  }
  .customizePartsSection .boxLayoutWhite {
    border-top: 1px solid #000;
  }
  .pegboardSection .boxLayoutWhite {
    padding-top: 2.5416%;
  }
  .customizePartsSection .boxLayoutWhite:first-child {
    border-top: none;
  }
  
  /* ----- squareList ----- */
  .squareList > li {
    position: relative;
    margin-top: 1.088%;
    padding-left: 1.2em;
    font-size: 1.0rem;
  }
  .squareList.inline > li {
    display: inline-block;
    margin-right: 1.4em;
  }
  .squareList > li::before {
    position: absolute;
    left: 0;
    top: .8em;
    content: "";
    width: .8em;
    height: .8em;
    margin-top: -.4em;
    background-color: #409dbb;
  }
  .pegboardTextBlack {
    font-size: 1.2rem;
    margin-top: 5%;
    color: #fff;
    background-color: #000;
    border-radius: 10px;
    padding: 0.5em;
  }
  .pegboardImgPt {
    padding: 5.832% 0;
  }
  /* ----- leadText ----- */
  .leadText {
    font-size: 1.3rem;
  }
  
  /* ----- exText ----- */
  .exText {
    margin-bottom: .5em;
    font-size: 1.6rem;
  }
  
  /* ----- noteText ----- */
  .noteText {
    margin-top: 1.088%;
    padding-left: 1em;
    text-indent: -1em;
    font-size: 1.0rem;
  }
  
  /* ----- noteBox ----- */
  .noteBox {
    margin-top: 8.7%;
    background-color: #fff;
    border: 1px solid #000;
  }
  
  /* ----- pagetopSp ----- */
  .pagetopSp {
    padding: 12.174% 0;
    width: 100%;
    text-align: center;
  }
  .pagetopSp a {
    display: block;
    width: 9.86%;
    margin: 0 auto;
  }
  
  /* ----- show ----- */
  .showPC {
    display: none;
  }
  
  /* ----- JS Support ----- */
  .mainSlideWrap {
    position: relative;
    line-height: 1;
  }
  .slick-dots {
    position: absolute;
    bottom: 4.858%;
    left: 0;
    width: 100%;
    text-align: center;
  }
  .slick-dots > li {
    overflow: hidden;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 0.435%;
    background-color: #fff;
    border-radius: 50%;
    line-height: 1;
    opacity: .6;
  }
  .slick-dots > li.slick-active {
    opacity: 1;
  }
  .slick-dots > li > button {
    display: block;
    width: 10px;
    height: 10px;
    background: none;
    border: none;
    font-size: 0;
    outline: none;
    cursor: pointer;
  }
  [data-parallax] {
    position: relative;
    -webkit-transition: all .5s ease-out 0s;
    transition: all .5s ease-out 0s;
  }
  [data-parallax="false"] {
    opacity: 1;
    top: 0;
  }
  [data-parallax="true"] {
    opacity: 0;
    top: 50px;
  }
  .modalContent {
    display: none;
  }
  #cboxContent {
    background: transparent;
    margin-top: 0;
  }
  #cboxLoadedContent {
    background: transparent;
    border: none;
  }
  .peggy-gallrey_modal-inner {
    position: relative;
    margin: 10px 10%;
    border-radius: 10px;
    padding: 15px;
    background-color: #ffffff;
  }
  #colorbox.peggy-gallrey #cboxNext, #colorbox.peggy-gallrey #cboxPrevious {
    display: block!important;
    position: absolute;
    top: 50%;
    margin-top: -16px;
    background: url(/sp/english/peggy/img/peggy_ic06.png) no-repeat;
    width: 16px;
    height: 32px;
    text-indent: -9999px;
    -webkit-background-size: contain;
    background-size: contain;
  }
  #colorbox.peggy-gallrey #cboxNext {
    transform: rotate(180deg);
    right: 8px;
  }
  #colorbox.peggy-gallrey #cboxPrevious {
    left: 8px;
  }
  #colorbox.peggy-gallrey #cboxClose {
    position: absolute;
    top: 10px;
    right: 3%;
    display: block;
    background: url(/sp/english/peggy/img/peggy_ic07.png) no-repeat;
    width: 18px;
    height: 18px;
    text-indent: -9999px;
    -webkit-background-size: contain;
    background-size: contain;
  }
  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  DUMMY::after {
    display: block;
    clear: both;
    content: "";
  }
}


/* ======================================================
 * SP Media Queries
====================================================== */
/***
@media only screen and (min-width: 320px) and (max-width: 767px) {
}
@media only screen and (max-width: 736px) {
}
@media only screen and (max-width: 667px) {
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 568px) {
}
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 414px) {
}
@media only screen and (max-width: 375px) {
}
@media only screen and (max-width: 360px) {
}
@media only screen and (max-width: 320px) {
}
***/


/* ======================================================
 * Print
====================================================== */
@media print {
  DUMMY {
    opacity: 1;
    transform : translate(0, 0);
  }
}