/*
Theme Name: Haruta Design Original Theme
Author: Haruta Design
Description: Haruta Design公式サイト用の完全オリジナルテーマ
Version: 1.0.0
*/

@charset "utf-8";

.grecaptcha-badge { visibility: hidden; }

body {
  font-size: var(--fs-s);
  font-family: var(--font-ja);
  font-weight: var(--font-weight-n);
  color: var(--color-deep);
}

@media (min-width:1000px) {

  body {
    font-size: var(--fs-m);
  }

}

.en {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 600;
}

a,
button {
  cursor: pointer !important;
}

p {
  margin-bottom: var(--margin-s);
}

.scale-link {
  display: inline-block;
  transition: var(--trans-quick);
}

.scale-link:hover {
  transform: scale(1.1);
}

@media (min-width:1000px) {
  .sp-br {
    display: none;
  }
}

/* リンクリスト */

.link-list {
  display: flex;
  flex-direction: column;
  gap: var(--margin-m);
  align-items: center;
}

.link-list>li {
  width: 200px;
  height: 80px;
}

.link-list-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.cta-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 40px;
  fill: none;
}

.cta-line>path {
  stroke-width: 2;
}

.link-list-item>span {
  display: inline-block;
  transition: var(--trans-quick);
}

.link-list-item:hover span {
  transform: scale(1.05);
}



/* ヘッダーナビ */

header {
  position: fixed;
  top: 20px;
  width: 100vw;
  height: 20px;
  z-index: 100;
}

.burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 100px;
  height: 40px;
  margin-left: auto;
  transform: translateX(30%);
}

.burger-1,
.burger-2,
.burger-3 {
  height: 4px;
  background-color: var(--color-accent);
}

.burger-1 {
  width: 100%;
}

.burger-2 {
  width: 80%;
}

.burger-3 {
  width: 60%;
}

/* ナビメニュー */

.main-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  top: 0;
  width: 100dvw;
  height: 100dvh;
  background-color: var(--color-accent);
  color: var(--color-light);
  transform: translateX(100%);
  z-index: 10;
}

@media (min-width:1000px) {
  .main-nav {
    width: 40dvw;
    padding: var(--margin-s);
    right: 0;
    border-left: 1px solid var(--color-light);

  }
}

/* SNSリスト */

.sns-list {
  display: flex;
  flex-direction: row;
  padding: var(--margin-xs);
  gap: var(--margin-xs);
}

.sns-list-icon {
  font-size: var(--fs-l);
}

/* メインリスト */

.main-nav-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.main-nav-list>li {
  width: 100%;
  flex: 1;
}

.main-nav-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: var(--margin-xs);
  padding-right: var(--margin-xs);
}

.nav-item-wrapper {
  position: relative;
  width: 200px;
  height: 48px;
  overflow: hidden;
}

.nav-item-inner {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
}

.nav-item-inner>span {
  display: block;
  font-size: var(--fs-xxl);
  line-height: 48px;
  cursor: pointer;

}

.main-nav-item>span {
  font-size: var(--fs-xs);
  text-align: right;
  cursor: pointer;
}

@media (min-width:1000px) {

  .main-nav-item>span {
    font-size: var(--fs-s);
  }

}

/* PPリンク */

.main-nav-pp {
  text-align: center;
  margin: var(--margin-xs);
  font-size: var(--fs-s);

}

/* フッター（SP） */

footer {
  margin-top: calc(var(--margin-l)*2);
}


.main-nav.footer-sp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  top: auto;
  width: 100dvw;
  height: auto;
  background-color: var(--color-accent);
  color: var(--color-light);
  transform: translateX(0%);
  z-index: 20;
  border: none;
}

.main-nav.footer-sp>.footer-logo-wrapper {
  position: absolute;
  top: var(--margin-s);
  right: var(--margin-xs);
  width: 150px;
  height: auto;
}

.copy {
  text-align: center;
  margin: var(--margin-s);
}

.footer-pc {
  display: none;
}

.footer-path {
  stroke: var(--color-light);
}

.main-nav.footer-sp>.main-nav-list {
  margin-top: var(--margin-l);
}


@media (min-width:1000px) {

  .main-nav.footer-sp {
    display: none;
  }

  .footer-pc {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-accent);
    color: var(--color-light);
  }

  .footer-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100dvw;

  }

  .footer-left,
  .footer-center,
  .footer-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
  }

  /* フッター左カラム */

  .footer-left {
    position: relative;
  }

  .footer-left>.footer-logo-wrapper {
    width: 300px;
    height: auto;
  }

  .footer-left>.sns-list {
    position: absolute;
    left: var(--margin-s);
    top: var(--margin-s);
  }

  /* フッター中央カラム */


  /* フッター右カラム */

  .footer-right>.main-nav-list {
    gap: var(--margin-m);
    margin-top: var(--margin-m);
    margin-bottom: var(--margin-m);
  }

  .nav-item-inner>.scale-link {
    transform-origin: left;
  }

}

