@charset "UTF-8";
/* --------------- title-------------- */
.h2-title-decoration {
  font-size: var(--font-size-L);
  font-family: var(--font-family-zmg);
  text-align: center;
  position: relative;
  padding: 0 0 111px 0;
}

.h2-title-decoration::after {
  position: absolute;
  content: var(--h2-title-decoration-en);
  display: block;
  width: 100%;
  line-height: normal;
  color: var(--sakrea-main-color);
  font-size: calc(var(--font-size-L) * 2);
  font-family: var(--font-family-can);
  opacity: .12;
  bottom: 57px;
  left: 50%;
  transform: translate(-50%, 0);
}

.h2-title-decoration span {
  position: relative;
}

.h2-title-decoration span::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 64px;
  border-left: 2px dotted var(--sakrea-accent-color);
  bottom: 3px;
  left: -32px;
  rotate: -131.19deg;
}

.h2-title-decoration span::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 64px;
  border-left: 2px dotted var(--sakrea-accent-color);
  top: 3px;
  right: -32px;
  rotate: -131.19deg;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .h2-title-decoration::after {
    font-size: calc(var(--font-size-L) * 1);
  }
}

@media screen and (max-width:768px) {
  .h2-title-decoration {
    font-size: 1.25em;
    padding: 0 0 80px 0;
  }
  .h2-title-decoration::after {
    font-size: calc(var(--font-size-L) * .5);
    bottom: 30px;
    opacity: .4;
  }
  .h2-title-decoration span::before {
    height: 150%;
    max-height: 60px;
    left: -35px;
  }
    .h2-title-decoration span::after {
    height: 150%;
    max-height: 60px;
    right: -35px;
  }
}


/* --------------- kv-------------- */
/* ◆critical-style-top.php内に記述（ここを編集したらそっちも編集）◆
↓phpを含んだこちらを編集
.kv{height:calc(100vh + 145px);background:url(<?php echo theme_asset('images/top/kv-bg-website.webp'); ?>) right 0 top 100%/50% no-repeat,linear-gradient(to bottom,rgba(213,169,180,0) 90%,rgba(213,169,180,.46) 90%,rgba(240,216,221,.61) 95%,#f7f5f4 100%),url(<?php echo theme_asset('images/top/kv-bg.webp'); ?>) center/cover no-repeat;position:relative;z-index:-100;padding:0 0 126px}.kv hgroup{width:65%;padding:28vh 0 0}.kv hgroup .sub-title{font-family:var(--font-family-zmg);padding:0 0 0 26px;position:relative}.kv hgroup .sub-title::before{position:absolute;content:"";display:block;width:98%;height:18px;border-radius:6px;background:var(--sakrea-sub-color);bottom:-5px;left:50%;transform:translate(-50%,0);z-index:-10}.kv hgroup .sub-title .scroll-icon{font-size:var(--font-size-S);font-family:var(--font-family-lato);position:absolute;bottom:-45vh;left:50%;rotate:-90deg;transform:translate(0,-50%)}.kv hgroup .sub-title .scroll-icon::before{position:absolute;content:"";display:block;width:100px;height:1px;background:var(--sakrea-accent-color);bottom:35px;left:-3px}.kv hgroup .sub-title .scroll-icon::after{position:absolute;content:"";display:block;width:18px;height:18px;background:url(<?php echo theme_asset('images/common/icon-sakura.webp'); ?>) center/contain no-repeat;bottom:26px;left:1px;rotate:90deg;animation:2.1s cubic-bezier(.25,.46,.45,.94) infinite icon-sakura-move;opacity:0}@keyframes icon-sakura-move{0%{left:74px;opacity:0}10%,90%{opacity:1}100%{left:1px;opacity:0}}@media (max-width:1023px) and (min-width:769px){.kv{background:url(<?php echo theme_asset('images/top/kv-bg-website.webp'); ?>) right -29% top 93%/60% no-repeat,linear-gradient(to bottom,rgba(213,169,180,0) 90%,rgba(213,169,180,.46) 90%,rgba(240,216,221,.61) 95%,#f7f5f4 100%),url(<?php echo theme_asset('images/top/kv-bg.webp'); ?>) center/cover no-repeat}}@media screen and (max-width:768px){.kv{background:url(<?php echo theme_asset('images/top/kv-bg-website-sp.webp'); ?>) left 55% top 120%/150% no-repeat,linear-gradient(to bottom,rgba(213,169,180,0) 90%,rgba(213,169,180,.46) 90%,rgba(240,216,221,.61) 95%,#f7f5f4 100%),url(<?php echo theme_asset('images/top/kv-bg.webp'); ?>) center/cover no-repeat}.kv hgroup{width:100%;padding:17vh 0 0}.kv hgroup .sub-title{display:inline-block;font-size:.85em;font-weight:500;padding:0;margin:50px 0 0}.kv hgroup .sub-title .scroll-icon{left:50vw}}

↓こっちはphp入ってない元のやつ。ここをminifyしてheadタグに貼り付けはNG
.kv {
  height: calc(100vh + 145px);
  background:
    url(../images/top/kv-bg-website.webp) no-repeat right 0 top 100% / 50%,
    linear-gradient(
    to bottom,
    rgba(213, 169, 180, 0) 90%,
    rgba(213, 169, 180, 0.46) 90%,
    rgba(240, 216, 221, 0.61) 95%,
    rgba(247, 245, 244, 1.0) 100%
  ),
    url(../images/top/kv-bg.webp) no-repeat center / cover;
  position: relative;
  z-index: -100;
  padding: 0 0 126px 0;
}

.kv hgroup {
  width: 65%;
  padding: 28vh 0 0 0;
}

.kv hgroup .sub-title {
  font-family: var(--font-family-zmg);
  padding: 0 0 0 26px;
  position: relative;
}

.kv hgroup .sub-title::before {
  position: absolute;
  content: "";
  display: block;
  width: 98%;
  height: 18px;
  border-radius: 6px;
  background: var(--sakrea-sub-color);
  bottom: -5px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -10;
}

.kv hgroup .sub-title .scroll-icon {
  font-size: var(--font-size-S);
  font-family: var(--font-family-lato);
  position: absolute;
  bottom: -45vh;
  left: 50%;
  rotate: -90deg;
  transform: translate(0, -50%);
}

.kv hgroup .sub-title .scroll-icon::before {
  position: absolute;
  content: "";
  display: block;
  width: 100px;
  height: 1px;
  background: var(--sakrea-accent-color);
  bottom: 35px;
  left: -3px;
}

.kv hgroup .sub-title .scroll-icon::after {
  position: absolute;
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/common/icon-sakura.webp) no-repeat center / contain;
  bottom: 26px;
  left: 1px;
  rotate: 90deg;
  animation: icon-sakura-move 2.1s cubic-bezier(0.25,0.46,0.45,0.94) infinite;
  opacity: 0;
}

@keyframes icon-sakura-move {
  0% {
    left: 74px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 1px;
    opacity: 0;
  }
}

@media (max-width: 1023px) and (min-width: 769px) {
  .kv {
    background: url(../images/top/kv-bg-website.webp) no-repeat right -29% top 93% / 60%,
    linear-gradient(
    to bottom,
    rgba(213, 169, 180, 0) 90%,
    rgba(213, 169, 180, 0.46) 90%,
    rgba(240, 216, 221, 0.61) 95%,
    rgba(247, 245, 244, 1.0) 100%
  ),
    url(../images/top/kv-bg.webp) no-repeat center / cover;
  }
}

@media screen and (max-width:768px) {
  .kv {
    background: url(../images/top/kv-bg-website-sp.webp) no-repeat left 55% top 120% / 150%,
    linear-gradient(
    to bottom,
    rgba(213, 169, 180, 0) 90%,
    rgba(213, 169, 180, 0.46) 90%,
    rgba(240, 216, 221, 0.61) 95%,
    rgba(247, 245, 244, 1.0) 100%
  ),
    url(../images/top/kv-bg.webp) no-repeat center / cover;
  }
  .kv hgroup {
    width: 100%;
    padding: 17vh 0 0 0;
  }
  .kv hgroup .sub-title {
    display: inline-block;
    font-size: .85em;
    font-weight: 500;
    padding: 0;
    margin: 50px 0 0 0;
  }
  .kv hgroup .sub-title .scroll-icon {
    left: 50vw;
  }
} */


