/* ----------- */
/* DEVLOPMENT */
/* ----------- */

/* プロダクト開発ページでPCのみ表示する改行タグ */
.development_pc_br {
  display: unset;
}

/* プロダクト開発ページでSPのみ表示する改行タグ */
.development_sp_br {
  display: none;
}

/* プロダクト開発ページで画面幅で改行するようにするタグ */
.development_text_segment {
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .development_pc_br {
    display: none;
  }
  .development_sp_br {
    display: unset;
  }
}

/* 他のページとレイアウトが違うので、contentsクラスは利用しない */

/* タイトル */
/* ----------- */
.development_page_title {
  background-color: #435D88;
  padding: 32px 0;
  font-weight: bold;
  color: #fff;
}

.development_page_title_layout {
  max-width: 1072px;
  padding: 0 40px;
  margin: 0 auto;
}

.development_page_title_layout_main {
  font-size: 48px;
  margin-bottom: 12px;
}

.development_page_title_layout_sub {
  font-size: 24px;
}

@media screen and (max-width: 768px) {
  /* 768px以下に適用されるCSS（スマホ用） */
  .development_page_title {
    padding: 8px 0 16px;
  }
  .development_page_title_layout {
    padding: 0 12px;
  }
  .development_page_title_layout_main {
    font-size: 36px;
    margin-bottom: 4px;
  }
  .development_page_title_layout_sub {
    font-size: 14px;
    /* margin-bottom: 16px; */
  }
}

/* コンテンツ */
/* ----------- */
.development_page_contents {
  background-color: #F7F7FC;
}

.development_page_contents_layout {
  padding-bottom: 100px;
}

/* プロローグ */
/* ----------- */
.development_prologue {
  text-align: center;
  max-width: 1072px;
  padding: 72px 40px 0;
  margin: 0 auto;
}

.development_prologue_title {
  font-size: 34px;
  font-weight: bold;
  line-height: 1.4;
  color: #2D5D8E;
  margin-bottom: 24px;
}

.development_prologue_text {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 60px;
}

.development_prologue_img {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.development_prologue_img_item {
  width: calc(33% -8px);
}

.development_prologue_img_item_img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  /* 768px以下に適用されるCSS（スマホ用） */
  .development_prologue {
    padding: 40px 12px;
  }
  
  .development_prologue_title {
    font-size: 22px;
    margin-bottom: 40px;
  }
  
  .development_prologue_text {
    font-size: 14px;
    text-align: left;
    margin-bottom: 20px;
  }
}

/* 共通：プロダクトセクション */
/* ----------- */
.development_section {
  max-width: 1072px;
  padding: 60px 40px;
  margin: 0 auto;
}

.development_section_title {
  font-size: 24px;
  line-height: 1.6;
  text-align: center;
  padding-bottom: 24px;
  margin-bottom: 40px;
  border-bottom: 3px solid #2D5D8E;
}

/* サービス紹介 */
/* ----------- */
.development_section_service {
  width: 100%;
}
.development_section_service_img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  /* 768px以下に適用されるCSS（スマホ用） */
  .development_section {
    padding: 40px 12px;
  }
  
  .development_section_title {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
}

/* 「CP,MG」「マイリク」「DiSPA!」 */
/* ----------- */
.development_section_product {
  display: flex;
  justify-content: space-between;
}

/* マイリクのレイアウト */
.development_section_product.is-myrec {
  flex-direction: row-reverse;
}

.development_section_product_layout_img {
  width: calc(50% - 40px);
  display: flex;
  align-items: center;
}
.development_section_product_img {
  width: 100%;
}

.development_section_product_layout_text {
  width: 50%;
}
.development_section_product_text {
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
}

