/* 
 * common.css
 * コンポーネント以外で使用する共通スタイル
 */
body,
html {
  font-family: 'Noto Sans JP', sans-serif, 'Hiragino Kaku Gothic Pro', 'Meiryo';
  --full-width: 1440;
  --sp-full-width: 750;
  line-height: 1;
}
html.lenis.lenis-stopped,
.lenis.lenis-stopped body {
  overflow: hidden;
  touch-action: none;
}

/* スクロールバー非表示 */
* {
  -ms-overflow-style: none; /* IE・Edge */
  scrollbar-width: none; /* Firefox */
}
*::-webkit-scrollbar {
  display: none; /* Chrome・Safari */
}

.sp {
  display: none;
}
.pc {
  display: block;
}

.s .sp {
  display: block;
}
.s .pc {
  display: none;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

._hover {
  cursor: pointer;
}

/* フェードインアニメーション */
.common-fadeInItem {
  overflow: hidden;
  display: block;
  width: 100%;
  pointer-events: none;
}
.common-fadeInItem._show {
  pointer-events: auto;
}

.common-fadeInItem span {
  transform: translateY(101%);
  transition: opacity 2s cubic-bezier(0, 0, 0.2, 1), transform 1s cubic-bezier(0, 0, 0.1, 1);
  display: block;
  padding-bottom: calc(15 / var(--full-width) * 100vw);
}
.s .common-fadeInItem span {
  padding-bottom: calc(15 / var(--sp-full-width) * 100vw);
}

.common-fadeInItem._show span,
.s .common-fadeInItem._show span {
  transform: translateY(0);
}

/* 筆記体アニメーション */
.common-writing {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 50px;
}

/* 共通MV */
.common-mv {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-x: hidden;
}

.common-mv-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  row-gap: calc(35 / var(--full-width) * 100vw);
  align-items: center;
  transition: transform 0.8s linear 0.2s, row-gap 0.8s linear 0.2s;
}
.s .common-mv-text {
  row-gap: calc(40 / var(--sp-full-width) * 100vw);
}

.common-mv-text h1,
.common-mv-text p {
  transition: scale 0.8s linear 0.2s;
}

._open .common-mv-text {
  row-gap: 0;
  transition: transform 0.8s linear, row-gap 0.8s linear;
}
.s._open .common-mv-text {
  row-gap: calc(40 / var(--sp-full-width) * 100vw);
  transform: translate(-50%, -50%);
}

._open .common-mv-text h1,
._open .common-mv-text p {
  transition: scale 0.8s linear, opacity 0.4s, visibility 0.4s;
}

._open .common-mv-text h1 {
  scale: 0.57;
}
.s._open .common-mv-text h1 {
  scale: 1;
}

._open .common-mv-text p {
  scale: 0.8;
}
.s._open .common-mv-text p {
  scale: 1;
}

/* MVスライドコンテナ */
.common-slideContainer {
  width: 70%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
  background-color: #00009e;
  overflow: hidden;
  transition: transform 0.8s ease-out;
}
.s .common-slideContainer {
  width: 100%;
}

._open .common-slideContainer {
  transform: translateX(0);
  transition: transform 0.8s ease-out 0.7s;
}
.s._open .common-slideContainer {
  transition: transform 0.8s ease-out;
}

/* タイトル */
.common-title {
  width: fit-content;
  height: calc(50 / var(--full-width) * 100vw);
}
.s .common-title {
  height: calc(65 / var(--sp-full-width) * 100vw);
}
.common-title img {
  height: 100%;
  width: auto;
}

.common-title .common-fadeInItem,
.common-title .common-fadeInItem span {
  height: 100%;
}

/* テキスト */
.common-textWrapper {
  padding-top: calc(25 / var(--full-width) * 100vw);
  font-size: calc(14 / var(--full-width) * 100vw);
  font-weight: 300;
}
.common-textWrapper:first-of-type {
  padding-top: calc(60 / var(--full-width) * 100vw);
}

.common-textWrapper .common-fadeInItem span {
  padding-bottom: calc(13 / var(--full-width) * 100vw);
}

