@charset "UTF-8";
@import url("global.css");
.concept {
  margin-bottom: 80px;
}
.concept .block {
  padding-top: 120px;
  position: relative;
}
.concept .block .image {
  width: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  left: 0;
}
.concept .block .wrapper {
  z-index: 2;
  position: relative;
}
.concept .block .main {
  background-color: #fff;
  width: 50%;
  padding-top: 100px;
  padding-bottom: 100px;
  padding-left: 80px;
  margin-left: auto;
  border-top-left-radius: 30px;
}
.concept .block .title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 40px;
}
.concept .block p {
  text-align: justify;
}
.concept .block p + p {
  margin-top: 20px;
}

/* ------------------------------
 Works
------------------------------ */
#works {
  margin-bottom: 100px;
}
#works ul.carousel li {
  margin: 0 10px;
}
#works ul.carousel li a {
  display: block;
  height: 0;
  padding-top: 66%;
  position: relative;
}
#works ul.carousel li a figure {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#works ul.carousel li a figure img {
  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;
}
#works ul.carousel li a::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, #374360, rgba(55, 67, 96, 0) 50%);
  mix-blend-mode: multiply;
  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;
}
#works ul.carousel li a .title {
  position: absolute;
  bottom: 15px;
  left: 20px;
  color: #fff;
  line-height: 1.5;
  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;
  z-index: 3;
  opacity: 0;
  transform: translateX(-20px);
}
#works ul.carousel li a:hover figure img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
#works ul.carousel li a:hover::before {
  opacity: 1;
}
#works ul.carousel li a:hover .title {
  opacity: 1;
  transform: none;
}

/* ------------------------------
 Buttons
------------------------------ */
#links {
  margin-bottom: 120px;
}
#links .title {
  margin: 0 20px 40px;
  font-size: 32px;
}
#links ul#button3 {
  display: flex;
  border-bottom: #fff 1px solid;
}
#links ul#button3 li {
  width: 33.33333%;
  box-sizing: border-box;
  border-right: #fff 1px solid;
}
#links ul#button3 li:last-of-type {
  border: none;
}
#links ul#button3 li a {
  display: table;
  position: relative;
  height: 450px;
  color: #fff;
  width: 100%;
}
#links ul#button3 li a .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
#links ul#button3 li a .bg img {
  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;
}
#links ul#button3 li a::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to top right, #374360, #111);
  opacity: .4;
  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;
  z-index: 2;
}
#links ul#button3 li a .inner {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  z-index: 3;
}
#links ul#button3 li a .inner p:not([class]) {
  font-size: 22px;
  margin-bottom: 40px;
  line-height: 1.4;
}
#links ul#button3 li a .inner .more {
  display: flex;
  justify-content: center;
  align-items: center;
}
#links ul#button3 li a .inner .more .link {
  line-height: 1.1;
  text-align: left;
}
#links ul#button3 li a .inner .more .link span {
  display: block;
  letter-spacing: 0;
  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;
  font-size: 25px;
}
#links ul#button3 li a .inner .more::after {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 50%;
  text-align: center;
  margin-left: 15px;
  vertical-align: middle;
  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;
  margin-left: 10px;
  display: block;
  border: #fff 1px solid;
  background: url("/okinawa/img/arroww.png") no-repeat center center;
  background-size: 22px auto;
}
#links ul#button3 li a:hover .bg img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
#links ul#button3 li a:hover::before {
  opacity: .7;
}

/* ------------------------------
 Flow
------------------------------ */
.section .sectitle {
  text-align: center;
  margin-bottom: 40px;
}
.section .sectitle span {
  display: block;
}
.section .sectitle .en {
  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: 700;
  letter-spacing: 0;
  color: #fff;
  -webkit-text-stroke: 1px #111;
  text-stroke: 1px #111;
  line-height: 1;
}
.section .sectitle .ja {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
}

#flow {
  margin-bottom: 100px;
}
#flow ol.flow {
  position: relative;
}
#flow ol.flow::before {
  content: "";
  width: 20px;
  background-color: #eee;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 75px;
  bottom: 0;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}
