@charset "utf-8";

html {
  scroll-behavior: smooth;
}

body {
  opacity: 0;
  font-family: var(--font-ja);
  color: var(--color-main-font);
}

@media (max-width:460px) {

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

}

.en {
  font-family: var(--font-en);
}

.sp-br {
  display: none;
}

@media (max-width:460px) {

  .sp-br {
    display: inline;
  }

}

/* ヘッダー */
.header-nav {
  z-index: 9999;
}

.header-inner {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  top: 0;
  padding-left: var(--margin-s);
  padding-right: var(--margin-s);
  border-bottom: 1px solid var(--color-nav-border);
  z-index: 9999;
}

.header-bg {
  position: fixed;
  width: 100%;
  height: 50px;
  top: 0;
  background-color: var(--color-header);
  mix-blend-mode: multiply;
  z-index: 999;
}

.header-inner,
.header-bg {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}


/* バーガーメニュー */

.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 30px;
  height: 15px;
  cursor: pointer;
}

.line1,
.line2,
.line3 {
  width: 100%;
  height: 2px;
  background-color: var(--color-burger-line);
  transition: var(--trans-quick);
}

.burger.is-active .line1 {
  transform: translateY(5px) rotate(20deg);
}

.burger.is-active .line2 {
  opacity: 0;
}

.burger.is-active .line3 {
  transform: translateY(-5px) rotate(-20deg);
}

/* SVGロゴ */

.header-logo {
  display: block;
  width: 30px;
  height: 30px;
}


/* ナビメニュー */

.nav-inner,
.nav-bg {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50vh;
}

.nav-inner {
  border-bottom: 1px solid var(--color-nav-border);
  padding-top: 100px;
  z-index: 100;
}

.nav-bg {
  background-color: var(--color-header);
  mix-blend-mode: multiply;
  z-index: 1;
}

.nav-list,
.sns-list {
  color: var(--color-nav-inner);
}

.nav-list {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  font-weight: var(--font-weight-b);
}

.sns-list {
  display: flex;
  flex-direction: row;
  font-size: var(--fs-sns-list);
  gap: var(--margin-l);
}

/* フッター */

footer {
  color: var(--color-footer-font);
}

.footer-inner,
.footer-copy {
  background-color: var(--color-footer-bg);
}

.footer-copy {
  text-align: center;
  padding: var(--margin-m);
}

.footer-title {
  font-size: var(--fs-ft-title);
  text-align: center;
  padding: var(--margin-l);
}

.footer-nav-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: var(--margin-l);
  gap: var(--margin-l);
}

@media (max-width:460px) {

  .footer-nav-list {
    flex-direction: column;
    align-items: center;
    width: 50%;
    margin: 0 auto;
  }

}

.footer-nav-item {
  font-size: var(--fs-ft-nav-item);
}

.footer-nav-item>ul {
  display: flex;
  flex-direction: column;
  padding-left: var(--margin-m);
  gap: var(--margin-s);
}

@media (max-width:460px) {

  .footer-nav-item>ul {
    align-items: center;
    padding-left: 0;
  }

}

.footer-nav-heading {
  font-size: var(--fs-ft-nav-head);
  font-weight: var(--font-weight-b);
  padding-bottom: var(--margin-m);
}

@media (max-width:460px) {
  .footer-nav-heading {
    text-align: center;
  }
}

.footer-nav-item>ul>li {
  transition: var(--trans-quick);
}

.footer-nav-item>ul>li:hover {
  transform: scale(1.1);
}


/* バックボタン */

.back-btn {
  display: block;
  margin-top: var(--margin-s);
  margin-bottom: var(--margin-s);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fs-back-btn);
  cursor: pointer;
  transition: var(--trans-quick);
}

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

@media (max-width:460px) {

  .jump-tree {
    font-size: var(--fs-sp-tree);
  }

}


/* メインBG */

.main-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

