@charset "UTF-8";

/* ---------- base ---------- */
body {
  margin: 0;
  padding: 0; 
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-family: "Kaisei HarunoUmi", serif;
  font-weight: 400;
  font-style: normal;      
  color: var(--white-color);
  font-size: 16px;
  background-color: var(--red-color);
}

:root {
  --black-color: #070C1A;
  --white-color: #FFF4Fe;
  --red-color:#FF2D2D;
  --blue-color:#2BFFFF;
  --yellow-color:#FFFF2B;
}

.inner {
  padding: 0 2.67vw;
}

.ttl {
  font-size: clamp(24px, 4vw, 64px);
  display:flex;
  align-items:center;
  justify-content: center;
  font-family: "Kaisei HarunoUmi", serif;
  padding-top: 10cqw;
}

/* ボタンを中央に配置するためのラッパー */
.button-wrapper {
  position: relative;
}

/* ボタン本体のスタイル */
.form-submit {
  position: absolute; /* 絶対位置に配置 */
  left: 50%; /* 親要素の幅の中央 */
  top: 50%;
  transform: translate(-50%, -50%); /* ボタンの中心を基準に移動 */
  width: 20cqw; /* ボタンの幅 */
  height: 5cqw; /* ボタンの高さ */
  background-color: var(--white-color); /* 初期の背景色 */
  display: flex;
  align-items: center; /* テキストをボタン内の上に配置 */
  justify-content: center; /* テキストを中央揃え */
  border-radius: 4px; /* 角を少し丸める */
  overflow: hidden; /* 擬似要素がボタンからはみ出さないようにする */
  cursor: pointer; /* クリックできるアイコンに変更 */
  font-weight: bold;
  color: var(--black-color);
  white-space: nowrap;
  font-size: 2cqw;
}

/* ボタン内のテキスト */
.form-submit span {
  position: relative; /* 擬似要素の下に配置されないように */
  z-index: 1; /* 擬似要素より上に表示 */
  font-size: 2cqw;
}

/* 擬似要素（ボタンの三角形） */
.form-submit:before {
  content: ''; /* 擬似要素の内容を空に設定 */
  position: absolute; /* ボタンの相対位置に合わせて絶対配置 */
  top: -60%; /* 擬似要素をボタンの外側に配置 */
  left: 5%; /* 擬似要素の左端をボタンの左端に合わせる */
  width: 140%; /* 擬似要素の幅 */
  height: 600%; /* 擬似要素の高さ */
  transform: translateX(-98%) translateY(-70%) rotate(130deg); /* 初期状態でボタン外に隠れる */
  transition: all 0.5s ease-in-out; /* なめらかな移動アニメーション */
  z-index: 0; /* ボタン内のテキストの後ろに配置 */
}

.form-submit:hover {
  color: var(--white-color);
}

/* ホバー時のアニメーション */
.form-submit:hover:before {
  transform: translateX(0%) translateY(0%) rotate(135deg); /* 擬似要素がボタン内に動いてくる */
  background: var(--black-color); 
}

span.wpcf7-spinner {
  display: none;
}

/* WP時のフォント */
.form-submit input[type="submit"] {
   appearance: none; 
   font-size: 2cqw; 
   box-sizing: border-box;    
   padding-top: 2.5cqw;
   width: 100%; 
   height: 100%; 
   z-index: 2000;
   position: relative;
}

.form-submit input[type="submit"]:hover {
    -webkit-text-fill-color: var(--white-color) !important;
}

/* ---------- top ---------- */
.top {
  overflow: hidden; /* スクロールを無効化 */
  position: relative; /* 必要に応じて位置を指定 */
  height: 100vh; /* 画面全体の高さを指定 */
}

.top-container {
  font-family: "RocknRoll One", sans-serif;
  padding-top: 7cqw;
}

@media screen and (max-width: 1080px) {
  .top-container {
    align-items: center; 
    text-align: center; 
  }
}

.top-container__text {
  text-align: left; 
  position: absolute;
  z-index: 1;
  line-height: 1.1;
}

.top-container__word--medium {
  font-size: 40px;
}

@media screen and (min-width: 744px) {
  .top-container__word--medium {
    font-size: 72px;
  }
}

.top-container__word--large {
  font-size: 56px;
}

@media screen and (min-width: 744px) {
  .top-container__word--large {
    font-size: 80px;
  }
}

@media screen and (min-width: 1080px) {
  .top-container__word--large {
    font-size: 90px; 
  }
}