/* --------------- concept-------------- */
.concept {
  --h2-title-decoration-en: "Together, we shape your story.";
  background: var(--sakrea-sub-color);
  padding: 0 0 150px 0;
  margin: 0 0 100px 0;
  position: relative;
  z-index: -50;
}

.concept .first-sec {
  text-align: center;
}

.concept .first-sec p:first-of-type {
  margin: 0 0 46px 0;
}

.concept .first-sec p:last-of-type {
  margin: 0 0 140px 0;
}

.concept .first-sec p:last-of-type strong {
  display: inline-block;
  font-size: 1.375em;
  font-weight: 500;
  padding: 0 46px 0 80px;
  position: relative;
}

.concept .first-sec p:last-of-type strong::before {
  position: absolute;
  content: "";
  display: block;
  width: 115px;
  aspect-ratio: 70 / 48;
  background: url(../images/common/sakrea-accent-1.webp) no-repeat center / contain;
  bottom: -33px;
  left: 5px;
  opacity: .52;
}

.concept .second-sec {
  background: url(../images/top/sakrea-meeting.webp) no-repeat left 0 top 20px / 50%;
  position: relative;
}

.concept .second-sec::before {
  position: absolute;
  content: "";
  display: block;
  width: 50%;
  aspect-ratio: 5000 / 1490;
  background: var(--sakrea-accent-color);
  opacity: .35;
  left: 0;
  top: 20px;
  border-radius: 0 6px 6px 0;
}

.concept .second-sec::after {
  position: absolute;
  content: "";
  display: block;
  width: 257px;
  height: 280px;
  background: var(--sakrea-main-color);
  opacity: calc(.35);
  border-radius: 6px;
  left: 28%;
  top: 10px;
  z-index: -10;
}

.concept .second-sec section {
  width: 50%;
  padding: 0 0 0 60px;
  margin: 0 0 0 auto;
}

.concept .second-sec h3 {
  margin: 0 0 45px 0;
}

.concept .second-sec p:first-of-type {
  margin: 0 0 30px 0;
}

@media (max-width: 1023px) and (min-width: 769px) {
}

@media screen and (max-width:768px) {
  .concept {
    padding: 50px 0 100px 0;
  }
  .concept .h2-title-decoration span::before {
    left: -54px;
  }
  .concept .h2-title-decoration span::after {
    right: -30px;
  }
  .concept .first-sec p:first-of-type {
    text-align: left;
    margin: 0 0 5px 0;
  }
  .concept .first-sec p:last-of-type {
    text-align: left;
    margin: 0 0 50px 0;
  }
  .concept .first-sec p:last-of-type strong {
    font-size: 1em;
    padding: 10px 0 0 25px;
  }
  .concept .first-sec p:last-of-type strong::before {
    width: 75px;
    left: -18px;
    bottom: -18px;
  }
  .concept .second-sec {
    background: url(../images/top/sakrea-meeting.webp) no-repeat left 0 top 20px / 95%;
  }
  .concept .second-sec::before {
    width: 95%;
  }
  .concept .second-sec section {
    width: 100%;
    padding: 45% 0 0 30px;
    margin: 0 0 0 0;
  }
  .concept .second-sec h3 {
    width: 80%;
    margin: 0 0 30px 0;
  }
  .concept .second-sec::after {
    width: 18px;
    height: 110%;
    opacity: .25;
    left: 3%;
    top: -12px;
  }
}


/* --------------- Service -------------- */
.service {
  --h2-title-decoration-en: "All-in-one Website Support";
  background: var(--white-color);
  padding: 0 0 80px 0;
  margin: 0 0 100px 0;
}

.service .first-text {
  text-align: center;
  margin: 0 0 135px 0;
}

.service .service-list {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin: 0 0 115px 0;
}

/* .service .service-list li {
  border: 1px solid var(--sakrea-accent-color);
  border-radius: 6px;
  padding: 30px 25px;
} */

.service .service-list figure {
  width: 88px;
  background: url(../images/common/sakrea-underline-decoration.webp) no-repeat bottom / contain;
  padding: 43px 0 12px 0;
  margin: 0 auto 12px auto;
  position: relative;
}