.main-bg>img {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 目次 */

.outline {
  display: flex;
  align-items: flex-end;
  width: 100vw;
  height: 100vh;
  padding-left: 5vw;
  padding-bottom: 5vh;
}

@media (max-width:460px) {

  .outline {
    height: 90vh;
    padding-bottom: 10vh;
  }

}

.outline-list {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  height: 30%;
  font-size: var(--fs-ol);
  color: var(--color-ol);
  font-weight: var(--font-weight-b);
}

@media (max-width:460px) {

  .outline-list {
    font-size: var(--fs-sp-ol);
  }

}

.outline-list>li>a {
  display: inline-block;
  width: 100%;
}

.outline-list>li>a {
  display: inline-block;
  transition: var(--trans-quick);
  transform-origin: left;
}

.outline-list>li>a:hover {
  transform: scale(1.02);
}

/* セクションホワイトボックス */

.white-box {
  width: 100%;
  background-color: var(--color-white-box);
  padding-bottom: var(--margin-l);
  margin-bottom: calc(var(--margin-l)*2);
}

.white-box.contact{
  overflow-x: hidden;
}

.white-box>h3 {
  padding-top: var(--margin-l);
  padding-bottom: var(--margin-l);
  text-align: center;
  font-size: var(--fs-wb-h3);
}

@media (max-width:460px) {

  .white-box>h3 {
    padding-top: var(--margin-l);
    padding-bottom: var(--margin-l);
    font-size: var(--fs-sp-h3);
  }

}

.small-section-wrapper {
  width: 50%;
  margin: 0 auto;
}

@media (max-width:460px) {

  .small-section-wrapper{
    width: 80%;
  }

}

@media (max-width:1000px) {

  .small-section-wrapper{
    width: 80%;
  }

}

.small-section-wrapper>p {
  margin-bottom: var(--margin-l);
  line-height: var(--margin-m);
}

/* コンタクト */



.contact-pp {
  display: none;
}

/* アコーディオン */

.acc-list {
  display: flex;
  flex-direction: column;
  gap: var(--margin-m);
}
@media (max-width:460px) {

  .acc-list{
    gap: var(--margin-l);
  }

}

.acc-item {
  padding: var(--margin-m);
  background-color: var(--color-acc-bg);
  border-radius: var(--radius);
}

@media (max-width:460px) {

  .acc-item{
    padding: 0;
  }

}

.acc-toggle {
  display: flex;
  flex-direction: column;
  gap: var(--margin-m);
  width: 100%;
  cursor: pointer;
}

.acc-item>h3 {
  text-align: left;
}

.acc-title {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-acc-title);
  color: var(--color-acc-title);
  text-align: left;
  text-wrap: stable;
}

.acc-detail {
  margin-top: var(--margin-m);
  overflow: hidden;
  padding-left: var(--margin-s);
  padding-right: var(--margin-s);

}

@media (max-width:460px) {

  .acc-detail{
    margin-top: var(--margin-xs);
  }


}

.acc-detail>p {
  margin-top: var(--margin-m);
}

@media (max-width:460px) {

  .acc-detail>p{
    margin-top: var(--margin-xs);
  }


}

.acc-detail>p::before {
  content: "A.";
  font-size: var(--fs-acc-title);
  color: var(--color-acc-title);
}

.acc-title-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: var(--margin-s);
}

.acc-title-mark>span {
  width: 100%;
  height: 2px;
  background-color: var(--color-acc-title);
}

.acc-title-mark>span:nth-child(1) {
  transform: translateY(2px) rotate(90deg);
  transition: var(--trans-quick);
}

.acc-title-mark.is-active span:nth-child(1) {
  transform: translateY(2.5px) rotate(360deg);
}

/* お問合せフォーム */

.required {
  color: red;
}

.form-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-bottom: var(--margin-s);
}

@media (max-width:460px) {

  .form-row{
    flex-direction: column;
    height: 100px;
    gap: var(--margin-xs);
  }

  .form-row.row-radio{
    height: 200px;
  }

}

.form-row.file {
  flex-direction: row;
}

@media (max-width:460px) {

  .form-row.file{
    flex-direction: column;
    height: 60px;
  }

}



