/* styles.css */
body{
  background-color: #F8F4E6;
}
header, body,  h1, h2 ,h3 ,h4 ,a, ul{
  margin:0;
  padding:0;
  color: #C89932;
}
ul {
  list-style-type: none;
}
*{
  margin: 0;
  padding: 0;
}
header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  height: 5vw;
  background-color: #f8f4e665;
  border-radius: 0 0 2vw 2vw;
}
.fadeInUp_1 {
  opacity: 0;
  transform: translateY(120px);
}
@keyframes fadeIn {
  0% {}

  100% {
    opacity: 1;
    transform: translate(0);
  }
}
.fadeIn {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
ruby rt {
  font-size: 0.5em;
  top: 0vw;
  position: relative;
}

/*高さを100%にして描画エリアをとる*/
/* html,body{
	height: 100%;
} */

/*ハンバーガーメニューここから*/
.menu-btn {
  position: fixed;
  top: 1vw;
  right: 1vw;
  display: flex;
  height: 3vw;
  width: 3vw;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #96514D;
  border-radius: 25%;
}
.menu-btn img{
  width: 65%;
  height: 65%;
}
.menu-btn-open{
  display: block;
}
.menu-btn-close{
  display: none;
}
#menu-btn-check:checked ~ .menu-btn .menu-btn-open{
  display: none;
}
#menu-btn-check:checked ~ .menu-btn .menu-btn-close{
  display: block;
}

#menu-btn-check{
  display: none;
}

.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow-y: scroll;
  top: 0;
  left: 0;
  z-index: 80;
}
.menu-content ul {
  padding: 2.5vw 1vw 2.5vw;
}
.menu-content ul li {
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  color:#C89932;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
}
.menu-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}
.menu-content {
  width: 25%;
  height: 50%;
  position: fixed;
  line-height: 3vw;
  left: 100%;/*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: #F8F4E6;
  transition: all 0.5s;/*アニメーション設定*/
  text-align: center;
  font-size: 1.5vw;
  border-radius: 2.5vw 0vw 2.5vw 2.5vw;
}
#menu-btn-check:checked ~ .menu-content {
  left: 75%;/*メニューを画面内へ*/
}
.search-btn{
  width: 2.5vw;
}

/* header */
.header__menu__ul{
  line-height: 2vw;
  font-size: 1.5vw;
  margin-top: -7vw;
  margin-bottom: 2vw;
}
@media (max-width: 768px) {
  .header__menu__ul {
      margin-top: -14vh; /* 小さい画面向けに調整 */
      margin-bottom: 4vh; /* 小さい画面向けに調整 */
  }
}

.header__menu__ul li{
  border-bottom: 0px solid #fff !important;
}

.header__menu__ul li a::before{
  content: "";
  width: 0px !important;
  height: 0px !important;
  border: 0px !important;
}


.view{
  display: block;
}

.hide{
  display: none;
}
/*ハンバーガーメニューここまで*/

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;
	width:100%;
	height: 100%;
}

/*ページ内をスムーズにスクロールする*/
html {
  scroll-behavior: smooth;
}
h3 {
  scroll-margin-top: 3vw;
}

/*メニューやに触ったさいの指定*/
a:hover{
  color: #96514D;
}
.menu-content li a:hover {
  color: #96514D;
}
a.prefecture:hover{
  color: inherit;
}

.webfont {
  font-family: "Kaisei Opti", serif;
  font-weight: 400;
  font-style: normal;
}
li{
  list-style-type: none;
}
a{
  text-decoration: none;
}

.navi{
  font-size: 1.5vw;
  display:flex;
  width:100%;
  position: fixed;
  z-index: 1;
  margin-top: 1vw;
}
.menu{
  width:50%;
  display: flex;
  margin-left: 10vw;
  gap: 0.5vw;
}
.search{
  text-align:right;
  width:15%;
  margin-left: 10vw;
}
.sear{
  display: flex;
}
.textbox{
  font-size: 1.5vw;
  background-color: rgba(255, 255, 255, 0);
  border: 0px;
  border-bottom: 1px solid #C89932;
  width: 15vw;
}
.textbox:focus{
  outline: 0;
}