#flow ol.flow > li {
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
}
#flow ol.flow > li .step {
  width: 160px;
  height: 42px;
  background-color: #62749B;
  text-align: center;
  line-height: 42px;
  border-radius: 50px;
  border: #fff 5px solid;
  float: left;
  font-size: 18px;
  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: 700;
  letter-spacing: 0;
  color: #fff;
}
#flow ol.flow > li .step span {
  font-size: 36px;
  padding-left: 5px;
  vertical-align: -7px;
}
#flow ol.flow > li .main {
  margin-left: 200px;
}
#flow ol.flow > li .main .h {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 52px;
}
#flow ol.flow > li .link {
  margin-top: 20px;
}
#flow ol.flow > li .link a {
  display: block;
  border: #ccc 1px solid;
  padding: 15px 40px;
  font-weight: 700;
}
#flow ol.flow > li .link a::after {
  content: "\f101";
  font-size: 24px;
  font-weight: 900;
  font-family: "Font Awesome 5 free";
  line-height: 1;
  display: inline-block;
  vertical-align: -2px;
  color: #BED1DC;
  padding-left: 10px;
}
#flow ol.flow > li .money {
  margin-top: 10px;
  background-color: #eee;
  padding: 0 30px 3px;
  border-radius: 50px;
  display: inline-block;
  font-weight: 700;
  color: #62749B;
  background-color: #BED1DC;
}

/* ------------------------------
 Event
------------------------------ */
#event ul.eventlist {
  margin: 0 -25px;
  display: flex;
  flex-wrap: wrap;
}
#event ul.eventlist li {
  width: 50%;
  box-sizing: border-box;
  padding: 0 25px;
}
#event ul.eventlist li a {
  display: block;
  line-height: 1.5;
}
#event ul.eventlist li a:hover .image::before {
  opacity: .3;
}
#event ul.eventlist li a:hover .image figure img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
#event ul.eventlist li .image {
  position: relative;
  margin-bottom: 30px;
}
#event 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;
}
#event ul.eventlist li .image figure {
  height: 0;
  padding-top: 60%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
