@charset "utf-8";
@import url('https://fonts.cdnfonts.com/css/bodoni');
/*
 Theme Name:   kitakyushu-jc
*/
/* Reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure, address {
  margin: 0;
  padding: 0;
  font-style: normal;
  vertical-align: top;
}
p, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  outline: none;
}
ul li, ol li {
  list-style: none;
  outline: none;
}
button, input, select, textarea {
  font-size: inherit;
  font-family: inherit;
  outline: none;
  vertical-align: middle;
}
img {
  vertical-align: middle;
  border: none;
  max-width: 100%;
  height: auto;
}
table {
  width: 100%;
  border-spacing: 0;
  text-align: left;
}
table th {
  background-color: #efefef;
  vertical-align: middle;
}
table th, table td {
  padding: 2% 3%;
  box-sizing: border-box;
  border-bottom: solid 1px #ddd;
}
table tr:last-child th, table tr:last-child td {
  border-bottom: none;
}
/* sp
---------------------------------------- */
.forPC {
  display: none !important;
}
/* common
---------------------------------------- */
html {
  width: 100%;
}
body {
  font: 14px/1.8em YuGothic, 'Yu Gothic', 'Hiragino Sans', 'MS Gothic', 'ＭＳ ゴシック', Osaka, sans-serif;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}
