@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
html{
	font-size: 62.5%;
    scroll-behavior: smooth;
}
body{
    justify-content: center;
	font-size: 1.6rem;
	font-weight: 400;
	font-family: sans-serif;
	line-height: 1.9;
    background-color: #e7e7e7;
    text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
}

@media screen and (max-width: 768px){
	body{
	font-size: 1.4rem;
}

}
html,
body{
    scroll-behavior: smooth;
}
img{
	max-width: 100%;
	height: auto;
  -webkit-user-drag: none; 
  pointer-events: none;
}

a,
button{
    transition: all 0.3s ease-in-out;
}
a{
    display: block;
}
a:hover{
    filter: brightness(1.3);
}
section{
    display: block;
}
.padding-inner{
    padding: 4vw 10vw;

}
.fsS{
    font-size: 1.4rem;
}
h2{
    margin-bottom: 50px;
}

.mg-btm-l{
    margin-bottom: 10%;
}
.mg-btm{
    margin-bottom: 5%;
}
a.common_btn{
    display: block;
    width: 250px;
    background-color: #871325;
    margin: 0 auto;
    padding: 1.5rem 0;
    text-align: center;
    border-radius: 50px;
}
.btn_white{
    background-color: #fff;
}

 .wrap_object{
    position: absolute;
    content: "";
    width: 300px;
    height: 300px;
    background-image: url();
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
	 pointer-events:none
}
@media screen and (max-width: 768px){

 .wrap_object{
    width: 200px;
    height: 200px;
}
.padding-inner{
  
    padding: 20vw 5vw;

}

}
.flex{
    display: flex;
    flex: 1;
    gap: 3vw;
}
.flex .flex_box{
    flex: 1;
}
@media screen and (max-width: 768px){
    
.flex{
    flex-direction: column;
    gap:10vw
}
}
/**********************************/
header .logo{
    width: 120px;
    height: 180px;
    position: fixed;
    z-index: 1;
    top:20px;
    left: 20px;
    background-image: url(../img/common_logo.webp);
    background-repeat: no-repeat;
    background-size: contain;
}
.hamburger {
  width: 50px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: fixed;
  right: 40px;
  top: 40px;
  z-index: 8999;
  mix-blend-mode: difference; /* ← これを親に移動 */
}
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: white;
  transition: 0.3s ease;
}


.hamburger span {
  position: absolute;
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 3px;
  transition: all 0.3s ease;
  left: 0;
}

.hamburger span:nth-child(1) {
    top:15px;
    width: 70%;
}


/* ✕に変形 */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top:10px;
    width: 100%;
}
.hamburger.active span:nth-child(2) {
  transform: rotate(-45deg);
  top: 10px;
}

/* メニュー本体 */
.nav-menu {
  position: fixed;
  top: 10px;
  right: 20px;
  width: 30%;
  height:90%;
  background: #0a0f2b;
  z-index:8998;
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none; 
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  color: #fff;

}
.nav-menu.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto; /* 表示時はクリック可能に */
}
.nav-menu{
    font-size: 2rem;
    font-family: serif;
    line-height: 3;
    letter-spacing: 3px;
    text-align: left;
      font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;

}
/* オーバーレイ初期状態は非表示 */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7); 
  opacity: 0;
  pointer-events: none; 
  transition: opacity 0.3s ease;
  z-index: 50; 
}

/* 表示時 */
#overlay.active {
  opacity: 1;
  pointer-events: auto; /* クリック可能にして閉じるなども可 */
}