.service .service-list figure::before {
  position: absolute;
  content: var(--list-number);
  display: block;
  color: var(--sakrea-accent-color);
  font-family: var(--font-family-can);
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.service .service-list li:nth-child(1) {
  --list-number: "01";
  width: 25%;
}
.service .service-list li:nth-child(2) {
  --list-number: "02";
  width: 25%;
}
.service .service-list li:nth-child(3) {
  --list-number: "03";
  width: 25%;
}

.service .service-list .first-para {
  font-size: 1.25em;
  font-family: var(--font-family-zmg);
}

.service .service-list .service-image {
  width: 120px;
}

.service .service-list .second-para {
  font-size: var(--font-size-S);
  text-align: left;
}

.service .recommend-sec h3 {
  text-align: center;
}

.service .recommend-sec h3 span {
  display: inline-block;
  font-size: 1.5em;
  font-family: var(--font-family-zmg);
  padding: 0 0 15px 0;
  margin: 0 0 67px 0;
  position: relative;
}

.service .recommend-sec h3 span::before {
  position: absolute;
  content: "";
  display: block;
  width: 125%;
  height: 8px;
  background: url(../images/common/sakrea-stripe.webp) no-repeat center / cover;
  opacity: .35;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.service .recommend-sec .center-illustration {
  width: 300px;
  margin: 0 auto 0 auto;
}

.service .recommend-sec .recommend-container {
  position: relative;
  padding: 0 0 140px 0;
}

.service .recommend-sec .recommend-container .balloon {
  position: absolute;
  font-size: var(--font-size-S);
  padding: 34px;
  background: var(--sakrea-sub-color);
  border-radius: 6px;
}

.service .recommend-sec .recommend-container .balloon::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--sakrea-accent-color);
  border-radius: 6px;
  bottom: 3px;
  right: 3px;
}

.service .recommend-sec .recommend-container .balloon-left {
  top: 3%;
  left: 13%;
  --box-decoration-color: var(--sakrea-sub-color);
  --box-decoration-top: auto;
  --box-decoration-right: 9px;
  --box-decoration-bottom: -34px;
  --box-decoration-left: auto;
  --line-decoration-top: auto;
  --line-decoration-right: 18px;
  --line-decoration-bottom: -45px;
  --line-decoration-left: auto;
  --line-decoration-rotate: 131.19deg;
}
.service .recommend-sec .recommend-container .balloon-right {
  top: -4%;
  right: 8%;
  --box-decoration-color: var(--sakrea-sub-color);
  --box-decoration-top: auto;
  --box-decoration-right: auto;
  --box-decoration-bottom: -34px;
  --box-decoration-left: 9px;
  --line-decoration-top: auto;
  --line-decoration-right: auto;
  --line-decoration-bottom: -45px;
  --line-decoration-left: 18px;
  --line-decoration-rotate: -131.19deg;
}
.service .recommend-sec .recommend-container .balloon-bottom {
  bottom: 14%;
  left: 35%;
  --box-decoration-color: var(--white-color);
  --box-decoration-top: -42px;
  --box-decoration-right: auto;
  --box-decoration-bottom: auto;
  --box-decoration-left: 64px;
  --line-decoration-top: -53px;
  --line-decoration-right: auto;
  --line-decoration-bottom: auto;
  --line-decoration-left: 75px;
  --line-decoration-rotate: -131.19deg;
}

.service .recommend-sec .recommend-container .decoration {
  position: relative;
}

.service .recommend-sec .recommend-container .decoration::before{
  position: absolute;
  content: "";
  display: block;
  width: 23px;
  height: 5px;
  background: var(--box-decoration-color);
  top: var(--box-decoration-top);
  right: var(--box-decoration-right);
  bottom: var(--box-decoration-bottom);
  left: var(--box-decoration-left);
}

.service .recommend-sec .recommend-container .decoration::after {
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: 28px;
  background: var(--sakrea-accent-color);
  top: var(--line-decoration-top);
  right: var(--line-decoration-right);
  bottom: var(--line-decoration-bottom);
  left: var(--line-decoration-left);
  rotate: var(--line-decoration-rotate);
}

@media (max-width: 1023px) and (min-width: 769px) {
  .service {
    padding: 0;
    margin: 0 0 50px 0;
  }
  .service .service-list li:nth-child(1) {
    width: 30%;
  }
  .service .service-list li:nth-child(2) {
    width: 30%;
  }
  .service .service-list li:nth-child(3) {
    width: 30%;
  }
  .service .recommend-sec .center-illustration {
    width: 30%;
    padding: 70px 0 30px 0;
  }
}

@media screen and (max-width:768px) {
  .service {
    padding: 0;
    margin: 0 0 50px 0;
  }
  .service .first-text {
    text-align: left;
    margin: 0 0 50px 0;
  }
  .service .service-list {
    flex-direction: column;
    align-items: center;
    gap: 80px 0;
    margin: 0 0 80px 0;
  }
  .service .service-list li:nth-child(1) {
    width: 80%;
  }
  .service .service-list li:nth-child(2) {
    width: 80%;
  }
  .service .service-list li:nth-child(3) {
    width: 80%;
  }
  .service .service-list figure {
    width: 70px;
  }
  .service .service-list .first-para {
    font-size: var(--font-size-M);
    font-weight: 500;
  }
  .service .recommend-sec h3 span {
    font-size: 1.15em;
  }
  .service .recommend-sec .center-illustration {
    width: 65%;
    margin: 100px auto 0 auto;
  }
  .service .recommend-sec .recommend-container .balloon {
    line-height: normal;
    padding: 15px 15px 25px 15px;
  }
  .service .recommend-sec .recommend-container .balloon-right {
    top: -36%;
    right: 3%;
    --box-decoration-top: auto;
    --box-decoration-right: 39px;
    --box-decoration-bottom: -25px;
    --box-decoration-left: auto;
    --line-decoration-top: auto;
    --line-decoration-right: 51px;
    --line-decoration-bottom: -37px;
    --line-decoration-left: auto;
  }
  .service .recommend-sec .recommend-container .balloon-left {
    top: -11%;
    left:3%;
    --box-decoration-top: auto;
    --box-decoration-right: auto;
    --box-decoration-bottom: -24px;
    --box-decoration-left: 55px;
    --line-decoration-top: auto;
    --line-decoration-right: auto;
    --line-decoration-bottom: -37px;
    --line-decoration-left: 68px;
  }
  .service .recommend-sec .recommend-container .balloon-bottom {
    bottom: 22%;
    left: auto;
    --box-decoration-top: -22px;
    --line-decoration-top: -33px;
  }
}


/* --------------- separator -------------- */
.separator {
  display: grid;
  place-items: center;
  color: var(--sakrea-main-color);
  font-family: var(--font-family-can);
  font-size: 1.08rem;
  width: 100%;
  height: 150px;
  background: url(../images/top/kv-bg.webp) no-repeat center / cover;
  margin: 0 0 200px 0;
  position: relative;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .separator {
    margin: 0 0 100px 0;
  }
}

@media screen and (max-width:768px) {
  .separator {
    margin: 0 0 100px 0;
  }
}


/* --------------- works -------------- */
.works {
  --h2-title-decoration-en: "Works";
  background: var(--white-color);
  padding: 0 0 80px 0;
  margin: 0 0 100px 0;
  position: relative;
  z-index: -10;
}

.works .work-ex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 83px;
  margin: 0 0 150px 0;
}

.works .work-ex:nth-child(2n+1) {
  flex-direction: row-reverse;
}

