@charset "UTF-8";
/*///////////////////////////////////////
プログラマッピング
///////////////////////////////////////*/

/*************************************************
/Common
**************************************************/

:root {
  /* colors */
  --primary-color: #174BA2;
  --back-blue: #EDF4FF;
  --border-blue: #B0C4E3;
  --right-blue2: #DCF0FF;
}

/*改行切替*/
br.sp {
  display: none;
}

@media screen and (max-width: 768px) {
  br.sp {
    display: block;
  }

  br.pc {
    display: none;
  }
}


/*************************************************
/Base
**************************************************/

/*Title*/
#pageTitle .jp_title {
  /*englishTitleに合わせて日本語だけのタイトル*/
  font-size: 5.6rem;
  margin-bottom: 1em;
}

.jp_title {
  /*englishTitleに合わせて日本語だけのタイトル*/
  color: var(--primary-color);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 2em;
}

/*lead*/
.sec-intro>div {
  align-items: flex-start;
}

.sec-intro .lead {
  width: 43%;
}

.sec-intro .lead .text-strong {
  font-size: 4.0rem;
  color: var(--primary-color);
  line-height: 1.5;
}

.sec-intro .lead .strong {
  color: var(--secondary-colour);
}

.sec-intro .intro-img {
  width: 41.07%;
}

.sec-intro .intro-img>img {
  width: 100%;
}

@media screen and (max-width: 1280px) {
  .sec-intro .lead .text-strong {
    font-size: 3.4rem;
  }
}

@media screen and (max-width: 768px) {
  .sec-intro .lead {
    order: 2;
  }

  .sec-intro .lead .text-strong {
    font-size: 6.4vw;
  }

  .sec-intro .intro-img {
    width: 100%;
    order: 1;
  }
}


/*bussiness.cssのバナーのもの*/
.bunner {
  margin-top: 6em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 40px;
}

.bunner a {
  max-width: 680px;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transition: opacity .5s, -webkit-transform .5s;
  transition: opacity .5s, -webkit-transform .5s;
  transition: opacity .5s, transform .5s;
  transition: opacity .5s, transform .5s, -webkit-transform .5s;
}

.bunner a:hover {
  opacity: .5;
  -webkit-transform: scale(0.98, 0.98);
  transform: scale(0.98, 0.98);
}



/*************************************************
/margin
**************************************************/

.pb80 {
  padding-bottom: 80px;
}

.pt80 {
  padding-top: 80px;
}

.mt10 {
  margin-top: 10px;
}

.mt30 {
  margin-top: 30px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb40 {
  margin-bottom: 40px;
}

.mt80 {
  margin-top: 80px;
}

@media screen and (max-width: 768px) {
  .pb80 {
    padding-bottom: 10.42vw;
  }

  .pt80 {
    padding-top: 10.42vw;
  }

  .mt10 {
    margin-top: 1.30vw;
  }

  .mt30 {
    margin-top: 3.91vw;
  }

  .mb20 {
    margin-bottom: 2.60vw;
  }

  .mb40 {
    margin-bottom: 5.21vw;
  }

  .mt80 {
    margin-top: 10.42vw;
  }
}


/*************************************************
/programapping
**************************************************/

/*font-size*/
.border_bg_leftright {
  font-size: 3.2rem;
}

#programapping .leadline strong {
  font-size: 3.0rem;
}

#programapping .num .en_num_font {
  font-size: 4.4rem;
}

#programapping .num div .jp_font {
  font-size: 3.6rem;
}

#programapping .app_download_block h2 {
  font-size: 3.2rem;
}

.note_list>.item {
  font-size: 1.4rem;
}

@media screen and (max-width: 768px) {

  /*vwに揃える*/
  #programapping .app_download_block h2,
  .border_bg_leftright,
  #programapping .leadline strong,
  #programapping .num div .jp_font {
    font-size: 6.13333vw;
  }

  #programapping .num .en_num_font {
    font-size: 6.5vw;
  }

  .note_list>.item {
    font-size: 3.2vw;
  }
}

/*flex*/
@media screen and (max-width: 768px) {
  .flex {
    flex-direction: column !important;
  }

  .flex>* {
    width: 100% !important;
  }
}


/*表示*/
/*lead*/
#programapping .leadline {
  text-align: center;
}

#programapping .leadline img {
  width: 100%;
}

#programapping .leadline strong {
  color: var(--primary-color);
  margin-bottom: 1em;
  display: inline-block;
  line-height: 1.5;
}

/*h2*/
.border_bg_leftright {
  text-align: center;
  color: var(--primary-color);
  position: relative;
  margin-bottom: 2em;
}

.border_bg_leftright::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--border-blue);
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -1;
}

.border_bg_leftright span {
  background-color: #fff;
  padding: 0 1em;
  max-width: 60%;
  display: inline-block;
}

/*パネルリスト*/
#programapping .detail-list img {
  width: 100%;
}

#programapping .detail-list>li>* {
  width: 45.7%;
}