.form-label {
  width: 200px;
  font-weight: var(--font-weight-b);
}

@media (max-width:460px) {

  .form-label{
    width: 100%;
  }


}

.input-wrapper,
.radio-group,
.form-file,
.textarea-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  flex: 1;
  height: 100%;
  z-index: 0;
}

@media (max-width:460px) {

  .input-wrapper,
  .textarea-wrapper,
  .form-file{
    width: 100%;
  }

}

.input-wrapper,
.radio-group,
.form-file,
.textarea-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  flex: 1;
  height: 100%;
  z-index: 0;
}

@media (max-width:460px) {

  .radio-group{
    flex-direction: column !important;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: var(--margin-xs);
  }


}
.input-wrapper>input,
.textarea-wrapper>textarea {
  position: absolute;
  padding-left: var(--margin-s);
}

.input-wrapper>input::placeholder,
.textarea-wrapper>textarea::placeholder {
  color: var(--color-place);
}

.input-bg,
.textarea-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-input-bg);
  border-radius: var(--radius);
  opacity: var(--opacity-light);
  z-index: -1;
}

.form-row.textarea {
  align-items: flex-start;
  height: 300px;
}

.textarea-wrapper {
  align-items: flex-start;
}

.textarea-bg {
  top: 0;
  transform: translateY(0%);
  height: 100%;
}

.textarea-wrapper>textarea {
  width: 100%;
  height: 100%;
  padding: var(--margin-s);
}

.form-note {
  margin-bottom: var(--margin-l);
}

.form-file {
  transform: translateY(25%);
}

.form-row.form-consent {
  flex-direction: column;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-accent);
  /* 例: #FF4800 */
}

.radio-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.form-actions {
  text-align: center;
}

.btn-submit {
  position: relative;
  width: 180px;
  height: 70px;
  color: var(--color-btn-span-before);
  border: 1px solid var(--color-btn-bg);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: var(--trans-quick);
  z-index: 0;
}

.btn-submit::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  transform: translateX(-100%);
  background-color: var(--color-btn-bg);
  transition: var(--trans-quick);
  z-index: -1;
}

.btn-submit:hover {
  color: var(--color-btn-span-after);
}

.btn-submit:hover::before {
  transform: translateX(0%);
}

/* アバウト */

.about-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: var(--margin-m);
}

@media (max-width:460px) {

  .about-content {
    flex-direction: column;
  }

}

@media (max-width:1000px) {

  .about-content{
    flex-direction: row;
  }

}

.about-content.right {
  flex-direction: row-reverse;
}

@media (max-width:460px) {

  .about-content.right {
    flex-direction: column;
  }
  .about-content.left {
    flex-direction: column;
  }

}

.about-img {
  width: 50%;
  aspect-ratio: 2/1;
  overflow: hidden;
}

@media (max-width:460px) {

  .about-img {
    width: 100%;
  }

}

.about-img>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-detail-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding-left: var(--margin-l);
  padding-right: var(--margin-l);
}

@media (max-width:460px) {

  .about-detail-wrapper{
    width: 80%;
    margin-top: var(--margin-s);
    margin-left: auto;
    margin-right: auto;

    padding-left: 0;
    padding-right: 0;
  }
 
}

.about-title {
  font-size: var(--fs-about-title);
  color: var(--color-about-title);
  margin-bottom: var(--margin-s);
}

@media (max-width:460px) {

  .about-title{
    font-size: var(--fs-sp-about-title);
    font-weight: var(--font-weight-b);
  }

}

.about-detail {
  line-height: var(--margin-m);
}



iframe {
  display: block;
  width: 100%;
}

.data-wrapper>dl {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: var(--margin-s);
  margin-bottom: var(--margin-s);
  gap: var(--margin-s);
}

@media (max-width:460px) {

  .data-wrapper>dl{
    flex-direction: column;
    gap: var(--margin-xs);
  }

}

.data-wrapper>dl>dt {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 40px;
  color: var(--color-about-data);
  text-align: center;
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 0;
}