#event 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;
}
#event 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;
}
#event 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;
}
#event ul.eventlist li .image .staff img {
  border-radius: 50%;
}
#event ul.eventlist li .posttitle {
  text-align: justify;
  font-weight: 700;
  padding: 0 20px;
}
#event ul.eventlist li .date {
  margin: 20px 10px 0;
  padding: 10px 10px;
  border-top: #ccc 1px solid;
  border-bottom: #ccc 1px solid;
}
#event ul.eventlist li .text {
  font-size: 14px;
  margin-top: 15px;
  padding: 0 20px;
}

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

 Responsive-Breakpoint-1 (1500px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1.5 (1320px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1320px) {
  /* ------------------------------
   Buttons
  ------------------------------ */
  #links ul#button3 li a .inner p:not([class]) {
    font-size: 19px;
  }

  /* ------------------------------
   Event
  ------------------------------ */
  #event ul.eventlist {
    margin: 0 -20px;
  }
  #event ul.eventlist li {
    padding: 0 20px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .concept .block {
    padding-top: 80px;
  }
  .concept .block .main {
    padding-top: 60px;
    padding-bottom: 30px;
    padding-left: 60px;
  }

  /* ------------------------------
   Buttons
  ------------------------------ */
  #links .title {
    font-size: 24px;
  }
  #links ul#button3 li a {
    height: 320px;
  }
  #links ul#button3 li a .inner p:not([class]) {
    font-size: calc(87.5% + 4 * (100vw - 650px) / 310);
    letter-spacing: 0;
    font-weight: 700;
    margin-bottom: 30px;
  }
  #links ul#button3 li a .inner .more {
    display: block;
  }
  #links ul#button3 li a .inner .more .link {
    text-align: center;
    letter-spacing: 0;
  }
  #links ul#button3 li a .inner .more::after {
    margin: 10px auto;
  }
  #links ul#button3 li a:hover .bg img {
    transform: none;
  }
  #links ul#button3 li a:hover::before {
    opacity: .4;
  }

  /* ------------------------------
   Flow
  ------------------------------ */
  .section .sectitle .en {
    font-size: 48px;
  }
  .section .sectitle .ja {
    font-size: 24px;
  }

  #flow {
    margin-bottom: 80px;
  }
  #flow ol.flow::before {
    left: 65px;
  }
  #flow ol.flow > li .step {
    width: 140px;
  }
  #flow ol.flow > li .step span {
    font-size: 32px;
    vertical-align: -5px;
  }
  #flow ol.flow > li .main {
    margin-left: 180px;
  }

  /* ------------------------------
   Event
  ------------------------------ */
  #event ul.eventlist {
    margin: 0 -12px;
  }
  #event ul.eventlist li {
    padding: 0 12px;
  }
  #event ul.eventlist li a:hover .image figure img {
    transform: none;
  }
  #event ul.eventlist li .image::before {
    display: none;
  }
  #event ul.eventlist li .image .staff {
    width: 60px;
    height: 60px;
    right: 5px;
    bottom: -20px;
  }
  #event ul.eventlist li .posttitle {
    padding: 0 10px;
  }
  #event ul.eventlist li .date {
    margin: 20px 0 0;
  }
  #event ul.eventlist li .text {
    padding: 0 10px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .concept {
    margin-bottom: 50px;
  }
  .concept .block {
    padding-top: 0;
  }
  .concept .block .image {
    width: 90%;
    position: relative;
    height: 0;
    padding-top: 50%;
  }
  .concept .block .image img {
    position: absolute;
    top: 0;
    left: 0;
  }
  .concept .block .main {
    width: 90%;
    padding-top: 40px;
    padding-bottom: 0;
    padding-left: 40px;
    border-top-left-radius: 10px;
    margin-left: auto;
    margin-top: -8vw;
  }
  .concept .block .title {
    font-size: 21px;
    margin-bottom: 30px;
  }

  /* ------------------------------
   Works
  ------------------------------ */
  #works {
    margin: 0 0 70px;
  }
  #works ul.carousel li {
    margin: 0;
  }
  #works ul.carousel li a::before {
    opacity: 1;
  }
  #works ul.carousel li a .title {
    opacity: 1;
    transform: none;
  }
  #works ul.carousel li a:hover figure img {
    transform: none;
  }

  /* ------------------------------
   Buttons
  ------------------------------ */
  #links {
    margin-bottom: 50px;
  }
  #links .title {
    margin: 0 0 30px;
    font-size: 21px;
  }
  #links ul#button3 {
    display: block;
  }
  #links ul#button3 li {
    width: auto;
    border-right: none;
    border-bottom: #fff 1px solid;
  }
  #links ul#button3 li a {
    height: 200px;
  }
  #links ul#button3 li a .inner p:not([class]) {
    font-size: 16px;
    margin-bottom: 10px;
  }
  #links ul#button3 li a .inner .more {
    display: flex;
  }
  #links ul#button3 li a .inner .more .link {
    text-align: right;
  }
  #links ul#button3 li a .inner .more .link span {
    font-size: 25px;
  }
  #links ul#button3 li a .inner .more::after {
    margin: 0 0 0 20px;
    width: 50px;
    height: 50px;
  }

  /* ------------------------------
   Flow
  ------------------------------ */
  .section .sectitle {
    margin-bottom: 30px;
  }
  .section .sectitle .en {
    font-size: 40px;
  }
  .section .sectitle .ja {
    font-size: 18px;
  }

  #flow {
    margin-bottom: 50px;
  }
  #flow ol.flow::before {
    left: 50%;
    margin-left: -10px;
  }
  #flow ol.flow > li {
    margin-bottom: 30px;
  }
  #flow ol.flow > li .step {
    width: 140px;
    height: 42px;
    line-height: 42px;
    float: none;
    margin: 0 auto 10px;
  }
  #flow ol.flow > li .step span {
    font-size: 32px;
  }
  #flow ol.flow > li .main {
    margin: 0 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding-bottom: 15px;
  }
  #flow ol.flow > li .main .h {
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    background-color: #eee;
    margin-bottom: 15px;
  }
  #flow ol.flow > li .link {
    margin-top: 20px;
  }
  #flow ol.flow > li .link a {
    padding: 12px 40px;
    text-align: center;
  }
  #flow ol.flow > li .money {
    text-align: center;
    width: 150px;
    margin: 15px auto 0;
    padding: 3px 0 4px;
    display: block;
  }

  /* ------------------------------
   Event
  ------------------------------ */
  #event ul.eventlist {
    margin: 0;
    display: block;
  }
  #event ul.eventlist li {
    width: auto;
    margin-bottom: 30px;
    padding: 0;
  }
  #event ul.eventlist li .image {
    margin-bottom: 22px;
  }
  #event ul.eventlist li .image .category {
    width: 100px;
    padding: 5px 10px;
    font-size: 13px;
  }
  #event ul.eventlist li .text {
    margin-top: 10px;
  }
}