/*Theme Name: JPS 1.0*/
/**************************************************** standard elements */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;list-style:none;}

body {width: 100%; font-family:'Times New Roman', "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-size: 16px; font-weight: 200; color: #fff; line-height: 1.7em; word-wrap: break-word; overflow: auto; box-sizing: border-box; background: url('../img/bg.jpg') repeat top center fixed;}
h1, h2, h3 {font-weight: normal;}

img {max-width: 100%; height: auto; vertical-align: top; opacity: 0; animation: 1s fadeIn forwards;}
a img {border: 0; vertical-align: top; opacity: 0; animation: 1s fadeIn forwards;}
a:hover img {opacity: 0.6; transition: opacity 0.3s ease;}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}

a {text-decoration: none; color: #fff; overflow: hidden; outline: none; word-wrap: break-word; word-break: break-all;}
p {line-height: 1.7em;}
.brbe:before {content: "\A"; white-space: pre;}
.braf:after {content: "\A"; white-space: pre;}

.visually-hidden-sp {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

/* this for scroll -history, techinique, backstamps */
#h001, #h002, #h003, #h004, #h005, #h006, #h007, #h008, #h009, #h010,#h011,
#h1-001, #h1-002, #h1-003, #h1-004, #h1-005, #h1-006, #h1-007,
#h2-001, #h2-002, #h2-003,
#h3-001, #h3-002, #h3-003
{scroll-margin-top: 80px;}

/**************************************************************************/
/*slide side menu ***************************************************/
/**************************************************************************/
/*top 3line */
#menu__toggle {opacity: 0; display: none;}
#menu__toggle:checked ~ .menu__btn > span {transform: rotate(45deg);}
#menu__toggle:checked ~ .menu__btn > span::before {top: 0; transform: rotate(0);}
#menu__toggle:checked ~ .menu__btn > span::after {top: 0; transform: rotate(90deg);}
#menu__toggle:checked ~ .menu__box {visibility: visible; right: 0;}
.menu__btn {display: flex; align-items: center; position: fixed; top: 20px; right: 20px; width: 26px; height: 26px; cursor: pointer; z-index: 200;}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {display: block; position: absolute; width: 100%; height: 2px; background-color: #fff; transition-duration: .25s;}
.menu__btn > span::before {content: ''; top: -8px;}
.menu__btn > span::after {content: ''; top: 8px;}
/*end */

.menu__box > li:nth-child(5), .menu__box > li:nth-child(9) {display: none;}

.menu__box {display: block; position: fixed; z-index: 100; overflow-y: auto;
visibility: hidden; top: 0; right: -100%;
width: 340px; height: 100%; margin: 0; padding: 45px 0;
list-style: none; background-color: #222;
box-shadow: 1px 0px 6px rgba(0, 0, 0, .2); transition-duration: .25s;}

.menu-open {overflow: hidden;}

.menu__item {display: block; padding: 8px 24px; color: #000;
font-size: 14px; text-decoration: none; transition-duration: .25s;}
.menu__item:hover {background-color: #000;}

/*plugin*/
.slidemenu {height: 100%; overflow: hidden; position: relative;}
.slidemenu .slidemenu-content {position: relative;}
/*accordion*/
.submenu_accordion a {display: block; color: #fff;}
.submenu_accordion .child {display: none; background: #000;}
.submenu_accordion .child > li {padding-left: 40px; padding-bottom: 5px;}
.child01 {font-size: 0.9em; padding: 20px 0 15px;}

/*info*/
.menu_info {font-size: 16px; color: #fff; line-height: 1.6em; width: 90%; margin: 10px 5%; padding: 60px 0 20px 10px;}
.menu_info dt {padding-bottom: 20px;}

.sns_icon_sp {margin-top: 30px;}
.sns_icon_sp li {padding-right: 20px; float: left;}
.sns_icon_sp a img {width: 30px; height: auto;}

/********* header */
header {width: 100%; height: 60px; position: fixed; z-index: 100; background-color: rgba(0, 0, 0, 0.95);}

#head_left {display: none;}

/** logo */
.logo_top {display: none;}
.logo img {width: 200px; padding: 15px 0 0 15px;}

/** .slogan */
.slogan {display: none;}

/**************************************************** structure */
#outer {margin: 0; display: flex; flex-flow: column; min-height: calc(100vh - 0px);}

/* title */
#title {position: relative; width: 100%; height: 100px;
margin: 0; padding: 80px 20px 20px 20px;
box-sizing: border-box; z-index: 50;}
  
#title::before {content: ''; position: absolute;
width: 100%; height: 60%; top: 90px; bottom: 0; left: 0;
background: rgba(0, 0, 0, 0.3);
clip-path: polygon(0 0, 100% 100%, 0 100%);}
#title::after {content: ''; position: absolute;
width: 100%; height: 60%;
top: 90px; bottom: 0; right: 0;
background: rgba(0, 0, 0, 0.3);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
z-index: -1;}
    
#title p {position: relative; text-align: center; color: #fff;
margin: 0; font-size: 1.4em; line-height: 1em;}
#title span {font-size: 0.7em; line-height: 1.8em; opacity: 0.3;}
/* END: title */
  
#inner {flex: 1; margin-top: 50px; background: rgba(0, 0, 0, 0.5);}
#inner_full {flex: 1; margin-top: 50px; background: rgba(0, 0, 0, 0.5); padding-top: 20px;}
#container {width: 100%; margin: 0 auto; padding: 40px 3%; box-sizing: border-box;}

.paper {color: #000; background: #c7c7c7; padding: 5%; margin-bottom: 40px;}
.paper p {padding: 8px 0;}

/*************** footer */
footer {width: 100%; height: 20px; padding: 15px 0; margin-top: auto; background-color: #000; color:#fff;}
footer div:first-of-type {display: none;}
footer div:nth-child(2) {font-size: 11px; text-align: center; margin: 0 auto;}

/****** wp-navi */
.wp-pagenavi {width: 100%; display: inline-block;}
.pages {display: none;}

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

.wp-pagenavi a {background-color: #000; 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: #333; color: #fff; display: block; text-align: center;
transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in;}

.flex {display:flex; flex-wrap:wrap; justify-content: flex-start;}

.menu__cat {display:none;}

/* btn  */
.btn a, .btn a:hover {color: #fff;}
.btn a {background: rgba(0, 0, 0, 0.2); border: calc(1px - 0.2px) solid #666;}
.btn a:hover {background: rgba(0, 0, 0, 0.8); border: calc(1px - 0.2px) solid #fff;}

/***** btn_more***/
.more_btn {width: 100px; line-height: 20px; text-align: center; text-decoration: none;}
.more_btn a {font-size: 0.7em; display: table; width: 100px; line-height: 20px; text-align: center; text-decoration: none; position: relative;}

/**************************************************** Top */
/*************** Top Image */
.top_img {display: flex; gap: 2%; list-style: none; padding: 70px 3% 0; margin: 0;}
.top_img li {flex: 1; opacity: 0; transform: translateY(-50px); display: flex;
 flex-direction: column; align-items: center;}

.img-wrapper {width: 100%; aspect-ratio: 9 / 16; overflow: hidden; display: flex;
align-items: center; justify-content: center; background: #f5f5f5;}
.top_img img {width: 100%; height: 100%; object-fit: cover; object-position: center;
display: block; padding-bottom: 0;}
.top_img span {font-size: 0.8em; line-height: 1.2em; align-self: flex-end; margin-top: 8px;}

@keyframes slideFromTop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.top_img li.is-visible:nth-child(1) {animation: slideFromTop 1.2s ease 0.2s forwards;}
.top_img li.is-visible:nth-child(2) {animation: slideFromTop 1.4s ease 0.3s forwards;}
.top_img li.is-visible:nth-child(3) {animation: slideFromTop 1.6s ease 0.4s forwards;}
.top_img li.is-visible:nth-child(4) {
animation: slideFromTop 1.8s ease 0.5s forwards;}

/*************** View Our Gallery BTN */
.top_viewourgallery_btn {text-align: center; margin: 50px auto;}
.top_viewourgallery_btn a {font-size: 1.3em; padding: 15px 40px;}

/*************** Recent Topics */
#recent_topics {background: rgba(0, 0, 0, 0.4); padding: 50px 3%;}

.top_topics_title {display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 40px;}
.top_topics_title span:first-of-type {font-size: 1.6em;}
.top_topics_title span:nth-child(2) a {font-size: 0.8em; padding: 5px 40px;}

.top_topics_container {width: 100%;}

.top_topics_box {display: flex; height: 100%; margin-bottom: 60px;}
.archive-thumb-wrapper {width: 33%; min-height: 150px; margin-right: 5%;}
.top_topics_box > div:nth-child(2) {width: 62%; display: flex; flex-direction: column;
flex-grow: 1; justify-content: space-between;}

.archive-thumb-top {width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 0; left: 0;}

/**************************************************** About */
#about_content > div:first-of-type {margin-bottom: 10%;}

#about_content h1,#about_content h2 {font-size: 1.6em; line-height: 1.6em; padding-bottom: 20px; opacity: 0.5;}
#about_content h3 {font-size: 1.2em; line-height: 1.6em; padding: 0 0 20px; opacity: 0.5;}
#about_content p {padding-bottom: 40px;}

#about_right dl {width: 100%; line-height: 1.4em;
display: flex; flex-wrap: wrap;}
#about_right dt {width: 130px; box-sizing: border-box; border-top: 1px solid #c0c0c0; padding: 15px 0; position: relative;}
#about_right dd {width: calc(100% - 130px); margin-left: 0; margin-bottom: 10px; border-top: 1px solid #c0c0c0; padding: 15px 0;}
a.about_pdf img {width: 20px; padding-left: 10px;}
a.about_pdf:hover {text-decoration: underline;}

#links {border: 1px solid #999; padding: 5%; margin-top: 60px;}
#links p {padding: 0;}
#links a:hover {opacity: 0.5; text-decoration: underline;}

/**************************************************** Topics / Column */
/************* archive */
.article {margin-bottom: 40px;}
.article > div:first-of-type {width:35%; margin-right: 5%;}
.article > div:nth-child(2) {width:60%;}

.archive-thumb-wrapper {overflow: hidden; position: relative;}
.archive-thumb {width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 0; left: 0;}

.archive-thumb-wrapper img {opacity: 1 !important;
animation: none !important; transition: opacity 0.3s ease;}
.archive-thumb-wrapper:hover img {opacity: 0.6 !important;}

.archive_title {font-size: 1.2em; font-weight: 600; line-height: 1.3em;}
.date {font-size: 0.9em; color: rgba(255, 255, 255, 0.5); padding-bottom: 20px;}
.excerpt {padding-bottom: 10px;}

/************* Single (Topics) */
#single .rep {max-width: 100%; max-height: auto; padding: 0 0 3% 0;}
#single h1 {font-size: 1.4em; line-height: 1.3em; font-weight: 600;}
#single h2 {font-size: 1.1em; line-height: 1.3em; font-weight: 600; margin-bottom: 20px;}

#single a {text-decoration: underline;}
#single a:hover {opacity: 0.5;}
#single p {padding-bottom: 30px;}
#single em {font-style: italic;}
#single strong {font-weight: bold;}

#single ul {padding: 20px 0;}
#single li {margin-left: 20px; list-style: initial;}

#single ol {margin: 0 20px; padding-bottom: 30px; list-style:none; counter-reset:counter;}
#single ol > li {list-style: none; text-indent: -1.8em;}

#single ol > li::before {
content:counters(counter, "-") ". ";
counter-increment:counter;
}
#single ol li > ol {counter-reset:counter;}
#singleol li > ul {counter-reset:counter;}
#single ol li > ul li {text-indent: 5px;}

.wp-block-table table {margin: 20px 0; border-collapse: collapse;}
.wp-block-table th, .wp-block-table td {border: 1px solid #666!important; padding: 10px;}
.is-style-stripes th, .is-style-stripes td {padding: 10px; border: 0!important;}
.is-style-stripes tr:nth-of-type(odd) {background: #222!important;}

.wp-block-gallery li {list-style: none!important;}
.wp-block-gallery ul {padding-bottom: 10px;}
.wp-block-gallery a img {max-width: 100px; height: 100px!important; object-fit: cover!important;}
.wp-block-image img {max-width: 100%; height: auto; object-fit: cover!important; margin-bottom: 2px;}
.wp-block-separator {margin-bottom: 40px;}

/**************************************************** Gallery */
#gallery {display: flex; flex-wrap: wrap; justify-content: flex-start;
gap: 2%; width: 94%; margin: 5% auto; padding: 0;}

.gbox {flex: 0 0 calc(50% - (2% * 3 / 4)); margin-bottom: 2%; box-sizing: border-box;}

.gbox-thumb-wrapper {aspect-ratio: 4 / 3; width: 100%; max-width: 400px;
overflow: hidden; position: relative; display: block;}

.archive-gbox-thumb,
.gbox-thumb-wrapper img {width: 100%; height: 100%;
object-fit: cover; object-position: center; position: absolute;
top: 0; left: 0; aspect-ratio: 4 / 3; display: block;}
.gbox-thumb-wrapper img {opacity: 1 !important;
animation: none !important; transition: opacity 0.3s ease;}
.gbox-thumb-wrapper:hover img {opacity: 0.6 !important;}

.gbox ul {padding: 10px 5px 10px 0; text-align: left; line-height: 1.4em;}
.gbox li:nth-of-type(2) {opacity: 0.5;}

/**************************************************** History (also TECHNIQUES & BACKSTAMPS) */
#common h1 {font-size: 1.4em; padding-bottom: 30px;}
#common h1 span {font-size: 0.8em; line-height: 1.6em; opacity: 0.3;}
#common h2 span {font-size: 1.4em; line-height: 1.2em; border-left: 8px solid #000; padding: 0 0 0 15px;}
.his_en {font-size: 1.0em; opacity: 0.3; margin-bottom: 20px; display: block; line-height: 1.2em;}

.common_top img {margin: 20px 0 40px;}

.mokuji {font-size: 1.4em; text-align: center; padding: 3%; margin-bottom: 20px;}
.mokuji_list {padding: 5% 10%; border: 1px solid #fff; margin: 0 auto 5%; background: rgba(255, 255, 255, 0.1); border: calc(1px - 0.2px) solid #666;}
.mokuji_list li {font-size: 1.1em; list-style-type:decimal; padding: 5px 0;}
.mokuji_list li a:hover {text-decoration: underline;}

.history_box {width: 100%; display:table; margin-bottom: 10%;}
.history_box img {min-width: 100%; height: auto; margin-bottom: 20px;}

.history_ul {font-weight: 600; margin: 20px 0;}
.history_ul li {padding: 5px 0;}

/**************************************************** TECHNIQUES & BACKSTAMPS */
/************* Intro */
#intro p {width: 90%; margin: 0 5%; font-size: 1.2em; margin-bottom: 60px; text-align: center;}
.intro_btn li {margin: 0; transition: border 0.2s; margin-bottom: 20px;}
.intro_btn li a img {display: block; width: 100%; height: auto;
border: 3px solid #999; transition: border 0.2s;}
.intro_btn li:hover a img {border: 3px solid #fff;}

/************* TECHNIQUES */
.mokuji_list3 {padding: 5%; border: 1px solid #fff; margin-bottom: 5%; background: rgba(255, 255, 255, 0.1); border: calc(1px - 0.2px) solid #666;}

.mokuji_list3 li {list-style-type:none; padding: 5px 20px 5px 0; float: left;}
.mokuji_list3 li a:hover {text-decoration: underline;}

.tech_box {margin-bottom: 10%;}

.tech_box h2 {margin-bottom: 20px;}
.tech_box p {padding: 0;}

.tech_box ul {padding-top: 20px;}
.tech_box li {padding-top: 10px;}
.tech_box img {width: 100%; height: auto; border: 3px solid #fff; display: block; margin: 0 0 5px 0; padding: 0;}
.tech_box span {line-height: 1.2em; padding-top: 10px;}

/************* BACKSTAMPS */
.backstamp_explain dl {padding: 5% 10%; margin: 40px 0; border: 1px solid #999; background: #dfdfdf;}
.backstamp_explain dt {font-weight: 600; font-size: 1.2em; padding-top: 20px;}
.backstamp_explain dd {padding-bottom: 10px;}

.title_center {font-size: 1.4em; text-align: center; margin: 20px 0;}

.where {font-weight: 600; font-size: 1.2em; text-align: center; margin-bottom: 40px; color: #fff; background: url('../img/bg.jpg') repeat top center fixed;}

.mokuji_list2 {padding: 5%; border: 1px solid #fff; margin: 0 auto 5%; background: rgba(255, 255, 255, 0.1); border: calc(1px - 0.2px) solid #666;}
.mokuji_list2 p {font-size: 1.2em; font-weight: 600px; padding: 10px 0; text-decoration: underline;}
.mokuji_list2 div {width: 100%; margin-bottom: 10px;}
.mokuji_list2 ul {margin-left: 20px;}
.mokuji_list2 li {list-style-type:decimal; padding: 5px 40px 5px 0; float: left;}
.mokuji_list2 li a:hover {text-decoration: underline;}

.bs_box {margin-bottom: 10%;}
.bs_box img {min-width: 100%; border: 3px solid #fff; margin-bottom: 15px;}

.bs_box dl {margin: 20px 0 10px; padding: 0; border-bottom: 1px dotted #fff;}
.bs_box dt, .bs_box dd {display: inline-block; vertical-align: top; margin: 0; border-top: 1px dotted #fff; padding: 10px 0;}
.bs_box dt {width: 100px;}
.bs_box dd {width: calc(100% - 100px); margin-left: 0; display: inline-block;}

/**************************************************** Contact */
#contact {width: 100%; margin: 0 auto;}

.email {margin: 0 auto; display: table;}
.email a {font-size: 1.4em; text-align: center;}

#office {margin-top: 10%;}
#office > dl {width: 100%; padding: 5%; margin-bottom: 5%; background: #222; border: 1px solid #333; box-sizing: border-box;}
#office > dl dt {font-size: 1.2em; padding-bottom: 25px;}

/**************************************************** Application */
#application {width: 100%; margin: 0 auto;}
#application h1 {font-size: 1.4em; padding-bottom: 40px;}

.app_left {width: 100%; margin-bottom: 5%;}
.app_right {width: 100%;}

.app_left p:nth-child(3) {padding-top: 20px;}

.fee {width: 100%; line-height: 1.4em; border: 1px solid #333; margin: 0 0 5px; background: #222;}
.fee td {padding: 15px 20px;}
.fee td:first-of-type {width: 100px; box-sizing: border-box;}
.fee li {line-height: 1.4em;}

.kaisoku {width: 100%; box-sizing: border-box; border: 1px solid #333; margin: 0 0 5px; background: #222; padding: 15px 20px; margin-right: 1%;}
.kaisoku a:hover {color: #666;}

.kaisoku a img {width: 20px; vertical-align:middle; padding-left: 10px;}

.app_email {width: 100%; box-sizing: border-box; border: 1px solid #333; background: #222; padding: 15px 20px;}
.app_email a {font-size: 1.4em; margin-top: 60px; text-align: center;}
.app_email a:hover {color: #666;}

/**************************************************** English */
.en_head {width: 100%;
  padding: 10% 5%;
  box-sizing: border-box;
  background: url('../img/english/head_sp.jpg') no-repeat center center;
  display: flex;
  align-items: center; 
}
.en_head p { font-size: 1.2em; width: 80%; line-height: 1.3em; margin: 0; padding:0!important;}
.en_paper p {font-size: 1.1em; padding-bottom: 40px; text-align: justify;}
.en_paper img {min-width: 100%; padding-bottom: 20px;}