/* 製品リンク */
.development_product_link_layout {
  display: flex;
  gap: 16px;
  margin-top: 40px;
}
.development_product_link {
  height: 58px;
  width: calc(50% - 8px);
  border-radius: 30px;
  background-color: #fff;
  box-shadow: 0 3px 15px rgb(0 0 0 / 16%);
  position: relative;
}
.development_product_link::after {
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  background-image: url(/img/icon_link.svg);
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
}
.development_product_link:hover {
  cursor: pointer;
  transition: all .2s;
  opacity: .6;
}
.development_product_link_img {
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.development_product_link_img.is-cp {
  height: 24px;
}
.development_product_link_img.is-myrec {
  height: 24px;
}
.development_product_link_img.is-dispa {
  height: 36px;
}
@media screen and (max-width: 768px) {
  .development_product_link_layout {
    flex-flow: column;
  }
  .development_product_link {
    width: 100%;
  }
}



@media screen and (max-width: 768px) {
  /* 768px以下に適用されるCSS（スマホ用） */
  .development_section_product {
    display: block;
  }
  .development_section_product_layout_img {
    width: 100%;
    margin-bottom: 20px;
  }
  .development_section_product_layout_text {
    width: 100%;
  }
  .development_section_product_text {
    font-size: 14px;
  }
}

/* ▼▼▼▼▼▼▼▼▼▼初回リリースから無くなった▼▼▼▼▼▼▼▼▼▼ */
/* 次回リリース用に残しておきます。 */

/* 開発組織 */
/* ----------- */
.development_section_organization {
  width: 100%;
}
.development_section_organization_img {
  width: 100%;
}

/* 開発技術 */
/* ----------- */
.development_section_technology {
  width: 100%;
  display: flex;
  gap: 16px;
}
.development_section_technology_list {
  width: calc(25% - 8px);
}

/* タイトル */
.development_section_technology_list_title {
  width: 100%;
  height: 60px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 3px 15px rgb(0 0 0 / 16%);
  position: relative;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.development_section_technology_list_title::after {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  display: block;
  height: 16px;
  width: 20px;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  background-color: #42719B;
}

.development_section_technology_list_title_img {
  width: 100%;
}
.development_section_technology_list_title_img-myrec {
  width: 80%;
}

/* コンテンツ */
.development_section_technology_list_contents {
  color: white;
  box-shadow: 0 3px 15px rgb(0 0 0 / 16%);
  padding: 20px;
  word-break: break-word;

  /* 各要素の高さを揃える為に100%にすると何故か要素の下に余白できるので、ブラウザで見て100pxマイナスにして調整。 */
  height: calc(100% - 100px);
}
.development_section_technology_list_contents.is-cp {
  background: linear-gradient(#42BFF9, #3279EF);
}
.development_section_technology_list_contents.is-mg {
  background: linear-gradient(#FD9A4E, #F97D33);
}
.development_section_technology_list_contents.is-myrec {
  background: linear-gradient(#39C98A, #25A276);
}
.development_section_technology_list_contents.is-infra {
  background: linear-gradient(#8E97A4, #747E86);
}

/* リスト */
.tech_list_title {
  font-weight: bold;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px dashed #fff;
}
.tech_list_item {
  margin-bottom: 20px;
}

.tech_note {
  font-size: 14px;
  line-height: 1.6;
  padding-left: 14px;
  position: relative;
}
.tech_note::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

/* インフラ用リスト */
.infra_list_item {
  padding-left: 8px;
  position: relative;
  margin-bottom: 8px;
}
.infra_list_etc {
  padding-left: 8px;
}
.infra_list_item::before {
  content: "・";
  position: absolute;
  left: -8px;
}

@media screen and (max-width: 768px) {
  .development_section_technology {
    width: 100%;
    display: unset;
  }
  .development_section_technology_list {
    width: 90%;
    margin: 0 auto 40px;
    /* margin-bottom: 60px; */
  }
  .development_section_technology_list_title {
    position: unset;
    margin-bottom: 0;
  }
  .development_section_technology_list_title::after {
    display: none;
  }
  .development_section_technology_list_title_img {
    height: 80%;
  }
  .development_section_technology_list_title_img-myrec {
    height: 100%;
    width: auto;
  }
  .development_section_technology_list_contents {
    height: unset;
  }
}

/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲初回リリースから無くなった▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */







/* メッセージ箇所 */
/* ----------- */
.development_page_footer {
  width: 100%;
  height: 360px;
  background-image: url(/img/img_development_footer.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.development_page_footer_layout {
  max-width: 1072px;
  padding: 0 40px;
  margin: 0 auto;
  text-align: center;
}

.development_page_footer_text {
  color: #fff;
  font-size: 34px;
  font-weight: bold;
  line-height: 1.6;
  padding: 100px 0 80px;
}

.development_page_footer_button {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .development_page_footer {
    height: 360px;
  }
  .development_page_footer_layout {
    padding: 0 20px;
  }
  .development_page_footer_text {
    font-size: 20px;
  }
}