/*
Theme Name: WAYOSHIme
*/

@charset "UTF-8";
body {
  color: #615E5D;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: clamp(14px, 16px, 18px);
  /* font-size: 62.5%; font-size 10px */
  /* font-size: clamp(1rem, 0.523rem + 2.04vw, 1.5rem); VALUES: 16-24 VIEWPORT: 375-768 */
  font-weight: 200;
  letter-spacing: 0.1em;
}
a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
a:hover {
  /* transform: scale(1.1);
  transition: .3s; */
}
.icon {
  color: #E2D14F;
}
.textJP {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}
.textEN {
  font-family: "Kantumruy Pro", sans-serif;
  font-weight: 100;
}
.back__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* スクロールでコンテンツをフワッと表示させる */
.fade {
  opacity: 0;
  transform: translateY(50px);
  transition: 4s;
}
.fade.active {
  opacity: 1;
  transform: translateY(0px);
}
/* その場でコンテンツをフワッと表示させる */
.fadein__quick {
  opacity: 0;
  /* 1s でアニメーションスピードを管理 */
  animation: fadeIn 1s ease-in forwards;
}
.fadein__nomal {
  opacity: 0;
  animation: fadeIn 3s ease-in forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*******************************
header
*******************************/
#header {
  position: absolute;
}
#header .hamberger__container {
  width: 105px;
  height: 105px;
  position: relative;
}
#header .hamberger__nav {
  width: 90px;
  height: 90px;
  border: 1px solid #2F3149;
  box-sizing: border-box;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 100;
  transition: .3s;
}
#header .hamberger__nav:hover {
  transform: scale(1.1);
  transition: .3s;
}
#header .hamberger__nav span {
  width: 75px;
  height: 1px;
  background-color: #615E5D;
  position: absolute;
  left: 6.5px;
  transition: 1s;
}
#header .hamberger__nav span:nth-of-type(1) {
  top: calc(90px / 2 - 25px);
  /* top: 20px; */
}
#header .hamberger__nav span:nth-of-type(2) {
  top: calc(90px / 2);
  /* top: 45px; */
}
#header .hamberger__nav span:nth-of-type(3) {
  top: calc(90px / 2 + 25px);
  /* top: 70px; */
}
#header .hamberger__nav.open span:nth-of-type(1) {
  top: calc(90px / 2);
  transform: rotate(315deg); 
  /* 45degのこと */
}
#header .hamberger__nav.open span:nth-of-type(2) {
  opacity: 0;
}
#header .hamberger__nav.open span:nth-of-type(3) {
  top: calc(90px / 2);
  transform: rotate(-315deg); 
  /* -45degのこと */
}
#header .hamberger__menu{
  width: 100vw;
  height: 100vh;
  background-image: url(/wp-content/themes/WAYOSHIme/img/hamberger-background.png);
  background-size: cover;
  background-position: left;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: 1s;
  /* opacityで見えなくしてもリンクが効いているかもしれないので必ず書くこと */
  pointer-events: none;
}
#header .hamberger__menu.open {
  opacity: 1;
  pointer-events: auto;
}
#header .hamberger__menu--frame {
  width: 85%;
  height: 87%;
  border: 1px solid #615E5D;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(228, 227, 212, 0.1);
}
#header .hamberger__text--wrap {
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#header .hamberger__title {
  color: #2f3149;
  font-family: "Monoton", sans-serif;
  font-size: clamp(36px, 40px, 44px);
}
#header .hamberger__text--wrap ul {
  padding-top: 50px;
  text-align: center;
}
#header .hamberger__text--wrap ul li {
  color: #2f3149;
  font-family: "Kantumruy Pro", sans-serif;
  font-size: clamp(22px, 24px, 26px);
  font-weight: 300;
  padding-bottom: 20px;
}
/*******************************
main
*******************************/
#main {
  position: relative;
}
#main.close {
  display: none;
}
/*******************************
main-----top visual section
*******************************/
#main .top__visual {
  width: 100vw;
  height: 100vh;
  scroll-snap-type: y proximity;
  background-image: url(/wp-content/themes/WAYOSHIme/img/top-background.png);
  background-size: cover;
  background-position: left;
  position: relative;
  overflow: hidden;
}
#main .top__visual::after {
  display: none;
}
#main .top__visual--frame {
  width: 85%;
  height: 87%;
  border: 1px solid #615E5D;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(228, 227, 212, 0);
}
#main .top__visual--frame::before {
  content: '';
  display: inline-block;
  width: 70%;
  background-image: url(/wp-content/themes/WAYOSHIme/img/material-sakura.png);
  aspect-ratio: 690 / 900;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  position: absolute;
  top: -15%;
  right: -20%;
  animation: slidefromRight 4s;
}
@keyframes slidefromRight {
  0% {
    transform: translateX(100%);
  }
  25% {
    transform: translateX(100%);
  }
  75% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}
