@charset "UTF-8";
@import url("global.css");
/* ------------------------------
 Index-page
------------------------------ */
ul.eventlist {
  margin: 0 -25px;
  display: flex;
  flex-wrap: wrap;
}
ul.eventlist li {
  width: 33.33333%;
  box-sizing: border-box;
  padding: 0 25px 50px;
}
ul.eventlist li a {
  display: block;
  line-height: 1.5;
}
ul.eventlist li a:hover .image::before {
  opacity: .3;
}
ul.eventlist li a:hover .image figure img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
ul.eventlist li .image {
  position: relative;
  margin-bottom: 30px;
}
ul.eventlist li .image::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #374360;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
  z-index: 2;
}
ul.eventlist li .image figure {
  height: 0;
  padding-top: 60%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
ul.eventlist li .image figure img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
ul.eventlist li .image .category {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #374360;
  color: #fff;
  text-align: center;
  font-weight: bold;
  width: 160px;
  padding: 8px 10px;
  font-size: 14px;
  z-index: 3;
}
ul.eventlist li .image .staff {
  position: absolute;
  border-radius: 50%;
  border: #fff 2px solid;
  overflow: hidden;
  width: 68px;
  height: 68px;
  right: 20px;
  bottom: -20px;
  z-index: 4;
}
ul.eventlist li .image .staff img {
  border-radius: 50%;
}
ul.eventlist li .posttitle {
  text-align: justify;
  font-weight: 700;
  padding: 0 20px;
}
ul.eventlist li .date {
  margin: 20px 10px 0;
  padding: 10px 10px;
  border-top: #ccc 1px solid;
  border-bottom: #ccc 1px solid;
}
ul.eventlist li .text {
  font-size: 14px;
  margin-top: 15px;
  padding: 0 20px;
}

/* ------------------------------
 Post-Page
------------------------------ */
.postpage .posttitle {
  margin-bottom: 120px;
}
.postpage .posttitle span.cat {
  display: block;
  width: 200px;
  margin: 0 auto 30px;
  color: #fff;
  padding: 5px 0;
  background-color: #374360;
}
.postpage .posttitle span.title {
  font-weight: bold;
  font-size: 28px;
  line-height: 1.5;
}
.postpage .information {
  display: flex;
  align-items: center;
}
.postpage .information figure {
  width: 50%;
  max-height: 600px;
  text-align: right;
}
.postpage .information figure img.objectfit {
  object-position: center right;
  object-fit: contain;
  max-height: 600px;
}
.postpage .information .data {
  width: 50%;
  padding-left: 40px;
  box-sizing: border-box;
}
.postpage .information .data table {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.5;
}
.postpage .information .data table tr {
  border-top: #ccc 1px solid;
}
.postpage .information .data table tr:first-child {
  border: none;
}
.postpage .information .data table th {
  text-align: center;
  padding: 20px 30px;
  font-weight: bold;
  white-space: nowrap;
}
.postpage .information .data table td {
  text-align: left;
  padding: 20px 10px;
}
.postpage .information .data .pdf {
  margin-top: 10px;
}
.postpage .information .data .pdf a {
  display: block;
  background-color: #374360;
  border-radius: 2px;
  color: #fff;
  padding: 10px 30px;
  position: relative;
}
.postpage .information .data .pdf a::before {
  content: "\f1c1";
  display: inline-block;
  vertical-align: 5%;
  font-family: "Font Awesome 5 free";
  font-weight: 900;
  margin-right: 10px;
}
.postpage .information .data .pdf a::after {
  content: "\f101";
  font-family: "Font Awesome 5 free";
  font-weight: 900;
  position: absolute;
  line-height: 30px;
  right: 20px;
  top: 50%;
  margin-top: -15px;
}
.postpage .information .data .pdf a:hover {
  background-color: rgba(55, 67, 96, 0.7);
}
.postpage .downbanner {
  margin: 100px 0 80px;
}
.postpage .downbanner a {
  display: block;
  height: 220px;
  position: relative;
  background: url("/okinawa/img/event/banner_bg.jpg") no-repeat center center;
  background-size: cover;
  text-align: center;
}
.postpage .downbanner a::before {
  content: "\f103";
  font-family: "Font Awesome 5 free";
  font-weight: 900;
  font-size: 40px;
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 35px;
  left: 50%;
  color: #62749B;
  animation: arrow 1.5s cubic-bezier(1, 0.5, 0.5, 1) infinite;
  z-index: 3;
  margin-left: -20px;
}
@keyframes arrow {
  0% {
    transform: none;
  }
  100% {
    transform: translateY(40px);
  }
}
.postpage .downbanner a::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right top, #374360, transparent);
  opacity: .5;
  z-index: 1;
}
.postpage .downbanner a p {
  position: relative;
  z-index: 2;
  color: #fff;
  padding-top: 50px;
}
.postpage .downbanner a p span {
  display: block;
}
.postpage .downbanner a p span.text {
  font-size: 26px;
  margin-bottom: 20px;
}
.postpage .downbanner a p span.button {
  font-weight: bold;
  width: 300px;
  margin: 0 auto;
  background-color: rgba(55, 67, 96, 0.9);
  padding: 10px 0;
}
.postpage #postbody {
  margin: 120px 0;
  text-align: center;
}
.postpage #postbody .postbody {
  max-width: 900px;
  display: inline-block;
  text-align: justify;
}
.postpage #staff {
  display: flex;
  justify-content: center;
  align-items: center;
}
.postpage #staff .main {
  margin-right: 20px;
}
.postpage #staff .main .title {
  margin-bottom: 5px;
  line-height: 1;
}
.postpage #staff .main .title .en {
  letter-spacing: 0;
  font-size: 50px;
  font-weight: 700;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  color: #fff;
  -webkit-text-stroke: 1px #111;
  text-stroke: 1px #111;
  padding-right: 10px;
}
.postpage #staff .main .title .ja {
  font-size: 20px;
  font-weight: 700;
}
.postpage #staff .main .name {
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2em;
  margin-top: 20px;
}
.postpage #staff .photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}
.postpage #access {
  margin: 100px 0;
  background-color: #f3f3f3;
  padding: 40px 0;
}
.postpage #access .wrapper {
  display: flex;
  align-items: center;
}
.postpage #access .data {
  width: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 20px 0;
}
.postpage #access .data .inner {
  max-width: 640px;
  margin-left: auto;
}
.postpage #access .data .title {
  position: relative;
  line-height: 1.5;
  margin-bottom: 40px;
  background-color: #374360;
  color: #fff;
  padding: 25px 0 25px 30px;
}
.postpage #access .data .title span {
  line-height: 1;
  display: block;
}
.postpage #access .data .title span.en {
  letter-spacing: 0;
  -webkit-text-stroke: 1px #374360;
  text-stroke: 1px #374360;
  font-size: 50px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: bold;
  position: absolute;
  top: -41px;
  right: 10px;
}
.postpage #access .data .title span.ja {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .1em;
}
.postpage #access .data .address {
  padding-left: 30px;
}
.postpage #access .data .address dt {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 10px;
}
.postpage #access .map {
  width: 50%;
  flex-shrink: 0;
}
.postpage #access .map figure {
  min-height: 520px;
  position: relative;
  border: #374360 1px solid;
}
.postpage #access .map figure iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1500px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1500px) {
  /* ------------------------------
   Index-page
  ------------------------------ */
  /* ------------------------------
   Post-Page
  ------------------------------ */
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1.5 (1320px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1320px) {
  /* ------------------------------
   Index-page
  ------------------------------ */
  ul.eventlist {
    margin: 0 -1.5vw;
  }
  ul.eventlist li {
    padding: 0 1.5vw;
    margin-bottom: 40px;
  }
  ul.eventlist li .posttitle {
    padding: 0;
  }
  ul.eventlist li .date {
    margin: 20px 0 0;
    padding: 10px 10px 12px;
    font-size: 14px;
  }
  ul.eventlist li .text {
    margin-top: 15px;
    padding: 0;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .postpage .posttitle span.title {
    font-size: 26px;
  }
  .postpage #access {
    padding: 0;
  }
  .postpage #access .wrapper {
    margin: 0 -50px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  /* ------------------------------
   Index-page
  ------------------------------ */
  ul.eventlist {
    margin: 0 -12px;
  }
  ul.eventlist li {
    width: 50%;
    padding: 0 12px;
  }
  ul.eventlist li a:hover .image figure img {
    transform: none;
  }
  ul.eventlist li .image {
    margin-bottom: 30px;
  }
  ul.eventlist li .image::before {
    display: none;
  }
  ul.eventlist li .image figure {
    padding-top: 65%;
  }
  ul.eventlist li .image .category {
    width: 150px;
  }
  ul.eventlist li .image .staff {
    width: 60px;
    height: 60px;
    right: 10px;
    bottom: -20px;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .postpage .posttitle {
    margin-bottom: 80px;
    padding: 0 3vw;
  }
  .postpage .posttitle span.title {
    font-size: 26px;
  }
  .postpage .information {
    display: block;
  }
  .postpage .information figure {
    width: auto;
    text-align: center;
    margin-bottom: 20px;
  }
  .postpage .information figure img.objectfit {
    object-position: center center;
  }
  .postpage .information .data {
    width: auto;
    padding-left: 0;
  }
  .postpage .downbanner {
    margin: 60px 0;
  }
  .postpage .downbanner a {
    height: 180px;
  }
  .postpage .downbanner a::before {
    bottom: 25px;
  }
  @keyframes arrow {
    0% {
      transform: none;
    }
    100% {
      transform: translateY(30px);
    }
  }
  .postpage .downbanner a p {
    padding-top: 30px;
  }
  .postpage .downbanner a p span.text {
    font-size: 26px;
    margin-bottom: 20px;
  }
  .postpage #postbody {
    margin: 80px 0;
  }
  .postpage #staff .main .title .en {
    font-size: 48px;
  }
  .postpage #staff .main .title .ja {
    font-size: 18px;
  }
  .postpage #staff .main .name {
    font-size: 18px;
  }
  .postpage #staff .photo {
    width: 180px;
    height: 180px;
  }
  .postpage #access {
    margin: 80px 0;
    padding-bottom: 20px;
  }
  .postpage #access .wrapper {
    margin: 0;
    display: block;
  }
  .postpage #access .data {
    width: auto;
    padding: 20px 0 30px;
  }
  .postpage #access .data .inner {
    max-width: none;
  }
  .postpage #access .data .title {
    margin-bottom: 20px;
    padding: 20px 0;
    text-align: center;
  }
  .postpage #access .data .title span.en {
    font-size: 48px;
    left: 0;
    right: 0;
  }
  .postpage #access .data .title span.ja {
    font-size: 21px;
  }
  .postpage #access .data .address {
    padding: 0;
    text-align: center;
    line-height: 1.6;
  }
  .postpage #access .data .address dt {
    font-size: 18px;
    margin-bottom: 5px;
  }
  .postpage #access .map {
    width: 100%;
  }
  .postpage #access .map figure {
    min-height: 420px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ------------------------------
   Index-page
  ------------------------------ */
  ul.eventlist {
    margin: 0;
    display: block;
  }
  ul.eventlist li {
    width: auto;
    padding: 0;
  }
  ul.eventlist li .image {
    margin-bottom: 20px;
  }
  ul.eventlist li .image .category {
    width: 120px;
    font-size: 13px;
  }
  ul.eventlist li .image .staff {
    right: -10px;
    bottom: -18px;
  }
  ul.eventlist li .posttitle {
    font-size: 15px;
  }
  ul.eventlist li .date {
    text-align: center;
  }
  ul.eventlist li .text {
    font-size: 13px;
    padding: 0 10px;
  }

  /* ------------------------------
   Post-Page
  ------------------------------ */
  .postpage .posttitle {
    padding: 0 20px;
    margin-bottom: 40px;
  }
  .postpage .posttitle span.cat {
    width: 160px;
    margin: 0 auto 20px;
  }
  .postpage .posttitle span.title {
    font-size: 18px;
  }
  .postpage .information figure {
    margin: 0 -20px 20px;
  }
  .postpage .information .data table th {
    padding: 20px 20px;
  }
  .postpage .information .data table td {
    padding: 20px 10px;
  }
  .postpage .downbanner {
    margin: 20px -20px;
  }
  .postpage .downbanner a {
    height: 140px;
  }
  .postpage .downbanner a::before {
    bottom: 10px;
  }
  .postpage .downbanner a p {
    padding-top: 25px;
  }
  .postpage .downbanner a p span.text {
    font-size: 21px;
    margin-bottom: 10px;
  }
  .postpage .downbanner a p span.button {
    width: 200px;
    padding: 10px 0;
  }
  .postpage #postbody {
    margin: 50px 0;
  }
  .postpage #staff {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .postpage #staff .main {
    margin-right: 20px;
  }
  .postpage #staff .main .title {
    margin-bottom: 5px;
    text-align: right;
  }
  .postpage #staff .main .title .en {
    font-size: 36px;
    padding-right: 0;
    display: block;
  }
  .postpage #staff .main .title .ja {
    font-size: 16px;
    letter-spacing: 2px;
  }
  .postpage #staff .main .name {
    font-size: 16px;
    margin-top: 12px;
  }
  .postpage #staff .photo {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
  }
  .postpage #access {
    margin: 50px 0;
    padding-bottom: 20px;
  }
  .postpage #access .data {
    padding: 20px 0 30px;
  }
  .postpage #access .data .title {
    margin-bottom: 15px;
    padding: 15px 0;
  }
  .postpage #access .data .title span.en {
    font-size: 36px;
    top: -30px;
  }
  .postpage #access .data .title span.ja {
    font-size: 19px;
  }
  .postpage #access .data .address dt {
    font-size: 16px;
  }
  .postpage #access .map {
    width: 100%;
    flex-shrink: 0;
  }
  .postpage #access .map figure {
    min-height: 360px;
  }
}