main {
  display: block;
  min-height: 158vw;
  overflow: hidden;
}
aside {
  border: solid 1px #ddd;
  padding: 3% 5%;
  box-sizing: border-box;
  margin-bottom: 10%
}
aside ul li {
  border-bottom: dotted 1px #ccc;
}
aside ul li:last-of-type {
  border: none;
}
aside ul li a {
  position: relative;
  display: block;
  padding: 4% 4% 4% 0%;
}
aside ul li a:before {
  content: "";
  position: absolute;
  top: 0;
  right: 7px;
  bottom: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-top: 2px solid #ccc;
  border-right: 2px solid #ccc;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
h1 {
  color: #fff;
}
h2 {
  font-size: 2.2em;
  margin-bottom: 4%;
}
h2 img {
  height: 34px;
  margin: -12px 8px 0 0;
}
h2 span {
  font-size: 0.5em;
        font-family: initial;
        color: #666;
        margin-left: 10px;
}
h3 {
  font-size: 1.3em;
  line-height: 1;
  padding: 4px 0 4px 13px;
  border-left: 5px solid #d8210d;
  margin-bottom: 5%;
}
h4 {
  font-size: 1.1em;
  font-weight: bold;
  color: #fff;
  background-color: #ee7800;
  border-radius: 3px;
  padding: 2% 3%;
  margin-bottom: 4%;
}
h5 {
  font-size: 1.1em;
  margin-bottom: 2.5%;
}
#bnr {
  padding: 5% 0 2%;
  background-color: #f0f0f0;
  text-align: center;
}
#bnr ul li {
  display: inline-block;
  width: 32%;
  margin: 0 0.5% 2% 0;
}
#bnr ul li:nth-of-type(3n) {
  margin-right: 0;
}
a {
  line-height: 100%;
  text-decoration: none;
  outline: none;
  color: inherit;
  transition: all 0.3s ease 0s;
}
.inner {
  width: 100%;
  padding: 0 4%;
  box-sizing: border-box;
}
section {
  margin-bottom: 10%;
}
strong {
  font-weight: bold;
}
/*
.min {
  font-family: 'Bodoni 72', Yu Mincho, 'Yu Mincho', 'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'ＭＳ Ｐ明朝', 'Times', 'Times New Roman', serif;
}*/
.btn {
  text-align: center;
}
.btn a, input[type=button], input[type=submit] {
  position: relative;
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  width: 180px;
  color: #fff;
  padding: 20px 0;
  box-sizing: border-box;
  background-color: #ee7800;
  text-align: center;
  transition: all 0.3s ease 0s;
}
.btn a:before {
  content: "";
  position: absolute;
  top: 0;
  right: -53px;
  box-sizing: border-box;
  width: 27px;
  height: 27px;
  border: 27px solid transparent;
  border-left: 27px solid #ee7800;
  transition: all 0.3s ease 0s;
}
.btn-area {
  margin-top: 5%;
  text-align: center;
}
.btn-area .btn {
  margin: 0 0;
}
.more a {
  text-decoration: underline;
}
.under #main {
  position: relative;
  width: 100%;
  height: 40vw;
  margin-bottom: 10%;
  background:#051554;
  text-align: center;
  z-index: -10;
}
.under #main h1 {
  font-size: 2em;
  padding-top: 17vw;
}
.under #main .inner {
  position: relative;
}
.under #main .inner p {
  position: absolute;
  right: 0;
  top: 30px;
  font: 11em Work Sans, sans-serif;
  font-weight: 100;
  line-height: 1em;
  letter-spacing: 0.02em;
  color: rgba(51, 51, 51, 0.5);
  z-index: -1;
  text-align: right;
}
.wp-pagenavi {
  margin-bottom: 60px;
  clear: both;
  text-align: center;
}
.wp-pagenavi a, .wp-pagenavi span {
  display: inline-block;
  font-weight: normal;
  width: 30px;
  line-height: 30px;
  color: #333;
  text-decoration: none;
  padding: 0;
  margin: 8px;
}
.wp-pagenavi span.current {
  color: #fff;
  background-color: #ee7800;
}
.wp-pagenavi .prev, .wp-pagenavi .next {
  position: relative;
}
.wp-pagenavi .prev, .wp-pagenavi .next {
  font-size: 0;
  top: -8px;
  width: 35px;
  height: 35px;
  border-radius: 30px;
  border: none;
  margin: 0 3%;
}
.wp-pagenavi .prev:before, .wp-pagenavi .next:before {
  content: '' !important;
  position: absolute;
  top: 12px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #ccc;
  border-right: 2px solid #ccc;
}
.wp-pagenavi .prev:before {
  left: 14px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.wp-pagenavi .next:before {
  right: 14px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.circle, .number {
  margin-left: 20px;
}
.circle li {
  list-style: disc;
  margin-bottom: 1.5%;
}
.number li {
  list-style: decimal;
  margin-bottom: 2%;
}
.mb10 {
  margin-bottom: 3%;
}
.mb50 {
  margin-bottom: 10%;
}
/* header
---------------------------------------- */
header {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #fff;
  padding: 0 4%;
  box-sizing: border-box;
  z-index: 10;
  transition: all 0.2s;
}
header #logo {
  width: 250px;
}
header > div {
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: 100vh;
        background-color: rgba(0, 0, 0, 0.3);
}
header nav > ul > li,header .btn-member {
  position: relative;
  font-weight: bold;
  letter-spacing: 0.02em;
  border-top: solid 1px #ccc;
	background-color: #fff;
}
header nav > ul > li:last-of-type {
  border-bottom: solid 1px #ccc;
}
header nav > ul li span,header .btn-member a span {
  font-size: 0.75em;
  font-weight: normal;
  margin-left: 2%;
}
header nav > ul li a,header .btn-member a {
  position: relative;
  display: block;
  padding: 5% 3%;
  box-sizing: border-box;
}
header nav > ul li:nth-of-type(2):before, header nav > ul li:nth-of-type(4):before {
  content: "";
  position: absolute;
  top: 20px;
  right: 3%;
  width: 6px;
  height: 6px;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
header nav > ul li:nth-of-type(2) a {
  margin-right: 10%;
}
header nav ul li .child {
  display: none;
  font-weight: normal;
  background-color: #fff;
  overflow: hidden;
  z-index: 10;
}
header nav ul li .child li {
  font-size: 0.9em;
  float: left;
  width: 50%;
  border-bottom: solid 1px #ccc;
}
header nav ul li .child li:nth-last-of-type(2),header nav ul li .child li:last-of-type {
  border-bottom: none;
}
header nav ul li .child li a {
  padding: 8% 6%;
  box-sizing: border-box;
}
header .btn-member {
	border-top: none;
}
/*
header .btn-member a {
  display: block;
  font-size: 1.3em;
  font-weight: bold;
	letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(to left, #0062AB, #00003E);
  padding: 5%;
  box-sizing: border-box;
  text-align: center;
}*/
header .btn-member a img{
	width: 11px;
        margin: -7px 8px 0 0;
}
header #sp-menu {
  width: 45px;
  height: 45px;
  background: url(../img/common/menu.jpg) no-repeat center /cover;
  position: absolute;
  z-index: 10;
  top: 13%;
  right: 2%;
}
header #sp-menu.close {
  background: url(../img/common/close.jpg) no-repeat center /cover;
}
#sns {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #ee7800;
  padding: 2% 4%;
  margin-bottom: 2%;
  text-align: center;
}
#sns .catch {
  font-size: 1.13em;
  font-weight: bold;
  line-height: 1.2em;
  width: 53%;
}
#sns ul {
  width: 43%;
  margin-left: 4%;
}
#sns ul li {
  float: left;
}
#sns ul li a img {
  width:33px;
	margin: 0 2px;
}
#sns ul li:last-of-type a:last-child {
}
/* footer
---------------------------------------- */
footer {
  color: #fff;
  padding: 8% 0 0;
  background-color: #051554;
  margin-top: 10%;
}
footer a {
  color: #fff;
}
footer .inner > ul ,footer .inner > div:first-of-type {
  display: none;
}
footer .inner .right > p {
  display: inline-block;
	        width: 48%;
  vertical-align: middle;
}
footer .inner .right p a {
  display: block;
  width: 100%;
  margin: 0 5px;
  padding: 10px;
  box-sizing: border-box;
  border: solid 1px rgba(255, 255, 255, 0.3);
  text-align: center;
}
footer .inner .right p:first-of-type a img {
  width: 15px;
  margin-left: 10px;
}
footer .inner .right p:last-of-type a img {
  width: 17px;
  margin: -5px 0 0 10px;
}
footer .inner .right ul {
  margin-top: 5%;
	text-align: center;
}
footer .inner .right ul li {
	display: inline-block;
  margin: 0 3px;
}
footer .inner .right ul li:last-of-type {
	display: block;
  margin-top: 3%;
}
footer .inner .right ul li a img {
  width: 55px;
}
footer #copyright {
  font-size: 0.85em;
  font-weight: bold;
  color: #00003E;
  background-color: #fff;
  padding: 3% 0;
  margin-top: 6%;
  text-align: center;
}
/* top
---------------------------------------- */
#top #main {
  position: relative;
  margin-bottom: 10%;
}
#top #main #slide li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(158, 101, 5, 0.2);
  z-index: 10;
}
#top #main #slide {
  overflow: hidden;
}
#top #main #slide li {
  height: 30vh;
}
#top #main #slide li img {
  width: 100%;
	height: 100%;
  object-fit: cover;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