#main .top__visual--frame::after {
  content: '';
  display: inline-block;
  width: 60%;
  background-image: url(/wp-content/themes/WAYOSHIme/img/top-lady.png);
  aspect-ratio: 420 /450;
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -8%;
  left: -9%;
  animation: slidefromLeft 4s;
}
@keyframes slidefromLeft {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
#main .top__greeting {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fadeInHere 7s;
}
@keyframes fadeInHere {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#main .greeting__main {
  font-family: "Monoton", sans-serif;
  font-size: clamp(34px, 38px, 42px);
}
#main .greeting__sub {
  font-family: "Kantumruy Pro", sans-serif;
  font-size: clamp(22px, 24px, 26px);
  font-weight: 100;
  letter-spacing: 0;
}
/*******************************
main-----about section
*******************************/
#main .about__section {
  height: 100vh;
  color: #F5F5F5;
  background-color: #898B65;
}
#main .about__section .about__container {
  width: 85%;
  height: 100%;
  margin: 0 auto;
  padding-top: 60px;
}
#main .about__section .about__title {
  font-family: "Monoton", sans-serif;
  font-size: clamp(36px, 40px, 44px);
  text-align: center;
  margin-bottom: 30px;
}
#main .about__section .about__swiper {
  height: 75%;
  border: 1px solid #615E5D;
  position: relative;
}
#main .about__section .about__img {
  width: 18%;
  aspect-ratio: 267 / 760;
  position: absolute;
  bottom: -15%;
  right: 0;
}
#main .about__section .about__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main .about__section .swiper {
  /* height: 75%; */
  /* padding: 20px 2%; */
}
#main .about__section .swiper-wrapper {
  height: 100%;
  margin-bottom: 50px;
}
#main .about__section .swiper-slide {
  /* border: 1px solid #615E5D; */
}
#main .about__section .swiper__title {
  width: 98%;
  font-family: "Kantumruy Pro", sans-serif;
  font-size: clamp(22px, 24px, 26px);
  font-weight: 200;
  margin: 30px auto;
  text-align: center;
}
#main .about__section .swiper__text {
  width: 90%;
  margin: 0 auto 30px;
  line-height: 2.5;
}
#main .about__section .textJP {

}
#main .about__section .textEN {
  display: none;
}
/*******************************
main-----background gradient
*******************************/
#main .background__gradient {
  background: #E2D3BF ;
  background: linear-gradient(to bottom, #6193A0 0%, #FFFCF0 15%, #E2D3BF 95%, #2F3149 100%);
  padding-bottom: 60px;
}
/*******************************
main(background gradient)-----works section
*******************************/
#main .works__section {
  margin-bottom: 100px;
  /* background-color: red; */
}
#main .works__section .works__container {
  width: 85%;
  margin: 0 auto 50px;
  padding-top: 60px;
}
#main .works__section .works__title {
  color: #0F0F0F;
  font-family: "Monoton", sans-serif;
  font-size: clamp(36px, 40px, 44px);
  text-shadow: 0 4px 4px white;
  text-align: center;
  margin-bottom: 30px;
}
#main .works__section .works__item--frame {
  width: 100%;
  /* height: 87%; */
  /* border: 1px solid #615E5D; */
  box-sizing: border-box;
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  margin-bottom: 50px;
}
#main .works__section .works__item--frame:nth-child(5) {
  margin-bottom: 0;
  /* margin-bottom: 100px; */
}
#main .works__section .item__number {
  width: 100%;
  color: rgba(248, 209, 203, 0.55);
  font-family: "Monoton", sans-serif;
  font-size: clamp(170px, 190px, 210px);
  position: absolute;
  text-align: center;
  z-index: 1;
}
/* #main .works__section .works__item--frame:nth-child(4) .item__number,
#main .works__section .works__item--frame:nth-child(5) .item__number {
  color: rgba(255, 191, 182, 0.55);
} */
#main .works__section .works__item--frame:nth-of-type(1) .item__number::before {
  content: '01';
}
#main .works__section .works__item--frame:nth-of-type(2) .item__number::before {
  content: '02';
}
#main .works__section .works__item--frame:nth-of-type(3) .item__number::before {
  content: '03';
  color: rgba(239, 187, 180, 0.5);
}
#main .works__section .works__item--frame:nth-of-type(4) .item__number::before {
  content: '04';
  color: rgba(239, 187, 180, 0.5);
}
#main .works__section .works__item--frame:nth-of-type(5) .item__number::before {
  content: '05';
  color: rgba(239, 187, 180, 0.5);
}
/* #main .works__section .item__number::before {
  content: '01';
} */
#main .works__section .works__item {
  width: 100%; /* at SP width full , at PC width 96% */
  margin: 0 auto;
  z-index: 2;
}
#main .works__section .item__img {
  width: 100%;
  padding-top: 30px;
}
#main .works__section .item__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 350 / 250;
}
#main .works__section .item__des {
  width: 100%;
  margin-bottom: 20px;
  padding-top: 30px;
}
#main .works__section .item__stc {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px dotted #615E5D;
  /* padding-left: 10px; */
}
#main .works__section .item__name .item__icon {
  display: inline-block;
  width: 15px;
  aspect-ratio: 15 / 15;
  border-radius: calc(15px / 2);
  background-color: #E2D14F;
  margin-right: 3%;
}
#main .works__section .item__etc {
  font-size: clamp(12px, 14px, 16px);
}
#main .works__section .tag__des {
  display: inline-block;
  width: 90px;
  height: 30px;
  border-radius: calc(30px / 2);
  font-size: clamp(10px, 12px, 14px);
  line-height: 30px;
  text-align: center;
}
#main .works__section .tag__website {
  background-color: rgba(235, 110, 0, 0.75);
}
#main .works__section .tag__diy {
  border: 1px solid #615E5D;
}
#main .works__section .tag__banner {
  border: 1px solid #FE92E7;
  background-color: rgba(248, 209, 203, 0.85);
}
#main .works__section .tag__insta {
  background-color: rgba(137, 139, 101, 0.75);
}
/* #main .works__section .works__btn--wrap {
  width: 85%;
  margin: 0 auto;
} */
#main .works__section .works__btn {
  width: 35%;
  height: 100%;
  text-align: center;
  border: 1px solid #615E5D;
  font-size: clamp(18px, 20px, 22px);
  padding: 3px 5px;
  /* padding: 5px 15px; */
  margin: 0 auto;
  font-weight: 100;
}

