@charset "UTF-8";
/* ==================================================
ヘッダー
================================================== */
.AboutHdrArea {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}
.AboutHdrArea .imgGlp {
  position: relative;
  line-height: 1;
}
.AboutHdrArea .imgGlp .ttlObj {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* ==================================================
AboutStoryArea
================================================== */
.AboutStoryArea {
  background: #f4f0e7;
}
.ASABlk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ASABlk:nth-of-type(even) {
  flex-direction: row-reverse;
}
.ASABlk .imgObj,
.ASABlk .txtObj {
  width: 90%;
  margin: 0 auto;
  text-align: left;
}
.ASABlk.asablk02 .imgObj {
  width: 50%;
  margin: 0 auto 0 5vw;
}
.ASABlk.asablk03 .imgObj {
  width: 70%;
  margin: 0 auto 0 5vw;
}
.ASABlk.asablk04 .imgObj {
  width: 60%;
  margin: 0 auto 0 5vw;
}
@media screen and (min-width: 961px) {
  .ASABlk.asablk01 .imgObj {
    width: 55%;
    margin: 0 auto 0 0;
  }
  .ASABlk.asablk01 .txtObj {
    width: 40%;
  }
  .ASABlk.asablk02 .imgObj {
    width: 30%;
  }
  .ASABlk.asablk02 .txtObj {
    width: 40%;
  }
  .ASABlk.asablk03 .imgObj {
    width: 40%;
  }
  .ASABlk.asablk03 .txtObj {
    width: 40%;
  }
  .ASABlk.asablk04 .imgObj {
    width: 35%;
  }
  .ASABlk.asablk04 .txtObj {
    width: 40%;
    width: 44%;
    margin: 0 0 0 auto;
  }
}

/* ==================================================
AboutAppsArea
================================================== */
.AboutAppsArea {
  position: relative;
}
.AboutAppsArea::before {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(/about/img/bg.webp);
  background-size: cover;
  opacity: 0;
}
.AboutAppsArea.js-stsAppear::before {
  opacity: 1;
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.AAAMainImgBlk,
.AAAMainTxtBlk,
.AAALastBlk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.AAAMainImgBlk {
  justify-content: flex-end;
  text-align: 1;
}
.AAAMainImgBlk img + img {
  margin: 5vw 5vw 0 auto;
  width: 60%;
}
.AAAMainTxtBlk .imgObj {
  width: 90%;
  margin: 0 auto 5vw;
}
.AAALastBlk .imgObj {
  width: 60%;
  margin: 0 auto 5vw;
}
@media screen and (min-width: 769px) {
  .AAAMainImgBlk img {
    height: 42vw;
    width: auto;
    margin: 0 auto;
  }
  .AAAMainImgBlk img + img {
    margin: 0;
    width: auto;
  }
  .AAAMainTxtBlk .imgObj {
    width: 35%;
    margin: 0 0 0 auto;
  }
  .AAAMainTxtBlk .txtObj {
    width: 40%;
    margin: 0 auto 0 5vw;
    text-align: left;
  }
  .AAAWideImg {
    width: 80%;
    margin: 0 0 0 auto;
  }
  .AAALastBlk {
    flex-direction: row-reverse;
  }
  .AAALastBlk .imgObj {
    width: 40%;
    margin: 0 auto 0 0;
  }
  .AAALastBlk .txtObj {
    width: 40%;
    text-align: right;
    margin: 0 5vw 0 auto;
  }
}

/* ==================================================
AboutSeibunArea
================================================== */
.AboutSeibunArea {
  background: #f4f0e7;
}
.ASACommonBlk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.ASACareBlk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ASACommonBlk .imgObj,
.ASACommonBlk .txtObj,
.ASACareBlk .imgObj,
.ASACareBlk .txtGlp {
  width: 90%;
  margin: 0 auto;
  text-align: left;
}
@media screen and (min-width: 961px) {
  .ASACommonBlk .imgObj {
    width: 45%;
    margin: 0 auto 0 0;
  }
  .ASACommonBlk .txtObj {
    width: 45%;
    text-align: left;
    margin: 0 0 0 auto;
  }
  .ASACareBlk .imgObj {
    width: 40%;
  }
  .ASACareBlk .txtGlp {
    width: 45%;
    text-align: left;
  }
}

.AboutPromiseArea,
.AboutProductArea,
#FtrSct {
  background: #f4f0e7;
}

/* ==================================================
商品一覧
================================================== */
.AboutProductArea .itemLists .itemList.recommended {
  display: block;
}
.AboutProductArea .itemLists .itemList .imgObj {
  height: 50vw;
}
@media screen and (min-width: 769px) {
  .AboutProductArea .itemLists .itemList {
    margin: 0 5vw;
  }
  .AboutProductArea .itemLists .itemList .imgObj {
    height: 50vw;
  }
}
@media screen and (min-width: 961px) {
  .AboutProductArea .itemLists .itemList .imgObj {
    height: 25vw;
  }
}