@charset "UTF-8";
/*-------------------h3 ペイントアニメーション-------------------*/
/* 左から四角（塗料）が伸びて、引いたあとに文字が現れる */
.paint-reveal {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.paint-reveal .paint-text {
  display: inline-block;
  opacity: 0;
}
.paint-reveal::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #c7b299;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
/* 画面内に入ったら再生 */
.paint-reveal.is-show::after {
  animation: paintBox 1.1s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  animation-delay: var(--paint-delay, 0s);
}
.paint-reveal.is-show .paint-text {
  animation: paintText 0.01s linear forwards;
  animation-delay: calc(var(--paint-delay, 0s) + 0.55s);
}
@keyframes paintBox {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  50.1% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}
@keyframes paintText {
  to {
    opacity: 1;
  }
}
/* 動きを減らす設定の方にはアニメーションなしで表示 */
@media (prefers-reduced-motion: reduce) {
  .paint-reveal .paint-text {
    opacity: 1;
  }
  .paint-reveal.is-show::after {
    animation: none;
  }
}

/*-------------------h4・h2のアイコン 下から表示（左側が先）-------------------*/
/* h3 と同時に、文字が下から上がってくる */
/* 文字の横位置に応じて JS で遅らせているので、左側が先・右側が少し遅れて現れる */
.rise-in .rise-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.8em);
}
.rise-in.is-show .rise-char {
  animation: riseIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--rise-delay, 0s);
}
@keyframes riseIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rise-in .rise-char {
    opacity: 1;
    transform: none;
  }
  .rise-in.is-show .rise-char {
    animation: none;
  }
}

/*-------------------施工事例・サービスのパネル 壁塗りアニメーション-------------------*/
/* 上から塗料が塗られ → 塗料が下へ抜けて写真が現れ → 番号・テキストが表示 */
.paint-wall figure {
  position: relative;
  overflow: hidden;
}
.paint-wall figure::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 塗料の色。最後の色（100% の色）を濃くすると、塗り進む先の端が「塗り端」っぽくなる */
  background: linear-gradient(to bottom, #c7b299 0, #c7b299 calc(100% - 16px), #c7b299 100%);
  transform: scaleY(0);
  transform-origin: center top;
  pointer-events: none;
  z-index: 1;
}
.paint-wall figure img,
.paint-wall .no,
.paint-wall .txt {
  opacity: 0;
}
.paint-wall.is-show figure::after {
  animation: paintWall 1.3s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  animation-delay: var(--wall-delay, 0s);
}
.paint-wall.is-show figure img {
  animation: wallImage 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--wall-delay, 0s) + 0.65s);
}
.paint-wall.is-show .no {
  animation: wallFade 0.6s ease forwards;
  animation-delay: calc(var(--wall-delay, 0s) + 1s);
}
.paint-wall.is-show .txt {
  animation: wallFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--wall-delay, 0s) + 1.1s);
}
@keyframes paintWall {
  0% {
    transform: scaleY(0);
    transform-origin: center top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: center top;
  }
  55% {
    transform: scaleY(1);
    transform-origin: center bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: center bottom;
  }
}
@keyframes wallImage {
  0% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes wallFade {
  to {
    opacity: 1;
  }
}
@keyframes wallFadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .paint-wall figure img,
  .paint-wall .no,
  .paint-wall .txt {
    opacity: 1;
  }
  .paint-wall.is-show figure::after,
  .paint-wall.is-show figure img,
  .paint-wall.is-show .no,
  .paint-wall.is-show .txt {
    animation: none;
  }
}

/*-------------------SB Artの強み・施工の流れ 壁塗りアニメーション-------------------*/
/* カード全体に上から塗料が塗られ → 塗料が下へ抜けて中身が現れる */
.paint-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(to bottom, #c7b299 0, #c7b299 calc(100% - 16px), #c7b299 100%);
  transform: scaleY(0);
  transform-origin: center top;
  pointer-events: none;
  z-index: 3;
}
.paint-card .no,
.paint-card figure,
.paint-card .txt {
  opacity: 0;
}
/* 枠線も最初は隠し、塗料でカードが覆われたタイミングで表示 */
.contents.features ul li.paint-card {
  border-color: transparent;
}
.contents.features ul li.paint-card.is-show {
  animation: cardBorder 0.01s linear forwards;
  animation-delay: calc(var(--wall-delay, 0s) + 0.6s);
}
@keyframes cardBorder {
  to {
    border-color: #64594d; /* style.css の枠線の色と同じ */
  }
}
.paint-card.is-show::before {
  animation: paintWall 1.3s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  animation-delay: var(--wall-delay, 0s);
}
/* 番号は塗料と同じ色なので、塗料が抜けきってからふわっと表示（施工事例と同じタイミング） */
.paint-card.is-show .no {
  animation: wallFade 0.6s ease forwards;
  animation-delay: calc(var(--wall-delay, 0s) + 1s);
}
.paint-card.is-show figure {
  animation: wallImage 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--wall-delay, 0s) + 0.75s);
}
.paint-card.is-show .txt {
  animation: wallFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--wall-delay, 0s) + 1.1s);
}
/* 強みのアイコンは、テキストと同じく下からふわっと表示（テキストより少し先に） */
.contents.features ul li.paint-card.is-show figure {
  animation: wallFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--wall-delay, 0s) + 0.95s);
}
@media (prefers-reduced-motion: reduce) {
  .paint-card .no,
  .paint-card figure,
  .paint-card .txt {
    opacity: 1;
  }
  .contents.features ul li.paint-card {
    border-color: #64594d;
  }
  .contents.features ul li.paint-card.is-show,
  .paint-card.is-show::before,
  .paint-card.is-show .no,
  .paint-card.is-show figure,
  .paint-card.is-show .txt,
  .contents.features ul li.paint-card.is-show figure {
    animation: none;
  }
}

