/* ALL
 -------------------------------- */
.pageWrapper {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

#main {
  padding-top: 76px;
}
@media screen and (max-width: 768px) {
  #main {
    padding-top: 0;
  }
}

.content {
  background: #FFF;
}
@media screen and (max-width: 768px) {
  .content {
    background: #cdcfc7;
    margin-right: 0;
  }
}

.contentIn {
  width: 100%;
  max-width: 1280px;
  padding: 0 25px;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .contentIn {
    max-width: 650px;
    padding: 0 3%;
  }
}

@media screen and (max-width: 768px) {
  .spNrwAjst {
    width: 98%;
    margin: 0 auto;
  }
}

.cLogo {
  padding: 60px 0;
}
@media screen and (max-width: 768px) {
  .cLogo {
    padding: 8% 0;
  }
}

.taL {
  text-align: left;
}

.taC {
  text-align: center;
}

.taR {
  text-align: right;
}

.fwL {
  font-weight: lighter;
}

.fwN {
  font-weight: normal;
}

.fwB {
  font-weight: bold;
}

.fL {
  float: left;
}

.fR {
  float: right;
}

@media screen and (min-width: 769px) {
  .pcfL {
    float: left;
  }
}

@media screen and (min-width: 769px) {
  .pcfR {
    float: right;
  }
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

@media screen and (max-width: 768px) {
  .pcOnly {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .spOnly {
    display: none;
  }
}

.flexBox {
  display: flex;
  justify-content: space-between;
}

.pcFlex {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .pcFlex {
    display: block;
  }
}

.spFlex {
  display: block;
}
@media screen and (max-width: 768px) {
  .spFlex {
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 769px) {
  .shrinkString {
    letter-spacing: -0.05em;
  }
  .shrinkString .shrink {
    display: inline-block;
    margin-right: -0.4em;
  }
}

.textBold {
  font-weight: bold;
}

.dispNon {
  display: none;
}

/* Font
-------------------------------- */
/* color
-------------------------------- */
.clGrn {
  color: #009370;
}

.clPnk {
  color: #E03657;
}

.clOrg {
  color: #F5A200;
}

.clPpl {
  color: #6356A3;
}

.clBlk {
  color: #201716;
}

 /* Title
-------------------------------- */
.ttlStyle00 {
  line-height: 1.4;
  font-size: 32px;
}
@media screen and (max-width: 768px) {
  .ttlStyle00 {
    font-size: 17px;
    padding: 0.5em 0;
  }
}
.ttlStyle01 {
  line-height: 1.4;
  font-size: 32px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .ttlStyle01 {
    font-size: 17px;
    padding: 0.5em 0;
  }
}
.ttlStyle02 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .ttlStyle02 {
    font-size: 18px;
  }
}

/* link
-------------------------------- */
.linkStyle01:hover {
  opacity: 0.75;
  color: #000;
}
.linkStyle02 {
  border-bottom: 1px solid #000;
  margin-left: 20px;
  display: inline-block;
  opacity: 0.75;
  text-decoration: none;
  color: #000;
  font-size: 11px;
}
.linkStyle02:hover {
  border-bottom: 1px solid #CC994D;
}
@media screen and (max-width: 768px) {
  .linkStyle02 {
    margin-right: 10px;
    margin-left: 0;
  }
}

/* icon
-------------------------------- */
.boxIcon01 {
  width: 220px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1002;
}
@media screen and (max-width: 768px) {
  .boxIcon01 {
    width: 74px;
    padding-top: 58px;
    background: #cdcfc7;
  }
}

.linkIcon01 {
  width: 24.64px;
  height: 23.1px;
  display: inline-block;
  vertical-align: middle;
  background-image: url(../img/common/cmn_ico01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.linkIcon01:hover {
  background-image: url(../img/common/cmn_ico02.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.linkIcon02 {
  width: 11.62px;
  height: 22.154px;
  display: inline-block;
  vertical-align: middle;
  background-image: url(../img/common/cmn_ico03.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.linkIcon02:hover {
  background-image: url(../img/common/cmn_ico04.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.linkIcon03 {
  width: 24.64px;
  height: 23.1px;
  display: inline-block;
  vertical-align: middle;
  background-image: url(../img/common/cmn_ico05.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.linkIcon03:hover {
  background-image: url(../img/common/cmn_ico06.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.linkIcon04 {
  width: 220px;
  height: 61px;
  display: block;
  vertical-align: middle;
  background-image: url(../img/common/btn_online_shop.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.linkIcon04:hover {
  background-image: url(../img/common/btn_online_shop_on.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .linkIcon04:hover {
    background-image: url(../img/common/btn_online_shop_sp_on.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}
@media screen and (max-width: 768px) {
  .linkIcon04 {
    width: 74px;
    height: 58px;
    background-image: url(../img/common/btn_online_shop_sp.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}
.linkIcon05 {
  width: 220px;
  height: 61px;
  display: block;
  vertical-align: middle;
  background-image: url(../img/common/btn_online_shop_base.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.linkIcon05:hover {
  background-image: url(../img/common/btn_online_shop_base_on.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .linkIcon05:hover {
    background-image: url(../img/common/btn_online_shop_base_sp_on.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}
@media screen and (max-width: 768px) {
  .linkIcon05 {
    width: 74px;
    height: 58px;
    background-image: url(../img/common/btn_online_shop_base_sp.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

/* images
-------------------------------- */
/* jsScrollFade
-------------------------------- */
.jsSFItem {
  opacity: 0.0;
  transform: scale(1.05) translateX(-10px);
  transition-property: opacity, transform;
  transition-duration: 0.8s;
  transition-timing-function: ease;
}
.fadein .jsSFItem {
  opacity: 1.0;
  transform: none;
}

span.jsSFItem {
  display: inline-block;
}

/* jsScrollFade
-------------------------------- */
.jsImgFadeItem {
  opacity: 0;
  transform: translateY(-50px) scale(1.15);
  transition-property: opacity, transform;
  transition-duration: 3s;
  transition-timing-function: ease;
}
.fadein .jsImgFadeItem {
  opacity: 1;
  transform: translateY(0) scale(1);
}