@charset "UTF-8";
/** PAGE -- TOP
==============================================*/
.inview.slideIn {
  opacity: 0;
  -webkit-transform: translate(0px, 60px);
          transform: translate(0px, 60px);
  transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.inview.slideIn.bottom {
  transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: translate(0px, 120px);
          transform: translate(0px, 120px);
}

.inview.slideIn.animate {
  opacity: 1;
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

.inview.fadeIn {
  opacity: 0;
  transition: opacity 1500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.inview.fadeIn.animate {
  opacity: 1;
}

.chasein.slideIn {
  opacity: 0;
  -webkit-transform: translate(0px, 60px);
          transform: translate(0px, 60px);
  transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.chasein.slideIn.bottom {
  transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: translate(0px, 120px);
          transform: translate(0px, 120px);
}

.chasein.slideIn.animate {
  opacity: 1;
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

.chasein.fadeIn {
  opacity: 0;
  transition: opacity 1500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.chasein.fadeIn.animate {
  opacity: 1;
}

.masker {
  display: inline-block;
  overflow: hidden;
}

.masker .typo {
  -webkit-transform: translate(0, 100%);
          transform: translate(0, 100%);
  transition: -webkit-transform 1600ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 1600ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 1600ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 1600ms cubic-bezier(0.77, 0, 0.175, 1);
}

.masker.animate .typo {
  -webkit-transform: translate(0, 0%);
          transform: translate(0, 0%);
}

body {
  font-size: 16px;
}

.site-main *,
.site-main *:before,
.site-main *:after {
  box-sizing: border-box;
}

.row {
  margin: 0 auto;
  max-width: 1070px;
  padding: 0 25px;
}

.cart__btn {
  font-size: 21px;
}

@media only screen and (max-width: 767px) {
  .cart__btn {
    font-size: 16px;
  }
}

.cart__btn a {
  text-align: center;
  display: block;
  background-color: #FB9AA7;
  background-image: url(../img/ico_cart-wh.png);
  background-repeat: no-repeat;
  background-position: 24px 45%;
  background-size: 7%;
  max-width: 350px;
  border-radius: 8px;
  line-height: 1;
  padding: 1em 0;
  margin: 0 0 0 auto;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .cart__btn a {
    width: 260px;
    margin: 0 auto;
    background-size: 5%;
  }
}

.cart__btn a::after {
  content: "";
  background-image: url(../img/sunscreen/ico-arrow.png);
  width: 12px;
  height: 7px;
  position: absolute;
  top: 50%;
  right: 35px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
  .cart__btn a::after {
    width: 9px;
    height: 5px;
    background-size: 100%;
    right: 22px;
  }
}

.gothic {
  font-family: 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
}

sup {
  vertical-align: top;
  font-size: small;
}
span.sup {
  vertical-align: super;
  font-size: 50%;
}

.section-hero .bgimg {
  opacity: 0;
}





/* =============================================================================
 page reset
============================================================================= */
.wrap {
  overflow: inherit;
}





/* =============================================================================
 header page
============================================================================= */

.site-header {
}
.page--cica .header-wrap:not(.fixed) {
  z-index: 2;
}
.page--cica .header-wrap:not(.fixed) *:not(em) {
  color: #fff !important;
}
.page--cica .header-wrap:not(.fixed) .snsLinks a {
  color: #464646 !important;
}
.page--cica .site-header .header-wrap:not(.fixed) .header-content .header-item .my_menu>li>a img {
  display: none;
}
.page--cica .site-header .header-wrap:not(.fixed) .header-content .header-item .my_menu>li>a:before {
  content: '';
  margin: 0 auto;
  display: block;
  width: 100%;
  height: 30px;
  background: url("../img/cica/ico_sns_w.png") top center no-repeat;
  background-size: contain;
}
.page--cica .site-header .header-wrap:not(.fixed) .header-content .header-item .my_menu>li:nth-child(2) a:before {
  background-image: url("../img/cica/ico_mypage_w.png");
}
.page--cica .site-header .header-wrap:not(.fixed) .header-content .header-item .my_menu>li:nth-child(3) a:before {
  background-image: url("../img/cica/ico_cart_w.png");
}
@media only screen and (min-width: 768px) {
  .page--cica .site-header .header-wrap:not(.fixed) .header-content .site--name {
    margin-top: -1em;
    padding-bottom: .5em;
  }
  .page--cica .site-header .header-wrap:not(.fixed) .header-content .header-item .my_menu>li.menuSNS>a:before {
    width: 42px;
  }
}


@media only screen and (max-width: 767px) {
  .page--cica .site-header .header-wrap:not(.fixed) .header-content .site--name {
    margin-top: -1em;
  }
  .page--cica .site-header .header-wrap:not(.fixed) .header-content .header-item .my_menu>li>a:before {
    min-width: 28px;
    height: 21px;
  }
}

.header-pageanchor {
  padding: 0 190px;
  position: absolute;
  top: 55px;
  left: 50%;
  width: 100%;
  max-width: 1460px;
  transform: translateX(-50%);
}
.fixed .header-pageanchor {
  padding: 0 150px;
  top: 27px;
  max-width: 1380px;
}
.header-pageanchor ul {
  display: flex;
  flex-wrap: wrap;
}
.header-pageanchor ul li {
  line-height: 1.5;
  letter-spacing: .025em;
  font-size: 15px;
  font-weight: bold;
}
.header-pageanchor ul li a {
  display: inline-block;
  color: #222;
}
.header-pageanchor ul li:after {
  margin: 0 3px;
  content: "｜";
}
.header-pageanchor ul li:last-child:after {
  display: none;
}

@media only screen and (max-width: 1080px) {
  .header-pageanchor,
  .fixed .header-pageanchor {
    padding-right: 350px;
  }
  .header-pageanchor ul li {
    letter-spacing: 0;
    font-size: 13px;
  }
}

@media only screen and (max-width: 767px) {
  .header-pageanchor {
    display: none;
    padding: 12px 20px 0 20px;
    top: 83px;
    left: 0;
    width: 100%;
    height: 50px;
    transform: translateX(0);
    overflow-x: auto;
    background-color: #fff;
  }
  .fixed .header-pageanchor {
    display: none;
  }
  .fixed .header-pageanchor {
    padding: 12px 20px 0 20px;
    top: 47px;
    background-color: transparent;
  }
  .header-pageanchor ul {
    display: block;
    white-space: nowrap;
  }
  .header-pageanchor ul li {
    display: inline-block !important;
    font-size: 13px;
  }
  .header-pageanchor ul li:last-child:after {
    display: none;
  }
  .page--tea .site-header .header-wrap.fixed {
    align-items: flex-start;
    height: 100px;
  }
}



.menuSNS {
  position: relative;
}
.menuSNS .snsLinks {
  padding: 5px 0;
  border-radius: 12px;
  display: none;
  position: absolute;
  top: 92px;
  left: -45px;
  width: 156px;
  background-color: #fff;
  box-shadow: 0px 12px 16px 0px rgba(0,0,0,0.1);
}
.menuSNS .snsLinks:before {
    content: "";
    display: block;
    position: absolute;
    top: -12px;
    left: calc(50% - 10px);
    width: 21px;
    height: 12px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAYCAYAAACMcW/9AAABs0lEQVRIic3Wu4oUQRSA4W9XFMRVMDARA0ExEkG8gyIGBj6DqWiiCL6AaKCRgYmZuYiJCgYGXhBZ8YYXdjFQMBAxMzDwzpHerYZx6Jnp7upx/KGiPlX1c07VqZ6KiAM4hMNY6//iMa7hvogox7KIOBIRn2LyzEbE7h43vaLlWBMRdyaoei4ipvu9qkTL7N6cgOTpAT6mFmyrmcEzbPpHp/YB9qNSaJhowQ48xNKx6S3yHdswNyhgesQCT3BmDGL9nB0mqUZGC5bgHvaOSfI5duHXsKA6ogXr8RKrOtNb5Cd24sWowFGlL3mPk924/cX5OpIaZLTkVnrFuuA1tuPHOETX4RVWZ4r+xp50WWtRt/QlH3AqU7LgQhNJLTJachsH20zEG2zFtyaT2opuSGdsecN5Rcn3Ybbphk1LX/IuNemmXGwjKSOj0rP6FFtqxr9NsV/bbNY2o1KzPpbKOYoiG0fbSuaKFjzCpRpxl3E3Z6Oc0pesxHzqsVV8xGZ8ztkkN6MFX3B8yPcTuZILDPqjbjGuVvyxX+lq/S5FZyLiRo/k9YhY0dX6XZzRfjamW1702m7AHzB+NxLDEZtBAAAAAElFTkSuQmCC) 0 0 no-repeat;
  background-size: contain;
  transform: rotate(180deg);
}
.menuSNS .snsLinks .sns {
  padding: 10px 15px;
}
.menuSNS .snsLinks .sns + .sns {
  border-top: 1px #e3e3e3 solid;
}
.menuSNS .snsLinks .sns a {
  font-size: 14px;
  letter-spacing: .1em;
  text-align: left !important;
}
.menuSNS .snsLinks .sns .icon {
  padding: 0 !important;
  width: 38px;
  display: inline-block !important;
  vertical-align: middle;
}
.menuSNS .snsLinks .sns .icon img {
  height: auto !important;
}

@media only screen and (max-width: 767px) {
  .menuSNS {
  }
  .menuSNS .snsLinks {
    padding: 2px 0;
    top: 62px;
    left: -45px;
    width: 126px;
  }
  .menuSNS .snsLinks .sns {
    padding: 6px 10px;
  }
  .menuSNS .snsLinks .sns a {
    font-size: 12px;
  }
  .menuSNS .snsLinks .sns .icon {
    width: 28px;
  }
  .menuSNS .snsLinks .sns .icon img {
    width: 70% !important;
  }
}

.page--tea .site-header .masthead .brand-logo a {
  display: block;
  background: url("../img/cica/logo.svg") 0 0 no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}
.page--tea .site-header .masthead .brand-logo a img {
  opacity: 0 !important;
}





/* =============================================================================
 common
============================================================================= */

@media only screen and (min-width: 768px) {
  .onlySP {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .onlyPC {
    display: none;
  }
}

.site-main {
  color: #484848;
  letter-spacing: .05em;
  font-feature-settings: "palt";
}
.section-content {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  max-width: 1080px;
}

@media only screen and (max-width: 767px) {
  .wrap {
    padding-bottom: 60px;
  }
  .site-main {
    font-size: 13px;
  }
}


.buyBtn {
  opacity: 0;
  pointer-events: none;
  transition: opacity ease .6s;
}
.buyBtn.show {
  opacity: 1;
  pointer-events: all;
}
.buyBtn a {
  padding-top: 13px;
  border-radius: 60px;
  display: block;
  position: relative;
  width: 320px;
  height: 64px;
  color: #fff;
  background-color: #c5c717;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: .1em;
  text-align: center;
}
.buyBtn a:before {
  content: "";
  border-radius: 54px;
  border: 1px #fff solid;
  display: block;
  position: absolute;
  top: 3px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 6px);
  pointer-events: none;
  user-select: none;
}

@media only screen and (max-width: 767px) {
  .buyBtn {
  }
  .buyBtn a {
    padding-top: 14px;
    border-radius: 60px;
    width: 100%;
    height: 60px;
    font-size: 20px;
  }
  #pagetopS {
    bottom: 80px;
  }
}



@media only screen and (min-width: 768px) {
  #pagetop {
    bottom: 20px;
    right: 62px;
  }
}






/* =============================================================================
 hero
============================================================================= */

.section-hero {
  padding-top: 100vh;
  position: relative;
  overflow: hidden;
}
.section-hero .hero {
  position: relative;
}
.section-hero .heroInner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}
.section-hero .hero .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #004d54 url("../img/cica/hero.png") center center no-repeat;
  background-size: cover;
}
.section-hero .hero .section-content {
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 920px;
  width: 100%;
  transform: translate(-50%,-30%);
}
.section-hero .hero .title {
}
.section-hero .hero .madeinjpn {
  margin-top: 35px;
  border: 2px #fff solid;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  color: #fff;
  font-size: 24px;
  letter-spacing: .1em;
  vertical-align: top;
}
.section-hero .hero .shippingfree {
  margin-top: 35px;
  margin-left: 15px;
  border: 2px #c5c717 solid;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  line-height: 1.25;
  color: #fff;
  background-color: #c5c717;
  font-size: 24px;
  letter-spacing: .1em;
  vertical-align: top;
}
.section-hero .hero .scroll {
  padding: 0 80px 0 0;
  position: fixed;
  bottom: 30px;
  right: 50px;
  z-index: 2;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .1em;
  transform-origin: bottom right;
  transform: rotate(-270deg);
}
.section-hero .hero .scroll.bottom {
  position: absolute;
}
.section-hero .hero .scroll span {
  display: block;
  position: absolute;
  top: 14px;
  right: 0;
  width: 60px;
  height: 1px;
  overflow: hidden;
}
.section-hero .hero .scroll span:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background-color: #fff;
  animation: arrowanime 2.2s ease infinite;
}
.section-hero .pageLead {
  padding: 100px 0 135px;
  position: relative;
  height: 969px;
}
.section-hero .pageLead .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAPJCAYAAAA4cfnOAAAAgUlEQVRoge3YMQ6AIBBE0dHs9ey8/yG8ADZUJAaNBoT5Vq9czTeQXbTthyStyo89wCVCKfF9AHgO+38H/BQhzVRm5Lehuv4YOi37kFpjxFrsI2mEyQ4p+4zfjEoJlFDMTBIkUcxMEqAC+50M+Ab2IYGesM8P+ML+pncX9qsqUIGkE/INIjQWt/5aAAAAAElFTkSuQmCC) top left repeat-x;
  background-size: auto 100%;
}
.section-hero .pageLeadInner {
  margin: 0 auto;
  max-width: 650px;
  position: relative;
  z-index: 2;
  text-align: center;
}
.section-hero .pageLead p {
  line-height: 2.44;
  color: #fff;
  font-size: 18px;
  letter-spacing: .02em;
}
.section-hero .pageLead p .sup {
  color: #fff;
}
.section-hero .pageLead p + p {
  margin-top: 20px;
}
.section-hero .pageLead p.notice {
  text-align: right;
  font-size: 12px;
}
.section-hero .pageLead .whatsCica {
  margin: 15px 0 0;
  padding: 65px 60px 70px;
  position: relative;
  background-color: #9eb7b4;
}
.section-hero .pageLead .whatsCica:before {
  content: '';
  border: 1px #fff solid;
  display: block;
  position: absolute;
  top: 12px;
  left: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  pointer-events: none;
  user-select: none;
}
.section-hero .pageLead .whatsCica:after {
  content: '';
  display: block;
  position: absolute;
  right: 3px;
  bottom: -56px;
  width: 205px;
  height: 140px;
  background: url("../img/cica/lead_img_01.png") 0 0 no-repeat;
  background-size: contain;
}
.section-hero .pageLead .whatsCica .title {
  margin: 0 0 30px;
  padding: 0 0 25px;
  position: relative;
  color: #fff;
  font-size: 40px;
}
.section-hero .pageLead .whatsCica .title:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, rgba(158,183,180,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 70%, rgba(158,183,180,1) 100%);
}
.section-hero .pageLead .whatsCica p {
  line-height: 1.88;
  font-size: 16px;
  text-align: left;
  letter-spacing: .05em;
}
@keyframes arrowanime {
  0%, 6% {
    transform: translateX(-100%); }
  33%, 66% {
    transform: translateX(0); }
  94%, 100% {
    transform: translateX(100%); } }