#programapping .detail-list>li.imgleft {
  flex-direction: row-reverse;
}

#programapping .detail-list>li dd {
  padding-left: 10.4rem;
  padding-right: 1.8rem;
}

#programapping .num {
  align-items: stretch;
  margin-bottom: 1.5em;
}

#programapping .num .en_num_font {
  line-height: 1.38;
}

#programapping .num div span {
  line-height: 1.5
}

#programapping .border_left {
  margin-left: 1em;
  ;
}

/*banner*/
.banner_block {
  text-align: center;
}

.banner_block .bunner {
  display: inline-flex;
  margin: 0;
}

.banner_block .bunner a {
  max-width: 900px;
}

.banner_block .bunner img {
  width: 100%;
}

@media screen and (max-width: 960px) {
  .banner_block .bunner {
    margin: 0 40px;
  }
}

@media screen and (max-width: 768px) {
  .banner_block {
    margin-top: 5vw;
  }

  .banner_block .bunner {
    margin: 0 5vw;
  }
}

/* プログラマッピング　サポート バナー */
#programappingSupport {
  background: var(--primary-color) url(../../../assets/img/programapping/bnr_img_programapping_support.webp) no-repeat right center;
  background-size: auto 100%;
  border-radius: 24px;
}

#programappingSupport a {
  display: block;
  padding: 60px 80px;
}

/* #programappingSupport .pc {
  width: 40%;
} */

#programappingSupport .sp {
  display: none;
}

.btn_round {
  position: relative;
  display: inline-block;
  margin-top: 40px;
  border: 2px solid #fff;
  border-radius: 40px;
  color: #fff;
  font-size: 2rem;
  overflow: hidden;
}

.btn_round span {
  position: relative;
  display: block;
  padding: 10px 80px 10px 30px;
  background: url(../../../assets/img/programapping/icon_arrow_right_2.svg) no-repeat right 12px center;
}

.btn_round::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  background: rgb(32, 91, 191);
  background: linear-gradient(90deg, rgba(66, 141, 255, 1) 0%, rgba(32, 91, 191, 1) 100%);
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

#programappingSupport a:hover .btn_round:before {
  transform-origin: left top;
  transform: scale(1, 1);
}


@media screen and (max-width: 768px) {

  #programappingSupport {
    background-position: right 0 top 72%;
    background-size: 100% auto;
  }

  #programappingSupport a {
    padding: 40px 30px;
  }

  #programappingSupport .pc {
    display: none;
  }

  #programappingSupport .sp {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 90%;
  }
}

/*ダウンロード*/
#programapping .app_download_block {
  background-color: var(--right-blue);
  padding: 7% 8%;
  gap: 5%;
  border-radius: 24px;
}

#programapping .app_download_block img {
  width: 100%;
}

#programapping .app_download_block p {
  margin: 0;
}

#programapping .app_download_block .bunner {
  margin-top: 0;
}

#programapping .app_download_block .bunner a {
  height: 74px;
}

#programapping .app_download_block .bunner img {
  width: auto;
  height: 100%;
}

#programapping .app_download_block h2 {
  color: var(--primary-color);
  margin-bottom: 1em;
  line-height: 1.5;
}

@media screen and (max-width: 768px) {

  #programapping .detail-list>li dd {
    padding: 0;
  }

  #programapping .app_download_block h2 {
    text-align: center;
  }

  #programapping .app_download_block {
    flex-direction: column-reverse !important;
    gap: 10vw;
  }

  #programapping .app_download_block .bunner {
    flex-direction: column;
    align-items: center;
    gap: 1em;
  }

}


/*※リスト*/
.note_list>.item {
  text-indent: -1em;
  padding-left: 1em;
}

.note_list>.item:before {
  content: "\203b";
}

.line_img img {
  width: 100%;
}


/* programappingSupport */
main.programapping_support h2 {
  font-size: 32px;
  line-height: 1.7;
  color: var(--primary-color);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}


main.programapping_support h3 {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--primary-color);
  font-size: 32px;
  padding-left: 25px;
  background: url(../../../assets/img/programapping/icon_line_left.svg) no-repeat left center;
  margin-bottom: 1em;
}

main.programapping_support h3::after {
  content: '';
  display: block;
  max-width: 100%;
  flex: 1;
  height: 1px;
  background: #B0C4E3;
}

main.programapping_support h3 span {
  display: block;
  margin-right: 1em;
  /* white-space: nowrap; */
}

main.programapping_support h3.center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  padding: 0;
}

main.programapping_support h3.center::before,
main.programapping_support h3.center::after {
  content: '';
  display: block;
  flex: 1;
  max-width: none;
  width: calc(50% - 5em);
  height: 1px;
  background: #B0C4E3;
}

main.programapping_support h3.center span {
  margin: 0 1em;
}

main.programapping_support h4 {
  position: relative;
  font-size: 24px;
  text-align: center;
  margin-bottom: 60px;
}