.title{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vw;
  position: absolute;
  z-index: 2;
  width: 20%;
  margin-left: 40%;
  margin-top: 10%;
}
h1{
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 3vw;
}
.title_item{
  width: 22.5%;
  height: auto;
}
.pagetop {
    position: fixed;
    right: 1vw;
    bottom: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3vw;
    height: 3vw;
    transition: .3s;
    background: #96514D;
    opacity: 0;
    border-radius: 25%;
  }
  .pagetop img{
    width: 70%;
  }

  h4{
    font-size: 2.2vw;
    text-align: center;
    align-items: center;
    margin-bottom: 5%;
  }
  .border{
    width: 90%;
    margin-left: 5%;
    margin-bottom: 3vw;
    border-top: 1.5px solid#C89932;
  }
  footer{
    /* margin-top: 10vw; */
    margin-bottom: 10vw;
    z-index: 2;
  }
  .f_item{
    display: flex;
    justify-content: center;
    font-size: 1.5vw;
    z-index: 2;
  }
  .f_about{
    width: 25%;
    z-index: 2;
    text-align: center;
  }
  .f_about p{
    margin-bottom: 2vw;
  }
  .f_pre{
    width: 25%;
    z-index: 2;
    text-align: center;
  }
  .f_pre p{
    margin-bottom: 2vw;
  }
  .link{
    width: 25%;
    z-index: 2;
  }
  .link p{
    margin-bottom: 2vw;
    text-align: center;
  }

  /*以下ページ内容*/
  h2{
    text-align: center;
    gap: 1vw;
    width: 30%;
    margin-left: 35%;
    margin-top: 15%;
    font-size: 3vw;
  }
.point-item{
    width: 4%;
    margin-left: 48%;
    margin-top: 0.5%;
}

.about-01{
    margin-top: 5%;
    margin-bottom: 10%;
    margin-left: 10%;
    width: 35%;
}
.about-topic{
    font-size: 2vw;
}
.about-border-x{
    width:75%;
    margin-left: -12%;
    margin-top: 1vw;
    border-top: 0.2vw solid#C89932;
}
.about-border-y{
    width: 35%;
    margin-left: -20%;
    margin-top: 2.2vw;
    border-top: 0.2vw solid#C89932;
    transform: rotate(90deg);
}
.about-contents{
    width: 100%;
    font-size: 1.3vw;
    margin-top: -1vw;
}
.about-02{
    margin-top: -15%;
    margin-left: 55%;
    width: 35%;
}
.about-03{
    margin-top: 5%;
    margin-left: 30%;
    width: 40%;
}

.yamato{
    position: relative;
    z-index: 0;
    width: 37.5%;
    height: auto;
    background-image: url(./zemi/item/5-yamato.png);
    background-position: center;
    background-size: cover;
    align-items: center;
    display: flex;
    margin-left: 10%;
    margin-top: 3%;
}
.gokaden{
    width: 75%;
    margin-top: 30%;
    margin-bottom: 37%;
    margin-left: 12.5%;
}
.gokaden h3{
    font-size: 1.5vw;
    text-align: center;
    margin-bottom: 0.5vw;
}
.gokaden p{
    font-size: 1.2vw;
}
.g-gloup{
    display: flex;
}
.yamashiro{
    position: relative;
    z-index: 0;
    width: 37.5%;
    height: auto;
    background-image: url(./zemi/item/5-yamashiro.png);
    background-position: center;
    background-size: cover;
    align-items: center;
    display: flex;
    margin-left: 5%;
    margin-top: 3%;
}
.bizen{
    position: relative;
    z-index: 0;
    width: 37.5%;
    height: auto;
    background-image: url(./zemi/item/5-bizen.png);
    background-position: center;
    background-size: cover;
    align-items: center;
    display: flex;
    margin-left: 31.25%;
    margin-top: -10%;
    margin-bottom: -10%;
}
.osyu{
    position: relative;
    z-index: 0;
    width: 37.5%;
    height: auto;
    background-image: url(./zemi/item/5-osyu.png);
    background-position: center;
    background-size: cover;
    align-items: center;
    display: flex;
    margin-left: 10%;
}
.mino{
    position: relative;
    z-index: 0;
    width: 37.5%;
    height: auto;
    background-image: url(./zemi/item/5-mino.png);
    background-position: center;
    background-size: cover;
    align-items: center;
    display: flex;
    margin-left: 5%;
}

.about-04{
  margin-left: 15%;
}
.about-04 .about-border-y{
  width: 15%;
  margin-left: -8.5%;
  border-top: 0.2vw solid #C5AF78;
}
.about-04 .about-border-x{
  width: 35%;
  margin-left: -5%;
  border-top: 0.2vw solid #C5AF78;
}
.sword_background{
  color: #C5AF78;
  position: relative;
  z-index: 0;
  width: 100%;
  background-image: url(./zemi/item/about-back.png);
  background-position: center;
  align-items: center;
  background-size: cover;
  padding: 5% 0 10% 0;
  margin-top: 15%;
}
.sword_contents{
  width: 100%;
  margin-top: 5vw;
  position: relative;
}
.sword_contents img{
  width: 70%;
  margin-left: 15%;
  /* position: relative; */
  z-index: -1;
}

