:root {
  /* 色 */
  --colorBase: #000;
  --colorBlack: #060025;
  --colorBlue: #195fc3;
  --colorBlueDark: #395370;
  --colorBlueLight: #8ac7e6;
  --colorBrown: #B3694A;
  --colorGreen: #84d654;
  --colorGreenLight: #d7ed80;
  --colorOrange: #CE6234;
  --colorOrange2: #F6AA6C;
  --colorBeige : #FBF5E6;
  --colorBeige2 : #FDEADF;
  --colorPurple: #4a4888;
  --colorYellow: #F8F09B;
  --designPCWidth: 1440 * 100vw;
  --designSPWidth: 390 * 100vw;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  color: var(--colorBase);
  font-family: "Zen Kaku Gothic New", sans-serif;
  margin-top: -16px;
}

body.active {
  overflow: hidden;
}

main {
  position: relative;
}

.scaleOnHover {
  transition: .3s ease-in-out;
}

.scaleOnHover:hover {
  transform: scale(1.1);
  opacity: .9;
}

.for-sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .for-sp {
    display: block;
  }
  .for-pc {
    display: none !important;
  }
}

/* Curved BG Sections */

.sectionArea {
  padding-bottom: 9.4vw;
  position: relative;
  z-index: 1;
}

.curve__container {
  height: 48.6vw;
  left: 50%;
  position: relative;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  z-index: 2;
}

.curve__container::after {
  bottom: -2px;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  width: 100%;
}

