/*Theme Name: FF Version: 1.0*/
/**************************************************** standard elements */
html {scroll-behavior: smooth;}
body {min-height: 100vh; padding: 0; margin: 0; background:#4d4d4d; font-family: "Figtree", "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 16px; color: #dfdfdf; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden;}
h1, h2, h3 {font-weight: normal;}
p {line-height: 1.8; overflow-wrap: break-word;}
a {color: #f0f0f0; text-decoration: none;}
a:focus-visible {outline: 2px solid currentColor; outline-offset: 2px;}
img {display: block; max-width: 100%; height: auto; transition: opacity 0.3s ease;}
.fade-in {opacity: 0; animation: fadeIn 1s forwards;}
@keyframes fadeIn {to {opacity: 1;}}
a:hover img {opacity: 0.6;}
@media (prefers-reduced-motion: reduce) {.fade-in {animation: none;opacity: 1;}}

/* hide */
.toggle_down {display: none;}

/* cancel hamburger */
#menu__toggle {display: none!important;}

/********* header */
header {width: 100%; position: fixed; z-index: 9999;}
.logo {padding: 4% 0 0 4%;}
.logo a {color: #fff; font-weight: 200;font-size: 18px;}

/********* menu */
.menu__box {width: 20%; position: fixed; left: 4%; bottom: 4%; z-index: 9999; margin: 0;}
.menu__box a span {font-size: clamp(0.9em, 2.4vw, 2.6em); font-weight: 200; font-style: normal; font-optical-sizing: auto; position: relative; display: inline-block; color: rgba(255, 255, 255, 0.2); line-height: 1.1em; text-transform: uppercase; overflow: hidden; cursor: pointer; display: block;}
.menu__box li.nav_current > a > span {color: #f0f0f0;}

.link--shoot::before {content: attr(data-letters); position: absolute;
top: 0; left: 0; width: 0%; color: #f0f0f0; white-space: nowrap; overflow: hidden; transition: width 0.4s ease;}
.link--shoot:hover::before {width: 100%;}
.menu__box li.nav_current .link--shoot::before {width: 100%;}

.menu_info {margin-top: 20px;}
.menu_info dt {font-size: 18px;}
.menu_info dd:first-of-type {font-size: 16px;}
.menu_info dd:nth-child(3) {font-size: 12px; line-height: 1.4; color: rgb(255 255 255 / 60%);}

/**************************************************** structure */
#outer {min-height: 100vh; position: relative; z-index: 1;}
#content {width: 100%; min-height: 100vh; background: #4d4d4d; color: #fff; padding: 4% 4% 4% 30%; position: relative; z-index: 3; box-sizing: border-box;}

/****** wp-navi */
.wp-pagenavi {width: 100%; margin-top: 20px; padding: 10px; box-sizing: border-box; display: flex; justify-content: center;}
.pages {display: none;}

.wp-pagenavi a,.wp-pagenavi a:hover, .wp-pagenavi span.current {width: 30px; height: 30px; line-height: 20px; padding: 5px!important; box-sizing: border-box; border: 0!important;}

.wp-pagenavi a {background-color: #333; color: #fff; display: block; text-align: center; transition: background-color 0.2s ease-in; -webkit-transition: background-color 0.2s ease-in; float: left;}
.wp-pagenavi span.current {float: left;}
.wp-pagenavi a, .wp-pagenavi span {border: 0;}

.wp-pagenavi a:hover, .wp-pagenavi span.current {background-color: #b3b3b3; color: #fff; display: block; text-align: center;
transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in;}

/**************************************************** prev next */
.prevnext {display: flex; justify-content: center; align-items: center; padding-top: 0!important; margin-top: 80px; gap: 40px;}
.prevnext li { flex: 1 1 0; list-style: none !important;
padding: 0!important; margin: 0!important;}

.prevnext li:first-of-type a {float: left;}
.prevnext li:nth-child(2) a {float: right;}

.prev a, .next a {display: flex; align-items: center; position: relative;
margin: 0 auto; padding: 0.7em 2.5em 0.4em; width: 100px; color: #333; font-size: 10px; font-weight: 600; border: 0px solid #000; transition: 0.3s; text-decoration: none!important;}
.prev a {justify-content: flex-end;}
.next a {justify-content: flex-start;}

.prev a::before, .next a::before {content: ''; position: absolute; top: calc(55% - 1px); width: 10px; height: 1px; background-color: #000; transition: 0.3s;}
.prev a::before {transform: translateY(calc(-55% - 1px)) rotate(-25deg); left: 2em;}
.next a::before {transform: translateY(calc(-55% - 1px)) rotate(25deg); right: 2em;}

.prev a::after, .next a::after {content: ''; position: absolute;
top: 55%; transform: translateY(-50%) rotate(180deg); width: 20px; height: 1px; background-color: #000; transition: 0.3s;}
.prev a::after {left: 2em;}
.next a::after {right: 2em;}

.prev a:hover, .next a:hover  {text-decoration: none; opacity: 1!important;}
.prev a:hover::before,
.prev a:hover::after {left: 0.5em;}
.next a:hover::before,
.next a:hover::after {right: 0.5em;}