header {
  display: none;
}

#nav {
  z-index: 30;
}

main {
  margin-top: 0 !important;
}

section {
  position: relative;
  z-index: 4;
}

/* 背景画像 */
.bg_image_wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 0;
  background-color: #000;
  filter: brightness(50%);
}

.bg_image_wrap[data-hidden="true"] {
  display: unset;
}

.bg_image_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* メインビジュアル */
#main_visual {
  --height-main-visual: 100vh;
  position: relative;
  top: 0;
  left: 0;
  min-height: var(--height-main-visual);
  max-height: var(--height-main-visual);
  margin-bottom: 80px;
  overflow: hidden;
}

.main_visual_inner {
  width: 100%;
}

/* メインテキスト */
.main_visual_text_wrap {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  padding: 0;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.main_visual_text {
  display: flex;
  flex-direction: column;
  align-content: center;
  width: 42%;
  margin: auto;
}

/* 日本語 */
.main_visual_text_jp_wrap {
  margin-bottom: 8px;
  font-variation-settings: "wght" 400;
}

.main_visual_text_jp_wrap > * {
  display: block;
  font-size: var(--font-size-s);
  font-variation-settings: "wght" 400;
  line-height: 1.5;
  letter-spacing: 4px;
  color: var(--color-primary-worka);
}

.main_visual_sub_text {
  margin-top: 40px;
}

.main_visual_sub_text p,
.main_visual_sub_text span {
  color: var(--color-primary-worka);
  font-size: var(--font-size-m);
}

/* 英語 */
.main_visual_text_en_wrap {
  display: flex;
  flex-direction: row;
}

.main_visual_text_en_wrap > * {
  display: block;
  font-style: italic;
  font-size: var(--font-size-xs);
  font-variation-settings: "wght" 400;
  line-height: 1;
  letter-spacing: 0px;
  color: var(--color-primary-worka);
}

/* その他 */
.main_visual_text_other {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 42%;
  margin: auto;
  padding: 16px;
  border: 1px dashed var(--color-primary-worka);
}

.main_visual_text_other div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.main_visual_text_other h2 {
  display: block;
  margin-bottom: 8px;
  text-align: center;
  color: var(--color-primary-worka);
}

.main_visual_text_other span {
  display: block;
  width: max-content;
  margin: 4px;
  padding: 8px;
  font-size: var(--font-size-s);
  text-align: center;
  border-radius: 8px;
  background-color: var(--color-primary-worka);
}

/* セクション */
section {
  --size-section: 1280px;
  width: var(--size-section);
  max-width: 92%;
  margin: 0 auto 80px;
  overflow-x: visible;
}

.section_inner {
  width: 100%;
  margin: 0 auto;
  overflow-x: visible;
}

.section_inner a,
.section_inner a span {
  text-decoration: none;
}

.section_inner h2 {
  padding: 24px 0;
  font-size: var(--font-size-xxxxl);
  color: var(--color-white-offwhite);
  letter-spacing: -3px;
  font-variation-settings: "wght" 200;
}

.item_list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
}

.item {
  --size-item: 27%;
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--size-item);
  min-width: var(--size-item);
  aspect-ratio: 16/9;
  margin-right: 2%;
  margin-left: 2%;
  margin-bottom: 24px;
  background-color: #fff;
  border-radius: 32px;
  border: none;
  overflow: hidden;
  box-shadow: 8px 16px 16px rgba(255, 255, 255, 0.7);
  opacity: 1 !important;
  z-index: 40;
}

/* 自己紹介 */
#abouusSection .about_text {
  letter-spacing: 2px;
  line-height: 2;
  text-shadow: var(--color-gray-dark) 1px 0 10px;
  font-size: var(--font-size-m);
  color: var(--color-white-offwhite);
}

#abouusSection .section_inner {
  display: flex;
  flex-direction: column;
}

/* バナー */
.banner {
}

.banner_inner {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}

/* サービスセクション */

/* ビルド */
.background_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.background_image img {
}

.main_text {
  position: absolute;
  top: 16px;
  left: 16px;
  transform: translate(0%, 0%);
  text-align: left;
  z-index: 21;
}

/* サブコピー */
.sub_copy {
  padding-left: 8px;
  margin-bottom: 4px;
}

.sub_copy span {
  font-size: 80%;
  color: var(--color-primary-worka);
}

/* キャッチコピー */
.catch_text_wrap {
  margin-bottom: 8px;
}

.catch_text_wrap span {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  font-size: 110%;
  font-weight: bold;
  color: var(--color-primary-worka);
  letter-spacing: 0px;
  line-height: 0.5em;
  text-align: justify;
}

/* 料金 */
.price_wrap {
  display: flex;
  flex-direction: row;
  padding-left: 0.5rem;
}

.price_wrap span {
  display: block;
  font-size: 92%;
  font-family: "source-han-sans-jp-variable", sans-serif;
  font-variation-settings: "wght" 700;
  color: var(--color-primary-worka);
}

.price_wrap .text_getsugaku {
  margin: auto 0.2rem auto 0;
  font-size: 92%;
}

/* リンク */
.firstview_link_box {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 4px 8px;
  z-index: 2;
  border-radius: 8px;
  background-color: var(--color-primary-worka);
}

.firstview_link {
  position: relative;
}

.firstview_link span {
  font-size: 82%;
  color: rgb(68, 68, 68);
}

/* 記事セクション */
.article_list {
}

.article_item h3 {
  position: absolute;
  top: 0;
  left: 0;
  padding: 16px;
  color: #fff;
  z-index: 30;
}

.article_item img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.black_filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #00000080;
  z-index: 20;
}

/* 問い合わせセクション */
.contact_link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  padding: 16px;
  border-radius: 24px;
  background-color: var(--color-gray-dark);
  box-shadow: 16px 8px 8px rgba(var(--color-white-offwhite-rgb), 0.7);
}

.contanct_text {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.contanct_text span {
  font-size: var(--font-size-m);
  color: var(--color-white-offwhite);
}

.signature {
  margin-top: 16px;
  font-weight: bold;
  font-size: var(--font-size-s);
}

.contact_link span {
  color: var(--color-white-offwhite);
}

@media screen and (max-width: 768px) {
  section {
    width: 100%;
  }

  .section_inner {
    width: 100%;
  }

  .section_inner h2 {
    padding: 0;
  }

  .note {
    margin-bottom: 8px;
    color: var(--color-white-offwhite);
  }

  /* 固定解除 */
  .bg_image_wrap {
    position: relative;
    transform: unset;
  }

  /* メインビジュアル */
  #main_visual {
    margin-bottom: 0;
  }

  .bg_image_wrap {
    padding-bottom: 40px;
  }

  .main_visual_text_wrap {
    top: 32px;
    left: 50%;
    transform: translateY(0);
    transform: translateX(-50%);
    width: 96%;
    padding: 0;
    margin: 0 auto;
    text-align: center;
  }

  .main_visual_text_en_wrap {
    display: flex;
    flex-direction: column;
  }

  .main_visual_text_en_wrap span {
    line-height: 1.4;
  }

  .main_visual_sub_text {
    margin-top: 8px;
  }

  .main_visual_sub_text p {
    text-align: center;
  }

  .main_visual_text,
  .main_visual_text_other {
    width: 100%;
  }

  .main_visual_text_other {
    margin-top: 32px;
  }

  .item_list {
    overflow-x: auto;
  }

  .item {
    width: 320px;
    min-width: 320px;
    margin: 0 16px 24px;
  }
}