@charset "UTF-8";
/* ----------------------------------------------

  PC設定

  ------------------------------------------------*/
@media all and (min-width: 769px) {
  #container #contents.development {
    position: relative;
    z-index: 1;
  }
  #container #contents.development .sea_bg .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #container #contents.development .sea_bg .wrapper::after {
    content: url(/images/section_between.svg);
    display: inline-block;
    width: 3px;
    margin-top: calc(clamp(2rem, 0.061rem + 8.25vw, 6.25rem) / 1.5);
  }
  #container #contents.development .page_title_area {
    width: 100%;
    margin-bottom: -1rem;
  }
  #container #contents.development .page_title_area h1 {
    color: #fff;
  }
  #container #contents.development .point_img {
    width: clamp(4.688rem, 3.856rem + 3.55vw, 6.25rem);
    margin: 0 auto calc(clamp(2rem, 0.061rem + 8.25vw, 6.25rem) / 2);
  }
  #container #contents.development .top_text {
    max-width: 1000px;
    margin: 0 auto clamp(2rem, 0.061rem + 8.25vw, 6.25rem);
  }
  #container #contents.development .top_text .br {
    color: #fff;
  }
  #container #contents.development .sec_common {
    max-width: 1100px;
    padding: clamp(1rem, 0.468rem + 2.27vw, 2rem);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    grid-gap: clamp(1rem, 0.468rem + 2.27vw, 2rem);
    border: 1px solid #fff;
  }
  #container #contents.development .sec_common:not(:last-of-type) {
    margin-bottom: calc(clamp(2rem, 0.061rem + 8.25vw, 6.25rem) / 2);
  }
  #container #contents.development .sec_common .text_area {
    width: 55%;
  }
  #container #contents.development .sec_common .text_area * {
    color: #fff;
  }
  #container #contents.development .sec_common .text_area h2 {
    font-size: clamp(1.125rem, 0.992rem + 0.57vw, 1.375rem);
    margin-bottom: 1.5em;
  }
  #container #contents.development .sec_common figure {
    width: calc(45% - clamp(1rem, 0.468rem + 2.27vw, 2rem));
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    position: relative;
  }
  #container #contents.development .sec_common figure figcaption {
    position: absolute;
    bottom: 0.5rem;
    right: 1rem;
    color: #fff;
    text-shadow: 3px 3px 5px rgba(204, 204, 204, 0.3);
    font-size: clamp(1rem, 0.696rem + 0.63vw, 1.25rem);
  }
  #container #contents.development .message {
    aspect-ratio: 1500/777;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/development/images/last.jpg) center bottom 15%/120% no-repeat;
  }
  #container #contents.development .message .wrapper {
    position: relative;
  }
  #container #contents.development .message .wrapper .catchphrase {
    position: absolute;
    top: 5vw;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
  #container #contents.development .message .wrapper .catchphrase .br {
    font-size: clamp(1.375rem, 0.312rem + 2.22vw, 2.25rem);
    color: #fff;
    text-align: center;
  }
}
/* ----------------------------------------------

  PAD設定

  ------------------------------------------------*/