.top-container__image {
  width: 46.4%;
  height: 50.4%;
  position: absolute;
  right: 0%; /* 右寄せ */
}

@media screen and (max-width: 1080px) {
  .top-container__image {
    width: 100%; 
    height: auto; /* 縦横比を維持 */
  }
}

/*|カーソルを表示*/
.typing:after {
  content: "|";
  animation: typingCursor .8s ease infinite;
}
  
@keyframes typingCursor {
  from {
    opacity:0;
    }
    to {
    opacity:1
  }
}

.typing.typing-done:after {
  content: ""; /* カーソルを非表示にする */
  animation: none; /* アニメーションを停止 */
}

/* ---------- menu---------- */
.menu {
  position: relative; /* 必要に応じて位置を指定 */
}

/* カーテンの初期状態 */
.animation-bg, .animation-bg02 {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100vh;
  background: var(--black-color); /* カーテンの色 */
  z-index: 9999;
  transform: scaleX(1);
}

/* 左カーテン */
.animation-bg {
  left: 0;
  transform-origin: left;
  animation: curtain-left 1.2s ease-in-out forwards; /* 左側のアニメーション */
}

/* 右カーテン */
.animation-bg02 {
  right: 0;
  transform-origin: right;
  animation: curtain-right 1.2s ease-in-out forwards; /* 右側のアニメーション */
}

/* カーテンのアニメーション（左側） */
@keyframes curtain-left {
  0% {
    transform: scaleX(1); /* 初期状態で全画面カバー */
  }
  100% {
    transform: scaleX(0); /* 完全に開く */
  }
}

/* カーテンのアニメーション（右側） */
@keyframes curtain-right {
  0% {
    transform: scaleX(1); /* 初期状態で全画面カバー */
  }
  100% {
    transform: scaleX(0); /* 完全に開く */
  }
}

/* カーテンが終了後にコンテンツを表示 */
.curtain .menu-content {
  opacity: 1; /* フェードイン */
}

.menu {
  text-align: center;
  position: relative;
}

/* メニューポジション */
.menu__list {
  position: relative;
  height: 100%;
  font-size: clamp(24px, 4vw, 64px);
  padding-top: 8cqw;
}

@media screen and (max-width: 1080px) {
  .menu__list {
    padding-top: 24cqw;
    display: flex; /* 縦に並べる */
    text-align: center; /* テキスト中央揃え */
    flex-direction: column; 
    gap: 8cqw;
  }
}

/* ポートフォリオ */
.menu__portfolio {
  position: absolute;
  top: 400%;
  left: 40%; 
  transform: translateY(-50%);
}

@media screen and (max-width: 1080px) {
  .menu__portfolio {
    position: static;
  }
}


/* スキル (左) */
.menu__skill {
  position: absolute;
  top: 200%;
  left: 2%; /* 左端に配置 */
  transform: translateY(-50%);
}

@media screen and (max-width: 1080px) {
  .menu__skill {
    position: static;
    transform: translateX(0);
  }
}

/* コンタクト (右) */
.menu__contact {
  position: absolute;
  top: 200%;
  right: 2%; /* 右端に配置 */
  transform: translateY(-50%);
}

@media screen and (max-width: 1080px) {
  .menu__contact {
    position: static;
    transform: translateX(0);
  }
}

/* 料金 (下) */
.menu__price {
  position: absolute;
  top: 167%; 
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 1080px) {
  .menu__price {
    position: static;
    transform: translateX(0);
    padding-bottom: 24cqw;
  }
}

/* TOP (中央) */
.menu__top {
  position: absolute;
  top: 50%; /* 画面中央 */
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 1080px) {
  .menu__top {
    position: static;
    transform: translateX(0);
  }
}

.menu__link {
  position: relative;
  padding: 0.93vw 1.85vw; 
  pointer-events: auto; /* クリック可能にする */
}

.menu__link::before {
  content: ""; /* 擬似要素でカーソルを作成 */
  position: absolute;
  left: -1.2vw; /* テキストの左に配置 */
  top: 50%; /* 垂直方向中央 */
  transform: translateY(-50%);
  width: 0.92vw; /* カーソルの幅 */
  height: 5.92vw; /* カーソルの高さ */
  background-color: var(--blue-color); 
  opacity: 0; /* 初期状態で非表示 */
  pointer-events: none; /* ポインターイベントを無効化 */
}

.menu__link:hover::before {
  opacity: 1; /* カーソルを表示 */
  animation: blink 0.8s step-start infinite; /* カーソルの点滅アニメーション */
}