.data-wrapper>dl>dt::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-about-data-bg);
  opacity: var(--opacity-light);
  z-index: -1;
}

.data-wrapper>dl>dd {
  padding-top: var(--margin-xs);
  padding-bottom: var(--margin-xs);
}

/* ワークス */

/* 杣の約束 */

.pro-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  pointer-events: auto;
  touch-action: pan-y;
  z-index: 0;
}

@media (max-width:460px) {

  .pro-container{
    aspect-ratio: 2/3;
  }

}


.pro-list {
  position: relative;
}

.pro-img {
  width: 100%;
}

.pro-img>img {
  display: block;
  width: 100%;
  object-fit: cover;
}



.pro-list>li {
  width: 100%;
  aspect-ratio: 16/9;
  position: absolute;
  inset: 0;
  color: var(--color-pro);
  opacity: 0;
  transition: var(--trans-slow);
}

.pro-title {
  position: absolute;
  left: 5%;
  top: 15%;
  font-size: var(--fs-pro-title);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

@media (max-width:460px) {

  .pro-title{
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fs-sp-pro-title);
    text-wrap: nowrap;
  }

}

.pro-detail {
  position: absolute;
  right: 5%;
  top: 50%;
  width: 40%;
  transform: translateY(-50%);
  line-height: var(--margin-m);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);

}

@media (max-width:460px) {

  .pro-detail{
    width: 80%;
    right: 50%;
    transform: translate(50%,-50%);
  }

}

.pro-ob-container {
  position: absolute;
  width: 100%;
  height: 90%;
  top: 0;
  touch-action: pan-y;
}

.nav-dots {
  position: absolute;
  display: flex;
  flex-direction: row;
  gap: var(--margin-s);
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  pointer-events: auto;
}

@media (max-width:460px) {

  .nav-dots{
    bottom: 10%;
  }

}

.nav-dots>button {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-dots-nomal);
  transition: var(--trans-slow);
  cursor: pointer;
  z-index: 999;
}

.pro-list>li.is-active {
  opacity: 1;
}

.nav-dots>button.is-active {
  transform: scale(1.5);
  background-color: var(--color-dots-active);
}

/* 木の種類 */

.tree-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  z-index: 0;
}

@media (max-width:460px) {

  .tree-container{
    aspect-ratio: 2/3;
  }

}

@media (max-width:1000px) {

  .tree-container{
    aspect-ratio: 3/4;
  }

}

.tree-bg-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: -1;
}

.tree-bg-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: var(--opacity-none);
  transition: var(--trans-slow);
}

.tree-bg {
  position: absolute;
  inset: 0;
}

.tree-container:hover .tree-bg-mask {
  opacity: var(--opacity-light);
}

.tree-bg>picture {
  position: absolute;
  inset: 0;
  opacity: var(--opacity-none);
  transition: var(--trans-quick);
  z-index: -1;
}

.tree-bg>picture.is-active {
  opacity: var(--opacity-max);
}


.tree-bg>picture>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tree-detail-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--margin-l);
  width: 80%;
  height: 80%;
}
@media (max-width:460px) {

  .tree-detail-wrapper{
    justify-content: flex-start;
    height: 100%;
    gap: 0;
  }

}

.tree-tab {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

@media (max-width:460px) {

  .tree-tab{
    padding-top: var(--margin-m);
    padding-bottom: var(--margin-m);
  }

}

.tree-tab>button {
  position: relative;
  width: 140px;
  padding-bottom: var(--margin-xs);
  color: var(--color-tree-tab);
  font-size: var(--fs-tree-tab);
  font-weight: var(--font-weight-b);
  cursor: pointer;
  transition: var(--trans-quick);
}

@media (max-width:460px) {

  .tree-tab>button{
    font-size: var(--fs-sp-tree-tab);
  }

}

.tree-tab>button::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-tree-tab);
  transform-origin: center;
  transform: scale(0);
  transition: var(--trans-quick);
}

