@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;
  margin-bottom: 20px;
  text-align: left;
}
table th {
  background-color: #efefef;
  vertical-align: middle;
}
table th, table td {
  padding: 15px 20px;
  border-bottom: solid 1px #ddd;
}
table tr:last-child th, table tr:last-child td {
  border-bottom: none;
}
/* sp
---------------------------------------- */
.forSP {
  display: none !important;
}
/* common
---------------------------------------- */
html {
  width: 1050px;
  margin: 0 auto;
}
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: 60vh;
  overflow: hidden;
}
aside {
  float: left;
  width: 250px;
  border: solid 1px #ddd;
  padding: 15px;
  box-sizing: border-box;
}
aside ul li {
  border-bottom: dotted 1px #ccc;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
aside ul li:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;
}
aside ul li a {
  position: relative;
  display: block;
  padding: 5px 20px 5px 5px;
}
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.5em;
  margin-bottom: 20px;
}
h2 img {
  height: 34px;
  margin: -12px 8px 0 0;
}
h2 span {
  font-size: 0.4em;
  font-family: initial;
  color: #666;
  margin-left: 10px;
}
h3 {
  font-size: 1.5em;
  line-height: 1;
  padding: 4px 0 4px 13px;
  border-left: 5px solid #d8210d;
  margin-bottom: 25px;
}
h4 {
  font-size: 1.15em;
  font-weight: bold;
  color: #fff;
  background-color: #ee7800;
  border-radius: 3px;
  padding: 8px 15px;
  margin-bottom: 18px;
}
h5 {
  font-size: 1.15em;
  margin-bottom: 15px;
}
#bnr {
  padding: 40px 0;
}
#bnr ul {
  display: flex;
}
#bnr ul li {
  margin-right: 10px;
}
#bnr ul li:last-of-type {
  margin-right: 0;
}
a, a img {
  text-decoration: none;
  outline: none;
  color: initial;
  transition: all 0.3s ease 0s;
}
a:hover img {
  opacity: 0.7;
}
.inner {
  width: 1000px;
  margin: 0 auto;
}
section {
  margin-bottom: 50px;
}
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: 15px 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: -56px;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border: 28px solid transparent;
  border-left: 28px solid #ee7800;
  transition: all 0.3s ease 0s;
}
.btn a:hover, input[type=button]:hover, input[type=submit]:hover {
  background-color: #cc5517;
}
.btn a:hover:before {
  border-left: 28px solid #cc5517;
}
.btn-area {
  margin-top: 50px;
  text-align: center;
}
.btn-area .btn {
  display: inline-block;
  margin: 0 5px;
}
.more a {
  text-decoration: underline;
}
.under section.floL {
  float: right;
  width: 710px;
}
.under #main {
  float: none;
  position: relative;
  width: 100%;
  height: 200px;
  background: #051554;
  text-align: center;
  z-index: -10;
}
.under #main h1 {
  font-size: 2.5em;
  padding-top: 92px;
}
.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: 40px;
  line-height: 40px;
  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 12px;
}
.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: 5px;
}
.number li {
  list-style: decimal;
  margin-bottom: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb50 {
  margin-bottom: 50px;
}
/* header
---------------------------------------- */
header {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 75px;
  background: #fff;
  z-index: 10;
  transition: all 0.2s;
}
header > div {
  display: flex;
  position: absolute;
  right: 0%;
}
header #logo {
  width: 300px;
}
header #sns {
  display: flex;
  margin: 6px 20px 0 0;
}
header #sns li {
  margin-left: 8px;
}
header #sns li img {
  height: 28px;
}
header nav ul {
  display: flex;
  font-size: 1.05em;
  justify-content: center;
}
header nav > ul > li {
  position: relative;
  font-size: 0.95em;
  font-weight: bold;
  letter-spacing: 0.02em;
  margin-left: 25px;
  text-align: center;
}
header nav > ul li span {
  display: block;
  font-size: 0.75em;
  font-weight: normal;
  color: #808080;
  margin-top: -7px;
}
header nav ul li .child {
  display: none;
  font-weight: normal;
  position: absolute;
  width: 200px;
  top: 58px;
  left: -10%;
  background-color: #fff;
  z-index: 10;
}
header nav ul li .child li {
  font-size: 0.9em;
  border-bottom: solid 1px #ccc;
}
header nav ul li .child li:last-of-type {
  border-bottom: none;
}
header nav ul li .child li a {
  display: block;
  line-height: 100%;
  padding: 15px 12px;
  box-sizing: border-box;
  text-align: left;
}
header .btn-member {
  font-weight: bold;
  margin: 5px 0 0 40px;
}
header .btn-member a {
  color: #fff;
  background: linear-gradient(to left, #0062AB, #00003E);
  padding: 12px 38px;
  box-sizing: border-box;
}
header .btn-member:hover a {
  background: linear-gradient(to right, #0062AB, #00003E);
}
header .btn-member a img{
	width: 12px;
	        margin: -6px 0 0 8px;
}
#sns {
  display: flex;
  align-items: center;
  color: #fff;
  background: #ee7800;
  padding: 0 20px;
  margin-bottom: 10px;
}
#sns .catch {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.3em;
  width: 220px;
  margin: 10px 30px 8px 0;
}
#sns .catch + img {
  height: 60px;
}
#sns ul {
  font-size: 1.1em;
  width: 80%;
  padding: 10px 0;
  text-align: right;
}
#sns ul li {
  display: inline-block;
  margin-left: 25px;
  text-decoration: underline;
}
#sns ul li a img {
  width: 37px;
  margin: 0 0 0 10px;
}
/* footer
---------------------------------------- */
footer {
  color: #fff;
  padding: 40px 0 0;
  background-color: #051554;
  margin-top: 50px;
}
footer a {
  color: #fff;
}
footer .inner {
  display: flex;
  justify-content: center;
  justify-content: space-around;
}
footer .inner ul .child {
  font-size: 0.9em;
  margin-left: 5px;
}
footer .inner div ul li:first-of-type {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 5px;
}
footer .inner .right {
  text-align: right;
}
footer .inner .right * {
  display: inline-block;
  vertical-align: middle;
}
footer .inner .right p a {
  display: block;
  width: 220px;
  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:hover a {
	background-color: #00002f;
}
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 {
  display: block;
  margin-top: 30px;
}
footer .inner .right ul li {
  margin: 0 3px;
}
footer .inner .right ul li:last-of-type {
  margin-left: 10px;
}
footer .inner .right ul li a img {
  width: 55px;
}
footer #copyright {
  font-size: 0.85em;
  font-weight: bold;
  color: #00003E;
  background-color: #fff;
  padding: 12px 0;
  margin-top: 40px;
  text-align: center;
}
/* top
---------------------------------------- */
#top #main {
  position: relative;
}
#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: 500px;
}
#top #main #slide li img {
  width: 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: 3.5em;
  position: absolute;
  top: 23%;
  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.45em;
	font-weight: bold;
  margin: 25px 0 0 0px;
}
#top #main .scroll {
  font-size: 0.9em;
  font-weight: bold;
  position: absolute;
  bottom: 0;
  left: 50%;
  color: #fff;
  text-align: center;
}
#top #main .scroll span {
  display: block;
  position: relative;
  width: 1px;
  height: 30px;
  margin: 15px auto 0;
}
#top #main .scroll span:before {
  content: "";
  background: #fff;
  width: 1px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  -webkit-animation: scrollDown 1.5s ease-in-out infinite;
  animation: scrollDown 1.5s ease-in-out infinite;
}
@-webkit-keyframes scrollDown {
  0% {
    top: -16px
  }
  to {
    top: 100%
  }
}
@keyframes scrollDown {
  0% {
    top: -16px
  }
  to {
    top: 100%
  }
}
#top #content {
  float: left;
  width: 760px;
}
#top #content ul li {
  display: inline-block;
  width: 232px;
  margin: 0 26px 0 0;
}
#top #content ul li:last-of-type {
  margin-right: 0;
}
#top #content ul li a img {
	width: 100%;
        height: 130px;
  object-fit: cover;
  margin-bottom: 15px;
	border: solid 1px #eee;
}
#top #content ul li a p{
	        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
}
#top #content section {
  position: relative;
}
#top #content section .more {
  position: absolute;
  top: 0;
  right: 0;
}
#top aside {
  float: right;
  border: none;
  padding: 0;
}
#top aside li {
  border-bottom: none;
  padding-bottom: 0;
}
#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 {
  width: 49%;
  display: inline-block;
}
#about .floL div:first-of-type {
  margin-right: 1%;
}
#about #creed a, #about #song a, #about #we a {
  display: block;
  color: #0066ec;
  text-decoration: underline;
  text-align: right;
}
/* figure
---------------------------------------- */
#figure .floL {
  margin-bottom: 50px;
}
.room main .inner section h2 + ul li, #figure .floL ul li {
  display: inline-block;
  width: 218px;
  margin: 0 20px 30px 0;
  text-align: center;
}
.room main .inner section h2 + ul li img {
  margin-bottom: 5px;
}
#figure .floL ul li:nth-of-type(3n) {
  margin-right: 0;
}
#figure .floL ul li img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  margin-bottom: 10px;
}
#figure .floL ul li a {
  color: #0066ec;
  text-decoration: underline;
}
/* organization
---------------------------------------- */
#organization table tr:nth-of-type(n+7):nth-of-type(-n+12) td:first-of-type {
  background-color: #f5f5f5;
}
#organization table td a {
  text-decoration: underline;
}
#organization #access {
  margin-top: -100px;
  padding-top: 100px;
}
#organization iframe {
  width: 100%;
  height: 450px;
  margin-top: 20px;
}
/* policy
---------------------------------------- */
#policy #greeting img:first-of-type {
  display: block;
  width: 80%;
  margin: 0 auto 50px;
}
#policy #greeting .name {
  margin-top: 20px;
  text-align: right;
}
/* history
---------------------------------------- */
#history section.floL {
  margin-bottom: 50px;
}
#history section.floL div {
  display: inline-block;
  width: 590px;
  margin-left: 15px;
}
/* info
---------------------------------------- */
.day {
  margin-right: 8px;
}
.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-detail h2 + p {
  margin-bottom: 30px;
}
#ayumi-detail .txt {
  margin-top: 10px;
}
#ayumi-detail .btn {
  margin-top: 50px;
}
#ayumi ul {
  width: 800px;
  margin-bottom: 50px;
}
#ayumi ul .day {
	font-weight: bold;
  margin-right: 20px;
}
#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;
  padding: 25px 20px 25px 15px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ayumi-detail .inner h2 {
  margin-bottom: 20px;
}
/* provisional
---------------------------------------- */
#provisional #know p, #provisional #procedure p {
  display: inline-block;
  width: 400px;
  margin-bottom: 30px;
}
#provisional #procedure ol, #provisional #procedure ul, #provisional #if ol, #provisional #if ul {
  display: inline-block;
  width: 210px;
}
/* website
---------------------------------------- */
#website ul li {
  margin-bottom: 20px;
}
#website ul li a {
  text-decoration: underline;
}
/* member
---------------------------------------- */
#member .inner div {
  display: inline-block;
  width: 49%;
}
#member .inner div .btn {
  display: inline-block;
  margin: 0 30px 10px 0;
  text-align: left;
}
#member .inner div .btn a img {
  width: 16px;
  margin: -3px 8px 0 0;
}
/* contact
---------------------------------------- */
#contact table th {
  width: 25%;
  background-color: inherit;
}
#contact table th span {
  font-size: 0.75em;
  color: #fff;
  background-color: #f51111;
  padding: 4px;
  margin: 0 7px;
}
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%;
}
#your-name, #your-kana {
  width: 50%;
}
textarea {
  width: 100%;
  height: 230px;
}
input[type=reset], input[type=button], input[type=submit] {
  width: 220px;
  border: none;
}
.wpcf7c-force-hide {
  display: none !important;
}
/* comingsoon
---------------------------------------- */
#comingsoon main h1 {
  width: 40%;
  margin: 10vh auto 5vh;
}
#comingsoon main h1 + div {
  width: 600px;
  margin: 0 auto;
}
#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;
}