@media screen and (max-width: 950px) {
  main.programapping_support h2 {
    font-size: 28px;
  }

  main.programapping_support h2 br {
    display: none;
  }

  main.programapping_support h3 {
    font-size: 28px;
  }
}

@media screen and (max-width: 768px) {

  main.programapping_support h2,
  main.programapping_support h3 {
    font-size: 5vw;
  }
}

main.programapping_support table {
  width: 100%;
  line-height: 1.5;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

main.programapping_support table th {
  border-right: 1px solid #B0C4E3;
  text-align: center;
}

main.programapping_support table.text_center td {
  text-align: center;
}

main.programapping_support table td img {
  width: 60%;
  height: auto;
}

main.programapping_support .application_list {
  max-width: 900px;
  margin: 0 auto;
}

main.programapping_support .application_list li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 30px;
  border: 2px solid var(--primary-color);
  border-radius: 16px;
  background: #fff;
  box-shadow: 5px 5px 5px rgba(23, 75, 162, 0.1);
  margin-bottom: 50px;
}

@media screen and (max-width: 768px) {
  main.programapping_support .application_list li {
    line-height: 1.5;
  }
}

main.programapping_support h4::after,
main.programapping_support .application_list li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -35px;
  margin: 0 auto;
  width: 25px;
  height: 20px;
  background: url(../../../assets/img/programapping/icon_triangle.svg) no-repeat center;
  background-size: 100% auto;
}

main.programapping_support .application_list li:last-child {
  margin-bottom: 30px;
}

main.programapping_support .application_list li strong {
  font-size: 60px;
  color: var(--primary-color);
}

main.programapping_support .application_list li p {
  margin: 0 0 0 2em;
}

main.programapping_support .note,
#modal_conteiner .note {
  position: relative;
  font-size: 16px;
  color: #091E40;
  line-height: 1.4;
}

@media screen and (max-width: 960px) {

  main.programapping_support .note,
  #modal_conteiner .note {
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {

  main.programapping_support .note,
  #modal_conteiner .note {
    font-size: 3.2vw;
  }
}

main.programapping_support .note::before,
#modal_conteiner .note::before {
  content: '※';
}

.color_white {
  color: #fff !important;
}

main.programapping_support .btn_area {
  max-width: 900px;
  margin: 0 auto;
}

main.programapping_support .btn_area a {
  width: 48%;
}

main.programapping_support .bunner a {
  max-width: 930px;
}

@media screen and (max-width: 768px) {
  main.programapping_support .application_list li {
    padding: 1em;
  }
}


#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .5);
  z-index: 1000;
  cursor: pointer;
}

#modal.none {
  display: none;
}

#modal_container {
  position: relative;
  max-width: 1400px;
  background: #fff;
  padding: 30px 60px 60px;
  cursor: auto;
  z-index: 1002;
}

#modal_container table {
  height: 100%;
}

#modal_container table th {
  padding: 0;
  white-space: wrap;
  height: 100%;
  /* vertical-align: top; */
}

#modal_container table th div {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#modal_container table th p {
  margin: 0;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#modal_container table th p.flex1 {
  flex: 1;
}

#modal_container table th p.border_bottom {
  border-bottom: 1px solid #B0C4E3;
}

#modal_container table td {
  padding: 5px 15px;
  text-align: center;
}

#btn_close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  background: url(../../../assets/img/programapping/icon_close.svg) no-repeat center;
  background-size: 100% auto;
  margin-left: auto;
  cursor: pointer;
  transition: opacity .5s;
  z-index: 100;
}

#btn_close:hover {
  opacity: .5;
}

@media screen and (max-width: 960px) {
  #modal_container {
    padding: 40px 30px;
  }
}

@media screen and (max-width: 768px) {
  #modal_container {
    height: 80vh;
    overflow-y: scroll;
  }
}

/* overview */
main .sp {
  display: none;
}

.overview div {
  padding: 1em 1em 2em;
  border: 1px solid #B0C4E3;
  margin-bottom: 1.5em;
}

.overview div img {
  display: block;
  max-width: 60%;
  margin: 1em auto 0;
}

.overview strong {
  display: block;
  margin-top: 1.2em;
  margin-bottom: .7em;
  border-bottom: 1px solid #B0C4E3;
  font-feature-settings: "palt";
  line-height: 1.3;
  padding-bottom: .3em;
}

.overview .find {
  color: var(--primary-color);
  font-size: 2.4rem;
  margin: 0 !important;
  border: none;
  text-align: center;
}

.overview p {
  margin-bottom: .7em;
  font-feature-settings: "palt";
}

.overview .flex {
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
}

.overview .flex li {
  flex: 50%;
  width: auto !important;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  main .pc {
    display: none;
  }

  main .sp {
    display: block;
  }

  .container .flex ol {
    margin-bottom: 1.5em;
  }

  .container .flex .btn_default {
    margin: 0 0 1em !important;
  }
}

/* contest_banner */
.contest_banner img {
  width: 100%;
  height: auto;
  transition: opacity .5s;
}

.contest_banner a:hover img {
  opacity: .7;
}