@media screen and (max-width: 768px){
    
/* メニュー本体 */
.nav-menu {
  width: 100%;
  height:100%;
  top:0;
  right: 0;
}
}
/***********************/
footer{
    position: relative;
    background-color: #0a0f2b;
    color: #fff;
}
footer .wrap_object{
    top:-35vw;
    right: 0;
    background-image: url(../img/bg_gold.webp);
    background-size: contain;
    background-repeat: no-repeat;
}
footer a.common_btn{
    background-color: rgb(255, 255, 255);
    color: #0a0f2b;
}
footer .flex_box ul{
display: flex;
justify-content: center;
gap: 10px;
}
ul.sns img{
    max-width: 40px;
}
img {
    width: 100%;
}
footer .copyrights{
	background-color: #000;
	padding:0;
	margin:0;
	font-size:11px;
	letter-spacing:5px;
	padding:.5rem
}
/******************************/
#loader {
  position: fixed; 
  inset: 0;
  z-index: 9998;
  overflow: hidden;
	pointer-events: none;
}

#loader img {
  position: absolute; 
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  animation: windmillDisappear 2.3s linear 1 forwards;
  z-index: 9999;
}


@keyframes windmillDisappear {
  0% {
    opacity: 1;
  }
  1% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  85% {
    transform: translate(-50%, -50%) rotate(648deg) scale(1); /* 324deg × 2 */
  }
  90% { opacity: 1; transform: translate(-50%, -50%) rotate(684deg) scale(1.5); }
  95% { opacity: 0.5; transform: translate(-50%, -50%) rotate(702deg) scale(0.7); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(720deg) scale(0); }
}

.panel {
  position: absolute;
  inset: 0;
  will-change: transform, clip-path;
  background: #A21014;
  transform: translateY();
}
.panel--b { background: #A21014; }

#loader.slash .panel--a {
  clip-path: polygon(0 0, 100% 0, 0 100%); 
}
#loader.slash .panel--b {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);   
}

#loader.animate.slash .panel--a { animation: open-up-left 1.5s ease forwards; }
#loader.animate.slash .panel--b { animation: open-down-right 1.5s ease forwards; }

@keyframes open-up-left   { to { transform: translate(-60vw, -60vh); } }
@keyframes open-down-right{ to { transform: translate( 60vw,  60vh); } }

/******************************/
main {
  transition: opacity .8s ease;
}
.show-content main {
  opacity: 1;
}
/******************************/
h2,
h1 {
  position: relative;
  overflow: hidden;
  display: block;
  max-width: 250px;
  margin: 0 auto  50px;
}


h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: #b51717;
  transform: scaleX(0);
  transform-origin: left;
}
h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: left;
}

h2 img,
h1 img{
  display: block;
  transform: translateY(100%);
  opacity: 0;
}
h2.active::after,
h1.active::after {
  animation: underlineDraw 1s forwards, underlineErase 0.5s forwards 1s;
}

h2.active img,
h1.active img {
  animation: slideUpFade 0.8s ease forwards;
  animation-delay: 0.8s; 
  opacity: 0;
  margin-bottom: 20px;
}

h1.active span {
  animation: slideUpFade 0.8s ease forwards;
  animation-delay: 0.8s; 
  opacity: 0;
  padding-top: 30px;
  color: #871325;
  font-size: 1.4rem;
  letter-spacing: 3px;
}
@keyframes underlineDraw {
  to {
    transform: scaleX(1);
  }
}

@keyframes underlineErase {
  from {
    transform: scaleX(1);
    transform-origin: right;
  }
  to {
    transform: scaleX(0);
    transform-origin: right;
  }
}

@keyframes slideUpFade {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/************************/
.pagination {
    text-align: center;
}
.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; 
}
.nav-links a.page-numbers,
.nav-links .current,
.nav-links a.prev,
.nav-links a.next,
.nav-links .dots {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #E7E7E7;
    color: #A21014;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #A21014;
}
.nav-links a.page-numbers:hover {
    color: #FFF;
    background-color: #8C7425;
    border-color: #8C7425;
}
.nav-links .current {
    background: #A21014;
    color: #FFFFFF;
}

.nav-links .next::before { left: -15px; }
.nav-links .prev::after { right: -15px; }
.nav-links .dots {
    background: transparent;
    border: none;
}