@media all and (min-width: 521px) and (max-width: 768px) {
  #container #contents.development {
    position: relative;
    z-index: 1;
  }
  #container #contents.development .sea_bg .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #container #contents.development .sea_bg .wrapper::after {
    content: url(/images/section_between.svg);
    display: inline-block;
    width: 3px;
    margin-top: calc(clamp(2rem, 0.061rem + 8.25vw, 6.25rem) / 1.5);
  }
  #container #contents.development .page_title_area {
    width: 100%;
    margin-bottom: -1rem;
  }
  #container #contents.development .page_title_area h1 {
    color: #fff;
  }
  #container #contents.development .point_img {
    width: clamp(4.688rem, 3.856rem + 3.55vw, 6.25rem);
    margin: 0 auto calc(clamp(2rem, 0.061rem + 8.25vw, 6.25rem) / 2);
  }
  #container #contents.development .top_text {
    max-width: 1000px;
    margin: 0 auto clamp(2rem, 0.061rem + 8.25vw, 6.25rem);
  }
  #container #contents.development .top_text .br {
    color: #fff;
  }
  #container #contents.development .sec_common {
    padding: clamp(1rem, 0.468rem + 2.27vw, 2rem);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    grid-gap: clamp(1rem, 0.468rem + 2.27vw, 2rem);
    border: 1px solid #fff;
  }
  #container #contents.development .sec_common:not(:last-of-type) {
    margin-bottom: calc(clamp(2rem, 0.061rem + 8.25vw, 6.25rem) / 2);
  }
  #container #contents.development .sec_common .text_area {
    width: 55%;
  }
  #container #contents.development .sec_common .text_area * {
    color: #fff;
  }
  #container #contents.development .sec_common .text_area h2 {
    font-size: clamp(1.125rem, 0.992rem + 0.57vw, 1.375rem);
    margin-bottom: 1.5em;
  }
  #container #contents.development .sec_common figure {
    width: calc(45% - clamp(1rem, 0.468rem + 2.27vw, 2rem));
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    position: relative;
  }
  #container #contents.development .sec_common figure figcaption {
    position: absolute;
    bottom: 0.5rem;
    right: 1rem;
    color: #fff;
    text-shadow: 3px 3px 5px rgba(204, 204, 204, 0.3);
    font-size: clamp(1rem, 0.696rem + 0.63vw, 1.25rem);
  }
  #container #contents.development .message {
    aspect-ratio: 1500/777;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/development/images/last.jpg) center bottom 15%/120% no-repeat;
  }
  #container #contents.development .message .wrapper {
    position: relative;
  }
  #container #contents.development .message .wrapper .catchphrase {
    position: absolute;
    top: 5vw;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
  #container #contents.development .message .wrapper .catchphrase .br {
    font-size: clamp(1.375rem, 0.312rem + 2.22vw, 2.25rem);
    color: #fff;
    text-align: center;
  }
}
/* ----------------------------------------------

  SP設定

  ------------------------------------------------*/
@media all and (max-width: 520px) {
  #container #contents.development {
    position: relative;
    z-index: 1;
  }
  #container #contents.development .text, #container #contents.development .br, #container #contents.development li {
    font-size: 14px;
  }
  #container #contents.development .sea_bg .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #container #contents.development .sea_bg .wrapper::after {
    content: url(/images/section_between.svg);
    display: inline-block;
    width: 3px;
    margin-top: calc(clamp(2rem, 0.061rem + 8.25vw, 6.25rem) / 1.5);
  }
  #container #contents.development .page_title_area {
    width: 100%;
    margin-bottom: -1rem;
  }
  #container #contents.development .page_title_area h1 {
    color: #fff;
  }
  #container #contents.development .point_img {
    width: clamp(4.688rem, 3.856rem + 3.55vw, 6.25rem);
    margin: 0 auto calc(clamp(2rem, 0.061rem + 8.25vw, 6.25rem) / 2);
  }
  #container #contents.development .top_text {
    margin: 0 auto clamp(2rem, 0.061rem + 8.25vw, 6.25rem);
  }
  #container #contents.development .top_text .br {
    color: #fff;
  }
  #container #contents.development .sec_common {
    padding: clamp(1rem, 0.468rem + 2.27vw, 2rem);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    grid-gap: clamp(1rem, 0.468rem + 2.27vw, 2rem);
    border: 1px solid #fff;
  }
  #container #contents.development .sec_common:not(:last-of-type) {
    margin-bottom: calc(clamp(2rem, 0.061rem + 8.25vw, 6.25rem) / 2);
  }
  #container #contents.development .sec_common .text_area {
    width: 100%;
  }
  #container #contents.development .sec_common .text_area * {
    color: #fff;
  }
  #container #contents.development .sec_common .text_area h2 {
    font-size: clamp(1.125rem, 0.992rem + 0.57vw, 1.375rem);
    margin-bottom: 0.5rem;
  }
  #container #contents.development .sec_common figure {
    width: 80%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    position: relative;
  }
  #container #contents.development .sec_common figure figcaption {
    position: absolute;
    bottom: 0.5rem;
    right: 1rem;
    color: #fff;
    text-shadow: 3px 3px 5px rgba(204, 204, 204, 0.3);
    font-size: 14px;
  }
  #container #contents.development .message {
    aspect-ratio: 2000/1333;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/development/images/last.jpg) center bottom/100% no-repeat;
  }
  #container #contents.development .message .wrapper {
    position: relative;
  }
  #container #contents.development .message .wrapper .catchphrase {
    position: absolute;
    top: 5vw;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
  #container #contents.development .message .wrapper .catchphrase .br {
    font-size: 16px;
    color: #fff;
    text-align: center;
  }
}