@charset "utf-8";

/* ーーーーーーーーーーーーーーーー */
/*全体設定/
/* ーーーーーーーーーーーーーーーー */

/* フォント・画像全体設定 */
body{
  background-color:rgba(3, 30, 6, 0.7);
  margin: 0 auto;
  color: #fff;
  font-size: 16px;
  font-family: 'Shippori Mincho','Times New Roman', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;
  line-height: 1.6;
  overflow-x: hidden;

  /* 背景画像パララックス */
  background-image: url("../img/hakumu_bg.webp");
  background-size: cover;
  height: 100vh;
  background-attachment: fixed;
  background-position: center top;
}

main, footer{
  background-color:rgba(3, 30, 6, 0.7);
  margin: 0 auto;
}

@media screen and (min-width: 768px){
  body{
    font-size: 18px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;  /* 移動先までするっと移動。基本つけておいてOK */
  scroll-padding-top: 80px;   /* 移動先の着地点をずらせる。 */
}

/* 共通画像 */
img{
  width: 100%;
  height: auto;
}

.line-img{
  margin: 10px auto;
  /* width: 90%; */
}

.deco-green{
  margin: 0;
}

/* TOPページセクション全体設定 */
.text-container{
  margin: 0 10%;
  text-align: center;
  width: 80%;
}

.top-title{
  text-align: center;
  font-size: 2rem;
}

.top-text{
  text-align: start;
  margin: 0 auto;
  max-width: 900px;
  line-height: 2;
}

.discover-img,
.about-img,
.animals-img,
.onlinestore-img{
  margin-bottom: 4rem;
}

@media screen and (min-width: 768px){
  .text-container{
    max-width: 1000px;
    margin: 0 auto;
  }

  .top-title{
    font-size: 2.3rem;
    line-height: 1;
  }

  section{
    margin-bottom: 6rem;
  }
}


/* ボタン全体設定 */
.top-btn{
  display: block;
  width: 100%;
  margin: 3rem auto 0;
  max-width: 300px;
  padding: 0;
  position: relative;
}

.top-btn img{
  display: block;
  margin: 0 auto 2rem;
}


/* ------------------------------------- */
/* 1. ヘッダー */
/* ------------------------------------- */

/* 基本設定（PC/SP 共通） */
.header {
  width: 100%;
  position: fixed; 
  top: 0;
  left: 0;
  z-index: 9990; 
  padding: 15px 0;
}

.header-wrap {
  display: flex; 
  justify-content: space-between; 
  padding: 0 5%; 
  align-items: center; 
}

.header-logo-img {
  height: 45px; 
  width: auto;
}

.utility-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lang-switch-wrap{
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
}

.lang-switch-link {
    color: #fff;
    text-decoration: underline;
    font-size: 1rem;
    padding: 5px 0;
    opacity: 0.6;
}

.lang-switch-link:hover {
    opacity: 1;
}

/* アクティブな言語を光らせる */
.lang-switch-link.is-active {
    opacity: 1;
    /* ネオン風エフェクト */
    text-shadow: 0 0 5px #94d243, 0 0 10px #94d243;
}

.hamburger-btn { 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  z-index: 10000; 
  position: relative;
}

.hamburger-btn span,
.hamburger-btn::before,
.hamburger-btn::after{
  width: 40px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  transition: transform .4s;
}

.hamburger-btn::before,
.hamburger-btn::after{
  content: "";
}

.hamburger-btn::before{
  transform: translateY(-14px);
}

.hamburger-btn::after{
  transform: translateY(14px);
}


.gnav {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: translateX(100%);
  transition: transform 1s ease;
  z-index: 9995; 
  padding-top: 60px;
  padding-left: 10%;
}

.gnav ul{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: top;
  margin-top: 5%;
}

.gnav li{
  margin: 1.5rem;
}

.gnav ul li a{
  font-size: 1.2rem;
  transition: all 0.3s ease;
  text-shadow: none;
}

.gnav-list li a:hover {
  color: #fff; 
  text-shadow: 
    0 0 5px #fff,
    0 0 15px rgba(255, 255, 255, 0.7);
  transform: translateX(5px);
}

.gnav.is-active{
  transform: translateX(0);
  background-image: url("../img/hakumu_bg_gnav.webp");
  background-color: none;
  background-size: cover;
  background-position: left top;
}

.hamburger-btn.is-active span{
  transform: scaleX(0);
}

.hamburger-btn.is-active::before{
  transform: translateY(0) rotate(45deg);
}

.hamburger-btn.is-active::after{
  transform: translateY(0) rotate(-45deg);
}

body.is-active {
    overflow: hidden;
}



/* ーーーーーーーーーーーーーーーー */
/*トップページ*/
/* ーーーーーーーーーーーーーーーー */

/* ヒーローセクション */
.hero{
  margin-bottom: 0;
}

/* <picture>タグ使用によりMVはPC/SPで１本化。 */
.hero .hero-img{ 
  display: block;
  margin: 0 auto;
} 


/* ABOUTセクション */
.about{
  margin-bottom: 0;
}

.about .top-director{
  margin: 0 15%;
}

.about .director-text h3{
  font-size: 1.2rem;
}

.about .director-img{
  display: block;
  margin: 0.5rem auto 0;
  max-width: 500px;
}

@media screen and (min-width: 1100px) {
  .about .top-text{
    font-size: 18px;
    width: 90%;
    margin: 0 auto;
  }  
  .top-director {
    display: flex;
    justify-content: center;
    align-items: center;
    }
  .director-img{
    margin: 8px 0 0;
  }
  .director-text{
    display: flex;
    flex-direction: column;
    max-width: 50%;
    justify-content: center;
    margin: 32px 32px 32px 0;
    font-size: 14px;
  }
}

/* NEWS セクション */
.news .line-img{
  margin: 20px auto;
}

.news .news-slider{
  margin: 0 10% 50px;
}

.slick-dots li button:before{
  background: white;
  content: '';
}

.slick-dots li.slick-active button:before {
  background: #94d243;
  box-shadow: 0 0 5px #94d243, 0 0 10px #94d243, 0 0 20px #94d243;
  opacity: 1;
}


/* DISCOVER・ANIMALS・ONLINE STOREボタン　ホバーアニメーション */
.discover .top-btn img,
.animals .top-btn img,
.online-store .top-btn img{
  transition: all 0.3s ease; 
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)); 
}