#top #main #slide li.add-animation {
  animation: zoomUp 10s linear 0s 1 normal both;
}
#top #main h1 {
	 font-size: 1.8em;
  position: absolute;
  top: 20%;
  left: 50%;
  width: 100%;
  transform: translateY(-50%) translateX(-50%);
	text-shadow: #834a00 1px 0 10px;
 
  text-align: center;
}
#top #main h1 small {
  display: block;
  font-size: 0.5em;
	font-weight: bold;
  margin: 1% 0 0 0;
}
#top #main .scroll {
  font-size: 0.8em;
  font-weight: bold;
  position: absolute;
  bottom: 0;
  left: 45%;
  color: #fff;
  text-align: center;
}
#top #main .scroll span {
  display: block;
  position: relative;
  width: 1px;
  height: 7px;
  margin: 15px auto 0;
}
#top #main .scroll span:before {
  content: "";
  background: #fff;
  width: 1px;
  height: 15px;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  -webkit-animation: scrollDown 2s ease-in-out infinite;
  animation: scrollDown 2s ease-in-out infinite;
}
@-webkit-keyframes scrollDown {
  0% {
    top: -16px
  }
  to {
    top: 100%
  }
}
@keyframes scrollDown {
  0% {
    top: -16px
  }
  to {
    top: 100%
  }
}
#top #content {
  padding: 0 4%;
  box-sizing: border-box;
}
#top #content ul li {
  margin-bottom:6%;
}
#top #content ul li a img {
	width: 100%;
        height: 50vw;
  object-fit: cover;
  margin-bottom: 4%;
	border: solid 1px #eee;
}
#top #content ul li a p{
	line-height: 1.8em;
	        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
}
#top aside {
  border: none;
  margin-bottom: 0;
}
#top aside li {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 3%;
}
#top aside li a {
  padding: 0;
}
#top aside li a:before {
  content: none;
}
#top aside li a img {
  width: 100%;
}
#top aside div {
   background-color: #EBEBEB;
  padding: 15px;
  box-sizing: border-box;
  margin-top: 10px;
  text-align: center;
}
/* about
---------------------------------------- */
#about .floL div:first-of-type {
  margin-bottom: 8%;
}
#about #creed a, #about #song a, #about #we a {
  display: block;
  color: #0066ec;
  margin-top: 7%;
  text-decoration: underline;
  text-align: right;
}
/* figure
---------------------------------------- */
#figure .floL {
  margin-bottom: 8%;
}
.room main .inner section h2 + ul li, #figure .floL ul li {
  display: inline-block;
  width: 48%;
  margin: 0 2% 5% 0;
  text-align: center;
}
.room main .inner section h2 + ul li:nth-of-type(even) {
  margin-right: 0;
}
.room main .inner section h2 + ul li img {
  margin-bottom: 2%;
}
#figure .floL ul li:nth-of-type(even) {
  margin-right: 0;
}
#figure .floL ul li img, #figure .floL ul li img {
  width: 100%;
  height: 50vw;
  object-fit: cover;
  margin-bottom: 4%;
}
#figure .floL ul li a {
  color: #0066ec;
  text-decoration: underline;
}
/* organization
---------------------------------------- */
#organization section:nth-of-type(2) {
  overflow-x: scroll;
}
#organization section:nth-of-type(2) div {}
#organization table tr:nth-of-type(7) th {
  width: 50px;
}
#organization table tr:nth-of-type(n+7):nth-of-type(-n+12) td:first-of-type {
  background-color: #f5f5f5;
}
#organization table td a {
  color: #0190D5;
  text-decoration: underline;
}
#organization #access {
  margin-top: -10vw;
  padding-top: 10vw;
}
#organization iframe {
  width: 100%;
  height: 60vw;
  margin-top: 5%;
}
/* policy
---------------------------------------- */
#policy #greeting img:first-of-type {
  display: block;
  width: 80%;
  margin: 0 auto 8%;
}
#policy #greeting .name {
  margin-top: 5%;
  text-align: right;
}
/* history
---------------------------------------- */
#history section.floL {
  margin-bottom: 8%;
}
#history section.floL img {
  display: block;
  margin: 0 auto 4%;
}
/* info
---------------------------------------- */
.day {
  margin-right: 2%;
}
.category {
  font-size: 0.7em;
  color: #fff;
  padding: 4px 10px;
  box-sizing: border-box;
  text-align: center;
}
#info .category {
  background-color: #ee7800;
}
#report .category {
  background-color: #d8210d;
}
/* ayumi
---------------------------------------- */
#ayumi ul {
  margin-bottom: 6%;
}
#ayumi ul li {
  border-top: dotted 1px #808080;
}
#ayumi ul li:last-of-type {
  border-bottom: dotted 1px #808080;
}
#ayumi ul li a {
  display: block;
  line-height: 1.5em;
  padding: 5% 2% 4%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ayumi-detail h2 {
  margin-bottom: 5%;
}
#ayumi-detail h2 + p {
  margin-bottom: 6%;
}
#ayumi-detail .txt {
  margin-top: 3%;
}
#ayumi-detail .btn {
  margin-top: 8%;
}
/* provisional
---------------------------------------- */
#provisional #know p, #provisional #procedure p {
  margin-bottom: 4%;
}
#provisional #know img, #provisional #procedure img {
  margin-bottom: 6%;
}
/* website
---------------------------------------- */
#website ul li {
  margin-bottom: 5%;
}
#website ul li a {
  text-decoration: underline;
}
/* member
---------------------------------------- */
#member .inner div {
  margin-bottom: 8%;
}
#member .inner div .btn {
  display: inline-block;
  width: 46%;
  margin: 0 5% 2% 0;
  text-align: left;
}
#member .inner div p:nth-of-type(even) {
  margin-right: 0;
}
#member .inner div .btn a {
  width: 100%;
}
#member .inner div .btn a:before {
  right: -42px;
  border-left: 15px solid #ee7800;
}
#member .inner div .btn a img {
  width: 14px;
  margin: -6px 3% -3px 0;
}
/* contact
---------------------------------------- */
#contact table th, #contact table td {
  display: block;
  width: 100%;
}
#contact table th {
  padding: 5% 0 0;
  background-color: inherit;
  border-bottom: none;
}
#contact table td {
  padding: 2% 0 5%;
}
#contact table th span {
  font-size: 0.7em;
  color: #fff;
  background-color: #f51111;
  padding: 4px;
  margin: 0 2%;
}
input[type=text], select, textarea, input[type=tel], input[type=email], input[type=number] {
  padding: 10px 15px;
  box-sizing: border-box;
  border: none;
  background-color: #eee;
}
input[type=text], input[type=number], input[type=email] {
  width: 100%;
}
textarea {
  width: 100%;
  height: 50vw;
}
input[type=reset], input[type=button], input[type=submit] {
  width: 100%;
  margin-bottom: 2%;
  border: none;
}
.wpcf7c-force-hide {
  display: none !important;
}
/* comingsoon
---------------------------------------- */
#comingsoon main h1 {
  width: 60%;
  margin: 10vh auto 5vh;
}
#comingsoon main h1 + div {
  padding: 0 5%;
  box-sizing: border-box;
}
#comingsoon footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 4px 0 0;
  text-align: center;
}
#comingsoon footer #copyright {
  background-color: initial;
  margin-top: 0;
}