@media only screen and (max-width: 1360px) {
}
@media only screen and (max-width: 767px) {
  .section-hero .heroInner {
  }
  .section-hero .hero .image {
    background: url("../img/cica/hero_sp.png") bottom center no-repeat;
    background-size: cover;
  }
  .section-hero .hero .section-content {
    display: flex;
    display: none !important;
    flex-direction: column-reverse;
    position: absolute;
    top: auto;
    bottom: 95px;
    left: calc(48/750*100vw);
    width: calc(654/750*100vw);
    transform: translate(0);
  }
  .section-hero .hero .title {
    margin: 20px auto 0;
    width: calc(528/750*100vw);
  }
  .section-hero .hero .madeinjpn {
    margin-top: 0;
    width: 85px;
    height: 85px;
    font-size: 15px;
  }
  .buyBtn {
    position: fixed;
    left: calc(48/750*100vw);
    bottom: 15px;
    width: calc(654/750*100vw);
    z-index: 5;
  }
  .section-hero .hero .scroll {
    padding: 0 40px 0 0;
    bottom: 50px;
    right: calc(48/750*100vw);
    font-size: 10px;
  }
  .section-hero .hero .scroll span {
    top: 9px;
    width: 30px;
  }
  .section-hero .hero .scroll span:after {
    width: 30px;
  }
  .section-hero .pageLead {
    padding: 50px calc(48/750*100vw) 95px;
    height: auto;
  }
  .section-hero .pageLead .bg {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAZUCAYAAAAghmj3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFF2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDYgNzkuZGFiYWNiYiwgMjAyMS8wNC8xNC0wMDozOTo0NCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjQgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMS0wNS0yNVQxNjozMjo1MyswOTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDUtMjVUMTY6MzM6MDQrMDk6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDUtMjVUMTY6MzM6MDQrMDk6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTU2ZDE0M2QtMDdmNC1lMjQ0LWE4MTMtODQ4OTI1ZTJjZjVkIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU1NmQxNDNkLTA3ZjQtZTI0NC1hODEzLTg0ODkyNWUyY2Y1ZCIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjU1NmQxNDNkLTA3ZjQtZTI0NC1hODEzLTg0ODkyNWUyY2Y1ZCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTU2ZDE0M2QtMDdmNC1lMjQ0LWE4MTMtODQ4OTI1ZTJjZjVkIiBzdEV2dDp3aGVuPSIyMDIxLTA1LTI1VDE2OjMyOjUzKzA5OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjIuNCAoV2luZG93cykiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YXjmWQAAAGdJREFUWIXt2LEJACEQRNHh+jOz/yKugbUBA+Hkdpf5yYuF+YIojfk+kgS2RGSfACATbgD8S+vgIv0ETvRKhTacO2B9v82rU75JRv5O+ZFZ+hI9lmZud/hTANoAugI4hYC3NHr0wmUWETsnIVTvFskAAAAASUVORK5CYII=) bottom left repeat-x;
    background-size: auto 100%;
  }
  .section-hero .pageLeadInner {
    max-width: inherit;
  }
  .section-hero .pageLead p {
    line-height: 2;
    font-size: 15px;
  }
  .section-hero .pageLead p + p {
    margin-top: 1.67em;
  }
  .section-hero .pageLead p.notice {
    margin-top: 3.5em;
    font-size: 10px;
  }
  .section-hero .pageLead .whatsCica {
    margin: 5px 0 0;
    padding: 45px calc(65/750*100vw) 55px;
  }
  .section-hero .pageLead .whatsCica:before {
    top: 7px;
    left: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
  }
  .section-hero .pageLead .whatsCica:after {
    bottom: -36px;
    width: 142px;
    height: 96px;
  }
  .section-hero .pageLead .whatsCica .title {
    margin: 0 0 18px;
    padding: 0 0 12px;
    font-size: 23px;
  }
  .section-hero .pageLead .whatsCica p {
    font-size: 13px;
  }
}
@media only screen and (max-device-width: 767px) and (orientation: landscape) {
  .section-hero .hero .image {
    background-position: top center;
    background-size: 100% auto;
  }
  .section-hero .hero .section-content {
    top: auto;
    bottom: 100px;
    max-width: 330px;
  }
  .section-hero .hero .section-content .title {
    max-width: 330px;
  }
}
@media only screen and (max-width: 375px) {
  .section-hero .pageLead {
    padding: calc(100/750*100vw) calc(48/750*100vw) calc(190/750*100vw);
  }
  .section-hero .pageLead p {
    font-size: calc(30/750*100vw);
  }
  .section-hero .pageLead p.notice {
    font-size: calc(20/750*100vw);
  }
}