.works .work-1 {
  --website-screenshot-bg-color: var(--sakrea-main-color);
  --website-screenshot-bg-top: -54px;
  --website-screenshot-bg-rotate: -6.03deg;
}
.works .work-2 {
  --website-screenshot-bg-color: var(--sakrea-accent-color);
  --website-screenshot-bg-top: -22px;
  --website-screenshot-bg-rotate: 2.45deg;
}
.works .work-3 {
  --website-screenshot-bg-color: var(--sakrea-sub-color);
  --website-screenshot-bg-top: -57px;
  --website-screenshot-bg-rotate: -6.03deg;
}

.works .work-ex .left {
  width: 37%;
  position: relative;
}

.works .work-ex .left::before {
  position: absolute;
  content: "";
  display: block;
  width: 447px;
  aspect-ratio: 1;
  background: var(--website-screenshot-bg-color);
  border-radius: 6px;
  top: var(--website-screenshot-bg-top);
  left: 50%;
  transform: translate(-50%, 0);
  rotate: var(--website-screenshot-bg-rotate);
  z-index: -1;
}

.works .work-ex .right {
  width: 43%;
}

.works .work-ex .right .numbering {
  font-family: var(--font-family-can);
  padding: 5px 0 5px 23px;
  margin: 0 0 20px 0;
  position: relative;
}

.works .work-ex .right .numbering::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../images/common/sakrea-stripe.webp) no-repeat center / cover;
  border-radius: 6px;
  opacity: .22;
  left: 0;
  bottom: 0;
}

.works .work-ex .right .title {
  font-size: 1.25em;
  font-weight: 700;
  padding: 0 0 0 23px;
  margin: 0 0 36px 0;
}

.works .work-ex .right .description {
  padding: 0 0 0 23px;
  margin: 0 0 36px 0;
}

.works .work-ex .right dl {
  margin: 0 0 60px 0;
}

.works .work-ex .right dl div {
  --svg-va: -3px;
  display: flex;
  align-items: center;
  font-size: var(--font-size-S);
}

.works .work-ex .right dl div + div {
  margin: 13px 0 0 0;
}

.works .work-ex .right dl dt {
  width: 130px;
  font-weight: 700;
  padding: 0 0 0 48px;
  position: relative;
}

.works .work-ex .right dl dt::before {
  position: absolute;
  content: "";
  display: block;
  width: 12px;
  height: 18px;
  background: url(../images/common/icon-sakura-hanabira.webp) no-repeat center / contain;
  bottom: 4px;
  left: 26px;
}

.works .work-ex .right dl svg {
  margin: 0 8px 0 5px;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .works {
    padding: 0;
  }
  .works .work-ex,
  .works .work-ex:nth-child(2n+1) {
    flex-direction: column;
    gap: 100px 0;
  }
  .works .work-ex .right dl {
    margin: 0;
  }
  .works .work-ex .left {
    width: 50%;
  }
  .works .work-ex .left::before {
    width: 120%;
  }
  .works .work-1 {
    margin: 50px 0 100px 0;
    --website-screenshot-bg-top: -63px;
    --website-screenshot-bg-rotate: -5.03deg;
  }
  .works .work-ex .right {
    width: 80%;
  }
  .works .work-3 {
    --website-screenshot-bg-top: -63px;
    --website-screenshot-bg-rotate: -5.03deg;
    margin: 0;
  }
}

@media screen and (max-width:768px) {
  .works {
    padding: 0;
  }
  .works .work-ex,
  .works .work-ex:nth-child(2n+1) {
    flex-direction: column;
    gap: 80px 0;
  }
  .works .work-ex .left {
    width: 75%;
  }
  .works .work-ex .left::before {
    width: 113%;
  }
  .works .work-1 {
    margin: 50px 0 150px 0;
    --website-screenshot-bg-top: -32px;
    --website-screenshot-bg-rotate: -5.03deg;
  }
  .works .work-2 {
    --website-screenshot-bg-top: -13px;
  }
  .works .work-3 {
    --website-screenshot-bg-top: -32px;
    --website-screenshot-bg-rotate: -5.03deg;
    margin: 0;
  }
  .works .work-ex .right {
    width: 100%;
  }
  .works .work-ex .right dl {
    padding: 0 0 0 18px;
    margin: 0;
  }
  .works .work-ex .right .numbering {
    padding: 5px 0 5px 18px;
    margin: 0 0 30px 0;
  }
  .works .work-ex .right .title {
    font-size: 1.15em;
    padding: 0 0 0 18px;
    margin: 0 0 10px 0;
  }
  .works .work-ex .right .description {
    padding: 0 0 0 18px;
    margin: 0 0 15px 0;
  }
  .works .work-ex .right dl div {
    align-items: flex-start;
    flex-direction: column;
  }
  .works .work-ex .right dl dt {
    padding: 0 0 0 20px;
  }
  .works .work-ex .right dl dt::before {
    bottom: 6px;
    left: 2px;
  }
  .works .work-ex .right dl svg {
    display: none;
  }
}



/* --------------- reason -------------- */
.reason {
  --h2-title-decoration-en: "Three Reasons to Choose Sakrea";
  background: url(../images/top/sakura-landscape.webp) no-repeat center / cover;
  background-attachment: fixed;
  padding: 100px 0 150px 0;
  margin: 0 0 100px 0;
  position: relative;
  z-index: -10;
}

.reason::before {
  position: absolute;
  content: "";
  display: block;
  inset: 0;
  background: var(--white-color);
  opacity: .8;
  z-index: -5;
}

.reason :is(.reason1, .reason2, .reason3) {
  position: relative;
}

.reason .reason1::before {
  position: absolute;
  content: "";
  display: block;
  width: 55%;
  height:60%;
  background: url(../images/top/sakrea-ceo-kawamura-koichi-1.webp) no-repeat top left / cover;
  border-radius: 0 6px 6px 0;
  box-shadow: var(--black-box-shadow);
  top: 0;
  left: 0;
}

.reason .reason1::after {
  position: absolute;
  content: "";
  display: block;
  width: 55%;
  height: 60%;
  background: var(--sakrea-sub-color);
  opacity: .15;
  border-radius: 0 6px 6px 0;
  top: 0;
  left: 0;
}

.reason .title-area {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--sakrea-main-color);
  font-family: var(--font-family-can);
  font-size: 4em;
  width: 100%;
  padding: 70px 87px 300px 0;
  position: relative;
  z-index: 5;
}

.reason .title-area .numbering {
  line-height: normal;
  padding: 0 27px 0 0;
  position: relative;
}

.reason .title-area .numbering::after {
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: 100px;
  background: var(--sakrea-main-color);
  bottom: 10px;
  right: 0;
}

.reason .title-area .title {
  width: 50%;
  padding: 0 0 0 27px;
}