.tree-tab>button.is-active::before {
  transform: scale(1);
}


.tree-detail {
  position: relative;
  width: 50%;
  height: 40%;
  margin: 0 auto;
  color: var(--color-tree-detail);
}

@media (max-width:460px) {

  .tree-detail{
    width: 90%;
  }

}



.tree-detail>p {
  position: absolute;
  inset: 0;
  line-height: var(--margin-m);
  opacity: var(--opacity-none);
  transition: var(--trans-quick);
}

.tree-detail>p.is-active {
  opacity: var(--opacity-max);
}

/* シリーズ紹介 */

.series-wrapper {
  display: flex;
  flex-direction: row;
  gap: var(--margin-s);
  width: 90%;
  margin: 0 auto;
}

@media (max-width:460px) {

  .series-wrapper{
    width: 100%;
    flex-direction: column-reverse;
  }

}

@media (max-width:1000px) {

  .series-wrapper{
    width: 100%;
    flex-direction: column-reverse;
  }
}

.series-container {
  width: 100%;
  aspect-ratio: 16/9;
}

@media (max-width:460px) {

  .series-container{
    aspect-ratio: 1/1;
  }

}

@media (max-width:1000px) {

  .series-container{
    aspect-ratio: 2/1.3;
  }
}


.series-item-list {
  position: relative;
  width: 100%;
}

.series-item {
  position: absolute;
  inset: 0;
  width: 100%;
  aspect-ratio: 16/9;
  opacity: var(--opacity-none);
  transition: var(--trans-quick);
}

.series-item.is-active {
  opacity: var(--opacity-max);
}

.series-detail {
  position: absolute;
  bottom: 5%;
  width: 100%;
  padding-left: var(--margin-m);
  padding-right: var(--margin-m);
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
}

.series-detail>h4 {
  font-size: var(--fs-series-detail-title);
  margin-bottom: var(--margin-xs);
  font-weight: var(--font-weight-b);
}

/* シリーズ紹介右カラム */

.series-thum-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width:460px) {

  .series-thum-list{
    padding-left: var(--margin-xs);
    padding-right: var(--margin-xs);

    flex-direction: row;
    gap: var(--margin-xs);
  }

}

@media (max-width:1000px) {

  .series-thum-list{
    padding-left: var(--margin-xs);
    padding-right: var(--margin-xs);

    flex-direction: row;
    gap: var(--margin-xs);
  }
}


.series-thum {
  width: 100px;
  aspect-ratio: 1/1;
  cursor: pointer;
  transition: var(--trans-quick);
}

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

.series-thum.is-active {
  border: 1px solid var(--color-series-thum);
}

/* トップページ */

.hero-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  touch-action: none;
  overscroll-behavior: contain;
}

@media (max-width:460px) {

  .hero-wrapper {
    height: 95vh;
  }

}

.hero-wrapper>div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-wrapper>div>picture {
  width: 100%;
  height: 100%;
  touch-action: none;
}

.hero-wrapper>div>picture>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  touch-action: none;
}

.hero-wrapper>div>p {
  position: absolute;
  font-size: var(--fs-hero);
  font-weight: var(--font-weight-b);
}

@media (max-width:460px) {

  .hero-wrapper>div>p {
    font-size: var(--fs-sp-hero);
  }

}


/* ヒーロー１枚目 */