/* =============================================================================
 about
============================================================================= */

.section-about {
  padding: 120px 0;
  position: relative;
  background-color: #fff;
}
.section-about .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.section-about .bg span {
  content: '';
  display: block;
  position: sticky;
  top: 0;
  width: 100%;
  height: 1395px;
  background: url("../img/cica/bg_about.png") top center no-repeat;
  background-size: cover;
}
.section-about .forTrouble {
  margin: 0 auto 100px;
  padding: 60px 80px 25px;
  border-top: 8px #004d54 solid;
  border-bottom: 8px #004d54 solid;
  position: relative;
  max-width: 1080px;
  background-color: #fff;
}
.section-about .forTrouble:before {
  content: '';
  border-top: 4px #004d54 solid;
  border-bottom: 4px #004d54 solid;
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: calc(100% - 8px);
  pointer-events: none;
}
.section-about .forTrouble .title {
  margin: 0 0 45px;
  color: #004d54;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}
.section-about .forTrouble ul {
  margin: 0 0 50px;
  border-top: 2px #c7d6d4 dotted;
  display: flex;
  flex-wrap: wrap;
}
.section-about .forTrouble ul li {
  padding: 20px 25px;
  border-bottom: 2px #c7d6d4 dotted;
  display: flex;
  align-items: center;
  width: 50%;
}
.section-about .forTrouble ul li:nth-child(even) {
  border-left: 2px #c7d6d4 dotted;
}
.section-about .forTrouble ul li .check {
  margin-right: 30px;
  border: 2px #004d54 solid;
  position: relative;
  width: 26px;
  height: 26px;
}
.section-about .forTrouble ul li .check img {
  position: absolute;
  top: -4px;
  left: -6px;
  width: 38px;
  max-width: inherit;
}
.section-about .forTrouble ul li p {
  line-height: 1.5;
  color: #004d54;
  font-size: 20px;
  letter-spacing: .1em;
}
.section-about .forTrouble ul li p span {
  color: #004d54;
}
.section-about .forTrouble .notice p {
  margin-top: 15px;
  color: #004d54;
  font-size: 12px;
  letter-spacing: .1em;
  text-align: right;
}
.section-about .brandInfo {
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  max-width: 1080px;
}
.section-about .brandInfo .titleArea {
  width: calc(100% - 244px);
  letter-spacing: .12em;
}
.section-about .brandInfo .tagline {
  margin-bottom: 10px;
  color: #86c1c2;
  font-size: 30px;
}
.section-about .brandInfo .title {
  margin-bottom: 56px;
  line-height: 1.25;
  color: #86c1c2;
  font-size: 40px;
}
.section-about .brandInfo .brandLogo {
  margin-bottom: 56px;
  width: 234px;
}
.section-about .brandInfo p {
  width: calc(100% - 244px);
  line-height: 1.8;
  font-size: 20px;
  letter-spacing: .12em;
}
.section-about .brandInfo .btnMore {
  width: 234px;
  text-align: center;
}
.section-about .brandInfo .btnMore a {
  padding: 6px 0 0;
  border-radius: 20px;
  display: inline-block;
  position: relative;
  width: 180px;
  height: 40px;
  color: #484848;
  background-color: #afddde;
  font-size: 18px;
  text-decoration: none;
  transition: opacity ease .3s;
}
.section-about .brandInfo .btnMore a:after {
  content: '';
  display: block;
  position: absolute;
  top: 16px;
  right: 18px;
  border-top: 1px #484848 solid;
  border-right: 1px #484848 solid;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}
.section-about .brandInfo .btnMore a:hover {
  opacity: .7;
}

@media only screen and (max-width: 767px) {
  .section-about {
    padding: 75px calc(48/750*100vw);
  }
  .section-about .bg span {
    height: calc(2318/750*100vw);
    background-image: url("../img/cica/bg_about_sp.png");
  }
  .section-about .forTrouble {
    margin: 0 auto 45px;
    padding: 30px calc(48/750*100vw) 4px;
    border-width: 4px;
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 1080px;
    background-color: #fff;
  }
  .section-about .forTrouble:before {
    border-width: 2px;
    top: 2px;
    height: calc(100% - 4px);
  }
  .section-about .forTrouble .title {
    margin: 0 0 20px;
    line-height: 1.27;
    font-size: 30px;
    order: 1;
  }
  .section-about .forTrouble ul {
    margin: 0 0 35px;
    display: block;
    order: 2;
  }
  .section-about .forTrouble ul li {
    padding: 12px 10px 12px 5px;
    width: 100%;
  }
  .section-about .forTrouble ul li:nth-child(even) {
    border-left: none;
  }
  .section-about .forTrouble ul li .check {
    margin-right: 15px;
    width: 18px;
    height: 18px;
  }
  .section-about .forTrouble ul li .check img {
    left: -4px;
    width: 26px;
  }
  .section-about .forTrouble ul li p {
    line-height: 1.33;
    font-size: 15px;
  }
  .section-about .forTrouble .notice {
    margin-bottom: 7px;
    order: 3;
  }
  .section-about .forTrouble .notice p {
    margin-top: 0;
    font-size: 10px;
  }
  .section-about .forTrouble .image {
    margin: 0 calc(-48/750*100vw);
    order: 4;
  }
  .section-about .brandInfo {
    margin: 0 auto;
    padding: 0;
    display: block;
  }
  .section-about .brandInfo .titleArea {
    width: auto;
    text-align: center;
  }
  .section-about .brandInfo .tagline {
    margin-bottom: 5px;
    font-size: 20px;
  }
  .section-about .brandInfo .title {
    margin-bottom: 25px;
    font-size: 30px;
    letter-spacing: 0;
  }
  .section-about .brandInfo .brandLogo {
    margin: 0 auto 25px;
    width: calc(260/750*100vw);
  }
  .section-about .brandInfo p {
    margin: 0 0 20px;
    width: auto;
    line-height: 1.67;
    font-size: 15px;
    letter-spacing: .12em;
    text-align: center;
  }
  .section-about .brandInfo .btnMore {
    width: auto;
  }
  .section-about .brandInfo .btnMore a {
    padding: 3px 0 0;
    border-radius: 15px;
    width: 140px;
    height: 30px;
    font-size: 15px;
  }
  .section-about .brandInfo .btnMore a:after {
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
  }
}







/* =============================================================================
 item
============================================================================= */
.bgF {
  position: relative;
  z-index: 2;
  background-color: #fff;
}
.section-item {
  margin: 0 auto;
  padding: 130px 0 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  max-width: 1080px;
}
.section-item .itemImg {
  margin-right: 5%;
  width: 50%;
  text-align: center;
  pointer-events: none;
}
.section-item .itemData {
  padding-left: 20px;
}
.section-item .itemCharacters {
  margin-left: -20px;
}
.section-item .itemTxt {
  margin: 10px 0;
  line-height: 1.5;
  font-size: 20px;
  font-weight: bold;
}
.section-item.item01 {
  margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
  .section-item {
    padding-top: 100%;
    display: block;
    position: relative;
  }
  .section-item .itemImg {
    margin-right: 0;
    position: relative;
    z-index: 2;
    width: 100%;
  }
  .section-item .itemData {
    padding: 0 calc(48/750*100vw);
  }
  .section-item .itemCharacters {
    margin: 0;
    position: absolute;
    top: calc(150/750*100vw);
    left: 0;
    width: 100%;
    text-align: center;
  }
  .section-item .itemCharacters img {
    width: calc(672/750*100%);
  }
  .section-item .itemTxt {
    margin: calc(-170/750*100vw) 0 15px;
    line-height: 2;
    font-size: 15px;
    text-align: center;
  }
  .section-item.item01 {
    margin-bottom: 70px;
  }
  .section-item .buyBtn {
    position: static;
  }
}








/* =============================================================================
 approach
============================================================================= */

.section-approach {
}
.section-approach .tagline {
  line-height: 1.87;
  color: #004d54;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: .12em;
  text-align: center;
}
.section-approach .sectionTitle {
  margin: 10px 0 30px;
  color: #004d54;
  font-size: 50px;
  font-weight: bold;
  letter-spacing: .1em;
  text-align: center;
}
.section-approach .approachNav {
  background-color: #004d54;
}
.section-approach .approachNav ul {
  margin: 0 auto;
  border-left: 1px #142a28 solid;
  border-right: 1px #046a61 solid;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  max-width: 1080px;
}
.section-approach .approachNav ul li {
  width: 50%;
}
.section-approach .approachNav ul li:nth-child(1) {
  border-left: 1px #046a61 solid;
  border-right: 1px #142a28 solid;
  border-bottom: 1px #142a28 solid;
}
.section-approach .approachNav ul li:nth-child(2) {
  border-left: 1px #046a61 solid;
  border-right: 1px #142a28 solid;
  border-bottom: 1px #142a28 solid;
}
.section-approach .approachNav ul li:nth-child(3) {
  border-left: 1px #046a61 solid;
  border-right: 1px #142a28 solid;
  border-top: 1px #046a61 solid;
}
.section-approach .approachNav ul li:nth-child(4) {
  border-left: 1px #046a61 solid;
  border-right: 1px #142a28 solid;
  border-top: 1px #046a61 solid;
}
.section-approach .approachNav ul li a {
  display: flex;
  align-items: center;
  height: 70px;
  color: #fff;
  text-decoration: none;
}
.section-approach .approachNav ul li .num {
  margin-right: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 78px;
  color: rgba(255,255,255,.3);
  font-size: 30px;
}
.section-approach .approachNav ul li .num:before {
  content: '';
  display: inline-block;
  width: 23px;
  height: 1px;
  background-color: rgba(255,255,255,.3);
}
.section-approach .approachNav ul li .labelName {
  width: calc(100% - 166px);
}
.section-approach .approachNav ul li .labelName p {
  color: #fff;
  font-size: 24px;
}
.section-approach .approachNav ul li .labelName p .sup {
  color: #fff;
}
.section-approach .approachNav ul li .labelName p.notice {
  position: absolute;
  bottom: -25px;
  right: 0;
  color: #004d54;
  font-size: 12px;
}
.section-approach .approachNav ul li .icon {
  width: 60px;
}

@media only screen and (max-width: 767px) {
  .section-approach .tagline {
    line-height: 1.4;
    font-size: 20px;
  }
  .section-approach .sectionTitle {
    line-height: 1.33;
    font-size: 30px;
  }
  .section-approach .approachNav ul {
    margin: 0 auto;
    border: none;
    display: block;
  }
  .section-approach .approachNav ul li {
    border-top: 1px #046a61 solid !important;
    border-bottom: 1px #142a28 solid !important;
    border-left: none !important;
    border-right: none !important;
    width: 100%;
  }
  .section-approach .approachNav ul li a {
    height: 74px;
  }
  .section-approach .approachNav ul li .num {
    margin-right: 18px;
    width: 48px;
    font-size: 22px;
  }
  .section-approach .approachNav ul li .num:before {
    width: 13px;
    height: 1px;
  }
  .section-approach .approachNav ul li .labelName {
    position: relative;
    width: calc(100% - 116px);
  }
  .section-approach .approachNav ul li .labelName p {
    color: #fff;
    font-size: 20px;
  }
  .section-approach .approachNav ul li .labelName p .sup {
    color: #fff;
  }
  .section-approach .approachNav ul li .labelName p.notice {
    bottom: auto;
    right: auto;
    top: 28px;
    left: 0;
    color: rgba(255,255,255,.6);
    font-size: 10px;
  }
  .section-approach .approachNav ul li .icon {
    width: 40px;
  }
  .section-approach .approachNav ul li .icon img {
    width: 25px;
  }
}






.section-approach .approachWrap {
  padding: 100px 0 140px;
  position: relative;
  background-color: #dedade;
}
.section-approach .approachWrap .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.section-approach .approachWrap .bg span {
  content: '';
  display: block;
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 1275px;
  min-height: 100vh;
  background: url("../img/cica/bg_approach.png") top center no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 767px) {
  .section-approach .approachWrap {
    padding: 45px calc(48/750*100vw) 20px;
  }
  .section-approach .approachWrap .bg span {
    height: calc(1398/750*100vw);
    background-image: url("../img/cica/bg_approach_sp.png");
  }
}



.approachBox {
  margin: 0 auto 60px;
  padding: 70px 80px 100px;
  max-width: 1080px;
  position: relative;
  z-index: 5;
  background-color: #fff;
  box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.3);
}
.approachBox .num {
  margin: 0 -80px 30px;
  display: flex;
  align-items: center;
  color: #004d54;
  font-size: 59px;
  font-weight: bold;
  letter-spacing: .1em;
}
.approachBox .num:before {
  content: '';
  margin-right: 55px;
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: #034640;
}
.approachBox .title {
  line-height: 1.35;
  color: #004d54;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: .1em;
}
.approachBox .title .sup {
  color: #004d54;
}
.approachBox .boxLead {
  margin: 20px 0 50px;
  color: #004d54;
}
.approachBox .labelName {
  margin: 45px 0 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}
.approachBox .labelName:before,
.approachBox .labelName:after {
  margin: 0 15px;
  content: '';
  display: block;
  width: 18px;
  height: 1px;
}
@media only screen and (max-width: 767px) {
  .approachBox {
    margin-bottom: 30px;
    padding: 40px calc(48/750*100vw) 0 !important;
  }
  .approachBox .num {
    margin: 0 calc(-48/750*100vw) 20px;
    font-size: 25px;
  }
  .approachBox .num:before {
    content: '';
    margin-right: 55px;
    display: inline-block;
    width: 25px;
    height: 2px;
    background-color: #034640;
  }
  .approachBox .title {
    line-height: 1.5;
    font-size: 20px;
  }
  .approachBox .boxLead {
    margin: 20px 0 40px;
  }
  .approachBox .labelName {
    margin: 25px 0;
    font-size: 15px;
  }
  .approachBox .labelName:before,
  .approachBox .labelName:after {
    margin: 0 10px;
    width: 14px;
  }
  .approachBox .moreBtn,
  .approachBox .closeBtn {
    width: 100%;
  }
  .approachBox .moreBtn span,
  .approachBox .closeBtn span {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #004d54;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
  }
  .approachBox .moreBtn span:after,
  .approachBox .closeBtn span:after {
    margin-left: 10px;
    content: '';
    display: inline-block;
    width: calc(50/750*100vw);
    height: calc(50/750*100vw);
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAADE0lEQVRogdWay27TQBSGv0zSJmlpI0CASrkKEBJixZJ3YMcCBCx4EV6Dd2i7Q+IlAKmlFe9QiUsvpG0akqCJ/oksN3aceBzbn2RVU3vG558zl3OcqfDiJZ6oAnVgAaipbICKmh8AfaAH/AO6QEfl1NRSNmCNXQKaCdqqSFhNgh1W1ClwkkbUrEJsr1+SgLRYG1Z0WUF/5a1MhdgeXZUXsqCpy3rnSEPRuxD7gpbEZI3tqAZwKC95EVKRF5bnICCI7bDLwKK8M5j0cBxWxJUcRARZlg2VuIfihNiKV0MrTF7UZUukmCghzhOLBRDhWIzzTJSQ1YJ4Ikxdtl1gnJBmznNiEsvj9q+wkKqW2KLTkq2RQlbntE+kxYSHWNDoBU8hx7xoyuYLQlZKJMIxstkJqSokKBsNN1eckKyCwHmwFBRSprkRZmi7kWvSJlhx3AU+6W8WDLNRk/EOfgfYBJ4BWypnQd0ElzDP3JKIdeAMuKny7QzetWAyGlbrMtqK+Qo8B76ovKH7PqmZ8FbvgTWJsMPoG/AW2AfeqeyG25rHd1Z9C1nTXLAText4Axzr3rHK27q/5VGMMZMyrym4oZ6+B+wArwIiHMf6/46e21S9tFR8BYjXZdR9YBd4PUZEWMyunt9U/VSYSUl9Aq7JmAfAnow8nFDtSM/tqd6G2pmVgfHwyfIj8BD4IU8cJKx3IDG23iO1Myv9Ko+fNFIuwd8l5D3we8q6dn/5DDwFPgA/Z7Shaz9itwqe2iahbWb5zlpAukaf9stOxwR+rygr1vae20cSfSguKEPbnZCTEgsZ2u6E9LQUlo0ztw8GQ5SokKLIjGwOCumWbK6cBreOcNA41c9dOdKXrSPCQnoJAr4icBiOEceF8dZl7QKLaI+bAlH5yFFBd/xOeEg5ooQMFMmeZ25acs5l09j8KS5DtBV+FcQzHdkSmQROSnWdZ/KcM+04TziSJFQDrRLnczwwgJZYrwcGHKdycZZHOByZHuFADR/I3b4O1QSZ26Eah33RH/Va0mNOUeR6zMlhX2wDN3vld/AM+A9qsqhSGfjKzgAAAABJRU5ErkJggg==) 0 0 no-repeat;
    background-size: contain;
  }
  .approachBox .closeBtn {
    padding: 30px 0;
  }
  .approachBox .moreBtn {
    padding: 65px 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 50%, #fff 100%);
  }
  .approachBox .moreBtn span:after {
    transform: rotate(180deg);
  }
  .approachBox:not(.opened) {
    max-height: 500px;
    overflow: hidden;
  }
  .approachBox.opened .moreBtn {
    display: none;
  }
}