.item-1{
  position: absolute;
  margin-left: 22vw;
  margin-top: -18.2vw;
}
.item-2{
  position: absolute;
  margin-left: 27vw;
  margin-top: -19.2vw;
}
.item-3{
  position: absolute;
  margin-left: 33.7vw;
  margin-top: -18.2vw;
}
.item-4{
  position: absolute;
  margin-left: 44.3vw;
  margin-top: -19.8vw;
}
.item-5{
  position: absolute;
  margin-left: 56.5vw;
  margin-top: -19vw;
}
.item-6{
  position: absolute;
  margin-left: 81vw;
  margin-top: -16vw;
}
.item-7{
  position: absolute;
  margin-left: 20.2vw;
  margin-top: -0.5vw;
}
.item-8{
  position: absolute;
  margin-left: 21.5vw;
  margin-top: -8.2vw;
}
.item-9{
  position: absolute;
  margin-left: 44vw;
  margin-top: -0.5vw;
}
.item-10{
  position: absolute;
  margin-left: 54.4vw;
  margin-top: -4vw;
}

.btn{
  cursor: pointer;
  font-size: 1.3vw; 
  background: none;
  border: none;
}
.btn a{
  color: #C5AF78

}
.btn :hover{
  color: #ffffe3;
}
.close{
  position: absolute;
  padding: 0 3% 0 0;
  right: 2.5%;
}
.close a{
  color: #FFF0CF;
  font-size: 2.5vw;
}
.box {
  position: relative;
  display: none;
  margin-inline: auto;
  justify-content: center;
  background-color: #96514D;
  color: #FFF0CF;
  border-radius: 2.5vw;
  margin-left: 10%;
  width: 80%; 
  margin-top: 3%;
}
.box.is-switch {
  /* モーダルの入れ替え */
  display: block;
}
.sword-item{
  display: flex;
  gap: 2vw;
  font-size: 1.2vw;
  padding: 3% 7% 0;
  color: #FFF0CF;
  align-items: baseline;
}
.sub-title{
  font-size: 1.7vw;
}
.sword-info{
  font-size: 1.2vw;
  padding: 1.5% 7% 3%;
}
.sword-set{
  display: flex;
}
.sword-con-item{
  width: 44%;
  padding: 3% 3%;
  display: flex;
}
.sword-con-item img{
  width: 50%;
  object-fit: contain;
}
.sword-sub{
  display: block;
  margin-left: 5%;
  width: 45%;
}
.sword-con-item-title{
  font-size: 1.5vw;  
}
.sword-con-item-info{
  font-size: 1.1vw;
}
.attention{
  font-size: 1vw;
  margin-left: 3%;
  display: flex;
  margin-bottom: -2%;
}

.about-05{
  margin-top: 5%;
  margin-bottom: 5%;
  margin-left: 20%;
  width: 60%;
}
.about-05 .about-border-y{
  width: 20%;
  margin-left: -12%;
}
.about-05 .about-border-x{
  width: 45%;
  margin-left: -7%;
}
.about-05 h3{
  font-size: 1.5vw;
}
.idea{
  display: flex;
  gap: 1.5vw;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 3%;
}
.balloon4 {
  position: relative;
  display: grid;
  place-items: center;
  width: 15vw;
  padding: 1vw 1.2vw;
  margin: 1.8% 1%;
  background: #F8F4E6;
  border: 2px solid #96514D;
  outline: 3.65vw solid #F8F4E6; 
  outline-offset: -3.8vw; 
  border-radius: 50%;
  animation: fuwa 3s ease-in-out infinite;
  z-index: -5; 
}
.balloon4::before {
  content: "";
  position: absolute;
  width: 48%;
  height: 52%;
  top: -10%;
  left: -10%;
  background: #F8F4E6;
  border: 2px solid #96514D;
  border-radius: 50%;
  z-index: -10;
}
.balloon4::after {
  content: "";
  position: absolute;
  width: 35%;
  height: 55%;
  top: 47%;
  right: -8%;
  background: #F8F4E6;
  border: 2px solid #96514D;
  border-radius: 50%;
  z-index: -10;
}

.balloon4 p {
  margin: 0; 
  padding: 0;
  margin: 1vw 0 1vw 0;
  font-size: 1.2vw;
  text-align: center;
  z-index: 1;
}
.fuwa{
  animation: fuwa 5s ease-in-out infinite alternate;
}
 
@keyframes fuwa {
  0% {
    transform:translate(0, 0);
  }
  50% {
    transform:translate(0, var(--fuwa-distance));
  }
  100% {
    transform:translate(0, 0);
  }
}