/* パララックス背景 */

.smooth-content {
  position: relative;
  z-index: 0;
}

.main-bg {
  position: absolute;
  top: 0;
  width: 100dvw;
  height: 100%;
  background-image: url(./img/bg.jpg);
  background-size: contain;
  background-repeat: repeat;
  z-index: -1;
}

.main-inner {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ページタイトル（h２） */

h2 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40dvh;
}

.h2-img-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.h2-img-wrapper>img {
  animation: 20s turn linear infinite;
}

@keyframes turn {

  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }

}

.h2-title {
  font-size: var(--fs-xl);
  color: var(--color-accent);
}

@media (min-width:1000px) {

  .h2-title {
    font-size: var(--fs-h2);
  }

}

/* サブタイトル（h３） */

h3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: var(--margin-l);
  padding-top: var(--margin-l);
}

.h3-line {
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: var(--color-accent);
  margin-right: var(--margin-xs);
}

.h3-title {
  font-size: var(--fs-l);
  color: var(--color-accent);
}

/* ページナビ */

.page-nav {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

.page-nav.works {
  width: 80%;
}

.prev-btn,
.next-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.prev-btn {
  position: absolute;
  left: 0;
  flex-direction: row;
}

.next-btn {
  position: absolute;
  right: 0;
  flex-direction: row-reverse;
}

.prev-btn-arrow,
.next-btn-arrow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: -10px;
  width: 30px;
  aspect-ratio: 1/1;
}

.prev-btn-arrow-1,
.prev-btn-arrow-2,
.prev-btn-arrow-3,
.next-btn-arrow-1,
.next-btn-arrow-2,
.next-btn-arrow-3 {
  display: block;
  width: 16px;
  aspect-ratio: 1/1;
}

.prev-btn-arrow-1,
.prev-btn-arrow-2,
.prev-btn-arrow-3 {
  border-left: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  transform: rotate(45deg);
}



.next-btn-arrow-1,
.next-btn-arrow-2,
.next-btn-arrow-3 {
  border-right: 1px solid var(--color-accent);
  border-top: 1px solid var(--color-accent);
  transform: rotate(45deg);
}

.prev-btn-span,
.next-btn-span {
  color: var(--color-accent);
  font-size: var(--fs-l);
}

.go-list-btn {
  color: var(--color-accent);
  font-size: var(--fs-s);
  font-weight: var(--font-weight-b);
}

/* 各セクション */
.section-wrapper {
  display: flex;
  flex-direction: row;
}

.section-wrapper>h5 {
  writing-mode: vertical-rl;
  color: var(--color-accent);
  font-size: var(--fs-s);
  letter-spacing: 0.5em;
  font-weight: var(--font-weight-b);
}

.section-liner {
  width: 1px;
  height: auto;
  background-color: var(--color-accent);
  margin-right: var(--margin-xs);
  margin-left: var(--margin-xs);
  flex: 0 0 1px;
}

.section-list {
  display: flex;
  flex-direction: column;
  gap: var(--margin-xs);
}

.section-caution {
  font-size: var(--fs-xs);
}

.section-list.cost>li:last-child {
  font-weight: var(--font-weight-b);
}

/* アウトライン */

.link-list.ol {
  color: var(--color-accent);
}

.ol-path {
  stroke: var(--color-accent);
}



/* 404 */

.main-inner.not-found {
  width: 80%;
  margin: 0 auto;
  gap: var(--margin-m);
  flex: 1;
}

.main-inner.not-found {
  width: 60%;
}

/* PP */

section.pp>p,
section.pp>ul {
  width: 80%;
  margin: 0 auto;
}

section.pp>ul {
  padding-left: var(--margin-s);
  list-style-type: square;
}

/* バックトップボタン */

.back-to-btn {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 50px;
  height: 50px;
  z-index: 10;
  opacity: 0;
  mix-blend-mode: multiply;
}

.back-to-btn-svg-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.back-to-btn-svg-wrapper>img{
  width: 100%;
  height: 100%;
  animation: 20s turn linear infinite;
}

.back-to-btn-arrow-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.back-to-btn-arrow-1,
.back-to-btn-arrow-2{
  display: block;
}

.back-to-btn-arrow-1{
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--color-accent);
  border-right: 1px solid var(--color-accent);
  transform: translateY(3px) rotate(-45deg);
}

.back-to-btn-arrow-2{
  width: 1px;
  height: 15px;
  background-color: var(--color-accent);
  transform: translateY(-3px);

}