.reason .sub-title {
  font-family: var(--font-family-zmg);
  font-size: 1.5em;
  margin: 0 0 20px 0;
}

.reason .description {
  width: 57%;
  padding: 0 0 45px 0;
}

.reason .reason2 .title-area {
  justify-content: flex-start;
  padding: 100px 0 70px 0;
}

.reason .reason2 .description {
  width: 42%;
  margin: 0 0 200px 145px;
}

.reason .reason2::before {
  position: absolute;
  content: "";
  display: block;
  width: 30%;
  height: 670px;
  /* aspect-ratio: 509 /768; */
  background: url(../images/top/sakrea-flexible-support.webp) no-repeat center / cover;
  border-radius: 6px;
  box-shadow: var(--black-box-shadow);
  top: 100px;
  right: 15%;
  z-index: -5;
}

.reason .reason2::after {
  position: absolute;
  content: "";
  display: block;
  width: 30%;
  height: 670px;
  /* aspect-ratio: 509 /768; */
  background: var(--sakrea-sub-color);
  opacity: .15;
  border-radius: 6px;
  top: 100px;
  right: 15%;
  z-index: -4;
}

.reason .reason2 .description p:nth-child(2) {
  margin: 0 0 33px 0;
}

.reason .reason2 .detail {
  color: var(--sakrea-accent-color);
  font-size: .75em;
  padding: 0 0 0 12px;
  margin: 0 0 0 145px;
}

.reason .reason2 .asterisk {
  display: inline-block;
  color: var(--sakrea-red-color);
  font-size: 1.2em;
  margin: 0 3px 0 0;
}

.reason .reason3 .title-area {
  justify-content: center;
  padding: 100px 0 70px 0;
}

.reason .reason3 figure {
  width: 432px;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 auto 60px auto;
  position: relative;
}

.reason .reason3 figure::after {
  position: absolute;
  content: "";
  display: block;
  inset: 0;
  background: var(--sakrea-sub-color);
  opacity: .15;
}

.reason .reason3 p {
  width: 432px;
  margin-inline: auto;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .reason {
    padding: 100px 0 100px 0;
    margin: 0;
  }
  .reason .reason1::before {
    background: url(../images/top/sakrea-ceo-kawamura-koichi-1.webp) no-repeat top left / cover;
  }
  .reason .reason2::before {
    width: 25%;
    height: 560px;
  }
  .reason .reason2::after {
    width: 25%;
    height: 560px;
  }
}

@media screen and (max-width:768px) {
  .reason {
    padding: 100px 0 100px 0;
    margin: 0;
  }
  .reason::before {
    opacity: .85;
  }
  .reason .h2-title-decoration span::before {
    left: -38px;
  }
  .reason .h2-title-decoration span::after {
    right: -47px;
  }
  .reason .reason1::before {
    width: 75%;
    height: 40%;
    background: url(../images/top/sakrea-ceo-kawamura-koichi-1.webp) no-repeat top left / cover;
  }
  .reason .reason1::after {
    width: 75%;
    height: 40%;
  }
  .reason .title-area {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px 0;
    width: 60%;
    font-size: 2em;
    padding: 50px 0 70px 0;
    margin: 0 0 0 auto;
  }
  .reason .title-area .title {
    width: 100%;
    padding: 0;
  }
  .reason .title-area .numbering::after {
    width: 100%;
    height: 1px;
    bottom: 3px;
    right: auto;
    left: 3px;
  }
  .reason .sub-title {
    font-size: 1.15em;
    margin: 0 0 10px 0;
  }
  .reason .description {
    width: 100%;
  }
  .reason .reason2::before {
    width: 40%;
    height: 205px;
    right: 10%;
  }
    .reason .reason2::after {
    width: 40%;
    height: 205px;
    right: 10%;
  }
  .reason .reason2 .title-area {
    padding: 50px 0 150px 0;
    margin: 0;
  }
  .reason .reason2 .description {
    width: auto;
    padding: 0;
    margin: 0 0 10px 0;
  }
  .reason .reason2 .detail {
    line-height: 150%;
    padding: 0;
    margin: 0;
  }
  .reason .reason3 .title-area {
    padding: 50px 0 20px 0;
    margin: 0 auto 0 auto;
  }
  .reason .reason3 figure {
    width: 60%;
  }
  .reason .reason3 p {
    width: auto;
  }
}


/* --------------- flow -------------- */
.flow {
  --h2-title-decoration-en: "Our 5-Step Process";
  padding: 100px 0 150px 0;
  margin: 0 0 100px 0;
  position: relative;
  z-index: -10;
}

.flow .wrapper p {
  text-align: center;
}

.flow .wrapper p:first-of-type {
  margin: 0 0 20px 0;
}

.flow .wrapper p:nth-of-type(2) {
  margin: 0 0 120px 0;
}

.flow .flow-detail {
  background: url(../images/top/flow-sec-bg-deco.webp) no-repeat center / contain;
}

.flow .flow-detail .card-list {
  display: flex;
  gap: 237px 65px;
  justify-content: flex-start;
  flex-wrap: wrap;
  position: relative;
}

.flow .flow-detail .card-list .card {
  flex: 0 1 25%;
  min-width: 280px;
  height: 650px;
  background: 
  var(--card-bg-image),
  var(--sakrea-sub-color);
  border-radius: 6px;
  position: relative;
}

.flow .flow-detail .card-list .card:nth-child(1) {
  --card-bg-image: none;
}
.flow .flow-detail .card-list .card:nth-child(2) {
  --card-bg-image: url(../images/top/flow-image2.webp) no-repeat bottom right / 60%;
}
.flow .flow-detail .card-list .card:nth-child(3) {
  --card-bg-image: url(../images/top/flow-image3.webp) no-repeat bottom / 80%;
}
.flow .flow-detail .card-list .card:nth-child(4) {
  --card-bg-image: url(../images/top/flow-image4.webp) no-repeat bottom left / 60%;
}
.flow .flow-detail .card-list .card:nth-child(5) {
  --card-bg-image: none;
}

.flow .flow-detail .card-list .card:nth-child(1)::after {
  position: absolute;
  content: "";
  display: block;
  width: 320px;
  aspect-ratio: 512 / 341;
  background: url(../images/top/flow-image1.webp) no-repeat center / contain;
  bottom: -58px;
  left: 12px;
}

.flow .flow-detail .card-list .card:nth-child(5)::after {
  position: absolute;
  content: "";
  display: block;
  width: 180px;
  aspect-ratio: 306 / 576;
  background: url(../images/top/flow-image5.webp) no-repeat center / contain;
  bottom: 0;
  right: -180px;
}