.discover .top-btn a:hover img,
.animals .top-btn a:hover img,
.onlinestore .top-btn a:hover img{
  transform: translateY(-3px); 
  filter: 
    brightness(1.2) 
    drop-shadow(0 0 8px #fff) /* より強く光るシャドウ */
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)); 
  transform: scale(1.02) translateY(-3px);
}

/* PAGE TOPボタン　ホバーアニメーション */
.pagetop a img{
  transition: all 0.3s ease; 
  filter: drop-shadow(0 0 1px rgba(0, 255, 255, 0.5)); 
  z-index: 100;
}

.pagetop a:hover img{
transform: translateY(-3px); 
filter: 
    brightness(1.2) 
    drop-shadow(0 0 8px rgb(148, 210, 67))
    drop-shadow(0 0 2px rgba(148, 210, 67, 0.8)); 
}



/* CONTACTセクション */
.contact{
  margin: 6rem auto 0;
}

.contact .top-text{
  margin: 16px auto 24px;
}


dt::before{
  content:"◆";
  color: #395c0c;
  padding-right: 0.5rem;
  font-size: 1.2rem;
}

form{
  background-color: rgb(3, 30, 6, 0.7);
  width: 95%;
  max-width: 700px;
  margin: 0 auto 0;
  padding: 24px 3%;
  border: 2px solid #fff;
  box-shadow: 0 0 10px #fff;;
}

.form-item,
.form-option,
.form-textarea{
  margin-bottom: 1.5rem;
}

.contact-btn{
  display: block;
  margin: 56px auto 16px;
  width: 60%;
  max-width: 300px;
  padding: 0;
}

.contact-btn img{
  transition: all 0.3s ease;
}

.contact-btn :hover{
  transform: translateY(-2px);
  filter: brightness(1.2);
}

dl{
  margin: 0 auto;
  width:90%;
}

dt{
  text-align: start;
  margin-bottom: 0.2rem;
}

input[type="text"],
input[type="email"],
textarea,
select{
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 0.2rem;
  width: 100%;
  box-sizing: border-box;
}

textarea {
  min-height: 10rem;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 10px #fff;
}

/* back to top (side_btn) */
.pagetop{
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 20%;
  right: 2%;
  opacity: 0;
  scale: 1.5;
  visibility: hidden;
  z-index: 20;
}

.pagetop.appear {
    opacity: 1;
    scale: 1;
    visibility: visible;
}




/* ーーーーーーーーーーーーーーーー */
/* CATEGORY & DETAIL ページ*/
/* ーーーーーーーーーーーーーーーー */
.category,
.detail{
  position: relative;
}

.category-bg1,
.category-bg2{
  position: absolute;
  top: 0;
  width: 10%;
  position: fixed;
  z-index: 10;
}

.category-bg2{
  right: 0;

}