.hero-1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-1-p {
  position: absolute;
  text-align: center;
  color: var(--color-hero-1);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

.logo-wrap {
  position: absolute;
  color: #fff;
}

.logo-wrap svg {
  width: 200px;
  display: block;
}

@media (max-width:460px) {

  .logo-wrap svg {
    width: 100px;
  }

}

.logo-wrap svg path,
.logo-wrap svg line,
.logo-wrap svg polyline {
  fill: currentColor;
  fill-opacity: 0;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ヒーロー2枚目 */

.hero-2 {
  position: relative;
}

.hero-2-p {
  position: absolute;
  top: 50%;
  left: 5%;
  color: var(--color-hero-2);
  font-weight: var(--font-weight-b);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

@media (max-width:460px) {

  .hero-2-p {
    top: 25%;
  }

}

/* ヒーロー3枚目 */

.hero-3 {
  position: relative;
}

.hero-3-p {
  position: absolute;
  top: 60%;
  right: 15%;
  color: var(--color-hero-3);
  font-weight: var(--font-weight-b);
  text-shadow: 1px 1px 0px rgb(255, 255, 255);
}

/* ヒーロー4枚目 */

.hero-4 {
  position: relative;
}

.hero-4-p {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-hero-4);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
  text-wrap: nowrap;
}

/* h1 */

.h1-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--margin-l);
  width: 100vw;
  height: 100vh;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

@media (max-width:460px) {

  .h1-wrapper {
    height: 80vh;
  }

}

h1 {
  font-size: var(--fs-h1);
  color: var(--color-h1);
}

@media (max-width:460px) {

  h1 {
    font-size: var(--fs-sp-h1);
    text-align: center;
  }

}

.logo {
  width: 200px;
}

@media (max-width:460px) {

  .logo {
    width: 100px;
  }

}

/* トップリンク */

.top-link-wrapper {
  display: flex;
  flex-direction: column;
  background-color: var(--color-top-link-bg);
  margin-bottom: calc(var(--margin-l)*2);
}


.top-link-top {
  display: flex;
  flex-direction: row;
}

@media (max-width:460px) {

  .top-link-top {
    height: 50vh;
  }

}

.top-link-img {
  width: 50%;
}

@media (max-width:460px) {

  .top-link-img {
    width: 80%;
    height: 100%;
    overflow: hidden;
  }

  .top-link-img>img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: left;
    animation: 90s topSlide forwards;
  }

  @keyframes topSlide {

    0% {
      object-position: left;
    }

    100% {
      object-position: right;
    }

  }

}

.top-link-top>h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

@media (max-width:460px) {

  .top-link-top>h2 {
    writing-mode: vertical-rl;
    width: 20%;
  }

}

.top-link-bottom {
  padding-top: var(--margin-l);
  padding-bottom: var(--margin-l);
}

.top-link-bottom>p {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--margin-m);
}

@media (max-width:460px) {

  .top-link-bottom>p {
    width: 80%;
  }

}

.top-link {
  display: block;
  margin-right: calc(var(--margin-l)*2);
  font-size: var(--fs-top-link);
  color: var(--color-top-link);
  text-align: right;
  cursor: pointer;
}

@media (max-width:460px) {

  .top-link {
    margin-right: var(--margin-xs);
  }

}

.top-link-span {
  display: inline-block;
  padding-right: var(--margin-l);
  transition: var(--trans-quick);
}

@media (max-width:460px) {

  .top-link-span {
    padding-right: var(--margin-xs);
  }

}

.top-link-line {
  position: relative;
  display: block;
  width: 80%;
  height: 1px;
  margin-left: auto;
  background-color: var(--color-top-link);
}

.top-link-dot {
  position: absolute;
  right: 0;
  top: -200%;
  display: block;
  width: 5px;
  height: 5px;
  margin-left: auto;
  background-color: var(--color-top-link);
  transform: rotate(45deg);
  transition: var(--trans-slow);
}

.top-link:hover .top-link-dot {
  transform: rotate(315deg);
}

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

/* --- promiseセクションのイベントを確実に通す --- */
.pro-container {
  position: relative;
  z-index: 0;
  pointer-events: auto;
  touch-action: pan-y;
  /* 縦スクロール優先＋横スワイプ検知 */
}

/* 画像や全面liがイベントを取らないようにする */
.pro-list,
.pro-list>li,
.pro-img,
.pro-img>img {
  pointer-events: none;
}

/* ドットは必ずクリック可能＆最前面 */
.nav-dots {
  position: absolute;
  z-index: 9999;
  pointer-events: auto;
}

.nav-dots>button {
  pointer-events: auto;
  cursor: pointer;
  z-index: 9999;
}