.flow .flow-detail .card-list .numbering {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 86px;
  aspect-ratio: 1;
  color: var(--white-color);
  font-family: var(--font-family-can);
  font-size: 1.25em;
  line-height: 110%;
  background: var(--sakrea-main-color);
  border-radius: 50%;
  top: -44px;
  left: 50%;
  transform: translate(-50%, 0);
}

.flow .flow-detail .card-list .card:nth-child(1) .numbering::before {
  position: absolute;
  content: "";
  display: block;
  width: 69px;
  height: 34px;
  background: url(../images/top/flow-contact.webp) no-repeat center / contain;
  top: -26px;
}
.flow .flow-detail .card-list .card:nth-child(2) .numbering::before {
  position: absolute;
  content: "";
  display: block;
  width: 78px;
  height: 41px;
  background: url(../images/top/flow-discover.webp) no-repeat center / contain;
  top: -28px;
}
.flow .flow-detail .card-list .card:nth-child(3) .numbering::before {
  position: absolute;
  content: "";
  display: block;
  width: 63px;
  height: 36px;
  background: url(../images/top/flow-design.webp) no-repeat center / contain;
  top: -28px;
}
.flow .flow-detail .card-list .card:nth-child(4) .numbering::before {
  position: absolute;
  content: "";
  display: block;
  width: 50px;
  height: 30px;
  background: url(../images/top/flow-build.webp) no-repeat center / contain;
  top: -26px;
}
.flow .flow-detail .card-list .card:nth-child(5) .numbering::before {
  position: absolute;
  content: "";
  display: block;
  width: 116px;
  height: 49px;
  background: url(../images/top/flow-launch-and-care.webp) no-repeat center / contain;
  top: -26px;
}

.flow .flow-detail .card-list .numbering span:first-child {
  display: inline-block;
  font-size: .5em;
  border-bottom: 1px solid var(--white-color);
  padding: 0 2px 0px 2px;
}

.flow .flow-detail .card-list .flow-image {
  width: 120px;
  padding: 51px 0 11px 0;
  margin-inline: auto;
}

.flow .flow-detail .card-list h3 {
  font-family: var(--font-family-zmg);
  font-size: 1.25em;
  text-align: center;
  margin: 0 0 25px 0;
}

.flow .flow-detail .card-list p {
  width: 210px;
  font-size: var(--font-size-S);
  margin-inline: auto;
}

.flow .flow-detail .card-list svg {
  --svg-width: 72px;
  --svg-color: var(--sakrea-accent-color);
  position: absolute;
  bottom: 50%;
  right: -68px;
  transform: translate(0, 50%);
}

@media (max-width: 1023px) and (min-width: 769px) {
  .flow {
    padding: 100px 0 0 0;
  }
  .flow .flow-detail {
    background: url(../images/top/flow-sec-bg-deco-tablet.webp) no-repeat center / cover;
  }
  .flow .flow-detail .card-list {
    justify-content: center;
  }
}

@media screen and (max-width:768px) {
  .flow .wrapper p {
    text-align: left;
  }
  .flow .flow-detail {
    background: none;
  }
  .flow .flow-detail .card-list {
    justify-content: center;
  }
  .flow .flow-detail .card-list .card {
    flex: 0 1 85%;
  }
  .flow .flow-detail .card-list .card:nth-child(1)::after {
    width: 90%;
  }
  .flow .flow-detail .card-list .card:nth-child(5)::after {
    bottom: -186px;
    right: 0;
  }
  .flow .flow-detail .card-list svg {
    right: 50%;
    bottom: -135px;
    rotate: 90deg;
    animation: float 3s cubic-bezier(0.46,0.03,0.52,0.96) infinite;
  }
  @keyframes float {
    0% {
      transform: translate(0, -50%) translateX(10px);
    }
    50% {
      transform: translate(0, -50%) translateX(-10px);
    }
    100% {
      transform: translate(0, -50%) translateX(10px);
    }
  }
}


/* --------------- price -------------- */
.price {
  --h2-title-decoration-en: "Plans to Help Your Brand Bloom";
  background: var(--sakrea-sub-color);
  padding: 100px 0 150px 0;
  position: relative;
  z-index: -10;
}

.price .first-para {
  text-align: center;
  margin: 0 0 62px 0;
}

.price .second-para {
  text-align: center;
  margin: 0 0 115px 0;
}

.price :is(.first-para, .second-para) strong {
  font-weight: 700;
  position: relative;
}

.price .first-para strong::before {
  position: absolute;
  content: "";
  display: block;
  width: 104px;
  aspect-ratio: 468 / 137;
  background: url(../images/common/sakrea-underline-decoration.webp) no-repeat center / contain;
  bottom: -18px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -5;
}

.price .second-para strong::before {
  position: absolute;
  content: "";
  display: block;
  width: 110%;
  aspect-ratio: 375 / 13;
  background: url(../images/common/sakrea-underline-decoration-2.webp) no-repeat center / contain;
  bottom: -5px;
  left: 50%;
  transform: translate(50%, 0);
  rotate: 180deg;
  z-index: -5;
}

.price .pricing-cards-area {
  display: flex;
  justify-content: space-between;
  margin: 0 0 140px 0;
}

.price .pricing-cards-area .simple-plan {
  --card-plan-color: var(--sakrea-green-color);
}
.price .pricing-cards-area .standard-plan {
  --card-plan-color: var(--sakrea-blown-color);
}
.price .pricing-cards-area .premium-plan {
  --card-plan-color: var(--sakrea-main-color);
}

.price .pricing-cards-area .pricing-card {
  text-align: center;
  background: var(--white-color);
  border-radius: 6px;
  border-top: 10px solid var(--card-plan-color);
  border-bottom: 10px solid var(--card-plan-color);
  box-shadow: var(--black-box-shadow);
  position: relative;
  z-index: -8;
}

.price .pricing-cards-area .pricing-card .ribbon {
  position: absolute;
  display: grid;
  place-items: center;
  width: 85px;
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--sakrea-red-color);
  box-shadow: var(--black-box-shadow);
  top: -14px;
  right: -7px;
  clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
}

.price .pricing-cards-area .pricing-card .ribbon span {
  display: inline-block;
  color: var(--white-color);
  font-size: .65em;
  letter-spacing: -.1em;
  rotate: 45deg;
  margin: 0 0 20px 23px;
}

.price .pricing-cards-area .pricing-card .plan-subtitle {
  display: inline-block;
  font-size: var(--font-size-S);
  line-height: normal;
  text-align: center;
  border-bottom: 1px dashed var(--sakrea-accent-color);
  padding: 0 5px 2px 5px;
  margin: 42px 0 15px 0;
}