.approach01 .images {
  display: flex;
  justify-content: space-between;
}
.approach01 .images .image {
  width: calc(446/920*100%);
}
.approach01 .caption {
  margin: 15px 0 0;
}
.approach01 .notice {
  margin: 25px 0 60px;
  padding: 0 0 15px;
  border-bottom: 1px #cedbe0 dashed;
  text-align: right;
}
.approach01 .notice p {
  font-size: 12px;
}
.approach01 .column {
  overflow: hidden;
}
.approach01 .column .image {
  float: left;
  width: calc(420/920*100%);
}
.approach01 .column .columnTitle {
  float: right;
  width: 50%;
  line-height: 1.58;
  color: #004d54;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: .1em;
}
.approach01 .column .columnInfo {
  margin: 25px 0 20px;
  border: 1px #205d7a solid;
  display: flex;
  float: right;
  width: 50%;
  letter-spacing: .1em;
}
.approach01 .column .columnInfo .columnInfoLabel {
  padding: 6px 25px;
  color: #fff;
  background-color: #205d7a;
  font-weight: bold;
}
.approach01 .column .columnInfo .columnInfoText {
  padding: 6px 25px;
  color: #004d54;
  text-align: center;
  font-weight: bold;
}
.approach01 .column p {
  float: right;
  width: 50%;
  letter-spacing: .025em;
}
@media only screen and (max-width: 767px) {
  .approach01 .images {
    display: block;
  }
  .approach01 .images .image {
    width: 100%;
  }
  .approach01 .caption {
    margin: 10px 0 0;
    font-size: 12px;
  }
  .approach01 .notice {
    margin: 5px 0 25px;
    padding: 0 0 5px;
  }
  .approach01 .notice p {
    font-size: 10px;
  }
  .approach01 .column {
    display: flex;
    flex-direction: column;
  }
  .approach01 .column .image {
    margin: 15px 0;
    float: none;
    width: 100%;
    order: 2;
  }
  .approach01 .column .columnTitle {
    float: none;
    width: 100%;
    font-size: 15px;
    order: 1;
    text-align: center;
  }
  .approach01 .column .columnInfo {
    margin: 0 0 10px;
    display: block;
    float: none;
    width: 100%;
    order: 3;
    font-size: 13px;
  }
  .approach01 .column .columnInfo .columnInfoLabel,
  .approach01 .column .columnInfo .columnInfoText {
    padding: 4px 0;
    text-align: center;
  }
  .approach01 .column p {
    float: none;
    width: 100%;
    order: 4;
  }
}