.category-head,
.detail-head{
  width: 80%;
  max-width: 800px;
  margin:  0 auto;

}
.category-title-container,
.detail-title-container{
  top: 200px;
}
.category-title,
.detail-title{
  font-size: 2rem;
  text-align: center;
  line-height: 1;
  padding-top: 8rem;
}
.category-text,
.detail-text{
  font-size: 1rem;
  width: 82%;
  margin: 0 auto;
}

.detail-text ul{
  list-style: square;
}

.category-card,
.detail-card{
  width: 80%;
  margin: 2rem auto;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px; /*カード間の縦横の隙間*/
}

.card-container{
  margin-bottom: 2rem;
}

@media screen and (min-width: 768px) {
.card-container{
  transition: 
    transform 0.5s ease, 
    box-shadow 0.5s ease;
  }
  .card-container:hover {
    transform: translateY(-10px);
    filter: brightness(0.6);
  }
}


.card-container img {
  width: 100%; 
  height: auto;
  display: block;
}

.return-btn-img{
  max-width: 300px;
  margin: 3rem auto;
  transition: all 0.3s ease; 
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)); 
}

.return-btn-img:hover{
  transform: translateY(-3px); 
  filter: 
    brightness(1.2) 
    drop-shadow(0 0 8px #fff) /* より強く光るシャドウ */
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)); 
  transform: scale(1.02) translateY(-3px);
}

.back-to-archive{
  text-align: center;
}


@media screen and (min-width: 768px) {
  .category-card {
    /* 2つの均等な列を作成 */
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
  }
}

@media screen and (min-width: 1024px) {
  .category-card {
    /* 3つの均等な列を作成 */
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  .detail .detail-card,
  .detail .detail-text{
    max-width: 800px;
    font-size: 1.2rem;

  }
}


/* ーーーーーーーーーーーーーーーー */
/* ONLINE STORE ARCHIVE ページ*/
/* ーーーーーーーーーーーーーーーー */
.category-nav{
  text-align: center;
  margin: 20px auto 40px;
}
.category-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;

}
.category-nav li {
  display: inline-block;
}
.term-link {
  display: block;
  padding: 8px 15px;
  border: 1px solid #fff;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
  transition: background-color 0.3s;
}
.term-link:hover,
.term-link.is-active {
    background-color: #fff;
    color: #031e06;
}


/* ーーーーーーーーーーーーーーーー */
/*フッター*/
/* ーーーーーーーーーーーーーーーー */
footer{
  text-align: center;
}

/* フッターロゴ */
.footer .hakumuLogo-img{
  display: block;
  margin: 0 auto 1.5rem;
  padding-top: 2rem;
  width: 30%;
  max-width: 300px;
}

/* フッターナビゲーション */
.footer-nav{
  padding: 12px;
}

.footer-nav ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.footer-nav li{
  font-size: 1.2rem;
  margin: 0 0.5rem;
  white-space: nowrap;
}

.footer-nav a{
  display: inline-block;
  padding: 0.5rem;
  text-decoration: underline;
}

.footer-nav a:hover {
  color: #fff;
  text-shadow: 0 0 5px rgba(216, 216, 216, 0.8), 0 0 10px rgba(216, 216, 216, 0.5);
}

/* フッター 白霧の森 管理局*/

.footer-info{
  position: relative;
}

.footer-bg{
  z-index: -1;
}

.footer-text{
  position: absolute;
  z-index: 1;
  top: 30%;
  left: 10%;
  font-size: 0.8rem;
}

@media screen and (min-width: 768px) {
  .footer-text{
  top: 35%;
  left: 150px;
  font-size: 2rem;
  }
}

.hakumu-tourism{
  text-align: start;
  margin-left: 5%;
  margin-bottom: 1rem;
}

.info-wrap img{
  width: 30px;
  height: 30px;
}

.info-list{
  display: flex;
  justify-content: flex-start;
  text-align: start;
  line-height: 1.1;
  padding: 5px;
}

.info-list p{
  font-size: 0.8rem;
  padding: 6px;
}

.info-list span{
  font-size: 0.6rem;
}

.copy{
  color: #b3b3b3;
  font-size: 0.75rem;
  text-align: end;
  padding-right: 2%;
}

/* ーーーーーーーーーーーーーーーー */
/* アニメーション用CSS */
/* ーーーーーーーーーーーーーーーー */


/* メインビジュアルのスライドイン */
.hero{
  opacity: 0;
  visibility: hidden;
  transition: all 2s;
  transform: translateY(150px);
}

.hero{
  transition: all 3s;
}

.is-slidein {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* セクションタイトルのスケールイン */
.about,
.news,
.discover,
.animals,
.onlinestore,
.category-head,
.category-card,
.detail-head,
.detail-card{
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: all 0.8s;
}

.is-show{
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}