/* カーソルの点滅アニメーション */
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ---------- コンタクト---------- */
.contact {
  overflow: hidden
}
  
.contact-inner {
  padding: 2.96vw 1.48vw;
  margin: 0 auto;
}
  
.contact-form {
  padding-bottom: 6.66vw;
}
  
.form-unit-required {
  font-size: 1.11vw;
  font-weight: bold;
  width: 4.44vw;
  height: 2.22vw;
  margin-left: 1.48vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100vh;
  position: absolute;
  right: 0;
  top: 16%;
  transform: translateX(-50%);
}
  
.contact_form_example {
  color: var(--gray-color);
  font-size: 1.11vw;
  font-weight: normal;
  margin-left: 1.48vw;
}
  
.form-textarea {
  letter-spacing: 0.1em;
  width: 100%;
  padding: 2.77vw;
  border-radius: 3px;
  resize:none;
  font-size: 2cqw
}

.form-body {
  /* PC時に中央配置 */
  margin: 0 auto;
  margin: 0 12.9vw;
}
  
.form-unit {
  padding: 1.48vw;
  position: relative;
}

.form-unit-contents {
  width: 100%;
  margin: 0 auto;
  background-color: var(--white-color);
  color: var(--black-color);
}
  
.form-input {
  letter-spacing: 0.1em;
  width: 100%;
  padding: 2.22vw 1.48vw;
  font-size: 2cqw;
}

.contact-button {
  padding-top: 20cqw;
}

/* -----thank-you.html----- */
.message-hidden {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: center;
  padding-top: 10cqw;
}

.message-txt {
  font-size: 3cqw;
  color: var(--white-color);
  font-family: "Kaisei HarunoUmi", serif;
  text-align: center;
}

.thank-you-btn {
  padding-top: 20cqw;
}

/* ---------- portfolio---------- */
.portfolio {
  overflow: hidden;
}

.portfolio-txt {
  font-size: 4cqw;
  display:flex;
  align-items:center;
  justify-content: center;
  padding-top: 8.14vw;
}

.portfolio-button {
  padding-top: 16cqw;
}

/* ---------- skill---------- */
.skill {
  background-color: var(--red-color);
}

.skill-content {
  position: relative; /* ボタンの絶対位置指定の基準を設定 */
  display: flex; /* 横並びにする */
  align-items: center; /* 縦方向中央揃え */
  justify-content: space-between; /* 画像とテキストを適切に配置 */
  box-sizing: border-box;
}

/* 左側の画像 */
.skill-content__image {
  flex: 1; /* 画像を適切な幅で表示 */
  display: flex;
  justify-content: center; /* 画像を中央揃え */
}

.skill-content__image-img {
  max-width: 80%; /* 画像サイズを制限 */
  height: auto; /* 縦横比を維持 */
}

/* 右側の詳細 */
.skill-content__details {
  flex: 1; /* テキスト領域の幅を調整 */
  font-family: "RocknRoll One", sans-serif;
  color: var(--black-color);
  padding-top: 5cqw;
}

.skill-content__list {
  font-size: 3cqw; 
}

.skill-txt {
  font-family: "Kaisei HarunoUmi", serif;
  text-align: left;
  padding-top: 2cqw;
  font-size: 3cqw; 
}

/* ボタンの配置 */
.skill-button {
  position: absolute; 
  bottom: -10%; 
  left: 50%;
  transform: translateX(-50%); 
  background-color: transparent; 
}

/* ---------- price ---------- */
.price {
  position: relative;
}

.price__inner {
  position: relative; 
  max-width: 80%; /* 全体幅の80% */
  margin: 0 auto; /* 左右中央揃え */
  padding: 2%; /* 内側の余白をパーセントに変換 */
  background-color: var(--white-color); 
  border-radius: 3px; /* 角丸はそのまま */
  margin-top: 2%; /* 上の余白をパーセントに変換 */
}

.price__list {
  width: 100%;
  border-collapse: collapse; /* 枠線を統一 */
  color: var(--black-color);
  font-family: "Kaisei HarunoUmi", serif;
}

.price__name {
  text-align: left;
  padding: 1% 2%;
  font-size: 3cqw;
}

@media screen and (min-width: 744px) {
  .price__name {
    font-size: 2cqw;
  }
}

.price__cost {
  text-align: right;
  padding: 1% 2%;
  font-size: 3cqw;
}

@media screen and (min-width: 744px) {
  .price__cost {
    font-size: 2cqw;
  }
}

.price-button {
  padding-top: 24cqw;
}