.price .pricing-cards-area .pricing-card .plan-title {
  color: var(--card-plan-color);
  font-size: var(--font-size-L);
  font-weight: 700;
  margin: 0 0 25px 0;
}

.price .pricing-cards-area .pricing-card .plan-price {
  display: inline-block;
  color: var(--sakrea-accent-color);
  font-size: 1.5em;
  font-family: var(--font-family-lato);
  font-weight: 700;
  margin: 0 0 60px 0;
  position: relative;
}

.price .pricing-cards-area .pricing-card .plan-price::after { 
  position: absolute;
  content: "";
  display: block;
  width: 115%;
  height: 6px;
  border-radius: 9px;
  background: var(--card-plan-color);
  bottom: -2px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -5;
}

.price .pricing-cards-area .pricing-card .description {
  width: 304px;
  text-align: start;
  padding: 0 38px 48px 38px;
}

.price .pricing-cards-area .pricing-card .features {
  --svg-color: var(--card-plan-color);
  --svg-va: -2px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 304px;
  font-size: var(--font-size-S);
  padding: 0 38px 48px 38px;
}

.price .pricing-cards-area .pricing-card .features li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price .pricing-cards-area .pricing-card .features .right {
  position: relative;
}

.price .pricing-cards-area .pricing-card .features .dotline {
  flex: .8;
  height: 1px;
  margin: 0 10px;
  background-image: repeating-linear-gradient(
    to right,
    var(--card-plan-color, #1F1F1F),
    var(--card-plan-color, #1F1F1F) 3px,
    transparent 3px,
    transparent 6px
  );
}

.price .pricing-cards-area .pricing-card .features .right span {
  position: absolute;
  display: block;
  font-size: calc(8 / 14 * 1em) ;
  bottom: -14px;
  right: 5px;
}

.price .pricing-cards-area .pricing-card .features .right span::after {
  position: absolute;
  content: "*";
  display: block;
  width: 10px;
  aspect-ratio: 1;
  color: var(--sakrea-red-color);
  font-size: 1.5em;
  bottom: 1px;
  right: -8px;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .price {
    padding: 100px 0 100px 0;
  }
  .price .pricing-cards-area {
    align-items: center;
    flex-direction: column;
    gap: 80px 0;
    margin: 0;
  }
  .price .pricing-cards-area .pricing-card {
    width: 75%;
    min-width: 316px;
  }
  .price .pricing-cards-area .pricing-card .description {
    width: 80%;
    margin-inline: auto;
  }
  .price .pricing-cards-area .pricing-card .features {
    width: 80%;
    margin-inline: auto;
  }
}

@media screen and (max-width:768px) {
  .price {
    padding: 100px 0 100px 0;
  }
  .price .first-para {
    text-align: left;
    margin: 0 0 30px 0;
  }
  .price .second-para {
    text-align: left;
    margin: 0 0 50px 0;
  }
  .price .pricing-cards-area {
    align-items: center;
    flex-direction: column;
    gap: 50px 0;
    margin: 0;
  }
  .price .pricing-cards-area .pricing-card {
    width: 85%;
  }
  .price .pricing-cards-area .pricing-card .description {
    width: auto;
    padding: 0 30px 30px 30px;
  }
  .price .pricing-cards-area .pricing-card .features {
    width: auto;
  }
  .price .first-para strong::before {
    left: -100px;
  }
}


/* --------------- top-message -------------- */
.top-message {
  --h2-title-decoration-en: "Representative's Message";
  background: url(../images/top/sakura-landscape-2.webp) no-repeat center / cover;
  padding: 100px 0 150px 0;
  margin: 0 0 100px 0;
  position: relative;
  z-index: -10;
}

.top-message::before { 
  position: absolute;
  content: "";
  display: block;
  inset: 0;
  background: var(--white-color);
  opacity: .9;
  z-index: -8;
}

.top-message .message-area {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0 130px;
}

.top-message .message-area .left {
  flex: 2;
  margin: 40px 0 0 0;
}

.top-message .message-area .left p:nth-child(2) {
  margin: 40px 0 40px 0;
}

.top-message .message-area .right {
  flex: 1;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .top-message .message-area {
    gap: 0 80px;
  }
  .top-message .message-area .left {
    flex: 2.2;
    margin: 0;
  }
}

@media screen and (max-width:768px) {
  .top-message {
    padding: 100px 0 100px 0;
    margin: 0;
  }
  .top-message .message-area {
    align-items: flex-end;
    flex-direction: column;
    gap: 30px 0;
  }
  .top-message .message-area .left {
    margin: 0;
  }
  .top-message .message-area .left p:nth-child(2) {
    margin: 30px 0 30px 0;
  }
  .top-message .message-area .right {
    width: 70%;
  }
}


/* --------------- information -------------- */
.information {
  --h2-title-decoration-en: "Business Information";
  padding: 100px 0 150px 0;
  margin: 0 0 100px 0;
}

.information .information-list {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  gap: 30px 0;
  margin: 0 0 30px 0;
}

.information .information-list > div {
  display: flex;
}

.information .information-list > div > dt {
  width: 180px;
  font-weight: 500;
  position: relative;
}

.information .information-list > div > dt::after {
  position: absolute;
  content: "";
  display: block;
  width: 3px;
  height: 100%;
  background: var(--sakrea-main-color);
  border-radius: 3px;
  top: 2px;
  right: 0;
}

.information .information-list > div > dd {
  width: 490px;
  margin: 0 0 0 20px;
}

.information .google-map iframe {
  display: block;
  width: 90%;
  border-radius: 6px;
  margin: 0 auto 80px auto;
}

.information .information-list > div > dd .small-description {
  display: block;
  font-size: .625em;
  line-height: normal;
}

.information .second-information-list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 25px 0;
}

.information .second-information-list div {
  display: flex;
}

.information .second-information-list div dt {
  width: 200px;
  padding: 0 55px 0 0;
  position: relative;
}

.information .second-information-list div dt::after {
  position: absolute;
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: var(--sakrea-accent-color);
  top: 14px;
  right: 35px;
}

.information .second-information-list div dd li {
  font-size: var(--font-size-S);
}

@media (max-width: 1023px) and (min-width: 769px) {
  .information {
    padding: 100px 0 100px 0;
    margin: 0;
  }
  .information .google-map iframe {
    width: 80%;
  }
}

@media screen and (max-width:768px) {
  .information {
    padding: 100px 0 100px 0;
    margin: 0;
  }
  .information .information-list {
    align-items: flex-start;
    gap: 25px 0;
    width: 100%;
    margin: 0;
  }
  .information .information-list > div {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 0 10px;
    position: relative;
  }
  .information .information-list > div::before {
    position: absolute;
    content: "";
    display: block;
    width: 3px;
    height: 100%;
    background: var(--sakrea-main-color);
    border-radius: 3px;
    top: 0;
    left: -10px;
  }
  .information .information-list > div > dt {
    font-size: var(--font-size-S);
    line-height: 150%;
  }
  .information .information-list > div > dt::after {
    content: none;
  }
  .information .information-list > div > dd {
    width: auto;
    line-height: 150%;
    margin: 0;
  }
  .information .google-map {
    width: var(--inner-width-sp);
    margin: 30px auto 30px auto;
  }
  .information .google-map iframe {
    width: 100%;
    margin: 0;
  }
  .information .second-information-list div {
    flex-direction: column;
    margin: 0 0 0 1em;
  }
  .information .second-information-list div dt {
    font-size: var(--font-size-S);
    font-weight: 500;
    padding: 0;
  }
  .information .second-information-list div dt::after {
    content: none;
  }
  .information .information-list .second-information-list dt .small-description {
    display: inline-block;
    font-weight: 500;
  }
}


/* --------------- faq -------------- */
.faq {
  --h2-title-decoration-en: "FAQ";
  background: var(--sakrea-sub-color);
  padding: 100px 0 150px 0;
  margin: 0 0 100px 0;
}

.faq .faq-item {
  width: 828px;
  background: var(--white-color);
  border-radius: 6px;
  padding: 25px 122px 25px 122px;
  margin: 0 auto 50px auto;
}

.faq .faq-question {
  --svg-width: 24px;
  --svg-color: var(--sakrea-accent-color);
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: none;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.faq .faq-question[aria-expanded="true"] {
  margin: 0 0 50px 0;
}

.faq .faq-question[aria-expanded="true"] svg {
  transform: rotate(-90deg)
}

.faq :is(.faq-question, .faq-answer) span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 54px;
  aspect-ratio: 1;
  color: var(--white-color);
  font-size: 1.35625em;
  font-family: var(--font-family-can);
  background: var(--sakrea-main-color);
  border-radius: 50%;
  top: -49px;
  left: -74px;
}

.faq :is(.faq-question, .faq-answer) span::after {
  position: absolute;
  content: "";
  display: block;
  width: 30px;
  height: 20px;
  background: var(--sakrea-main-color);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  border-radius: 3px;
  bottom: -2px;
  right: -13px;
  rotate: 126deg;
}

.faq .faq-question svg {
  transform: rotate(90deg);
  transition: transform .3s cubic-bezier(0.46,0.03,0.52,0.96);
}

.faq .faq-item .faq-answer {
  animation: fadeIn .3s cubic-bezier(0.46,0.03,0.52,0.96);
  position: relative;
}

.faq .faq-item .faq-answer span {
  background: var(--sakrea-accent-color);
  top: -36px;
}

.faq .faq-item .faq-answer span::after {
  background: var(--sakrea-accent-color);
}

.faq .faq-item .faq-answer p {
  font-size: var(--font-size-S);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.faq .faq-item .faq-answer .text-underline-deco {
  text-decoration: solid;
  text-decoration-line: underline;
  text-underline-offset: .15em;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .faq {
    padding: 100px 0 100px 0;
    margin: 0;
  }
  .faq .faq-item {
    width: 95%;
  }
}

@media screen and (max-width:768px) {
  .faq {
    padding: 100px 0 100px 0;
    margin: 0;
  }
  .faq .faq-item {
    width: 95%;
    padding: 20px 15px 20px 25px;
    margin: 0 auto 45px auto;
  }
  .faq .faq-item:last-child {
    margin: 0 auto 0 auto;
  }
  .faq .faq-question {
    gap: 0 8px;
    font-size: var(--font-size-S);
    font-weight: 500;
  }
  .faq :is(.faq-question, .faq-answer) span {
    width: 38px;
    font-size: var(--font-size-M);
    top: -50px;
    left: -20px;
  }
  .faq :is(.faq-question, .faq-answer) span::after {
    width: 20px;
    height: 12px;
    bottom: -3px;
    right: -3px;
    rotate: 145deg;
  }
}


/* --------------- contact -------------- */
.contact {
  --h2-title-decoration-en: "Contact & Free Quote";
  padding: 100px 0 150px 0;
  margin: 0 0 100px 0;
}

.contact p {
  text-align: center;
  margin: 0 0 75px 0;
}

.contact .btn-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 25px;
}

.contact .btn-area .contact-btn {
  display: grid;
  place-items: center;
  width: 316px;
  height: 61px;
  color: var(--white-color);
  font-weight: 500;
  border-radius: 38px;
  background: linear-gradient(to right, #E29999, #BE8C98);
  position: relative;
}

.contact .btn-area :is(.contact-btn, .estimate-btn) span {
  position: absolute;
  width: 316px;
  color: var(--sakrea-accent-color);
  font-size: .75em;
  text-align: center;
  top: -28px;
  left: 50%;
  transform: translate(-50%, 0);
}

.contact .btn-area :is(.contact-btn, .estimate-btn) span::before {
  position: absolute;
  content: "";
  display: block;
  width: 14px;
  height: 1px;
  background: var(--sakrea-accent-color);
  rotate: 51.34deg;
  bottom: 14px;
  left: 50px;
}

.contact .btn-area :is(.contact-btn, .estimate-btn) span::after {
  position: absolute;
  content: "";
  display: block;
  width: 14px;
  height: 1px;
  background: var(--sakrea-accent-color);
  rotate: -51.34deg;
  bottom: 14px;
  right: 50px;
}

.contact .btn-area .contact-btn svg {
  --svg-color: var(--white-color);
  --svg-width: 20px;
  position: absolute;
  right: 35px;
}

.contact .btn-area .estimate-btn {
  display: grid;
  place-items: center;
  width: 316px;
  height: 61px;
  color: var(--sakrea-accent-color);
  font-weight: 400;
  border-radius: 38px;
  border: 1px solid var(--sakrea-accent-color);
  background: url(../images/common/sakrea-stripe.webp) no-repeat center / cover;
  position: relative;
  z-index: 5;
}

.contact .btn-area .estimate-btn::before {
  position: absolute;
  content: "";
  display: block;
  inset: 0;
  border-radius: 38px;
  background: var(--white-color);
  opacity: .95;
  z-index: -5;
}

.contact .btn-area .estimate-btn svg {
  --svg-color: var(--sakrea-accent-color);
  --svg-width: 20px;
  position: absolute;
  right: 35px;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .contact {
    padding: 100px 0 100px 0;
    margin: 0;
  }
}

@media screen and (max-width:768px) {
  .contact {
    padding: 100px 0 100px 0;
    margin: 0;
  }
  .contact p {
    text-align: left;
  }
  .contact .btn-area {
    flex-direction: column;
    gap: 60px 0;
  }
}