/*******************************
main(background gradient)-----back button
*******************************/
#main .back__button {
  text-align: center;
}
#main .back__button .back__link {
  display: block;
  width: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: #E2D14F;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}
#main .back__button .link__img {
  width: 50%;
  height: 50%;
  z-index: 2;
  position: absolute;
  left: 25%;
  top: -40%;
  transform-origin: center 180%;
  animation: rotate1 20s linear infinite;
}
@keyframes rotate1 { 
  0% {
   transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#main .back__button .link__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#main .back__button .back__button--circle {
  width: 70%;
  aspect-ratio: 1 / 1;
  background-color: rgba(255, 239, 63, 0.75);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
#main .back__button .back__text {
  color: #615E5D;
  font-family: "Monoton", sans-serif;
  font-size: clamp(18px, 20px, 22px);
  text-align: center;
}
.wrapper {
  width: 100%;
}
.link {
  display: block;
  width: calc(100vw / 2);
  height: calc(100vw / 2);
  background-color: orange;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
}
.big__circle {
  background-image: url(/wp-content/themes/WAYOSHIme/img/backToTop-back2.png);
  /* width: calc(100vw / 2); */
  /* height: calc(100vw / 2); */
  width: 120%;
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: calc(100vw / 2 - 110%);
  animation: 30s linear infinite rotation;
}
.inner__circle {
  width: calc(100vw / 4);
  height: calc(100vw / 4);
  background-color: #fef8c7;
  border-radius: 100%;
  position: absolute;
  top: calc(100vw / 2 / 2);
    left: calc(100vw / 2 / 2);
    transform: translate(-50%, -50%);
}
/*******************************
main-----contact senction
*******************************/
#main .contact__section {
  background-color: #2F3149;
  color: #FFFFFF;
  margin-top: -1px;
}
#main .contact__section .contact__container {
  padding: 60px 0;
  width: 85%;
  margin: 0 auto;
}
#main .contact__section .contact__title {
  font-family: "Monoton", sans-serif;
  font-size: clamp(36px, 40px, 44px);
  text-align: center;
  margin-bottom: 30px;
}
#main .contact__section .contact__stc.textJP {
  display: flex;
  align-items: center;
  gap: 3%;
  margin-bottom: 15px;
}
#main .contact__section .contact__stc.textEN {
  line-height: 1.5;
  margin-bottom: 30px;
}
#main .contact__section .contact__stc.textJP span {
  width: 10%;
  aspect-ratio: 31 / 25;
}
#main .contact__section .contact__stc.textJP span img {
  width: 100%;
  /* aspect-ratio: 23 / 20; */
  height: 100%;
  object-fit: cover;
}
#main .contact__section .contact__form {
  width: 100%;
  text-align: center;
}
#main .contact__section .form__name ,
#main .contact__section .form__message ,
#main .contact__section .form__mail {
  float: left;
  width: 100%;
  border: 1px solid #FFFFFF;
  margin: 10px 0;
  padding: 10px 20px;
  color: black;
  background-color: #FFFFFF;
  text-align: left;
  font-size: clamp(14px, 16px, 18px);
}
#main .contact__section .form__name::placeholder ,
#main .contact__section .form__message::placeholder ,
#main .contact__section .form__mail::placeholder {
  /* color: darken(#f9f9f9, 50%); */
  color: #8f8988;
  font-family: "Kantumruy Pro", sans-serif;
  font-weight: 200;
  letter-spacing: 50%;
}
#main .contact__section .form__message {
  height: 10em;
  margin-bottom: 30px;
}
#main .contact__section .form__submit {
  width: 40%;
  color: #2f3149;
  background-color: #FE92E7;
  margin: 10px auto;
  padding: 10px 15px;
  text-align: center;
  font-family: "Kantumruy Pro", sans-serif;
  display: flex;
  font-size: clamp(14px, 16px, 18px);
}
/* contact form7 */
/* 送信済みメッセージ　フォントサイズ調整 */
.wpcf7 form.sent .wpcf7-response-output {
  font-size: clamp(12px, 14px, 16px);
}
/* エラーメッセージ　フォントサイズ調整 */
#main .contact__section .wpcf7-not-valid-tip {
  font-size: clamp(10px, 12px, 14px);
}
/* スピナーを非表示に */
#main .contact__section .wpcf7-spinner {
  display: none;
}
/* 送信ボタンを押した時にヴァリデーションチェックメッセージ表示されるよう非表示にする */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  font-size: clamp(12px, 14px, 16px);
}
#main .contact__section .wpcf7 form .wpcf7-response-output {
  font-size: clamp(12px, 14px, 16px);
  margin: 10px 15px;
  padding: 5px 10px;
}
#main .contact__section .cf__submit {
  width: 100%;
  /* margin-top: 35px; */
}
/*******************************
main-----contact senction-----footer-part
*******************************/
#main .footer {
  font-size: clamp(10px, 12px, 14px);
  text-align: center;
  padding: 20px 0;
  background-color: #2F3149;
  color: #FFFFFF;
  margin-top: -1px;
}
#main .footer__background {
  display: none;
}
/* archive-works ではfooter__backgroundは非表示にする */
#main .is__archive--works {
  display: none;
}
/*******************************
view wide over 768
*******************************/
    @media screen and (min-width: 769px) {
      /*******************************
      #header
      *******************************/
      #header .hamberger__container {
        width: 210px;
        height: 210px;
      }
      #header .hamberger__nav {
        width: 180px;
        height: 180px;
      }
      #header .hamberger__nav span {
        width: 150px;
        left: 15px;
      }
      #header .hamberger__nav span:nth-of-type(1) {
        top: calc(180px / 2 - 50px);
      }
      #header .hamberger__nav span:nth-of-type(2) {
        top: calc(180px / 2);
      }
      #header .hamberger__nav span:nth-of-type(3) {
        top: calc(180px / 2 + 50px);
      }
      #header .hamberger__nav.open span:nth-of-type(1) {
        top: calc(180px / 2);
      }
      #header .hamberger__nav.open span:nth-of-type(3) {
        top: calc(180px / 2);
      }
      #header .hamberger__text--wrap {
        display: flex;
        justify-content: space-between;
      }
      #header .hamberger__title {
        font-size: clamp(56px, 64px, 70px);
        display: flex;
        align-items: center;
      }
      #header .hamberger__text--wrap ul {
        padding-top: 0;
      }
      #header .hamberger__text--wrap ul li {
        font-size: clamp(22px, 24px, 26px);
        padding-bottom: 30%;
      }
      #header .hamberger__text--wrap ul li:first-child {
        padding-top: 30%;
      }
      /*******************************
      #main
      *******************************/
      /* 手のアニメーションを表示 */
      #main .top__visual::after {
        content: '';
        display: inline-block;
        width: 8%;
        background-image: url(/wp-content/themes/WAYOSHIme/img/material-hand.png);
        aspect-ratio: 206 /314;
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 0;
        left: 23%;
        animation: slidefrombottom 10s;
        transform-origin: 0% 100%;
      }
      @keyframes slidefrombottom {
        /* 0% {
          transform: translateY(100%);
        }
        50% {
          transform: translateY(100%);
        }
        100% {
          transform: translateY(0);
        } */
        0% {
          transform: rotate(90deg);
        }
        50% {
          transform: rotate(90deg);
        }
        100% {
          transform: rotate(0deg);
        }
      }
      #main .top__visual--frame::before {
        width: 45%;
      }
      #main .top__visual--frame::after {
        width: 30%;
      }
      #main .greeting__main {
        font-size: clamp(56px, 64px, 70px);
      }
      #main .greeting__sub {
        font-size: clamp(22px, 24px, 26px);
      }
      /*******************************
      about section
      *******************************/
      #main .about__section .about__title {
        font-size: clamp(56px, 64px, 70px);
        text-align: left;
      }
      #main .about__section .about__img {
        width: 12%;
        bottom: auto;
        right: -2%;
        top: -25%;
      }
      #main .about__section .about__swiper {
        display: flex;
        align-items: center;
      }
      #main .about__section .swiper__title {
        font-size: clamp(28px, 32px, 36px);
      }
      #main .about__section .swiper {
        width: 60%;
      }
      #main .about__section .swiper-wrapper {
        margin-bottom: 0;
      }
      #main .about__section .textEN {
        display: block;
        font-size: clamp(14px, 16px, 18px);
      }
      /*******************************
      background gradient
      *******************************/
      #main .background__gradient {
        background: linear-gradient(to bottom, #FFFCF0 0%, #E2D3BF 94%, #2F3149 100%);
        padding-bottom: 0;
      }
      /*******************************
      works section
      *******************************/
      #main .works__section {
        /* margin-bottom: 130px; */
        margin-bottom: 0;
      }
      #main .works__section .works__container {
        width: 100%;
      }
      #main .works__section .works__title--bg {
        background-image: url(/wp-content/themes/WAYOSHIme/img/works-background.png);
        position: relative;
        height: 200px;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 60px;
      }
      #main .works__section .works__title {
        font-size: clamp(56px, 64px, 70px);
      }
      #main .works__section .works__item--wrapper {
        width: 85%;
        margin: 0 auto;
      }
      #main .works__section .works__item--frame {
        flex-direction: column;
        border: 1px solid #615E5D;
        margin-bottom: 60px;
      }
      #main .works__section .item__number {
        position: relative;
        font-size: clamp(56px, 64px, 70px);
        text-align: right;
        margin-top: 20px;
        padding-right: 35px;
      }
      #main .works__section .works__item {
        display: flex;
        flex-direction: row-reverse;
        width: 80%;
        padding-top: 10px;
        padding-bottom: 85px;
        gap: 2%;
      }
      #main .works__section .item__img {
        width: 60%;
        padding-top: 0;
      }
      #main .works__section .item__stc {
        font-size: clamp(22px, 24px, 26px);
      }
      #main .works__section .item__des {
        width: 48%;
        margin: auto 0;
        padding-top: 0;
      }
      #main .works__section .works__btn--wrap {
        width: 100%;
      }
      #main .works__section .works__btn {
        width: 15%;
      }
      /*******************************
      works tag
      *******************************/
      #main .works__section .tag__des {
        width: 140px;
        height: 36px;
        line-height: 36px;
        border-radius: calc(36px / 2);
        font-size: clamp(14px, 16px, 18px);
      }
      #main .works__section .item__etc {
        font-size: clamp(14px, 16px, 18px);
      }
      #main .works__section .works__item--frame:nth-child(5) {
        margin-bottom: 0;
      }
      /*******************************
      back to top button
      *******************************/
      #main .back__button {
        position: relative;
        bottom: -130px;
      }
      #main .back__button--container {
        width: 85%;
        margin: 0 auto;
      }
      #main .back__button .back__link {
        width: 25%;
        margin-left: 0;
      }
      #main .back__button .link__img {
        width: 30%;
        height: 30%;
        left: 35%;
        top: -25%;
        transform-origin: center 250%;
      }
      #main .back__button .back__text {
        font-size: clamp(21px, 24px, 26px);
        line-height: 2.0;
      }
      /* 画面769以上 archive works のページだった場合はバックボタンのCSSを変更する */
      #main .is__archive--btn {
        bottom: 0;
      }
      /* #main .back__button .back__button--circle {
        width: 70%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      } */
      /*******************************
      contact section
      *******************************/
      #main .contact__section {
        height: 100vh;
        position: relative;
        overflow: hidden;
      }
      #main .contact__section .contact__container {
        width: 35%;
        padding: 60px 0 10px;
      }
      #main .contact__section .contact__title {
        font-size: clamp(56px, 64px, 70px);
      }
      #main .contact__section .contact__stc.textJP {
        margin-bottom: 10px;
      }
      #main .contact__section .contact__stc.textJP span {
        width: 8%;
      }
      #main .contact__section .contact__stc.textEN {
        font-size: clamp(14px, 16px, 18px);
        margin-bottom: 10px;
      }
      #main .contact__section .form__message {
        height: 100px;
        margin-bottom: 20px;
      }
      /*******************************
      footer-part
      *******************************/
      #main .contact__section .footer {
        width: 100vw;
        /* width: 20%; */
        position: absolute;
        bottom: 10px;
        /* left: calc(100vw / 2 - 10%); */
        padding: 15px 0 0;
      }
      #main .contact__section .footer p {
        line-height: 14px;
      }
      /*******************************
      footer background
      *******************************/
      #main .contact__section .footer__background {
        display: inline-block;
        width: 100%;
      }
      /* footer circles = contact__img */
      #main .contact__section .footer__circle {
        aspect-ratio: 1 / 1;
        position: absolute;
      }
      /* contact__img の個別設定 = background__circle */
      #main .contact__section .background-circle1 {
        width: 15%;
        bottom: 260px;
        left: -20px;
      }
      #main .contact__section .background-circle2 {
        width: 15%;
        bottom: 76px;
        left: -60px;
      }
      #main .contact__section .background-circle3 {
        width: 18%;
        bottom: -15px;
        left: 130px;
      }
      #main .contact__section .footer__circle img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      /* footer image of woman */
      #main .contact__section .footer__pic {
        position: absolute;
        width: 20%;
        aspect-ratio: 330 / 524;
        bottom: 0;
        right: 0;
      }
      #main .contact__section .footer__pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }