@import url('https://fonts.googleapis.com/css2?family=Blinker:wght@700&display=swap');

/* CSS変数（フォント・カラー設定） */
:root {
  --Blinker: "Blinker", sans-serif;
  --default-color: #FFFFFF;
  --sub-color: #333;
}

/* =====================================================
   01. サービス セクション (service_section)
===================================================== */
.service_section {
  color: #333;
  width: 100%;
  padding-top: 26rem;
  padding-left: 22.5rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* セクションタイトル */
.service_section_title {
  font-family: var(--NotoSans);
  font-weight: bold;
  font-size: 4rem;
  color: var(--sub-color);
  line-height: calc(58 / 40);
  letter-spacing: calc(3.2em / 40);
  margin: 0 0 0 0.5rem;
}

/* セクションタイトル（英語） */
.service_section_en {
  font-family: var(--Blinker);
  font-weight: 600;
  font-size: 2rem;
  margin: 1rem 0 0 0.5rem;
  line-height: calc(24 / 20);
  letter-spacing: calc(1.2em / 20);
}



/* =====================================================
   02. キャッチコピー・概要 (service_catchcopy&service_overvie&)
===================================================== */
.service_catchcopy {
  max-width: 95rem;
  height: 45rem;
  margin: 0 0 12rem 26.5rem;
  background-image: url("../img/drawn7.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  background-position: 0% 72%;
}

/* キャッチコピーのテキストブロック */
.catchcopy_text_block {
  position: absolute;
  left: -18.5rem;
  top: 10rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

/* キャッチコピーの各行の装飾 */
.catchcopy_text_block p {
  background-color: #141414;
  color: #FFF;
  font-size: 1.6rem;
  width: fit-content;
  padding: 0.5rem;
}

/* サービス概要テキスト */
.service_overview {
  font-size: 1.6rem;
  line-height: calc(56 / 32);
  margin: 0 0 4rem 0;
}

/* 2026_07_13 追加修正*/

.catchcopy_text_wrapper {
  left: -16.15rem;
  padding: 0 0 0 0.5rem;
}

.catchcopy_text_font {}

.cacthcopy_first_font {
  /* margin-left: 1rem; */
}

.cacthcopy_second_font {
  /* margin-left: 1.5rem; */
}

.cacthcopy_third_font {}

/* =====================================================
   03. ページリンクエリア (page_link_area)
===================================================== */
.page_link_area {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  width: fit-content;
}

.page_link_area *:nth-child(3) {
  margin-left: 0.5rem;
}

/* ページリンクボタンの共通スタイルを修正 */
.page_link_btn {
  width: 38.8rem;
  height: 3.9rem;
  padding: 0.5rem 1.5rem;
  background-color: #ffffff;
  border: 1px solid #254792;
  border-radius: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* 3つ目のボタン幅 */
.page_link_btn:nth-of-type(3) {
  width: 36.9rem;
  margin-left: 0.7rem;
}

/* 2つ目のボタン幅 */
.page_link_btn:nth-of-type(2) {
  width: 34.75rem;
}

/* ボタン内のテキスト */
.btn_text {
  font-family: var(--NotoSans);
  font-weight: normal;
  font-size: 2rem;
  color: #254792;
  line-height: 1;
}

/* ボタン内のアイコン */
.btn_icon {
  font-family: var(--Blinker);
  font-weight: normal;
  font-size: 2.4rem;
  color: #254792;
  line-height: 1;
}


/* 2026_07_13 追加修正*/

.button_page_link {
  max-width: 38.8rem;
  padding: 0.5rem 1.5rem;
  height: fit-content;
  border: 0.1rem solid #254792;
}

/* =====================================================
   04. 各種サービス紹介 (various_service_introduction)
===================================================== */
.various_service_introduction {
  width: 100%;
  margin: 12rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* サービス紹介・各記事のベーススタイル */
.various_service_introduction article {
  width: 100%;
  min-height: 72rem;
  box-sizing: border-box;
  padding-top: 6rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #FFF;
}

/* 各サービスの背景画像設定 */
.drone_service {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.65), rgba(51, 51, 51, 0.65)),
    url("../img/drawn_img.jpg");
}

.satellite_service {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.65), rgba(51, 51, 51, 0.65)),
    url("../img/drawn8.jpg");
}

.space_service {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.65), rgba(51, 51, 51, 0.65)),
    url("../img/data01.jpg");
}

/* サービスタイトル */
.various_title {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin: 0 0 6rem 6rem;
}

.drone_title {
  margin-left: 22.5rem;
}

/* サービスタイトル(数字) */
.various_title_num {
  font-family: var(--Blinker);
  font-weight: bold;
  font-size: 6.4rem;
  line-height: calc(76 / 64);
  letter-spacing: calc(4.1em / 64);
}

/* サービスタイトル(テキスト) */
.various_title_txt {
  font-size: 2.4rem;
}

/* スマホ用改行クラス（PC・タブレットでは非表示） */
.sp_only {
  display: none;
}

.various_service_introduction p {
  max-width: 99rem;
  width: auto;
  font-size: 1.6rem;
  line-height: 2;
  margin: 0 auto;
}

.various_service_introduction p:not(:last-child) {
  margin-bottom: 3.2rem;
}

/* =====================================================
   05. クロージング・お問い合わせ (service_closing_section)
===================================================== */
.service_closing_section {
  width: 100%;
  margin: 0 0 24.006rem 0;
}

.closing_inner {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* クロージング内のテキスト (closing_lead) */
.closing_lead {
  font-family: var(--NotoSans);
  font-size: 2.4rem;
  color: var(--sub-color);
  text-align: center;
  line-height: calc(36 / 24);
  margin-bottom: 6rem;
}

/* お問い合わせボタン */
.closing_contact_btn {
  height: 6rem;
  background-color: #254792;
  border-radius: 3.2rem;
  padding: 0 3.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact_btn_text {
  font-family: var(--NotoSans);
  font-weight: bold;
  font-size: 1.6rem;
  color: #ffffff;
}

.contact_btn_icon {
  width: 3.394rem;
  height: auto;
  display: block;
}


/*================================
  英語版
================================*/
.page_link_btn_en {
  height: auto;
  border-radius: 99rem;
}

.various_title_en {
  margin-bottom: 5.5rem;
}


/* ブレークポイントは699.98px */
@media screen and (max-width: 699.98px) {

  /* 全体レイアウトの調整 */
  .service_section {
    padding: 17.5rem 0 0 0;
  }

  .service_section_title {
    font-size: 2.8rem;
    letter-spacing: 0.157rem;
    text-align: center;
  }

  .service_section_en {
    font-size: 1.6rem;
    margin: 1.4rem 0 4.5rem;
    letter-spacing: 0.077rem;
    text-align: center;
    margin-left: 0.5rem;
    line-height: calc(19 / 16)
  }

  .service_catchcopy {
    width: 30rem;
    height: 40rem;
    margin: 0 0 4.5rem 5.9rem;
  }

  .catchcopy_text_block {
    left: -4.3rem;
    top: 9rem;
    gap: 1.3rem;
  }

  .catchcopy_text_block p {
    font-size: 1.4rem;
  }

  .service_overview {
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0;
    padding: 0;
    margin: 0 1.6rem 2.2rem 1.6rem;
  }


  /* 2026_07_13 追加修正*/

  .service_overview_font {
    margin: 0 1.6rem 2.4rem 1.6rem;

  }

  .page_link_area {
    display: block;

    padding: 0 0 0 1.6rem;
  }

  .page_link_btn {
    width: 32.6rem;
    height: 3.4rem;
    padding: 0 1.5rem;
    gap: 1.4rem;
    margin: 0 0 1.6rem 0;
  }

  .page_link_btn:nth-of-type(2) {
    width: 29.5rem;
  }

  .page_link_btn:nth-of-type(3) {
    width: 31rem;
    margin-left: 0;
  }

  /* 2026_07_13 追加修正*/

  .page_link_flex {
    width: 34.3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 1.6rem;
    margin-inline: auto;
    padding: 0;
  }

  .button_page_link,
  .button_page_link_en {
    max-width: 32.6rem;
    margin: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .button_page_link_en {
    height: fit-content;
  }

  .button_page_link:nth-of-type(2) {
    width: 29.5rem;
  }

  .button_page_link:nth-of-type(3) {
    width: 31rem;
    margin-left: 0;
  }


  .btn_text {
    font-size: 1.6rem;
  }

  .btn_icon {
    font-size: 2rem;
  }

  .various_service_introduction {
    width: 100%;
    margin: 5rem auto 6.3rem;
  }

  .various_service_introduction article {
    height: auto;
    min-height: 50rem;
    padding: 1.6rem 1.6rem 0 1.4rem;
  }

  /* 2026_07_13 追加修正*/

  .service_introduction_container {
    margin: 5rem auto 6.4rem;
  }

  .sp_only {
    display: block;
  }

  .various_service_introduction article:nth-of-type(1) {
    padding-bottom: 5.6rem;
  }

  .various_service_introduction article:nth-of-type(2) {
    padding-bottom: 27.2rem;
  }

  .various_service_introduction article:nth-of-type(3) {
    padding-bottom: 29.6rem;
  }

  .various_title {
    gap: 1.4rem;
    margin: 0 0 2.4rem 0;
  }

  .drone_title {
    gap: 1.6rem;
    padding-left: 0.2rem;
  }

  .various_title_num {
    font-size: 4.8rem;
    letter-spacing: 0.23rem;
  }

  .various_title_txt {
    font-size: 1.6rem;
  }

  .various_service_introduction p {
    font-size: 1.4rem;
    line-height: calc(24 / 14);
    margin: 0;
    padding-left: 0.2rem;
  }

  .various_service_introduction p:not(:last-child) {
    margin-bottom: 2.5rem;
  }

  .service_closing_section {
    margin: 0 0 12.006rem;
  }

  .closing_lead {
    padding: 0 1.6rem;
    font-size: 1.6rem;
    text-align: left;
    margin-bottom: 3rem;
  }

  .closing_inner {
    padding: 0;
  }

  /* 2026_07_13 追加修正*/
  .closing_lead_font {
    padding: 0 1.6rem;
    font-size: 1.6rem;
    text-align: left;
    margin-bottom: 3.2rem;
  }

  /*================================
  英語版
================================*/
}