.approach02 {
  padding-bottom: 50px;
}
.approach02 .plantsTitle {
  line-height: 60px;
  color: #fff;
  background-color: #205d7a;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: .1em;
  text-align: center;
}
.approach02 .labelName {
  color: #205d7a;
}
.approach02 .labelName:before,
.approach02 .labelName:after {
  background-color: #205d7a;
}
.approach02 ul {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.approach02 ul li {
  margin: 0 calc(30/920*100%) 50px;
  width: calc(170/920*100%);
}
.approach02 ul li .image {
  margin: 0 auto;
  width: calc(152/170*100%);
}
.approach02 ul li .name {
  margin: 15px 0 10px;
  line-height: 1.38;
  color: #205d7a;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
.approach02 ul li p {
  line-height: 1.38;
}
.approach02 .plants-oil .plantsTitle {
  margin-top: 20px;
  background-color: #c9654e;
}
.approach02 .plants-oil .labelName {
  color: #c9654e;
}
.approach02 .plants-oil .labelName:before,
.approach02 .plants-oil .labelName:after {
  background-color: #c9654e;
}
.approach02 .plants-oil ul {
  max-width: 690px;
}
.approach02 .plants-oil ul li {
  margin: 0 calc(30/690*100%) 50px;
  width: calc(170/690*100%);
}
.approach02 .plants-oil ul li .name {
  color: #c9654e;
}
@media only screen and (max-width: 767px) {
  .approach02 {
    padding-bottom: 50px;
  }
  .approach02 .plantsTitle {
    margin: 0 calc(-48/750*100vw);
    line-height: 40px;
    font-size: 18px;
  }
  .approach02 ul {
    margin: 0 auto;
    justify-content: space-between;
  }
  .approach02 ul li {
    margin: 0 0 25px !important;
    width: calc(255/750*100vw) !important;
  }
  .approach02 ul li .image {
    margin: 0 auto;
    width: calc(152/170*100%);
  }
  .approach02 ul li .name {
    margin: 15px 0 10px;
    font-size: 13px;
    letter-spacing: 0;
  }
  .approach02 ul li p {
    font-size: 12px;
  }
  .approach02 .plants-oil ul {
    max-width: inherit;
  }
}



.approach03 .salesPoints {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.approach03 .salesPoint {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  width: calc(450/920*100%);
}
.approach03 .salesPointTitle {
  width: 100%;
  line-height: 60px;
  color: #fff;
  background-color: #ccc85c;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.approach03 .labelName {
  margin: 45px 0 50px;
  color: #ccc85c;
}
.approach03 .labelName:before,
.approach03 .labelName:after {
  background-color: #ccc85c;
}
.approach03 .componetInfo {
  width: 45%;
}
.approach03 .componetInfo .componetInfoLabel {
  margin: 0 0 10px;
  color: #ccc85c;
  font-weight: bold;
  text-align: center;
}
.approach03 .componetInfo .componetInfoText {
  line-height: 1.38;
}
.approach03 .notice {
  margin: 25px 0 15px;
  text-align: right;
}
.approach03 .notice p {
  color: #004d54;
  font-size: 12px;
}
.approach03 .salesPoint:nth-child(2) .salesPointTitle,
.approach03 .salesPoint:nth-child(2) .labelName:before,
.approach03 .salesPoint:nth-child(2) .labelName:after {
  background-color: #c28b2b;
}
.approach03 .salesPoint:nth-child(2) .labelName,
.approach03 .salesPoint:nth-child(2) .componetInfo .componetInfoLabel {
  color: #c28b2b;
}
@media only screen and (max-width: 767px) {
  .approach03 .salesPoints {
    display: block;
  }
  .approach03 .salesPoint {
    width: 100%;
  }
  .approach03 .salesPoint + .salesPoint {
    margin-top: 40px;
  }
  .approach03 .salesPointTitle {
    margin: 0 calc(-48/750*100vw);
    width: calc(100% + 96/750*100vw);
    line-height: 40px;
    font-size: 18px;
  }
  .approach03 .labelName {
    margin: 25px 0;
  }
  .approach03 .componetInfo {
    width: 47%;
  }
  .approach03 .componetInfo .componetInfoLabel {
    margin: 0 0 10px;
    font-size: 13px;
    letter-spacing: 0;
  }
  .approach03 .componetInfo .componetInfoText {
    font-size: 12px;
  }
  .approach03 .notice {
    margin: 15px 0 5px;
  }
  .approach03 .notice p {
    font-size: 10px;
  }
}



.approach04 .labelName {
  margin: 45px 0 25px;
  color: #004d54;
}
.approach04 .labelName:before,
.approach04 .labelName:after {
  background-color: #004d54;
}
@media only screen and (max-width: 767px) {
  .approach04 .labelName {
    margin: 40px 0 15px;
  }
}





/* =============================================================================
 skincare
============================================================================= */

.skincare {
  padding: 100px 0 0;
  width: 100%;
  height: 586px;
  background: url("../img/cica/bg_aroma.png") top center no-repeat;
  background-size: cover;
  text-align: center;
}
.skincare .title {
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.skincare p {
  margin: 60px 0;
  line-height: 2.25;
  color: #fff;
  font-weight: bold;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.skincare .btnDetail {
}
.skincare .btnDetail span {
  border: 1px #fff solid;
  border-radius: 30px;
  display: inline-block;
  width: 240px;
  height: 60px;
  line-height: 58px;
  color: #fff;
  background-color: rgba(255,255,255,.2);
  font-size: 20px;
  font-weight: bold;
}
.skincare .oils {
  margin: 30px 0 0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
@media only screen and (max-width: 767px) {
  .skincare {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: calc(859/750*100vw);
    background-image: url("../img/cica/bg_aroma_sp.png");
  }
  .skincare .title {
    line-height: 1.27;
    font-size: 30px;
  }
  .skincare p {
    margin: 30px 0;
    line-height: 1.77;
    font-size: 13px;
  }
  .skincare .btnDetail {
  }
  .skincare .btnDetail span {
    border-radius: 15px;
    width: 160px;
    height: 30px;
    line-height: 28px;
    font-size: 13px;
  }
  .skincare .oils {
    margin: 15px 0 0;
    font-size: 15px;
  }
}





/* =============================================================================
 explanation
============================================================================= */

.section-explanation {
  padding: 100px 0 130px;
}
.section-explanation .forScene {
  margin: 0 auto 90px;
  padding: 80px;
  display: flex;
  align-items: center;
  max-width: 1080px;
  background-color: #edf2f3;
}
.section-explanation .forScene .title {
  width: 380px;
  color: #004d54;
  font-size: 40px;
  font-weight: bold;
}
.section-explanation .forScene ul {
  border-top: 1px #adc2c1 solid;
  width: calc(100% - 380px);
}
.section-explanation .forScene ul li {
  padding: 12px 20px 10px;
  border-bottom: 1px #adc2c1 solid;
  line-height: 1.36;
  color: #004d54;
  font-size: 22px;
}
.section-explanation .howto {
  margin: 0 auto;
  padding: 80px 80px 65px;
  border: 10px #004d54 solid;
  position: relative;
  max-width: 1080px;
}
.section-explanation .howto:before {
  content: '';
  display: block;
  border: 4px #004d54 solid;
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  pointer-events: none;
  user-select: none;
}
.section-explanation .howto .title {
  color: #004d54;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}
.section-explanation .howto>p {
  margin: 25px 0 40px;
  line-height: 1.88;
  color: #004d54;
  text-align: center;
}
.section-explanation .howto .useFlow {
  display: flex;
  justify-content: center;
}
.section-explanation .howto .useFlow li {
  margin: 0 calc(20/900*100%);
  position: relative;
  width: calc(120/900*100%);
  text-align: center;
}
.section-explanation .howto .useFlow li:before {
  content: '';
  margin-top: calc(54/120*100%);
  display: block;
  border-top: 2px #004d54 solid;
  border-right: 2px #004d54 solid;
  position: absolute;
  top: 0;
  left: calc(-10/120*100% - 12px);
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}
.section-explanation .howto .useFlow li:first-child:before {
  display: none;
}
.section-explanation .howto .useFlow li .image {
}
.section-explanation .howto .useFlow li .name {
  padding-top: .5em;
  line-height: 1.25;
  color: #004d54;
}
.section-explanation .howto .useInfo {
  margin: 50px 0 30px;
  padding: 30px 0;
  border-top: 2px #004d54 dotted;
  border-bottom: 2px #004d54 dotted;
  display: flex;
  align-items: center;
}
.section-explanation .howto .useInfo .icon {
  margin-right: 44px;
  width: 196px;
}
.section-explanation .howto .useInfo ul {
  width: calc(100% - 260px);
}
.section-explanation .howto .useInfo ul li {
  padding-left: 1.5em;
  text-indent: -1.5em;
  line-height: 1.88;
  color: #004d54;
}
.section-explanation .howto .useInfo ul li .num {
  font-weight: bold;
}
.section-explanation .howto .usePoint {
  display: flex;
  align-items: center;
}
.section-explanation .howto .usePoint .icon {
  margin-right: 20px;
  width: 72px;
}
.section-explanation .howto .usePoint p {
  width: calc(100% - 112px);
  line-height: 1.88;
  color: #004d54;
}
@media only screen and (max-width: 767px) {
  .section-explanation {
    padding: 0;
  }
  .section-explanation .forScene {
    margin: 0;
    padding: 60px calc(48/750*100vw);
    display: block;
    text-align: center;
  }
  .section-explanation .forScene .title {
    margin: 0 0 50px;
    width: auto;
    font-size: 30px;
  }
  .section-explanation .forScene ul {
    width: 100%;
  }
  .section-explanation .forScene ul li {
    padding: 12px 0 10px;
    line-height: 1.5;
    font-size: 20px;
  }
  .section-explanation .howto {
    margin: 0;
    padding: 45px calc(48/750*100vw) 35px;
  }
  .section-explanation .howto:before {
    border-width: 2px;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
  }
  .section-explanation .howto .title {
    color: #004d54;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
  }
  .section-explanation .howto>p {
    margin: 25px 0 30px;
    line-height: 1.69;
  }
  .section-explanation .howto .useFlow {
    margin: 0 calc(-24/750*100vw);
    flex-wrap: wrap;
  }
  .section-explanation .howto .useFlow li {
    margin: 0 calc(24/750*100vw) 20px;
    width: calc(170/750*100vw);
  }
  .section-explanation .howto .useFlow li:before {
    margin-top: calc(70/750*100vw);
    right: calc(-36/750*100vw);
    width: 10px;
    height: 10px;
  }
  .section-explanation .howto .useFlow li .image {
  }
  .section-explanation .howto .useFlow li .name {
    padding-top: .5em;
    line-height: 1.25;
    color: #004d54;
  }
  .section-explanation .howto .useInfo {
    margin: 15px 0 20px;
    padding: 20px 0;
    display: block;
  }
  .section-explanation .howto .useInfo .icon {
    margin: 0 auto 20px;
    width: calc(352/750*100vw);
  }
  .section-explanation .howto .useInfo ul {
    width: auto;
  }
  .section-explanation .howto .useInfo ul li {
    line-height: 1.46;
  }
  .section-explanation .howto .usePoint .icon {
    margin-right: 10px;
    width: calc(132/750*100vw);
  }
  .section-explanation .howto .usePoint p {
    width: calc(100% - 130/750*100vw);
    line-height: 1.46;
  }
}






/* =============================================================================
 voice item02
============================================================================= */

.section-voice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 950px;
  background: url("../img/cica/bg_voice.png") top center no-repeat;
  background-size: cover;
}
.section-voice .sectionTitle {
  margin: 0 0 90px;
  color: #004d54;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}
.section-voice ul {
  margin: 0 auto;
  max-width: 1080px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.section-voice ul li {
  margin: 0 0 40px;
  padding: 45px 45px 25px;
  border-radius: 18px;
  width: calc(520/1080*100%);
  background-color: rgba(255,255,255,.94);
}
.section-voice ul li .person {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px #004d54 dashed;
  color: #004d54;
  font-size: 20px;
  font-weight: bold;
}
.section-voice ul li p {
  line-height: 1.63;
  color: #004d54;
  font-weight: bold;
  letter-spacing: .1em;
}
.section-item.item02 {
  padding-bottom: 100px;
  background-color: #fff;
}
.section-item.item02 .itemTagline {
  margin-top: 5%;
  position: absolute;
  right: 12%;
  line-height: 1.48;
  color: #004d54;
  font-size: 50px;
  font-weight: bold;
}
.section-item.item02 .itemData {
  padding-top: 36%;
}
.section-item.item02 .itemComponents {
  margin-top: -60px;
  padding: 80px;
  width: 100%;
  line-height: 1.5;
  background-color: rgba(0,86,95,.07);
}
.section-item.item02 .itemComponentsLabel {
  font-weight: bold;
}
.section-item.item02 .itemComponentsText + .itemComponentsLabel {
  margin-top: 1.5em;
}
@media only screen and (max-width: 767px) {
  .section-voice {
    padding: 60px 0 40px;
    display: block;
    height: auto;
    background-image: url("../img/cica/bg_voice_sp.png");
  }
  .section-voice .sectionTitle {
    margin: 0 0 45px;
    font-size: 30px;
  }
  .section-voice ul {
    margin: 0 calc(48/750*100vw);
    display: block;
  }
  .section-voice ul li {
    margin: 0 0 20px;
    padding: 24px calc(48/750*100vw);
    border-radius: 10px;
    width: 100%;
  }
  .section-voice ul li .person {
    margin-bottom: 12px;
    padding-bottom: 12px;
    font-size: 15px;
  }
  .section-voice ul li p {
  }
  .section-item.item02 {
    padding: 50px 0;
  }
  .section-item.item02 .itemTagline {
    margin: 0 0 65px;
    position: static;
    width: 100%;
    font-size: 30px;
    text-align: center;
  }
  .section-item.item02 .itemData {
    padding: 0 calc(48/750*100vw);
  }
  .section-item.item02 .itemComponents {
    margin: 70px calc(48/750*100vw) 0;
    padding: 24px calc(48/750*100vw);
    width: auto;
  }
  .section-voice {
  }
  .item02 {
  }
}





/* =============================================================================
 faq
============================================================================= */

.section-faq {
  padding: 120px 0 140px;
  background-color: #f4f4f4;
  text-align: center;
}
.section-faq .labelName {
  margin: 0 0 20px;
  padding: 0 0 5px;
  border-bottom: 1px #484848 solid;
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
}
.section-faq .title {
  color: #484848;
  font-size: 40px;
  font-weight: 700;
}
.section-faq .faqBody {
  margin: 80px 0 0;
  border-bottom: 1px #d2d2d2 dashed;
  text-align: left;
}
.section-faq .faqBody .faqQ {
  padding: 22px 0 22px 120px;
  border-top: 1px #d2d2d2 dashed;
  position: relative;
  line-height: 1.67;
  color: #004d54;
  font-size: 30px;
  font-weight: 700;
}
.section-faq .faqBody .faqA {
  padding: 26px 0 26px 120px;
  border-top: 1px #d2d2d2 dashed;
  position: relative;
  line-height: 2;
  font-size: 18px;
  letter-spacing: .1em;
  text-align: justify;
}
.section-faq .faqBody .faqQ:before,
.section-faq .faqBody .faqA:before {
  content: "Q.";
  display: block;
  position: absolute;
  top: 25px;
  left: 25px;
  line-height: 1;
  color: #004d54;
  font-size: 40px;
  font-weight: 700;
}
.section-faq .faqBody .faqA:before {
  content: "A.";
  top: 20px;
  color: #222;
  font-family: "秀英明朝 L", "Shuei Mincho L", 'Noto Serif JP', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "sans-serif";
}

@media only screen and (max-width: 767px) {
  .section-faq {
    padding: 60px calc(48/750*100vw);
    background-color: #f4f4f4;
    text-align: center;
  }
  .section-faq .label {
    margin: 0 0 10px;
    font-size: 15px;
  }
  .section-faq .title {
    font-size: 25px;
  }
  .section-faq .faqBody {
    margin: 30px 0 0;
  }
  .section-faq .faqBody .faqQ {
    padding: 14px 0 14px 45px;
    line-height: 1.39;
    font-size: 18px;
  }
  .section-faq .faqBody .faqA {
    padding: 14px 0 14px 45px;
    line-height: 1.77;
    font-size: 13px;
  }
  .section-faq .faqBody .faqQ:before,
  .section-faq .faqBody .faqA:before {
    top: 16px;
    left: 5px;
    font-size: 20px;
  }
  .section-faq .faqBody .faqA:before {
    top: 13px;
  }
}





/* =============================================================================
 brand
============================================================================= */

.section-brand {
  padding: 140px 0;
}
.section-brand .brandBox + .brandBox {
  margin-top: 30px;
}
.section-brand .name {
  margin: 0 0 10px;
  padding: 0 0 10px;
  line-height: 1.19;
  letter-spacing: .1em;
  font-size: 32px;
}
.section-brand .name {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAADCAYAAABBCiV2AAAAQklEQVQImWXKoQ2AMAAAsA7JAZCguYIjluB2IhrDB4j9gCbbFQSBGdUNZ6kzDvRYl3HIGh0i3jghteFLOy7c2H4DD5H8CQhj6vz2AAAAAElFTkSuQmCC) bottom left repeat-x;
  font-size: 32px;
}
.section-brand .kusu .logo {
  display: inline-block;
  width: 118px;
}
.section-brand p {
  line-height: 1.63;
}
.section-brand .txt {
  margin-left: 20px;
  color: #717071;
}
.section-brand .aisei {
  position: relative;
}
.section-brand .aisei .name {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAADCAYAAABBCiV2AAAAQklEQVQImWXKIRGAMAAAwB+SCthRBYmYIseCUATJHWIRyMD0aqAw4/WHZy8RF0akmJdbZ8CKGRO2PnzpREXD8Rt4AYuECQ5n3eVkAAAAAElFTkSuQmCC);
}
.section-brand .aisei .name img {
  height: 50px;
}
.section-brand .aisei .name,
.section-brand .aisei p {
  width: calc(745/1080*100%);
  text-align: justify;
}
.section-brand .aisei .image {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(280/1080*100%);
}

@media only screen and (max-width: 767px) {
  .section-brand {
    padding: 60px calc(40/750*100vw);
  }
  .section-brand .name {
    margin: 0 0 10px;
    padding: 0 0 10px;
    font-size: 16px;
  }
  .section-brand .name img {
    height: 36px;
  }
  .section-brand .kusu .logo {
    width: auto;
  }
  .section-brand .kusu .logo img {
    width: calc(172/750*100vw);
    height: auto;
  }
  .section-brand p {
    line-height: 1.54;
  }
  .section-brand .txt {
    margin-left: 10px;
  }
  .section-brand .aisei .name img {
    height: 26px;
  }
  .section-brand .aisei .name,
  .section-brand .aisei p {
    width: auto;
  }
  .section-brand .aisei .image {
    margin-top: 20px;
    position: static;
    width: auto;
  }
}





/* =============================================================================
 order
============================================================================= */

.section-order-form .headline {
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .section-order-form .headline {
    padding: 110px 0 60px;
  }
}





/* =============================================================================
 anime
============================================================================= */

.hero .image {
  opacity: 0;
  transition: opacity ease 1.2s;
}
.hero .section-content {
  opacity: 0;
  transition: opacity ease 1.2s .8s;
}
.hero .scroll {
  opacity: 0;
  transition: opacity ease 1s 1.2s;
}
.hero.animated .image,
.hero.animated .section-content,
.hero.animated .scroll {
  opacity: 1;
}



.pageLead.anime2 .bg {
  opacity: 0;
  transform: translateY(300px);
  transition: opacity ease 1s,transform ease 1s;
}
.pageLead.anime2 .pageLeadInner > p {
  opacity: 0;
  transition: opacity ease 1s .8s;
}
.pageLead.anime2 .whatsCica {
  opacity: 0;
  transition: opacity ease 1s 1.4s;
}
.pageLead.animated .bg {
  opacity: 1;
  transform: translateY(0);
}
.pageLead.animated .pageLeadInner > p,
.pageLead.animated .whatsCica {
  opacity: 1;
}



.section-about ul.anime {
  opacity: 0;
  transition: opacity ease 1s;
}
.section-about ul.anime li .check img {
  opacity: 0;
  transition: opacity ease 1s;
}
.section-about ul.animated,
.section-about ul.animated li .check img {
  opacity: 1;
}
.section-about ul.animated li:nth-child(1) .check img {
  transition-delay: .8s;
}
.section-about ul.animated li:nth-child(2) .check img {
  transition-delay: 1.2s;
}
.section-about ul.animated li:nth-child(3) .check img {
  transition-delay: 1.6s;
}
.section-about ul.animated li:nth-child(4) .check img {
  transition-delay: 2s;
}



.anime[data-anime="fadeIn"] {
  opacity: 0;
  transition: opacity ease 1s;
}
.animated[data-anime="fadeIn"] {
  opacity: 1;
}


.section-voice.anime {
  opacity: 0;
  transition: opacity ease 1.2s;
}
.section-voice.anime ul {
  opacity: 0;
  transition: opacity ease 1.2s 2.2s;
}
.section-voice.animated,
.section-voice.animated ul {
  opacity: 1;
}



@media only screen and (min-width: 768px) {
  .item02.anime >*:not(.itemComponents) {
    opacity: 0;
    transition: opacity ease 1s;
  }
  .item02.animated >*:not(.itemComponents) {
    opacity: 1;
  }
}





/* =============================================================================
 product detail
============================================================================= */

.container {
}
.ecommerce .ibox-content .row,
.ecommerce .ibox-content section section {
  margin-right: auto;
  margin-left: auto;
}

@media only screen and (min-width: 768px) {
  .container {
    width: auto;
  }
  .ecommerce .ibox-content .row,
  .ecommerce .ibox-content section section {
    width: 750px;
  }
}
@media only screen and (min-width: 992px) {
  .container {
    width: auto;
  }
  .ecommerce .ibox-content .row,
  .ecommerce .ibox-content section section {
    width: 970px;
  }
}
@media only screen and (min-width: 1200px) {
  .container {
    width: auto;
  }
  .ecommerce .ibox-content .row,
  .ecommerce .ibox-content section section {
    width: 1170px;
  }
}




.ecommerce .section-banner {
  margin-left: calc(20/750*100vw - 35px);
  margin-right: calc(20/750*100vw - 35px);
}



.ecommerce .ibox-content .section-hero {
  margin-top: 80px;
  margin-left: -35px;
  margin-right: -35px;
  padding: 0;
  font-family: "秀英明朝 L", "Shuei Mincho L", 'Noto Serif JP', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "sans-serif";
  background-color: #004d54;
}
.ecommerce .ibox-content .section-hero .pageLead {
  padding: 100px 0 135px;
  position: static;
  height: 969px;
  background: url("../img/cica/bg_lead.png") top center no-repeat;
}
.ecommerce .ibox-content .section-hero .pageLead .bg {
  display: none;
}
.ecommerce .ibox-content .section-about {
  margin-left: -35px;
  margin-right: -35px;
  font-family: "秀英明朝 L", "Shuei Mincho L", 'Noto Serif JP', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "sans-serif";
  background: url(../img/cica/bg_about.png) top center no-repeat;
  background-size: cover;
}
.ecommerce .ibox-content .section-approach {
  margin-left: -35px;
  margin-right: -35px;
  padding-top: 50px;
  font-family: "秀英明朝 L", "Shuei Mincho L", 'Noto Serif JP', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "sans-serif";
}
.ecommerce .ibox-content .section-approach .approachWrap {
  background: url("../img/cica/bg_approach.png") top center repeat-y;
  background-size: 100% auto;
}
.ecommerce .ibox-content .section-explanation {
  margin-left: -35px;
  margin-right: -35px;
  font-family: "秀英明朝 L", "Shuei Mincho L", 'Noto Serif JP', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "sans-serif";
}
.ecommerce .ibox-content .section-voice {
  margin-left: -35px;
  margin-right: -35px;
  font-family: "秀英明朝 L", "Shuei Mincho L", 'Noto Serif JP', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "sans-serif";
}
.ecommerce .ibox-content .section-faq {
  margin-left: -35px;
  margin-right: -35px;
  font-family: "秀英明朝 L", "Shuei Mincho L", 'Noto Serif JP', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "sans-serif";
}








@media only screen and (max-width: 767px) {
  .ecommerce .ibox-content .section-hero .pageLead {
    padding: calc(100/750*100vw) calc(48/750*100vw) calc(190/750*100vw);
    height: auto;
    background: url("../img/cica/bg_lead_sp.png") top center no-repeat;
    background-size: 100% auto;
  }
  .ecommerce .ibox-content .section-approach .approachBox {
    padding-bottom: 50px !important;
    max-height: inherit;
  }
  .ecommerce .ibox-content .section-approach .moreBtn,
  .ecommerce .ibox-content .section-approach .closeBtn {
    display: none;
  }
}





/* =============================================================================
 temp
============================================================================= */

@media screen and (min-width: 1150px) {
  #reviews {
    margin-left: auto;
    margin-right: auto;
    max-width: 1170px;
  }
  .review-body {
    width: auto;
  }
}