.curve {
  clip-path: url(#curvedClip);
  height: 100%;
  width: 100%;
}

/* General CSS */

.pageText {
  font-size: 1.38vw;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.8;
}

.titleNumber {
  height: auto;
  left: 46%;
  position: absolute;
  top: -2vw;
  /* transform: translateX(-50%); */
  width: 8.05vw;
  z-index: 10;
}

.sectionTitle h2 {
  font-size: 3.47vw;
  font-weight: 700;
  letter-spacing: .087em;
  line-height: 1.77;
  text-align: center;
}

.sectionTitle .white {
  color: #fff;
  color: #B3694A;
}

.sectionTitle__lower {
  display: grid;
  gap: 1.73vw;
  grid-template-columns: auto auto;
  margin: 0 auto;
  width: fit-content;
}

.sectionTitle__lower--left {
  border-right: 5px solid #000;
  border-top: 5px solid #000;
}

.sectionTitle__lower--right img {
  height: auto;
  width: 5.78vw;
}

@media screen and (max-width: 767px) {
  .titleNumber {
    top: -9vw;
    width: 23.8vw;
    left: 38%;
  }
}

/* ---------------------------
   People Icons
--------------------------- */

.personIcon {
  height: auto;
  position: absolute;
}

.person__book {
  right: 41.11vw;
  top: 0;
  width: 12.08vw;
}

.person__golfclub {
  right: 2.75vw;
  top: 8.05vw;
  width: 10.7vw;
}

.person__pinkwall {
  left: 5.13vw;
  top: 9.1vw;
  width: 8.61vw;
}

.person__overalls {
  right: 5.7vw;
  top: 29.16vw;
  width: 10.76vw;
}

.person__child {
  left: 11.25vw;
  top: 38.2vw;
  width: 12.36vw;
}

.person__drill {
  right: 24.86vw;
  top: 43.88vw;
  width: 9.58vw;
  z-index: 1;
}

.person__l-measure {
  right: 2.73vw;
  top: 68.75vw;
  width: 9.51vw;
  z-index: 1;
}

.person__steps {
  left: 4.16vw;
  top: 70.83vw;
  width: 7.84vw;
  z-index: 1;
}

.person__briefcase {
  right: 6.48vw;
  top: 96.73vw;
  width: 9.44vw;
  z-index: 1;
}

.person__back--wall {
  right: 25.55vw;
  top: 122.36vw;
  width: 12.43vw;
  z-index: 1;
}

.person__sitting {
  right: 73.95vw;
  top: 112.15vw;
  width: 10.62vw;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .personIcon {
    z-index: 2;
  }
  .person__pinkwall {
    left: 5.8vw;
    top: 18.8vw;
    width: 17.7vw;
  }
  .person__drill {
    right: 35.3vw;
    top: 7.7vw;
    width: 19.78vw;
  }
  .person__book {
    right: 3.67vw;
    top: 30vw;
    width: 24.79vw;
  }
  .person__golfclub {
    right: 41vw;
    top: 102.82vw;
    width: 22.05vw;
  }
  .person__steps {
    left: auto;
    right: 7.58vw;
    top: 104.5vw;
    width: 16.2vw;
  }
  .person__sitting {
    left: 7.51vw;
    right: auto;
    top: 126.8vw;
    width: 21.8vw;
  }
  .person__child {
    left: auto;
    right: 20.07vw;
    top: 145.6vw;
    width: 25.36vw;
  }
  .person__l-measure {
    left: 4.8vw;
    right: auto;
    top: 420.29vw;
    width: 19.5vw;
  }
  .person__briefcase {
    right: 1.8vw;
    top: 417vw;
    width: 19.45vw;
  }
  .person__back--wall {
    right: 37.4vw;
    top: 435.3vw;
    width: 25.5vw;
  }
  .person__overalls {
    display: none;
  }
}

/* ---------------------------
   Header
--------------------------- */

.header {
  background: var(--colorGreenLight);
  display: flex;
  justify-content: space-between;
  justify-content: center;
  width: 100%;
}

.header__logo {
  margin-left: 1.38vw;
  padding-top: 1.25vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.header__logo img {
  height: auto;
  width: 11.2vw;
}

.header__nav {
  display: flex;
  justify-content: space-between;
  padding-top: 1.04vw;
  padding-bottom: 2.5vw;
  width: 56vw;
  width: 65vw;
}

.header__nav a {
  color: var(--colorBase);
  font-size: 1.25vw;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.75;
  transition: .3s ease-in-out;
}

.header__nav a:hover{
  color: var(--colorOrange);
}

.header__contact {
  background: var(--colorOrange);
  border-radius: 0 0 0 10px;
  height: 5.5vw;
  width: 14vw;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  transition: .3s ease-in-out;
}

.header__contact:hover{
  opacity: .9;
}

.header__contact a {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 1.25vw;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  letter-spacing: .14em;
  width: 100%;
}

.hamburger {
  background: var(--colorOrange);
  border-radius: 0 0 0 4px;
  height: 10.25vw;
  position: fixed;
  right: 0;
  top: 0;
  width: 10.25vw;
  z-index: 100;
}

.hamburger span {
  background: #fff;
  height: 2px;
  position: absolute;
  transition: .3s ease-out;
  width: 50%;
}

.hamburger span:first-child {
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
}

.hamburger span:nth-child(2) {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hamburger span:last-child {
  left: 50%;
  top: 75%;
  transform: translate(-50%, -50%);
}

.hamburger.active span:nth-child(2) {
  left: 75%;
  opacity: 0;
}

.hamburger.active  span:first-child {
  left: 45%;
  top: 67%;
  transform: rotate(45deg) translate(-50%, -50%);
  transform-origin: center;
}

.hamburger.active span:last-child {
  left: 48%;
  top: 30%;
  transform: rotate(-45deg) translate(-50%, -50%);
  transform-origin: center;
}

@media screen and (max-width: 767px) {
  .header {
    padding-bottom: 2px;
    height: 40px;
  }
  .header__logo {
    margin-left: 2.7vw;
    padding-top: 2.82vw;
  }
  .header__logo img {
    width: 30.7vw;
  }
  .header__contact {
    border-radius: 0 0 4px 4px;
    height: 10.25vw;
    margin-right: 12.8vw;
    position: fixed;
    right: 0;
    top: 0;
    width: 33.58vw;
    z-index: 100;
  }
  .header__contact a {
    font-size: 4.1vw;
  }
}

/* ---------------------------
   Navdrawer
---------------------------- */

.navdrawer {
  background: #fff;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: .7s cubic-bezier(.17, .89, .32, 1.28);
  width: 70vw;
  z-index: 99;
}

.navdrawer.active {
  transform: translateX(0);
}

.navdrawer__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  height: 100%;
  justify-content: center;
  padding-left: 30px;
}

.navdrawer__logo {
  height: auto;
  margin-left: 25px;
  max-width: 194px;
  width: 100%;
}

.navdrawer__nav {
  display: grid;
  gap: 30px;
  gap: 20px;
  grid-template-columns: 1fr;
}

.navdrawer__nav a {
  border-bottom: 1px solid #707070;
  color: var(--colorBase);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.5;
  padding-bottom: 30px;
  padding-bottom: 20px;
  padding-left: 25px;
}

/* ---------------------------
   About Modal
---------------------------- */

.backdrop {
  background: rgba(0,0,0,.6);
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: .3s linear;
  visibility: hidden;
  width: 100%;
  z-index: 9;
}

.backdrop.active {
  opacity: 1;
  visibility: visible;
}

.aboutModal {
  align-items: center;
  background: var(--colorBlack);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  gap: 6.86vw;
  height: 61.7vw;
  justify-content: center;
  left: 50%;
  max-height: 888px;
  max-width: 888px;
  opacity: 0;
  position: fixed;
  top: 50%;
  /* transform: scale(.8) translate(-60%, -40%); */
  transform: scale(.8) translate(-61.5%, -40%);
  /* transition: .3s linear; */
  transition-duration: .3s;
  transition-timing-function: linear;
  /* transition-delay: 0.3s; */
  visibility: hidden;
  width: 61.7vw;
  z-index: 100;
}

.aboutModal::before {
  border-bottom: 3.69vw solid transparent;
  border-right: 4.99vw solid var(--colorBlack);
  border-top: 1.29vw solid transparent;
  bottom: 9vw;
  content: "";
  height: 0;
  left: 3vw;
  position: absolute;
  transform: rotate(-42deg);
  transform-origin: center;
  width: 0;
}

@media screen and (min-width: 1500px) {
  .aboutModal::before {
    bottom: 14%;
    left: 5%;
  }
}

.aboutModal.active {
  opacity: 1;
  transform: scale(1) translate(-50%, -50%);
  visibility: visible;
}

.aboutModal__title {
  color: var(--colorBlack);
  font-size: 2.22vw;
  letter-spacing: .1em;
  position: relative;
  width: fit-content;
}

.aboutModal__title::before {
  background: url(../images/top/icon-popup_title_bg.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 6.9vw;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18.82vw;
  z-index: -1;
}

.aboutModal__body p {
  color: #fff;
  font-size: 1.38vw;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 2.4;
  text-align: center;
}

.aboutModal__body p:last-child {
  padding-top: 3.82vw;
}

.aboutModal__body p.pageText:not(:first-child) {
  margin-top: 3.125vw;
}

.aboutModal__close {
  background: var(--colorBlack);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  height: 3.75vw;
  max-height: 54px;
  max-width: 54px;
  position: absolute;
  right: 8%;
  top: 15%;
  width: 3.75vw;
}

.aboutModal__close::before {
  background: url(../images/top/icon-cross.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 1.04vw;
  left: 50%;
  max-height: 15px;
  max-width: 15px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.04vw;
}

@media screen and (max-width: 767px) {
  .aboutModal.active {
    height: 95vw;
    width: 95vw;
  }
  .aboutModal__title {
    font-size: calc(18 / var(--designSPWidth));
    transition-delay: .3s;
  }
  .aboutModal__title::before {
    height: calc(56.26 / var(--designSPWidth));
    width: calc(152.87 / var(--designSPWidth));
  }
  .aboutModal__body p {
    /* font-size: calc(14 / var(--designSPWidth)); */
    font-size: 87.5%;
    line-height: 1.6875;
    white-space: nowrap;
    transition-delay: .3s;
  }
  .aboutModal__body p:last-child {
    padding-top: 0;
  }
  .aboutModal__body p:nth-child(2) {
    margin-top: calc(18 / var(--designSPWidth));
  }
  .aboutModal::before {
    border-bottom: 6.69vw solid transparent;
    border-right: 11.99vw solid var(--colorBlack);
    border-top: 4.29vw solid transparent;
    bottom: 7vw;
    left: 7vw;
  }
  .aboutModal__close {
    height: calc(54 / var(--designSPWidth));
    right: 6%;
    top: 9%;
    width: calc(54 / var(--designSPWidth));
  }
  .aboutModal__close::before {
    height: calc(15 / var(--designSPWidth));
    width: calc(15 / var(--designSPWidth));
  }
}

/* ---------------------------
   topTitle
--------------------------- */

.topVisual {
  background: var(--colorGreenLight);
  padding-bottom: 13.2vw;
  padding-top: 14.3vw;
  position: relative;
}

.topVisual__title {
  font-size: 2.22vw;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.81;
  margin: 0 auto;
  width: 45.83vw;
}

.topVisual__title img {
  margin-bottom: 3.82vw;
}

.topVisual__textarea {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  gap: 4.86vw;
  height: 80vw;
  justify-content: center;
  margin: 7.29vw auto 0;
  width: 80vw;
}

.topVisual__textarea .pageText {
  letter-spacing: .08em;
  line-height: 2.4;
  text-align: center;
}

.popupButton {
  align-items: center;
  background: var(--colorBlack);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: 15.62vw;
  justify-content: center;
  position: relative;
  width: 15.62vw;
}

.popupButton::before {
  border-bottom: 1.09vw solid transparent;
  border-right: 2.09vw solid var(--colorBlack);
  border-top: 1.19vw solid transparent;
  bottom: 1.2vw;
  content: "";
  height: 0;
  left: 1.1vw;
  position: absolute;
  transform: rotate(-42deg);
  transform-origin: center;
  width: 0;
}

.popupButton__textBox {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .97vw;
}

.popUpButton__title {
  color: #fff;
  font-size: 1.45vw;
  font-weight: 700;
  letter-spacing: .14em;
}

.popUpButton__title span {
  letter-spacing: .04em;
}

.popUpButton__plus {
  height: auto;
  width: 1.38vw;
}

.cta__button {
  align-items: center;
  background: var(--colorOrange);
  border-radius: 50px;
  color: #fff;
  display: flex;
  font-size: 1.48vw;
  font-weight: 700;
  height: 5.5vw;
  justify-content: center;
  letter-spacing: .14em;
  position: relative;
  width: 27.8vw;
}

.cta__button::after {
  background: url(../images/top/icon-triangle_right.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: .83vw;
  position: absolute;
  right: 7.5%;
  top: 50%;
  transform: translateY(-50%);
  width: .44vw;
}

@media screen and (max-width: 767px) {
  .topVisual {
    padding-bottom: 43.58vw;
    padding-top: 50.5vw;
  }
  .topVisual__title {
    font-size: 4.35vw;
    width: 87vw;
  }
  .topVisual__textarea .pageText {
    font-size: 4.1vw;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 2.37;
  }
  .topVisual__textarea {
    background: transparent;
    gap: 10.25vw;
    height: 100%;
    margin: 64.1vw auto 0;
    padding-bottom: 26.9vw;
    padding-top: 20.5vw;
    position: relative;
    width: 89.7vw;
    z-index: 1;
  }
  .topVisual__textarea::before {
    background: #fff;
    border-radius: 46.4vw;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }
  .popupButton {
    height: 38.4vw;
    width: 38.4vw;
  }
  .popupButton::before {
    border-bottom: 4.09vw solid transparent;
    border-right: 6.09vw solid var(--colorBlack);
    border-top: 4.19vw solid transparent;
    bottom: 1.2vw;
    left: 2.1vw;
  }
  .popUpButton__title {
    font-size: 4.1vw;
  }
  .popUpButton__plus {
    height: 4.1vw;
    width: 4.1vw;
  }
  .popupButton__textBox {
    gap: 2.5vw;
  }
  .cta__button {
    font-size: 5.48vw;
    height: 17.9vw;
    width: 79.48vw;
  }
  .cta__button::after {
    height: 3.13vw;
    width: 1.61vw;
  }
}

/* ---------------------------
   Cases
--------------------------- */

.cases_bg{
  background-color: var(--colorGreenLight);
}

.cases {
  background: #F0E7D8;
  height: 100%;
  padding-bottom: 8.41vw;
  position: relative;
}

.cases::before {
  background: url(../images/top/light_green_border.svg);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 48.6vw;
  left: 0;
  position: absolute;
  top: -1px;
  width: 100%;
  z-index: 3;
}

.cases__main {
  background: #F0E7D8;
  z-index: 1;
}


.cases .sectionTitle__lower--left {
  padding: 3.82vw 12.18vw 3.6vw 0;
  width: fit-content;
}

.cases .sectionTitle {
  padding-top: 8.11vw;
  position: relative;
  z-index: 4;
}

.cases__reformBox {
  align-items: center;
  background: var(--colorBlueDark);
  display: flex;
  height: 3.47vw;
  justify-content: center;
  margin: 4.16vw auto 0;
  position: relative;
  width: 34.72vw;
}

.cases__reformBox.white {
  background: #fff;
  margin-top: 5.5vw;
}

.cases__reformBox::after {
  background: #fff;
  bottom: -1.55vw;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  content: "";
  height: 1.55vw;
  left: 0;
  position: absolute;
  width: 100%;
}

.cases__reformBox.white::after {
  background: var(--colorBlueDark);
}

.cases__reformBox .pageText {
  color: #fff;
  font-size: 1.6vw;
  font-weight: 700;
}

.cases__reformBox.white .pageText {
  color: var(--colorBlueDark);
}

.caseSlide {
  background: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
  min-height: max(37.5vw, 290px);
  padding: 3.58vw 1.38vw 2.25vw;
  position: relative;
  justify-content: space-between;
}

.case_text{
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  height: 19vw;
}

.case_text .pageText{
  text-align: justify;
}

.barrierfree .case_text{
  height: 16vw;
}

.case__image {
  align-self: center;
}

.case__image img {
  height: 21.45vw;
  width: auto;
}

.caseSlide__line {
  margin: 2.25vw 0 1.07vw;
  width: 100%;
}

.case__number {
  color: #fff;
  font-size: 1.11vw;
  font-weight: 700;
  left: 0;
  letter-spacing: .06em;
  /* line-height: 1.95; */
  line-height: 2.08vw;
  padding-left: .83vw;
  position: absolute;
  top: 0;
  z-index: 1;
}

.case__number::before {
  background: url(../images/top/icon-case_bg.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px 0 0 0 ;
  content: "";
  height: 2.08vw;
  left: -0.1px;
  position: absolute;
  top: 0;
  width: 5.55vw;
  z-index: -1;
}

.caseSlide__line {
  background: var(--colorBase);
  border: none;
  height: 2px;
}

.cases .slick-list {
  margin: 0 -1.02vw;
}

.cases .slick-slide {
  cursor: grab;
  margin: 0 1.02vw;
}

.cases .slick-slide:active {
  cursor: grabbing;
}

.reform__swiper {
  margin: 3.64vw auto;
  padding: 0 2.94vw;
  width: 81vw;
  z-index: 2;
}

.slick-track{
  display: flex;
}

.cases .slick-prev {
  background: url(../images/top/icon-chevron_right.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: none;
  color: transparent;
  cursor: pointer;
  height: 2.44vw;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  width: 1.47vw;
}

.cases .slick-next {
  background: url(../images/top/icon-chevron_right.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: none;
  color: transparent;
  cursor: pointer;
  height: 2.44vw;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.47vw;
}

.cases .slick-dots {
  display: flex;
  gap: 1.11vw;
  margin: 2.77vw auto;
  width: fit-content;
}

.cases .slick-dots li {
  width: fit-content;
}

.cases .slick-dots li button {
  background: #fff;
  border: none;
  color: transparent;
  content: "";
  height: .83vw;
  width: .83vw;
}

.cases .slick-dots li.slick-active button {
  background: var(--colorBlueDark);
}

.renovation__swiper {
  margin: 3.63vw auto;
  padding: 0 2.94vw;
  width: 81vw;
  z-index: 2;
}

.caseInformation {
  background: var(--colorOrange2);
  height: 20.83vw;
  margin: 9.58vw auto 0;
  position: relative;
  width: 77.68vw;
}

.caseInformation::before {
  background: url(../images/top/icon-banner_side.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100%;
  left: -1.1vw;
  position: absolute;
  top: 0;
  transform: scaleX(-1);
  width: 1.15vw;
}

.caseInformation::after {
  background: url(../images/top/icon-banner_side.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100%;
  position: absolute;
  right: -1.1vw;
  top: 0;
  width: 1.15vw;
}

.caseInformation__inner {
  align-items: center;
  display: grid;
  gap: 2.17vw;
  grid-template-columns: 17.22vw auto;
  height: 100%;
  padding: 0 1.29vw 0 .79vw;
}

.boxText {
  position: relative;
  z-index: 1;
}

.boxText__text {
  color: var(--colorBrown);
  font-size: 1.82vw;
  font-weight: 700;
  line-height: 1.46;
  text-align: center;
}

.boxText span {
  background: var(--colorBeige2);
  border-radius: 50%;
  content: "";
  height: 16.2vw;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  width: 16.2vw;
  z-index: -1;
}

.caseInformation__banner {
  align-items: center;
  background: var(--colorBlueDark);
  background: var(--colorBrown);
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: 1.66vw;
  font-weight: 700;
  height: 5.07vw;
  justify-content: center;
  left: 50%;
  letter-spacing: .16em;
  position: absolute;
  top: -10%;
  transform: translateX(-50%);
  width: 38.68vw;
  z-index: 1;
}

.caseInformation__banner--left {
  background: var(--colorOrange2);
  border-radius: 8px;
  content: "";
  height: 5.07vw;
  left: 31.4%;
  position: absolute;
  top: -14%;
  transform: translateX(-50%) skewY(-10deg);
  width: 9.86vw;
  z-index: 0;
}

.caseInformation__banner--right {
  background: var(--colorBeige2);
  border-radius: 8px;
  content: "";
  height: 5.07vw;
  position: absolute;
  right: 18.8%;
  top: -6%;
  transform: translateX(-50%) skewY(-10deg);
  width: 9.86vw;
  z-index: 0;
}

.information__link {
  align-items: center;
  background: var(--colorBeige2);
  border-radius: 100px;
  bottom: -3.12vw;
  color: var(--colorBlack);
  cursor: pointer;
  display: flex;
  height: 3.12vw;
  justify-content: center;
  position: absolute;
  right: 0;
  width: 18.05vw;
}

.information__link p {
  color: var(--colorBase);
  font-size: 1.45vw;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 2.2;
  position: relative;
}

.information__link span {
  background: var(--colorBrown);
  border-radius: 50%;
  content: "";
  height: 2.08vw;
  position: absolute;
  right: -2.08vw;
  top: 50%;
  transform: translateY(-50%);
  width: 2.08vw;
}

.information__link span::before {
  background: url(../images/top/icon-chevron_right_info.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 1.03vw;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: .51vw;
}

.caseInformation__inner .textArea {
  position: relative;
}

.cases .cta__button {
  margin: 5.55vw auto 0;
}

@media screen and (max-width: 767px) {
  .cases {
    padding-bottom: 30.7vw;
  }
  .cases .curve .sectionTitle {
    padding-top: 17.9vw;
  }
  .cases .sectionTitle h2 {
    font-size: 8.12vw;
    letter-spacing: .087em;
    line-height: 1.2;
    margin: 0 auto;
    text-align: start;
    width: 88.7vw;
  }
  .reform__swiper {
    margin-top: 11.7vw;
    width: 100%;
  }
  .cases__reformBox {
    height: 8.97vw;
    margin-top: 11.5vw;
    width: 89.74vw;
  }
  .cases__reformBox .pageText {
    font-size: 5.12vw;
  }
  .cases__reformBox::after {
    bottom: -4.02vw;
    height: 4.02vw;
  }
  .sectionTitle__lower--right img {
    width: 13.57vw;
  }
  .cases .sectionTitle {
    padding-top: 18.17vw;
  }
  .cases .sectionTitle__lower--left {
    padding: 7.7vw 2.84vw 0 0;
    position: relative;
  }
  .cases .sectionTitle__lower--left::after {
    background: #F0E7D8;
    bottom: 0;
    content: "";
    height: 8.7vw;
    position: absolute;
    right: -5px;
    width: 5px;
  }
  .sectionTitle__lower--left .pageText {
    font-size: 4.10vw;
    font-weight: 500;
  }
  .cases .sectionTitle__lower {
    gap: 4.1vw;
    margin-top: 3.1vw;
    width: 89.7vw;
  }
  .case_text{
    height: 56vw;
  }
  .barrierfree .case_text{
    height: 42vw;
  }
  .case__image img {
    height: 63.59vw;
  }
  .caseSlide .pageText {
    font-size: 4.1vw;
    font-weight: 500;
  }
  .caseSlide {
    padding: 12.15vw 5.97vw;
  }
  .case__number {
    font-size: 4.1vw;
    line-height: 7.69vw;
    /* padding-left: 3.33vw; */
    padding-left: 3vw;
  }
  .case__number::before {
    height: 7.69vw;
    width: 20.5vw;
  }
  .caseSlide__line {
    margin: 6.4vw 0 4.1vw;
  }
  .cases .slick-prev,
  .cases .slick-next {
    background: url(../images/top/icon-chevron_blue.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 7.7vw;
    width: 3.84vw;
    z-index: 7;
  }
  .cases .slick-prev {
    left: 6.6vw;
  }
  .cases .slick-next {
    right: 6.6vw;
  }
  .cases .slick-dots li button {
    height: 2.46vw;
    padding: 0;
    width: 2.46vw;
  }
  .cases .slick-dots {
    gap: 3.28vw;
    margin: 7.7vw auto 0;
  }
  .cases__reformBox.white {
    margin-top: 15.3vw;
  }
  .renovation__swiper {
    margin-top: 11.7vw;
    width: 100%;
  }
  .boxText span {
    /* border-radius: 8px; */
    height: 45vw;
    width: 45vw;
  }
  .boxText__text {
    font-size: 5.12vw;
    letter-spacing: .14em;
  }
  .caseInformation__inner {
    gap: 16.28vw;
    grid-template-columns: 1fr;
    padding: 27.1vw 0 9.25vw;
  }
  .caseInformation {
    height: 100%;
    margin: 28.12vw auto 0;
    width: 89.7vw;
  }
  .caseInformation .textArea .pageText {
    font-size: 4.1vw;
    font-weight: 500;
    line-height: 1.93;
    text-align: center;
  }
  .caseInformation__inner .textArea {
    align-items: center;
    display: flex;
    flex-direction: column-reverse;
    gap: 6.41vw;
  }
  .information__link {
    bottom: 0;
    height: 11.5vw;
    position: relative;
    width: 66.67vw;
  }
  .information__link p {
    font-size: 4.6vw;
  }
  .information__link span {
    height: 7.7vw;
    right: -9.28vw;
    width: 7.7vw;
  }
  .information__link span::before {
    height: 3.8vw;
    width: 2.31vw;
  }
  .caseInformation__banner {
    font-size: 5.12vw;
    height: 14.5vw;
    letter-spacing: .2em;
    top: -5%;
    width: 71.7vw;
  }
  .caseInformation__banner--left {
    height: 13.96vw;
    left: 24.7%;
    top: -6.6%;
    width: 25.4vw;
  }
  .caseInformation__banner--right {
    height: 13.96vw;
    right: -5%;
    top: -2.9%;
    width: 27.4vw;
  }
  .cases .cta__button {
    margin: 15.3vw auto 0;
  }
}

/* ---------------------------
   Goals
--------------------------- */

.goals_bg{
  background-color: #F0E7D8;
}

.goals {
  background: var(--colorGreen);
  background-color: #C1E1D2;
  height: 100%;
  padding-bottom: 8.41vw;
  position: relative;
}

.goals::before {
  background: url(../images/top/pink_border.svg);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 48.6vw;
  left: 0;
  position: absolute;
  top: -1px;
  width: 100%;
  z-index: 3;
}

.goals .sectionTitle__lower--left {
  width: 8.12vw;
}

.goals .sectionTitle {
  padding-top: 8.4vw;
}

.goals__message {
  margin: 2.08vw auto 0;
  position: relative;
  text-align: center;
  z-index: 2;
}

.goals__message .pageText {
  line-height: 2.1;
}

.goals__message .pageText.gap {
  margin-top: 2.75vw;
}

.goals__main {
  background: var(--colorGreen);
  background-color: #C1E1D2;
}

.goals__list {
  display: grid;
  gap: 6.25vw;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  margin: 0 auto;
  padding-top: 8.88vw;
  position: relative;
  width: 70.8vw;
  z-index: 1;
}

.goals__list::before {
  /* background: var(--colorGreenLight); */
  background-color: #F0E7D8;
  border-radius: 50%;
  content: "";
  height: 83.3vw;
  left: 50%;
  position: absolute;
  top: 56%;
  transform: translate(-50%, -50%);
  width: 83.3vw;
  z-index: -1;
}

.goals__item {
  background: #fff;
  border-radius: 4px;
  box-shadow: 10px 10px 0 #000;
  height: 100%;
  position: relative;
  width: 100%;
}

.goals__item--title {
  color: #fff;
  font-size: 1.66vw;
  font-weight: 700;
  left: 50%;
  letter-spacing: .06em;
  line-height: 1.3;
  position: absolute;
  text-align: center;
  top: -2.9vw;
  transform: translateX(-50%);
  z-index: 1;
}

.goals__item--title span {
  font-size: 1.11vw;
}

.goals__item .pageText {
  font-size: 1.25vw;
  line-height: 2.2;
  padding: 20% 8.5% 10.7%;
}

.goals__item img {
  position: absolute;
}

.goals__list .goals__item:first-child img {
  bottom: -9%;
  height: auto;
  right: 4.72%;
  width: 6.52vw;
}

.goals__list .goals__item:first-child .goals__item--title::before {
  background: url(../images/top/shape-cardtitle_purple.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 8.05vw;
  left: 50%;
  position: absolute;
  top: 60%;
  transform: translate(-50%, -50%);
  width: 9.93vw;
  z-index: -1;
}

.goals__list .goals__item:nth-child(2) img {
  bottom: -12%;
  height: auto;
  right: 7.72%;
  width: 4.65vw;
}

.goals__list .goals__item:nth-child(2) .goals__item--title::before {
  background: url(../images/top/shape-cardtitle_orange.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 7.63vw;
  left: 50%;
  position: absolute;
  top: 53%;
  transform: translate(-50%, -50%);
  width: 11.18vw;
  z-index: -1;
}

.goals__list .goals__item:nth-child(3) img {
  bottom: -9%;
  height: auto;
  right: 5.25%;
  width: 5.07vw;
}

.goals__list .goals__item:nth-child(3) .goals__item--title::before {
  background: url(../images/top/shape-cardtitle_green.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 6.78vw;
  left: 46%;
  position: absolute;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 12.43vw;
  z-index: -1;
}

.goals__list .goals__item:nth-child(4) img {
  bottom: -9.5%;
  height: auto;
  right: 7.61%;
  width: 6.21vw;
}

.goals__list .goals__item:nth-child(4) .goals__item--title::before {
  background: url(../images/top/shape-cardtitle_blue.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 6.6vw;
  left: 50%;
  position: absolute;
  top: 56%;
  transform: translate(-50%, -50%);
  width: 12.74vw;
  z-index: -1;
}

.goals__main .cta__button {
  margin: 11.6vw auto 0;
}

/* ---------------------------
   Service
--------------------------- */

.service_bg{
  background-color: var(--colorGreen);
  background-color: #C1E1D2;
}

.service {
  background: var(--colorBlueLight);
  background-color: var(--colorYellow);
  height: 100%;
  position: relative;
}

.service__inner {
  overflow: hidden;
  padding-bottom: 11.28vw;
  position: relative;
  z-index: 1;
}

.service .sectionTitle__lower--left {
  width: 8.12vw;
}

.service .sectionTitle {
  margin: 0 auto;
  padding-top: 8.43vw;
  position: relative;
  width: fit-content;
  z-index: 2;
}

.service .sectionTitle h2 {
  text-align: start;
}

.service__bg--yellow {
  height: auto;
  left: -20.3vw;
  position: absolute;
  top: 16.1vw;
  width: 67.5vw;
  z-index: 0;
}

.service__bg--blue {
  height: auto;
  position: absolute;
  right: -18.8vw;
  top: 74.6vw;
  width: 77vw;
  z-index: -1;
}

.service::before {
  background: url(../images/top/green__border.svg);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 48.6vw;
  left: 0;
  position: absolute;
  top: -1px;
  width: 100%;
  z-index: 3;
}

.service__message {
  padding-top: 2.08vw;
  position: relative;
  z-index: 2;
}

.service__message .pageText {
  line-height: 2.1;
  text-align: center;
}

.serviceDisplay {
  display: grid;
  grid-template-columns: 3.96vw 46.25vw;
  height: 22.8vw;
  margin: 4.16vw auto 0;
  position: relative;
  width: 50.3vw;
}

.serviceDisplay.reform {
  right: -10vw;
}

.reform .serviceDisplay__banner {
  align-items: center;
  background: url(../images/top/icon-reform_banner.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}

.reform .serviceDisplay__banner h5 {
  color: #fff;
  font-size: 1.45vw;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 2.2;
  padding-right: .78vw;
  transform: rotate(180deg);
  transform-origin: center;
  writing-mode: vertical-lr;
}

.serviceDisplay__container {
  position: relative;
  z-index: 0;
}

.reform__icon {
  bottom: -2vw;
  height: auto;
  position: absolute;
  right: -1.1vw;
  width: 11.18vw;
}

.serviceDisplay__body {
  align-self: end;
  background: #fff;
  height: calc(100% - 1vw);
  position: relative;
}

.serviceDisplay__title {
  color: var(--colorBrown);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.77vw;
  font-weight: 700;
  letter-spacing: .1em;
  padding-top: 1.15vw;
  text-align: center;
}

.serviceDisplay__container .serviceDisplay__line {
  height: 3px;
  margin: 1.74vw auto 0;
  position: relative;
  width: 41.1vw;
  z-index: 1;
}

.serviceDisplay__container .serviceDisplay__line .line {
  display: block;
  width: 100%;
  z-index: 1;
}

.reform .serviceDisplay__line .line {
  background: url(../images/top/path-orange_border.svg);
  background-repeat: repeat-x;
  height: 3px;
}

.reform .serviceDisplay__line .dot {
  background-color: #e8b741;
  border-radius: 50%;
  content: "";
  height: 1.76vw;
  left: -.86vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.76vw;
  z-index: -1;
}

.serviceDisplay__body .pageText {
  font-size: 1.25vw;
  padding: 2.5vw 1.33vw 0 2.51vw;
}

.serviceDisplay.renovation {
  left: -10.7vw;
}

.renovation .serviceDisplay__line .line {
  background: url(../images/top/path-orange_border.svg);
  background-repeat: repeat-x;
  height: 3px;
}

.renovation .serviceDisplay__line .dot {
  background-color: #E8B741;
  border-radius: 50%;
  content: "";
  height: 1.76vw;
  left: -.86vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.76vw;
  z-index: -1;
}

.renovation .serviceDisplay__banner {
  align-items: center;
  background: url(../images/top/icon-reform_banner.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}

.renovation .serviceDisplay__banner h5 {
  color: #fff;
  font-size: 1.45vw;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 2.2;
  padding-right: .78vw;
  transform: rotate(180deg);
  transform-origin: center;
  writing-mode: vertical-lr;
}

.renovation__icon {
  bottom: -3vw;
  height: auto;
  position: absolute;
  right: -3.1vw;
  width: 11.8vw;
}

.flow {
  background: #6eb544;
  background: #DFCDAA;
  margin: 9.02vw auto 0;
  width: 79.4vw;
}

.flow__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 4.16vw 0;
  position: relative;
}

.flow__inner::after {
  background: var(--colorBeige);
  border-left: 4px solid var(--colorBrown);
  bottom: -2.95vw;
  content: "";
  height: 5.37vw;
  position: absolute;
  right: -3.15vw;
  transform: rotate(45deg);
  transform-origin: center;
  width: 5.34vw;
}

.flow__inner::before {
  background: var(--colorBlueLight);
  background: var(--colorYellow);
  border-right: 4px solid var(--colorBrown);
  content: "";
  height: 5.37vw;
  left: -3.2vw;
  position: absolute;
  top: -2.95vw;
  transform: rotate(45deg);
  transform-origin: center;
  width: 5.34vw;
}

.flow__banner {
  align-items: center;
  display: flex;
  height: 7.22vw;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  width: 19.7vw;
  z-index: 0;
}

.flow__banner::after {
  background: url(../images/top/icon-banner_white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.flow__banner p {
  font-size: 1.8vw;
  font-weight: 700;
  letter-spacing: .12em;
}

.flow__row {
  display: grid;
  gap: 5.64vw 1.38vw;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-between;
  margin-top: 3.57vw;
}

.flow__item {
  align-items: center;
  background: #fff;
  background: var(--colorBeige);
  display: flex;
  height: 12.15vw;
  justify-content: center;
  position: relative;
  width: 15.65vw;
}

.flow__item--number {
  align-items: center;
  background: var(--colorBlueLight);
  background: var(--colorBeige);
  border: 4px solid var(--colorBrown);
  border-radius: 50%;
  color: var(--colorBase);
  display: flex;
  font-size: 1.38vw;
  font-weight: 700;
  height: 4.16vw;
  justify-content: center;
  left: 50%;
  letter-spacing: .087em;
  position: absolute;
  top: -19%;
  transform: translateX(-50%);
  width: 4.16vw;
}

.flow__item--number.orange {
  background: var(--colorOrange);
  border: 4px solid #fff;
  color: #fff;
}

.flow__item .pageText a {
  align-items: center;
  background: var(--colorOrange);
  border-radius: 50px;
  color: #fff;
  display: flex;
  font-size: 1.11vw;
  height: 2.5vw;
  justify-content: center;
  margin-top: 0;
  position: relative;
  width: 12.5vw;
}

.flow__item .pageText {
  font-size: 1.45vw;
  text-align: center;
}

.flow__row .flow__item:first-child .pageText {
  margin-top: 2vw;
}

.flow__row .flow__item:first-child .pageText a {
  margin-top: .5vw;
}

.flow__path {
  height: auto;
  left: 50%;
  position: absolute;
  top: 263%;
  transform: translate(-50%, -50%);
  width: 74.1vw;
  z-index: -2;
}

@media screen and (max-width: 767px) {
  .sectionTitle h2 {
    font-size: 8.22vw;
  }
  .goals__main {
    padding-bottom: 20.52vw;
  }
  .goals .sectionTitle {
    margin: 0 auto;
    padding-top: 18.23vw;
    width: 36.34vw;
  }
  .sectionTitle__lower,
  .goals .sectionTitle__lower--left {
    width: 100%;
  }
  .goals .sectionTitle__lower {
    gap: 3.87vw;
    grid-template-columns: 18.5vw auto;
  }
  .goals__message .pageText {
    font-size: 4.1vw;
    font-weight: 500;
  }
  .goals__message .pageText.gap {
    margin-top: 5.75vw;
  }
  .goals__message {
    margin: 10.25vw auto 0;
  }
  .goals__list::before {
    display: none;
  }
  .goals__list {
    gap: 27.7vw;
    grid-template-columns: 1fr;
    padding-top: 25.12vw;
    width: 89.8vw;
  }
  .goals__item {
    border-radius: 0;
  }
  .goals__item--title {
    font-size: 6.15vw;
    top: -8.9vw;
  }
  .goals__item--title span {
    font-size: 4.1vw;
  }
  .goals__item .pageText {
    font-size: 4.1vw;
    font-weight: 500;
    line-height: 1.9;
    padding: 21.8vw 6vw 30.7vw;
  }
  .goals__list .goals__item:first-child .goals__item--title::before {
    height: 30vw;
    width: 36.8vw;
  }
  .goals__list .goals__item:first-child img {
    bottom: -6%;
    left: 6.82vw;
    right: auto;
    width: 24.15vw;
  }
  .goals__list .goals__item:nth-child(2) .goals__item--title::before {
    height: 28.2vw;
    left: 56%;
    top: 45%;
    width: 41.3vw;
  }
  .goals__list .goals__item:nth-child(2) img {
    bottom: -9%;
    right: 8.46vw;
    width: 17.33vw;
  }
  .goals__list .goals__item:nth-child(3) .goals__item--title::before {
    height: 25vw;
    top: 40%;
    width: 46vw;
  }
  .goals__list .goals__item:nth-child(3) img {
    bottom: -8%;
    left: 6.74vw;
    right: auto;
    width: 18.74vw;
  }
  .goals__list .goals__item:nth-child(4) .goals__item--title::before {
    height: 24.38vw;
    width: 47vw;
  }
  .goals__list .goals__item:nth-child(4) img {
    bottom: -4.6%;
    right: 9.74vw;
    width: 23vw;
  }
  .goals__main .cta__button {
    margin: 15.8vw auto 0;
  }
  .service .sectionTitle {
    padding-top: 18.28vw;
  }
  .service .sectionTitle__lower {
    grid-template-columns: 18.57vw auto;
    margin-top: 0;
  }
  .service .sectionTitle__lower--left {
    width: 100%;
  }
  .service__message {
    padding-top: calc(40 / var(--designSPWidth));
  }
  .service__message .pageText {
    font-size: 4.1vw;
    font-weight: 500;
    line-height: 1.93;
  }
  .service__bg--yellow {
    left: -86vw;
    top: 48.46vw;
    width: 157vw;
  }
  .service__bg--blue {
    right: -92.8vw;
    top: 284.6vw;
    width: 210.25vw;
  }
  .serviceDisplay {
    grid-template-columns: 9.15vw auto;
    height: 100%;
    margin: 11.9vw auto 0;
    width: 87.7vw;
  }
  .serviceDisplay.reform {
    right: auto;
	  right: 1.3vw;
  }
  .serviceDisplay.renovation {
    left: auto;
	  left: -1.3vw;
  }
  .serviceDisplay__title {
    font-size: 5.12vw;
    padding-top: 2.8vw;
  }
  .serviceDisplay__container .serviceDisplay__line {
    width: 70.96vw;
  }
  .serviceDisplay__body .pageText {
    font-size: 4.1vw;
    font-weight: 500;
    padding: 3.5vw 1.33vw 23.58vw 2.51vw;
  }
  .serviceDisplay__body {
    padding: 0 5.12vw;
  }
  .reform .serviceDisplay__banner {
    background: url(../images/top/icon-reform_banner_sp.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .renovation .serviceDisplay__banner {
    background: url(../images/top/icon-reform_banner_sp.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .reform .serviceDisplay__banner h5,
  .renovation .serviceDisplay__banner h5 {
    font-size: 3.85vw;
  }
  .reform .serviceDisplay__line .dot,
  .renovation .serviceDisplay__line .dot {
    height: 4.1vw;
    width: 4.1vw;
  }
  .reform__icon {
    bottom: 2vw;
    right: -2vw;
    width: 41.28vw;
  }
  .renovation__icon {
    bottom: -5.5vw;
    right: -7.1vw;
    width: 43.6vw;
  }
  .flow__row {
    gap: 9.53vw 2.95vw;
    grid-template-columns: 1fr 1fr;
    margin-top: calc(43 / var(--designSPWidth));
  }
  .flow__item {
    height: 26.7vw;
    width: 33vw;
  }
  .flow__item .pageText {
    font-size: 4.1vw;
    font-weight: 500;
  }
  .flow__item .pageText a {
    font-size: 2.95vw;
    font-weight: 700;
    height: 5.29vw;
    width: 26.44vw;
  }
  .flow__item--number {
    border: 2px solid var(--colorBrown);
    font-size: 3.07vw;
    height: 8.97vw;
    top: -18%;
    width: 8.97vw;
  }
  .flow__item--number.orange {
    border: 2px solid #fff;
    font-size: 3.07vw;
    height: 8.97vw;
    top: -18%;
    width: 8.97vw;
  }
  .flow__banner p {
    font-size: calc(16 / var(--designSPWidth));
  }
  .flow__banner {
    height: calc(55 / var(--designSPWidth));
    width: calc(150 / var(--designSPWidth));
  }
  .flow__inner {
    padding: calc(21 / var(--designSPWidth)) 0;
  }
  .flow {
    margin-top: calc(80 / var(--designSPWidth));
    width: calc(354 / var(--designSPWidth));
  }
  .flow__path {
    top: 543%;
    width: calc(330 / var(--designSPWidth));
  }
  .flow__inner::before {
    border-right: 2px solid var(--colorBrown);
    height: 10.37vw;
    left: -7vw;
    top: -6.4vw;
    transform: rotate(46deg);
    width: 10.34vw;
  }
  .flow__inner::after {
    background: var(--colorYellow);
    border-left: 2px solid var(--colorBrown);
    bottom: -6.4vw;
    height: 10.37vw;
    right: -6.1vw;
    transform: rotate(46deg);
    width: 10.34vw;
  }
  .service__inner {
    padding-bottom: calc(120 / var(--designSPWidth));
  }
  .flow__item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .flow__item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .flow__item:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .flow__item:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
  }
  .flow__item:nth-child(5) {
    grid-column: 1;
    grid-row: 4;
  }
  .flow__item:nth-child(6) {
    grid-column: 2;
    grid-row: 4;
  }
  .flow__item:nth-child(7) {
    grid-column: 2;
    grid-row: 3;
  }
  .flow__item:nth-child(8) {
    grid-column: 1;
    grid-row: 3;
  }
  .reform .serviceDisplay__line .line {
    /* background: url(../images/top/path-orange_border_sp.svg); */
    background-repeat: repeat-x;
    height: 3px;
    margin-left: 1.1vw;
    width: calc(100% - 1.2vw);
  }

  .renovation .serviceDisplay__line .line {
    /* background: url(../images/top/path-blue_border_sp.svg); */
    background-repeat: repeat-x;
    height: 3px;
    margin-left: 1.1vw;
    width: calc(100% - 1.2vw);
  }
}

/* ---------------------------
   Q n A
--------------------------- */

.qna_bg{
  background-color: var(--colorBlueLight);
  background-color: #F8F09B;
}

.qna {
  background: #f2c45e;
  background: var(--colorBeige);
  height: 100%;
  padding-bottom: 8.41vw;
  position: relative;
}

.qna::before {
  background: url(../images/top/light_blue_border.svg);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 48.6vw;
  left: 0;
  position: absolute;
  top: -1px;
  width: 100%;
  z-index: 3;
}

.qna .sectionTitle__lower--left {
  width: 7.36vw;
}

.qna .sectionTitle {
  padding-top: 17.01vw;
  position: relative;
}

.qna__title {
  height: auto;
  left: 50%;
  position: absolute;
  top: 9.37vw;
  transform: translateX(-50%);
  width: 49.65vw;
}

.qna__main {
  padding-bottom: 6.94vw;
  padding-top: 4.16vw;
  position: relative;
  z-index: 5;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 2.08vw;
  margin: 0 auto;
  width: 80vw;
}

.accordionHead,
.accordionBody__inner {
  display: grid;
  gap: 1.41vw;
  grid-template-columns: 3.47vw auto;
  padding: 1.04vw 1.38vw;
}

.accordionHead {
  background: var(--colorPurple);
  background: #D7ED80;
  border-radius: 4px 4px 4px 4px ;
  cursor: pointer;
  position: relative;
}

.accordionHead.active {
  border-radius: 4px 4px 0 0;
}

.accordionHead::after {
  background: url(../images/top/icon-chevron_up_down.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: .58vw;
  position: absolute;
  right: 2.08vw;
  top: 2.48vw;
  transform: scaleY(-1);
  transition: .3s;
  width: 1.15vw;
}

.accordionHead.active::after {
  transform: scaleY(1);
}

.accordionBody,
.accordionbody__inner {
  background: #fff;
}

.accordion__q,
.accordion__a {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  color: var(--colorOrange);
  color: #395370;
  display: flex;
  font-size: 1.38vw;
  font-weight: 700;
  height: 3.47vw;
  justify-content: center;
  width: 3.47vw;
}

.accordion__a {
  background: var(--colorOrange);
  background: #395370;
  color: #fff;
}

.accordion .pageText {
  font-size: 1.25vw;
  letter-spacing: .14em;
  line-height: 1.75;
}

.accordionHead .pageText {
  color: #fff;
  color: var(--colorBlack);
}

.accordionBody .pageText,
.accordionHead .pageText {
  align-content: center;
}

.accordionBody {
  border-radius: 0 0 4px 4px;
}

.accordionItem .accordionBody {
  display: none;
}

.qna.sectionArea {
  padding-bottom: 0;
}

/* ---------------------------
   Contact
--------------------------- */

.contact {
  padding-top: 2.06vw;
  position: relative;
  z-index: 5;
}

.contactWave {
  height: 4.09vw;
  left: 0;
  overflow: hidden;
  position: absolute;
  position: absolute;
  top: -2.09vw;
  width: 100%;
}

.contactWave::before {
  background: url(../images/top/path-wavy_border.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 4.09vw;
  position: absolute;
  width: 100%;
}

.contact__top {
  display: grid;
  grid-template-columns: 13.4vw auto 9.6vw;
  margin: 0 auto;
  width: 80vw;
}

.contact__banner--title {
  align-items: center;
  display: flex;
  height: 17.08vw;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.contact__banner {
  color: #fff;
  font-size: 1.73vw;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.52;
  margin-top: -2.5vw;
  text-align: center;
}

.contact__banner span {
  font-size: 1.11vw;
}

.contact__banner--title::before {
  background: url(../images/top/icon-contact_banner.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.contact__top .pageText {
  font-size: 1.25vw;
  line-height: 2.2;
}

.contact__top .pageText .orange {
  color: var(--colorOrange);
}

.contact__top--textArea {
  align-items: center;
  display: flex;
  justify-content: center;
}

.contact__form .form {
  display: grid;
  grid-template-columns: 1fr;
  margin: 7vw auto 0;
  width: 80vw;
}

.form__row {
  border-bottom: 1px solid #000;
  /* display: grid; */
  /* grid-template-columns: 42% 58%; */
  padding: 2.77vw 0;
}

.form__row p{
  display: grid;
  grid-template-columns: 42% 58%;
}

.form__row.noBorder {
  border-bottom: none;
}

.form .pageText {
  font-size: 1.25vw;
  letter-spacing: .04em;
}

.disclaimer__container {
  border: 1px solid #000;
  border-radius: 4px;
  margin-top: 1.38vw;
  padding: 1.38vw 2.77vw;
}

.disclaimer__container--inner {
  height: 17.4vw;
  overflow-y: scroll;
  padding: .92vw 0;
  padding-right: 2.77vw;
  width: calc(100% - 2.08vw);
}

.disclaimer__container .pageText:not(:first-child) {
  margin-top: 2.43vw;
}

input#name {
  width: 100%;
}

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form select,
.form textarea {
  background: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 1.25vw;
  font-weight: 700;
  height: 4.16vw;
  letter-spacing: .04em;
  line-height: 2.2;
  padding: 1.18vw 2.22vw;
  width: 100%;
}

.form input:focus,
.form select:focus,
.form textarea:focus{
  border: none;
  outline: solid 2px var(--colorOrange);
}

.form select {
  color: #969696;
  appearance: none;
  cursor: pointer;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.form .select{
  position: relative;
}

.form .select::after{
  background: url(../images/top/icon-chevron_black.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: calc(8 / var(--designPCWidth));
  position: absolute;
  right: calc(21.5 / var(--designPCWidth));
  top: 50%;
  transform: translateY(-50%);
  width: calc(15 / var(--designPCWidth));
  pointer-events: none;
}

.form select option:not(:first-of-type) {
  color: #000;
}

.form__select--wrapper {
  position: relative;
}

.form__select--wrapper::after {
  background: #fff;
  content: "";
  height: 15px;
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
}

.form__select--wrapper::before {
  background: url(../images/top/icon-chevron_black.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: calc(8 / var(--designPCWidth));
  position: absolute;
  right: calc(21.5 / var(--designPCWidth));
  top: 50%;
  transform: translateY(-50%);
  width: calc(15 / var(--designPCWidth));
}

.form input[type="checkbox"] {
  height: 1.38vw;
  opacity: 0;
  position: relative;
  width: 1.38vw;
}

.wpcf7-list-item{
  margin: 0 1.5em 0 0;
}

.wpcf7-list-item label{
  position: relative;
}

.wpcf7-list-item-label{
  cursor: pointer;
  margin-left: 0.5vw;
}

.wpcf7-list-item-label::before {
  background: #fff;
  border: 1px solid #000;
  content: "";
  cursor: pointer;
  height: 1.38vw;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.38vw;
}

.wpcf7-list-item-label::after {
  background: url(../images/top/icon-tick.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  /* height: 1.16vw; */
  height: 1.5vw;
  position: absolute;
  left: 0.3vw;
  opacity: 0;
  top: 43.5%;
  transform: translateY(-50%);
  /* width: 1.38vw; */
  width: 1.5vw;
}

input[type=checkbox]:checked + .wpcf7-list-item-label:after {
  opacity: 1; 
}

.form .checkbox__group span {
  background: #fff;
  border: 1px solid #000;
  content: "";
  cursor: pointer;
  height: 1.38vw;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.38vw;
}

.form .checkbox__group.active span::after {
  background: url(../images/top/icon-tick.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 1.16vw;
  position: absolute;
  right: -.5vw;
  top: 43.5%;
  transform: translateY(-50%);
  width: 1.38vw;
}

.form fieldset {
  border: none;
  display: flex;
  justify-content: space-between;
}

.checkbox__group {
  display: flex;
  gap: .68vw;
  position: relative;
}

.form textarea {
  font-family: "Noto Sans JP", sans-serif;
  height: 16.8vw;
  resize: vertical;
  /* width: auto; */
  width: 90%;
}

.form input[type="text"].small {
  width: 50%;
}

.form sup {
  color: var(--colorOrange);
  font-size: .7vw;
}

.confirm__container {
  margin: 2.43vw auto 0;
}

.acceptance p{
  margin-top: 35px;
  text-align: center;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner{
  align-items: center;
  background: var(--colorOrange);
  border: none;
  border-radius: 100px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 1.38vw;
  font-weight: 700;
  height: 4.16vw;
  justify-content: center;
  margin: 4.16vw auto 0;
  width: 14.16vw;
}

.form__submit {
  align-items: center;
  background: var(--colorOrange);
  border: none;
  border-radius: 100px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 1.38vw;
  font-weight: 700;
  height: 4.16vw;
  justify-content: center;
  margin: 4.16vw auto 0;
  width: 14.16vw;
}

.form .half{
  width: 50%;
}

.wpcf7-not-valid-tip{
	margin-top: 0.5em;
}

/* For WebKit (Safari, Google Chrome, etc.) */
.form ::-webkit-scrollbar {
  height: 4.16vw;
  width: 5px;
  /* Width of the entire scrollbar */
}

.form ::-webkit-scrollbar-track {
  background: transparent;
  /* Color of the track */
}

.form ::-webkit-scrollbar-thumb {
  background: var(--colorOrange);
  /* Color of the scroll thumb */
}

.form ::-webkit-scrollbar-thumb:hover {
  background: var(--colorOrange);
  /* Color of the scroll thumb on hover */
}

/* リキャプチャのアイコンを消す */
.grecaptcha-badge {
	visibility: hidden;
}

@media screen and (max-width: 767px) {
  .qna .sectionTitle {
/*     padding-top: calc(159.1 / var(--designSPWidth)); */
	  padding-top: calc(148 / var(--designSPWidth));
  }
  .qna__title {
/*     top: calc(70.8 / var(--designSPWidth)); */
	  top: calc(62 / var(--designSPWidth));
    width: calc(271.28 / var(--designSPWidth));
  }
  .qna .sectionTitle__lower {
    gap: calc(15 / var(--designSPWidth));
    grid-template-columns: calc(72.44 / var(--designSPWidth)) auto;
    width: calc(141 / var(--designSPWidth));
  }
  .qna .sectionTitle__lower--left {
    width: 100%;
  }
  .accordion .pageText {
    font-size: calc(16 / var(--designSPWidth));
    font-weight: 500;
    letter-spacing: .1em;
  }
  .accordionHead,
  .accordionBody__inner {
    gap: calc(20 / var(--designSPWidth));
    grid-template-columns: calc(50 / var(--designSPWidth)) auto;
    padding: calc(16 / var(--designSPWidth));
    padding-right: calc(46 / var(--designSPWidth));
  }
  .accordion__q,
  .accordion__a {
    font-size: calc(20 / var(--designSPWidth));
    height: calc(50 / var(--designSPWidth));
    width: calc(50 / var(--designSPWidth));
  }
  .accordionHead::after {
    height: calc(8.35 / var(--designSPWidth));
    right: 4.08vw;
    top: 45%;
    transform: scaleY(-1) translateY(-50%);
    width: calc(16.69 / var(--designSPWidth));
  }
  .accordionHead.active::after {
    transform: scaleY(1) translateY(-50%);
  }
  .accordion {
    gap: 7.7vw;
    width: calc(350 / var(--designSPWidth));
  }
  .qna__main {
    padding-bottom: calc(80 / var(--designSPWidth));
    padding-top: calc(50 / var(--designSPWidth));
  }
  .contact {
    padding-top: calc(70 / var(--designSPWidth));
  }
  .contactWave {
    height: calc(59.03 / var(--designSPWidth));
    top: -5.09vw;
  }
  .contactWave::before {
    height: calc(59.03 / var(--designSPWidth));
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: calc(1533 / var(--designSPWidth));
  }
  .contact__top {
    gap: calc(40 / var(--designSPWidth));
    grid-template-columns: 1fr;
    width: calc(354 / var(--designSPWidth));
  }
  .contact__top--number {
    grid-row: 1;
    justify-self: center;
    width: calc(110.56 / var(--designSPWidth));
  }
  .contact__banner--title {
    grid-row: 2;
    height: calc(246 / var(--designSPWidth));
    justify-self: center;
    width: calc(193 / var(--designSPWidth));
  }
  .contact__top--textArea {
    grid-row: 3;
  }
  .contact__banner {
    font-size: calc(25 / var(--designSPWidth));
    margin-top: -11vw;
  }
  .contact__banner span,
  .contact__top .pageText {
    font-size: calc(16 / var(--designSPWidth));
  }
  .contact__top .pageText {
    font-weight: 500;
    text-align: center;
  }
  .contact__form .form {
    width: calc(350 / var(--designSPWidth));
    /* width: calc(100% - 40px); */
  }
  .form__row {
    gap: calc(18.8 / var(--designSPWidth));
    grid-template-columns: 1fr;
    width: calc(350 / var(--designSPWidth));
  }
  .form__row p{
    gap: calc(18.8 / var(--designSPWidth));
    grid-template-columns: 1fr;
  }
  .form .pageText {
    font-size: calc(16 / var(--designSPWidth));
    font-weight: 500;
    line-height: 1.5;
  }
  .form input[type="text"],
  .form input[type="tel"],
  .form input[type="email"],
  .form select,
  .form textarea {
    font-size: calc(16 / var(--designSPWidth));
    font-weight: 500;
    padding: calc(18 / var(--designSPWidth)) calc(20 / var(--designSPWidth));
  }
  .form input[type="text"],
  .form input[type="tel"],
  .form input[type="email"],
  .form select {
    height: 60px;
    width: calc(350 / var(--designSPWidth));
  }
  .form select {
    padding: 0 calc(20 / var(--designSPWidth));
  }
  .form .select::after{
    width: 15px;
    height: 8px;
    background-size: contain;
    right: 30px;
  }
  .form textarea {
    height: 242px;
    padding: calc(12 / var(--designSPWidth)) calc(20 / var(--designSPWidth)) calc(18 / var(--designSPWidth));
    /* width: calc(350 / var(--designSPWidth)); */
    width: 88%;
  }
  .form sup {
    font-size: calc(10 / var(--designSPWidth));
  }

  .form__row {
    gap: calc(19 / var(--designSPWidth));
    padding: calc(30 / var(--designSPWidth)) 0;
  }
  .form input[type="text"].small {
    width: 100%;
  }
  .form fieldset,
  span.wpcf7-form-control.wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
/*     gap: calc(26 / var(--designSPWidth)) calc(41 / var(--designSPWidth)); */
	  row-gap: calc(26 / var(--designSPWidth));
    justify-content: start;
  }
	.wpcf7-list-item{
    margin: 0 0 0 0;
  }
  .checkbox .wpcf7-list-item{
    margin: 0 0 0 0;
	  width: calc(100% / 3);
  }
  .wpcf7-list-item-label{
    margin-left: 4.5vw;
  }
  .wpcf7-list-item-label::before{
    height: calc(20 / var(--designSPWidth));
    width: calc(20 / var(--designSPWidth));
  }
  .form .checkbox__group span {
    height: calc(20 / var(--designSPWidth));
    width: calc(20 / var(--designSPWidth));
  }
  .checkbox__group {
    gap: 4.68vw;
  }
  .wpcf7-list-item-label::after{
    height: calc(15.5 / var(--designSPWidth));
    right: -1.1vw;
    width: calc(18.5 / var(--designSPWidth));
  }
  .form .checkbox__group.active span::after {
    height: calc(15.5 / var(--designSPWidth));
    right: -1.1vw;
    width: calc(18.5 / var(--designSPWidth));
  }
  .form__select--wrapper::before {
    height: calc(8 / var(--designSPWidth));
    right: calc(81.5 / var(--designPCWidth));
    width: calc(15 / var(--designSPWidth));
  }
  .disclaimer__container--inner {
    height: calc(267.5 / var(--designSPWidth));
  }
  .disclaimer__container {
    margin-top: calc(20 / var(--designSPWidth));
    padding: calc(20 / var(--designSPWidth));
  }
  .confirm__container {
    margin-top: calc(30 / var(--designSPWidth));
  }
  input.wpcf7-form-control.wpcf7-submit.has-spinner{
    font-size: calc(20 / var(--designSPWidth));
    height: calc(60 / var(--designSPWidth));
    margin-top: calc(40 / var(--designSPWidth));
    width: calc(204 / var(--designSPWidth));
  }
  .form__submit {
    font-size: calc(20 / var(--designSPWidth));
    height: calc(60 / var(--designSPWidth));
    margin-top: calc(40 / var(--designSPWidth));
    width: calc(204 / var(--designSPWidth));
  }
  .form__select--wrapper::after {
    height: 40px;
    width: 5.1vw;
  }
  .form .half{
    width: 100%;
  }
}

/* ---------------------------
   Footer
--------------------------- */

.footer {
  margin-top: 8.33vw;
}

.footer__container {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 80.2vw;
}

.footer__address {
  display: grid;
  gap: 3.12vw;
  grid-template-columns: 1fr;
}
.footer__info-wrapper {
  display: flex !important;
  align-items: flex-start !important;
  gap: 3vw !important;
}

.footer__text-content {
  flex: 1 !important;
}

.footer__image-content {
  flex-shrink: 0 !important;
  width: auto !important;
}

.footer__address-image {
  width: 25vw !important;
  max-width: none !important;
  min-width: 200px !important;
  height: auto !important;
  display: block !important;
}

@media screen and (max-width: 767px) {
  .footer__info-wrapper {
    flex-direction: column !important;
    gap: calc(20 / var(--designSPWidth)) !important;
  }
  
  .footer__address-image {
    width: 70vw !important;
    min-width: 150px !important;
  }
}.footer__logo {
  height: auto;
  width: 18.05vw;
}

.footer__address .pageText {
  font-size: 1.25vw;
  line-height: 1.88;
}

.footer__navigation {
  display: grid;
  gap: 2.08vw 5.55vw;
  grid-template-columns: 1fr 1fr;
}

.footer__navigation .pageText {
  color: var(--colorBase);
  font-size: 1.25vw;
  transition: .3s ease-in-out;
}

.footer__navigation .pageText:hover{
  color: var(--colorOrange);
}

.footer__navigation a:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.footer__navigation a:nth-child(3) {
  grid-column: 1;
  grid-row: 3;
}

.footer__navigation a:nth-child(4) {
  grid-column: 1;
  grid-row: 4;
}

.footer__navigation a:nth-child(5) {
  grid-column: 2;
  grid-row: 1;
}

.footer__navigation a:nth-child(6) {
  grid-column: 2;
  grid-row: 2;
}

.footer__navigation a:nth-child(7) {
  grid-column: 2;
  grid-row: 3;
}

.copywrite {
  border-top: 1px solid #000;
  font-size: .97vw;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  margin-top: 2.08vw;
  padding: 1.73vw 0;
  text-align: center;
}

.footer__address .pageText a {
  color: var(--colorBase);
  text-decoration: none;
}

#page-top,
#page-top_sp{
  position: fixed;
	right: 40px;
	z-index: 98;
  /*はじめは非表示*/
	opacity: 0;
}

#page-top a,
#page-top_sp a{
  /* content: ""; */
  display: block;
  width: 50px;
  height: 50px;
  background-color: var(--colorOrange);
  border-radius: 50%;
  position: relative;
  opacity: .8;
  transition: 0.3s;
}

#page-top a:hover,
#page-top_sp a:hover{
  opacity: 1;
}

#page-top a::after,
#page-top_sp a::after{
  display: block;
  content: "";
  width: 13px;
  height: 13px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(-45deg);
}

/*　上に上がる動き　*/

#page-top.UpMove,
#page-top_sp.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*　下に下がる動き　*/

#page-top.DownMove,
#page-top_sp.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media screen and (max-width: 767px) {
  .footer {
    margin-top: calc(80 / var(--designSPWidth));
  }
  .footer__container {
    display: grid;
    gap: calc(45 / var(--designSPWidth));
    grid-template-columns: 1fr;
    width: calc(100% - 40px);
  }
  .footer__logo {
    grid-column: 1;
    grid-row: 1;
    width: calc(260 / var(--designSPWidth));
	  width: calc(200 / var(--designSPWidth));
  }
  .footer__navigation {
    display: flex;
    flex-direction: column;
    gap: calc(20 / var(--designSPWidth));
    grid-column: 1;
    grid-row: 2;
  }
  .footer__navigation .pageText {
    font-size: calc(18 / var(--designSPWidth));
  }
  .footer__address .pageText {
    font-size: calc(16 / var(--designSPWidth));
  }
  .copywrite {
    font-size: calc(12 / var(--designSPWidth));
    line-height: 1.7;
    margin-top: calc(25 / var(--designSPWidth));
    padding: calc(25 / var(--designSPWidth)) 0 ;
  }
  .footer__address {
    grid-column: 1;
    grid-row: 3;
  }

  #page-top_sp{
    right: 5.13vw;
    /* bottom: 60px; */
  }
}
/* Footer Address Content */
.footer__address-content {
  display: flex;
  align-items: center;
  gap: 2.08vw;
}

.footer__address-image {
  height: auto;
  width: 8vw;
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  .footer__address-content {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(20 / var(--designSPWidth));
  }
  
  .footer__address-image {
    width: calc(120 / var(--designSPWidth));
  }
}
.footer__address-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 2.08vw !important;
}

.footer__address-content .pageText {
  flex: 1 1 auto;
}

.footer__address-image {
  height: auto !important;
  width: 8vw !important;
  max-width: 150px !important;
  flex-shrink: 0 !important;
}