/* 回転 */
.common-roll {
  transition: transform 1.1s ease-out;
}
.common-roll img {
  animation: roll 45s linear infinite;
}
@keyframes roll {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 共通CONTACT */
.common-contact {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  width: 100%;
  height: 100vh;
  padding: calc(100 / var(--full-width) * 100vw) calc(170 / var(--full-width) * 100vw)
    calc(100 / var(--full-width) * 100vw) calc(65 / var(--full-width) * 100vw);
  background-color: #0000b8;
  z-index: 9999;
  opacity: 0;
  transition: transform 1s cubic-bezier(0, 0, 0.1, 1), opacity 2s 1s;
}
.s .common-contact {
  height: 100dvh;
  padding: calc(100 / var(--sp-full-width) * 100vw) calc(30 / var(--sp-full-width) * 100vw);
  transition: transform 0.6s cubic-bezier(0, 0, 0.1, 1), opacity 2s 0.6s;
}

.common-contact._active {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1s cubic-bezier(0, 0, 0.1, 1), opacity 0s;
}
.s .common-contact._active {
  transition: transform 0.6s cubic-bezier(0, 0, 0.1, 1), opacity 0s;
}

.common-contactWrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* タイトル */
.common-contact-title {
  display: flex;
  align-items: center;
  column-gap: calc(34 / var(--full-width) * 100vw);
}
.s .common-contact-title {
  column-gap: calc(34 / var(--sp-full-width) * 100vw);
}

.common-contact-title span:first-of-type {
  width: calc(70 / var(--full-width) * 100vw);
}
.s .common-contact-title span:first-of-type {
  width: calc(70 / var(--sp-full-width) * 100vw);
}

.common-contact-title span:last-of-type {
  width: calc(710 / var(--full-width) * 100vw);
}
.s .common-contact-title span:last-of-type {
  width: calc(710 / var(--sp-full-width) * 100vw);
}

/* フォーム */
.common-contact-form {
  display: flex;
  flex-direction: column;
  row-gap: calc(16 / var(--full-width) * 100vw);
  width: 66.5%;
  margin-top: calc(80 / var(--full-width) * 100vw);
  position: relative;
  left: 100%;
  transform: translateX(-100%);
}
.s .common-contact-form {
  row-gap: calc(16 / var(--sp-full-width) * 100vw);
  width: 100%;
  margin-top: calc(80 / var(--sp-full-width) * 100vw);
}

.common-contact-formItem {
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 0;
  color: #fff;
  font-size: calc(16 / var(--full-width) * 100vw);
  line-height: 1.3;
  font-weight: 500;
  padding: calc(14 / var(--full-width) * 100vw) calc(22 / var(--full-width) * 100vw);
  transition: border-color 0.5s;
}
.s .common-contact-formItem {
  border: 1px solid #fff;
  font-size: max(calc(16 / var(--sp-full-width) * 100vw), 16px);
  padding: calc(14 / var(--sp-full-width) * 100vw) calc(22 / var(--sp-full-width) * 100vw);
}
.common-contact-formItem::placeholder {
  color: #fff;
  opacity: 0.7;
}

.common-contact-formItem._error {
  border-color: #fedb00;
}

.common-contact-form div {
  display: flex;
  justify-content: space-between;
  margin-top: calc(5 / var(--full-width) * 100vw);
}
.s .common-contact-form div {
  flex-direction: column;
  row-gap: calc(50 / var(--sp-full-width) * 100vw);
  align-items: flex-end;
  margin-top: calc(20 / var(--sp-full-width) * 100vw);
}

.common-contact-form p {
  font-size: calc(12 / var(--full-width) * 100vw);
  font-weight: 300;
  line-height: 1.5;
  color: #fff;
}
.s .common-contact-form p {
  font-size: max(calc(16 / var(--sp-full-width) * 100vw), 12px);
}

.common-contact-form button {
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: calc(210 / var(--full-width) * 100vw);
  transition: opacity 0.3s;
}
.common-contact-form button._disabled {
  opacity: 0.5;
  pointer-events: none;
}

.s .common-contact-form button {
  width: calc(400 / var(--sp-full-width) * 100vw);
}