/*-------------------施工の流れ 矢印-------------------*/
/* 写真・番号・テキストが出たあとに、次の工程への矢印をふわっと表示 */
.contents.flow ul li.paint-card::after {
  opacity: 0;
}
.contents.flow ul li.paint-card.is-show::after {
  animation: wallFade 0.6s ease forwards;
  animation-delay: calc(var(--wall-delay, 0s) + 1.5s);
}
@media (prefers-reduced-motion: reduce) {
  .contents.flow ul li.paint-card::after {
    opacity: 1;
  }
  .contents.flow ul li.paint-card.is-show::after {
    animation: none;
  }
}

/*-------------------コンセプトのスライダー・フッターのパネル 左から飛んでくる-------------------*/
/* 写真が左（画面の外）から、1枚ずつバラバラの向きに回転しながら飛んできて、今の形に揃う */
/* 飛んでくる位置（--fly-x / --fly-y）と回転（--fly-rx / --fly-ry / --fly-rz）は JS でランダムに決めている */
/* 到着する順番もランダム（--fly-i が到着順）。最後は少しだけ行き過ぎてから戻って「ピタッ」と揃う */
.fly-panel ul li,
.fly-slider li {
  opacity: 0;
}
.fly-slider.is-show li {
  opacity: 1;
}
.fly-panel.is-show ul li,
.fly-slider.is-show li.fly-on {
  animation:
    flyIn 1.8s cubic-bezier(0.3, 1.15, 0.6, 1) both,
    flyFade 1.2s cubic-bezier(0.45, 0, 0.55, 1) both;
  animation-delay: calc(var(--fly-i, 0) * 0.12s);
}
@keyframes flyIn {
  from {
    transform: perspective(1000px) translate3d(var(--fly-x), var(--fly-y), 0) rotateX(var(--fly-rx)) rotateY(var(--fly-ry)) rotateZ(var(--fly-rz));
  }
  to {
    transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0);
  }
}
@keyframes flyFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* スライダーは飛んでいる間だけ、枠の外でも見えるように & ほかのセクションより手前に */
.fly-slider.is-flying {
  position: relative;
  z-index: 5;
}
.fly-slider.is-flying .slick-list {
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  .fly-panel ul li,
  .fly-slider li {
    opacity: 1;
  }
  .fly-panel.is-show ul li,
  .fly-slider.is-show li.fly-on {
    animation: none;
  }
}

/*-------------------サービスのパネル 塗る方向をバラバラに-------------------*/
/* 写真ごとに JS でランダムに方向のクラスを付けている */
/* wall-down：上→下（施工事例と同じ） / wall-up：下→上 / wall-right：左→右 / wall-left：右→左 */
/* 塗り端の色（最後の色）は、塗り進む先の端に来るようにしている */
.paint-wall.wall-up figure::after {
  background: linear-gradient(to top, #c7b299 0, #c7b299 calc(100% - 16px), #c7b299 100%);
}
.paint-wall.wall-right figure::after {
  background: linear-gradient(to right, #c7b299 0, #c7b299 calc(100% - 16px), #c7b299 100%);
}
.paint-wall.wall-left figure::after {
  background: linear-gradient(to left, #c7b299 0, #c7b299 calc(100% - 16px), #c7b299 100%);
}
.paint-wall.wall-up.is-show figure::after {
  animation-name: paintWallUp;
}
.paint-wall.wall-right.is-show figure::after {
  animation-name: paintWallRight;
}
.paint-wall.wall-left.is-show figure::after {
  animation-name: paintWallLeft;
}
@keyframes paintWallUp {
  0% {
    transform: scaleY(0);
    transform-origin: center bottom;
  }
  45% {
    transform: scaleY(1);
    transform-origin: center bottom;
  }
  55% {
    transform: scaleY(1);
    transform-origin: center top;
  }
  100% {
    transform: scaleY(0);
    transform-origin: center top;
  }
}
@keyframes paintWallRight {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  45% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  55% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}
@keyframes paintWallLeft {
  0% {
    transform: scaleX(0);
    transform-origin: right center;
  }
  45% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  55% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: left center;
  }
}

/*-------------------施工の流れ 区切り線-------------------*/
/* 区切り線も最初は隠し、その行が塗料で覆われたタイミングで表示 */
/* 一番上の線（ul の上の線）は、1行目に合わせて JS で is-lined を付けて表示 */
.contents.flow ul.paint-rows {
  border-top-color: transparent;
}
.contents.flow ul.paint-rows.is-lined {
  border-top-color: #64594d; /* style.css の区切り線の色と同じ */
}
.contents.flow ul li.paint-card {
  border-bottom-color: transparent;
}
.contents.flow ul li.paint-card.is-show {
  animation: rowLine 0.01s linear forwards;
  animation-delay: calc(var(--wall-delay, 0s) + 0.6s);
}
@keyframes rowLine {
  to {
    border-bottom-color: #64594d; /* style.css の区切り線の色と同じ */
  }
}
@media (prefers-reduced-motion: reduce) {
  .contents.flow ul.paint-rows {
    border-top-color: #64594d;
  }
  .contents.flow ul li.paint-card {
    border-bottom-color: #64594d;
  }
  .contents.flow ul li.paint-card.is-show {
    animation: none;
  }
}