/* ===== ヘッダー（背景画像＋グラデ） ===== */
.main-header {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: transparent;
  min-height: 128px;
}
.header-bg-img {
  background: url("../image/AdobeStock_1441636206.jpeg") center/cover no-repeat;
  width: 100%;
  height: 128px;
  min-height: 128px;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
      filter: brightness(.65);
}
/*.main-header::after {
  content: "";
  display: block;
  background: linear-gradient(to bottom,rgba(69,166,215,0.82),rgba(74,198,224,0.81));
  position: absolute; top:0; left:0; width:100%; height:100%; z-index:1;
}*/
.main-header-content {
  position: relative;
  z-index: 2;
  padding-top: 1.2em;
  /*padding-bottom: 2.2em;*/
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
    flex-direction: row;

}
.header-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 4px 18px rgba(40,55,70,0.18);
}
.header-actions {
  display: flex;
  gap: 0.3em;

}
.header-btn {
  background: #fff;
  color: #222;
  border: none;
  border-radius: 2em;
  font-size: 0.8vw;
  font-weight: 500;
  padding: 0.3em 1.5em;
  margin-left: 0.32em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.11);
  cursor: pointer;
  transition: background 0.17s, color 0.17s;
}
.header-btn:hover, .header-btn.active {
  background: #e8f6fd;
  color: #00b7e6;
}
.main-header-bar {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  min-height: 64px;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
}
.header-breadcrumb {
  font-size: 1.23rem;
  color: #292929;
  letter-spacing: 0.12em;
  margin-left: 0.4em;
}
.header-contact-btn {
  background: linear-gradient(90deg, #19c3ee 0%, #45a6d7 100%);
  color: #fff;
  font-size: 0.9em;
  font-weight: bold;
  border-radius: 2em;
  padding: 0.5em 2em;
  margin: 0.8em 0;
  box-shadow: 0 4px 18px 0 rgba(0,183,230,0.16);
  border: none;
  transition: background 0.17s, color 0.17s;
  text-decoration: none;
  display: inline-block;
}
.header-contact-btn:hover, .header-contact-btn:focus {
  background: linear-gradient(90deg, #0ea5e9 0%, #4f95e6 100%);
  color: #fff;
}

.position-fixed-top {
  position: fixed;
  top: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  z-index: 2000;
}
.position-fixed-breadcrumb {
  position: fixed;
  top: 128px; /* ヘッダー高さ分下げる */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  z-index: 1995;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
body {
  padding-top: 170px; /* header + パンくず分だけ空ける */
  overflow-x: hidden;
}

/* サイドバー（ドロワー）を左側に！ */
.sidebar-drawer {
  position: fixed;
  top: 0; left: -330px;
  right: auto;
  width: 320px;
  max-width: 90vw;
  height: 100%;
  background: #fff;
  box-shadow: 6px 0 24px rgba(0,0,0,0.16);
  z-index: 1998;
  transition: left .28s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.sidebar-drawer.active {
  left: 0;
  pointer-events: auto;
}

.sidebar-inner {
  padding: 2.1em 1.4em 1.6em 1.4em;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #fff;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding-top: 120px;
}
.sidebar-close {
  position: absolute;
  top: 1.0em;
  right: 0.3em;
  background: none;
  border: none;
  font-size: 1.6em;
  color: #333;
  z-index: 2;
  padding: 0.2em 0.4em;
  padding-top: 80px;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 1.7em;
}
.sidebar-link {
  font-size: 1.25em;
  color: #0094c9;
  padding: 0.5em 0;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px solid #e3f6fd;
  transition: color .16s;
}
.sidebar-link:hover { color: #00b7e6; }
.sidebar-actions { margin-top: 1.8em; }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(48,64,80,0.13);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.sidebar-drawer.active .sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}


/* ハンバーガーアイコンはPC非表示、モバイルでのみ */
.header-menu-btn {
  border: none;
  padding: 0.28em 0.9em;
  z-index: 1020;
  position: relative;
    --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
}

.breadcrumb-link {
  color: #222;
  text-decoration: none;
  margin: 0 0.18em;
  font-size: 1.13rem;
  letter-spacing: 0.09em;
  transition: color 0.18s;
}
.breadcrumb-link:hover,
.breadcrumb-link:focus {
  color: #00b7e6;
  text-decoration: underline;
}


  /*body[data-theme="dark"] .main-header {

  background: #14202c !important;

}*/
body[data-theme="dark"] .header-bg-img {
  filter: brightness(0.55) contrast(1.13);
  /* background-blend-mode: multiply; も場合によって追加可 */
}
body[data-theme="dark"] .main-header-content {
  /* 透過や色調整必要ならここに */
}
body[data-theme="dark"] .header-title {
  color: #fff !important;
  text-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
body[data-theme="dark"] .header-actions .header-btn {
  background: #273547 !important;
  color: #f6fcff !important;
  border-color: #344255 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
body[data-theme="dark"] .header-actions .header-btn:hover, 
body[data-theme="dark"] .header-actions .header-btn.active {
  background: #182531 !important;
  color: #64e8fd !important;
}
body[data-theme="dark"] .main-header-bar,
body[data-theme="dark"] .position-fixed-breadcrumb {
  background: #1a202c !important;
  color: #eaf4fc !important;
  box-shadow: 0 4px 14px rgba(10,14,40,0.14);
}
body[data-theme="dark"] .header-contact-btn {
  background: linear-gradient(90deg, #0488ad 0%, #007ca9 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px 0 rgba(0,183,230,0.10);
}
body[data-theme="dark"] .header-contact-btn:hover,
body[data-theme="dark"] .header-contact-btn:focus {
  background: linear-gradient(90deg, #1ed8f5 0%, #0099e6 100%) !important;
  color: #fff !important;
}
body[data-theme="dark"] .header-breadcrumb {
  color: #ddeefa !important;
}

body[data-theme="dark"] .breadcrumb-link {
  color: #a0e4ff !important;
}
body[data-theme="dark"] .breadcrumb-link:hover,
body[data-theme="dark"] .breadcrumb-link:focus {
  color: #58eafc !important;
  text-decoration: underline;
}



.main-container {
padding-bottom: 30px;
}
/* ===== 共通セクション余白 ===== */
section {
  margin-bottom: 2rem;
  margin-top: 1rem;
}



.container {
width: 60vw;
}


/* ===== カード共通（開発アプリ・PoCなど全て） ===== */
.app-card-row {
  /* gridのg-4で十分な場合ここは空でOK */
}
.app-card {
  /*min-width: 190px;
  max-width: 320px;*/
  min-height: 300px;
  margin: auto;
  border-radius: 1.5rem !important;
  padding: 2rem 1.25rem;
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.09);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.2s;
  text-decoration: none;
  background: #fff;
  /* スクロールカード対策 */
  overflow: hidden;
}
.app-card:hover,
.app-card:focus {
  box-shadow: 0 0 0 4px #00b7e644, 0 6px 24px rgba(0,183,230,0.09);
  text-decoration: none;
}
.app-card-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 50%;
  background: #f4f4f4;
  margin-bottom: 1.25rem;
}

/* ===== ボタン ===== */
.btn-pill,
.btn.rounded-pill,
.app-contact-btn {
  border-radius: 9999px !important;
}
.app-contact-btn {
  font-size: 1.2rem;
  border-radius: 9999px;
  padding: 0.8em 3em;
  box-shadow: 0 3px 14px rgba(0,183,230,0.13);
}
.btn-info {
  background: linear-gradient(90deg, #45a6d7 0%, #00b7e6 100%);
  border: none;
  color: #fff;
}
.btn-info:hover, .btn-info:focus {
  background: linear-gradient(90deg, #00b7e6 0%, #45a6d7 100%);
  color: #fff;
}

/* ===== セクション見出し ===== */
h3, .h3, .h4 {
  font-weight: bold;
  letter-spacing: 0.02em;
}

/* h2またはh3見出しの下にライン（アンダーライン） */
h2 {
    font-weight: bold;
  letter-spacing: 0.02em;
  position: relative;
  display: inline-block;
  padding-bottom: 0.3em;
  margin-bottom: 1.2em;
  font-weight: bold;
  letter-spacing: 0.02em;
}
h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #505050 60%, #303030 100%);
  border-radius: 2px;
  margin-top: 0.35em;
}

/* ===== SDGs/ロゴエリア（参考） ===== */
.sdgs-img {
  width: 60px;
  border-radius: 0.5em;
  box-shadow: 0 2px 8px #00b7e620;
  margin: 0 8px;
}


/* ====== ダークモード ====== */
body[data-theme="dark"] {
  background: #1a202c;
  color: #f4f6fb;
}
body[data-theme="dark"] .main-header {
  background-blend-mode: multiply;
  filter: brightness(0.65) contrast(1.09);
}
body[data-theme="dark"] .main-header::after {
  background: linear-gradient(to bottom,rgba(50,80,120,0.89),rgba(15,85,120,0.8));
}
body[data-theme="dark"] .app-card {
  background: #242c3b;
  color: #fff;
  box-shadow: 0 4px 18px 0 rgba(0,0,0,0.17);
}
body[data-theme="dark"] .app-card:hover,
body[data-theme="dark"] .app-card:focus {
  box-shadow: 0 0 0 4px #00b7e699, 0 10px 32px rgba(0,183,230,0.13);
}
body[data-theme="dark"] .app-card-img {
  background: #303d50;
}
body[data-theme="dark"] section,
body[data-theme="dark"] p,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] .text-muted {
  color: #c9dbeb !important;
}
body[data-theme="dark"] .btn-info,
body[data-theme="dark"] .btn-info:hover,
body[data-theme="dark"] .btn-info:focus {
  background: linear-gradient(90deg, #0e5373 0%, #109bbf 100%);
  color: #fff;
}
body[data-theme="dark"] .poc-card-horizontal {
    background: #242c3b;
    color: #fff;
}
body[data-theme="dark"] .poc-card-desc {
    color: #fff;
}

.poc-section {
  background: #e0f7fb;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.poc-card-row {
  /* Bootstrapのg-4に任せてOK */
}

.poc-card-horizontal {
  /*min-height: 280px;*/
  padding: 1.3rem 1.2rem;
  border-radius: 2.2rem !important;
  background: #fff;
  box-shadow: 0 8px 24px 0 rgba(0,0,0,0.14);
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  transition: box-shadow 0.2s;
  text-decoration: none;
  overflow: hidden;
  margin-bottom: 2rem;
}
.poc-card-horizontal:hover, .poc-card-horizontal:focus {
  box-shadow: 0 0 0 6px #00b7e644, 0 8px 32px rgba(0,183,230,0.10);
  text-decoration: none;
}
.poc-card-img-wrap {
  /*min-width: 190px;*/
  max-width: 190px;
  height: 190px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.poc-card-img-horz {
    width: 10vw;
    height: 10vw;
  object-fit: cover;
  border-radius: 50%;
  background: #f4f4f4;
  display: block;
}
.poc-card-body {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.poc-card-title {
  font-size: 1.4rem;
  font-weight: 700;
}
.poc-card-desc {
  font-size: 0.9rem;
  color: #222;
  margin-top: 0.25em;
  line-height: 1.8;
  text-align: left;
  word-break: break-word;
}



/* セクションタイトルは前出の .section-title を利用 */

body[data-theme="dark"] .poc-section {
  background: #232f3b;
}
body[data-theme="dark"] .poc-card {
  background: #243447;
  color: #fff;
}
body[data-theme="dark"] .poc-card .text-muted {
  color: #c4dbef !important;
}
.jpintro-section {
  background: #f7f7f8;
  margin-top: 0;
  /*margin-bottom: 4rem;
  padding-bottom: 2rem;*/
}

/* タイトル下アンダーラインは .section-title::after で既に付与済み前提 */

.jpintro-carousel-wrap {
  position: relative;
  padding: 1.2em 0;
}
.jpintro-carousel {
  display: flex;
  gap: 2.2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0 3.5rem; /* 矢印分余白 */
}
.jpintro-card {
  min-width: 310px;
  max-width: 340px;
  background: #fff;
  border-radius: 1.5em;
  box-shadow: 0 6px 24px 0 rgba(0,0,0,0.09);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.1rem 1.3rem 1.8rem 1.3rem;
  margin: 0.6rem 0 1.5rem;
  transition: box-shadow 0.2s;
  text-decoration: none;
}
.jpintro-card:hover, .jpintro-card:focus {
  box-shadow: 0 0 0 6px #00b7e644, 0 8px 32px rgba(0,183,230,0.10);
}
.jpintro-card-img {
  width: 200px;
  height: 130px;
  object-fit: contain;
  margin-bottom: 1.5rem;
  border-radius: 0.8em;
  background: #f4f4f4;
  box-shadow: 0 2px 8px #f0f7ff40;
}
.jpintro-card-body {
  padding: 0;
}
.jpintro-card-desc {
  font-size: 1.13rem;
  color: #1c2028;
  margin-top: 0.2em;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.7;
}

.jpintro-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 66px;
  height: 66px;
  font-size: 2.7rem;
  font-weight: bold;
  color: #444;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.18s, color 0.18s;
}
.jpintro-arrow-left { left: 0; }
.jpintro-arrow-right { right: 0; }
.jpintro-arrow:hover {
  background: #e0f7fb;
  color: #00b7e6;
}

/* スクロールバー消す（必要なら） */
.jpintro-carousel {
  scrollbar-width: none;
}
.jpintro-carousel::-webkit-scrollbar {
  display: none;
}

body[data-theme="dark"] .jpintro-section {
  background: #232831;
}

body[data-theme="dark"] .jpintro-card {
  background: #29303c;
  color: #f7fafc;
  box-shadow: 0 6px 24px 0 rgba(0,0,0,0.21);
}
body[data-theme="dark"] .jpintro-card-desc {
  color: #e8f0fe;
}

body[data-theme="dark"] .jpintro-card-img {
  background: #384354;
}

body[data-theme="dark"] .jpintro-arrow {
  background: #21232b;
  color: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,0.19);
}
body[data-theme="dark"] .jpintro-arrow:hover {
  background: #273247;
  color: #6bdaf5;
}

body[data-theme="dark"] .section-title,
body[data-theme="dark"] .section-title::after {
  color: #fff !important;
  border-color: #64c9ed !important;
}

.relation-section, .sdgs-section {
  background: #fff;
  /*margin-bottom: 4rem;*/
}
.section-title {
  font-size: 2.3rem;
  position: relative;
  display: inline-block;
  padding-bottom: 0.2em;
  margin-bottom: 1.5em;
  font-weight: bold;
  letter-spacing: 0.02em;
}
.section-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00b7e6 60%, #45a6d7 100%);
  border-radius: 2px;
  margin-top: 0.4em;
}

.relation-logo-row {
  margin-top: 2rem;
  /*margin-bottom: 2rem;*/
}
.relation-logo {
max-width: 17vw;
    max-height: 150px;
  margin: 0.3em;
}
.relation-logo-caption {
  font-size: 1em;
  color: #222;
  letter-spacing: 0.01em;
}

.sdgs-logo {
  margin-left: 0.6em;
  margin-bottom: 1.8em;
  height:50px;
}
.sdgs-icon {
  width: 10vw;
  height: 10vw;
  object-fit: contain;
  border-radius: 0.7em;
  margin-right: 0.6em;
  background: #f4f4f4;
}
.sdgs-icon:last-child {
  margin-right: 0;
}
.sdgs-desc {
  font-size: 1.24rem;
  font-weight: bold;
  color: #222;
  margin-left: 2rem;
}
.app-contact-btn {
  font-size: 1.2rem;
  border-radius: 9999px;
  padding: 0.8em 3em;
  box-shadow: 0 3px 14px rgba(0,183,230,0.13);
}

body[data-theme="dark"] .relation-section,
body[data-theme="dark"] .sdgs-section {
  background: #232831;
}
body[data-theme="dark"] .section-title,
body[data-theme="dark"] .section-title::after {
  color: #fff !important;
  border-color: #64c9ed !important;
}
body[data-theme="dark"] .relation-logo-caption,
body[data-theme="dark"] .sdgs-desc {
  color: #f2f6fd !important;
}
body[data-theme="dark"] .relation-logo {
  filter: brightness(0.9) contrast(1.1);
}
body[data-theme="dark"] .sdgs-icon {
  background: #2c3740;
  filter: brightness(0.98) contrast(1.05);
}
body[data-theme="dark"] .app-contact-btn {
  background: linear-gradient(90deg, #0094c9 0%, #26bfff 100%);
  color: #fff;
}

.footer-main {
  background: #03b7e6;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.footer-nav {
  font-size: 1.12em;
  margin-bottom: 0.8em;
}
.footer-link {
  color: #ffffff;
  text-decoration: none;
  margin: 0 0.2em;
  transition: color 0.18s;
}
.footer-link:hover,
.footer-link:focus {
  color: #004658;
  text-decoration: underline;
}
.footer-copyright {
  color: #ffffff;
  font-size: 0.99em;
  margin-bottom: 0.8em;
}
.footer-sns {
  margin-bottom: 0.7em;
}
.footer-sns-icon {
  display: inline-block;
  font-size: 1.55rem;
  margin: 0 0.45em;
  color: #ffffff;
  opacity: 0.72;
  transition: color 0.18s, opacity 0.18s;
}
.footer-sns-icon:hover {
  color: #004658;
  opacity: 1;
}
.footer-policy {
  font-size: 0.98em;
  color: #3a6076;
  margin-top: 0.4em;
}

body[data-theme="dark"] .footer-main {
  background: #21273a;
  color: #eaf4fb;
}
body[data-theme="dark"] .footer-link {
  color: #ffffff;
}
body[data-theme="dark"] .footer-link:hover {
  color: #3aefff;
}
body[data-theme="dark"] .footer-sns-icon {
  color: #ffffff;
}
body[data-theme="dark"] .footer-copyright,
body[data-theme="dark"] .footer-policy {
  color: #ffffff;
}

.mainvisual{
  background-color: #ffffff
}
body[data-theme="dark"] .mainvisual {
  background-color: rgb(49, 49, 49);

}
.header-menu-btn i {
  color: #fff !important;
}


.header-menu-btn i { color: #0189ba; }
body[data-theme="dark"] .header-menu-btn i { color: #fff; }

.small{
margin: 1vh;
}

/* フォーム */
.form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 20px 0;
    gap: 25px;
}

.form__grid {
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 23px;
}

/* 入力フィールド */
.form__field {
    width: 100%;
    height: 60px;
    border-radius:6px;
    border: 1px solid #000000fc;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 31px;
    background-color: #ffffff;
}

.form__input {
    width: 100%;
    border: 0;
    outline: 0;
    background-color: transparent;
    height: 24px;
    position: relative;
    text-align: left;
    display: inline-block;
    padding: 0;
    
}

.form__input:focus {
    border-color: var(--color-cornflowerblue);
    box-shadow: 0 0 0 2px rgba(100, 149, 237, 0.2);
    outline: none;
}

.form__input.error {
    border-color: #000000fc !important;
    box-shadow: 0 0 0 2px rgba(220, 20, 60, 0.2);
}

/* 名前フィールド */
.form__name-group {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
}

.form__name-field {
    width: 100%;
    height: 60px;
    border-radius:6px;
    border: 1px solid #000000fc;
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 34px;
    min-width: 200px;
    background-color: #ffffff;
}

.form__name-field:last-child {
    padding: 0 34px;
}

/* テキストエリア */
.form__textarea {
    border: 1px solid #000000fc;
    background-color: transparent;
    height: 112px;
    width: 100%;
    outline: 0;
    border-radius:6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 21px 31px;

    resize: vertical;
    background-color: #ffffff;
}

.form__textarea:focus {
    border-color: var(--color-cornflowerblue);
    box-shadow: 0 0 0 2px rgba(100, 149, 237, 0.2);
    outline: none;
}

.form__textarea.error {
    border-color: #dc143c !important;
    box-shadow: 0 0 0 2px rgba(220, 20, 60, 0.2);
}

/* フィールドグループ */



.form__name-container {
    width: 100%;
    height: 133px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 13px;
}

.btn-submit{
      background: linear-gradient(90deg, #ee1919 0%, #d74545 100%);
    color: #fff;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 2em;
    padding: 0.5em 2em;
    margin: 0.8em 0;
    box-shadow: 0 4px 18px 0 rgba(0, 183, 230, 0.16);
    border: none;
    transition: background 0.17s, color 0.17s;
    text-decoration: none;
    display: inline-block;
}

.btn-submit:hover, .btn-submit:focus {
  background: linear-gradient(90deg, #ff0000 0%, #ff0000 100%);
  color: #fff;
}

.contact-section{
background-color: #f1f8ff;
}

body[data-theme="dark"] .contact-section {
background-color: #2d3033;
}

section, .scroll-section {
  scroll-margin-top: 144px; /* 固定ヘッダー＋パンくず＋少し余裕 */
}

.movie-card {
  /*min-width: 190px;
  max-width: 320px;*/
  min-height: 300px;
  margin: auto;
  border-radius: 1.5rem !important;
  padding: 2rem 1.25rem;
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.09);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.2s;
  text-decoration: none;
  background: #fff;
  /* スクロールカード対策 */
  overflow: hidden;
}
.movie-card:hover,
.movie-card:focus {
  box-shadow: 0 0 0 4px #00b7e644, 0 6px 24px rgba(0,183,230,0.09);
  text-decoration: none;
}
.movie-card-img {
 width: 20vw;
    height: auto;
  object-fit: cover;
  border-radius: 6%;
  background: #f4f4f4;
  margin-bottom: 1.25rem;
}

body[data-theme="dark"] .movie-card {
  background: #242c3b;
  color: #fff;
  box-shadow: 0 4px 18px 0 rgba(0,0,0,0.17);
}
body[data-theme="dark"] .movie-card:hover,
body[data-theme="dark"] .movie-card:focus {
  box-shadow: 0 0 0 4px #00b7e699, 0 10px 32px rgba(0,183,230,0.13);
}
body[data-theme="dark"] .movie-card-img {
  background: #303d50;
}
/* TOPに戻るボタン */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1100;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #0dcaf0; /* Bootstrap info色 */
  color: #fff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, background 0.2s;
}
.back-to-top:hover {
  background: #0bb2d4;
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
}
.brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
.brand {
    display: flex
;
    align-items: center;
    gap: 10px;
    font-weight: 800;
}
.product-section {
    background: #e0f7fb;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.product-card-horizontal {
    /* min-height: 280px; */
    padding: 1.3rem 1.2rem;
    border-radius: 2.2rem !important;
    background: #fff;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.14);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: box-shadow 0.2s;
    text-decoration: none;
    overflow: hidden;
    margin-bottom: 2rem;
}
.product-card-horizontal:hover, .product-card-horizontal:focus {
  box-shadow: 0 0 0 6px #00b7e644, 0 8px 32px rgba(0,183,230,0.10);
  text-decoration: none;
}
.product-card-img-wrap {
  /*min-width: 190px;*/
  max-width: 190px;
  height: 190px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card-img-horz {
    width: 9vw;
    height: 9vw;
  object-fit: cover;
  border-radius: 50%;
  background: #f4f4f4;
  display: block;
}
.product-card-body {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.product-card-title {
  font-size: 1.4rem;
  font-weight: 700;
}
.product-card-desc {
  font-size: 0.9rem;
  color: #222;
  margin-top: 0.25em;
  line-height: 1.8;
  text-align: left;
  word-break: break-word;
}
.product-href-text{
text-decoration: none;
color: black;}
  /* ======== Read More v4 (参考デザイン適用) ======== */
/* ===== Read More v4（遅め＆右側三角） ===== */
.read-more-4{
  --rm-lines: 3;                  /* 折りたたみ時の行数 */
  --rm-lh: 1.8;                   /* 行間 */
  --rm-collapsed: calc(var(--rm-lines) * 1em * var(--rm-lh));
  --rm-accent: var(--bs-primary, #2589d0);
  --rm-dur: 1.2s;                 /* 開閉スピード（お好みで） */
  --rm-fade-dur: .6s;             /* ラベル/矢印のアニメ速度 */
  --rm-ease: cubic-bezier(.2,.7,.2,1);
  --rm-fade-h: 72px;              /* ← 下端の“薄くなる”帯の高さ（お好みで 48〜96px） */
  position: relative;
  padding-bottom: 3rem;
}

/* 本文：max-height は従来どおりアニメーション */
.read-more-4 p{
  margin: 0 0 10px;
  line-height: var(--rm-lh);
  max-height: var(--rm-collapsed);
  overflow: hidden;
  transition: max-height var(--rm-dur) var(--rm-ease);
  will-change: max-height;

  /* ▼ テキストを下に向かって薄くするマスク（主要ブラウザ対応） */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) calc(100% - var(--rm-fade-h)),
    rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) calc(100% - var(--rm-fade-h)),
    rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* 展開時はマスク解除（全文クッキリ表示） */
.read-more-4:has(:checked) p{
  max-height: 2000px;             /* 長文なら増やしてOK */
  -webkit-mask-image: none;
          mask-image: none;
}
/* 下フェード */
.read-more-4 p::after{
  content:none !important;
  position: absolute; inset: auto 0 0 0; height: 60px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%,
    rgba(255,255,255,.9) 55%, #fff 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity .4s var(--rm-ease);
}


.read-more-4:has(:checked) p::after{ opacity: 0; }

/* ボタン：テキスト左／三角右の2カラム */
.read-more-4 label{
  display: grid;
  grid-template-columns: auto 12px;  /* ← 右側に三角用の列 */
  align-items: center;
  column-gap: 8px;
  position: absolute;
  bottom: .5rem; left: 50%; transform: translateX(-50%);
  padding: .55em 1.2em .5em;
  border-radius: 999px;
  background: linear-gradient(90deg, #45a6d7 0%, #00b7e6 100%);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  user-select: none; cursor: pointer;
  transition: filter .2s, transform .05s;
}
.read-more-4 label:hover{ filter: brightness(.97); }
.read-more-4 label:active{ transform: translateX(-50%) translateY(1px); }

/* テキストのクロスフェード（重ね表示） */
.read-more-4 .label-wrap{ grid-column:1; display:grid; }
.read-more-4 .label-open,
.read-more-4 .label-close{
  grid-area: 1 / 1;
  transition: opacity .4s var(--rm-ease), transform .4s var(--rm-ease);
}
.read-more-4 .label-close{ opacity: 0; transform: translateY(4px); text-align: center;}
.read-more-4:has(:checked) .label-open{ opacity: 0; transform: translateY(-4px); }
.read-more-4:has(:checked) .label-close{ opacity: 1; transform: translateY(0); }

/* 右側の三角（▼→▲へ回転） */
.read-more-4 .caret{
  grid-column:2; width: 10px; height: 6px;
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%); /* ▼ */
  transition: transform .4s var(--rm-ease);
}
.read-more-4:has(:checked) .caret{ transform: rotate(180deg); } /* ▲ */

/* チェックは非表示 */
.read-more-4 input{ display:none; }

/* ダーク背景調整（必要なら） */
@media (prefers-color-scheme: dark){
  .read-more-4 p::after{
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%,
      rgba(0,0,0,.15) 55%, rgba(0,0,0,.25) 100%);
  }
}


body[data-theme="dark"] .product-href-text {
    color: #fff;
}
body[data-theme="dark"] .product-section {
    background: #232f3b;
}
body[data-theme="dark"] .product-card-horizontal {
    background: #1a202c;
    color: #fff;
}
body[data-theme="dark"] .accordion-body {
    background: #1a202c;
    color: #f4f6fb;
}
body[data-theme="dark"] .accordion-collapse {
    background: #1a202c;
    color: #f4f6fb;
}
body[data-theme="dark"] .accordion-item {
    background: #1a202c;
    color: #f4f6fb;
}
body[data-theme="dark"] .product-card-desc {
    color: #f4f6fb;
}
@media (min-width: 768px) {
  .header-menu-btn { display: none !important; }


/* サイドバー全体はPC時非表示 */

  .sidebar-drawer { display: none !important; }
.sidebar-drawer {
  position: fixed;
  top: 0; left: -330px;
  right: auto;
  width: 320px;
  max-width: 90vw;
  height: 100%;
  background: #fff;
  box-shadow: 6px 0 24px rgba(0,0,0,0.16);
  z-index: 1998;
  transition: left .28s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.sidebar-drawer.active {
  left: 0;
  pointer-events: auto;
}

}


@media (max-width: 1100px) {

.header-title {
    font-size: 1.5rem;
}
}
@media (max-width: 950px) {
  .header-title { font-size: 1.32rem; /*padding-right: 15px;*/}
  .header-btn { font-size: 0.7em; padding: 0.42em 1.6em; }
  .main-header-content { gap: 0.5em;}
  .main-header-bar .container { /*flex-direction: column;*/ align-items: flex-start; gap: 0.5em;}
  .header-contact-btn { font-size: 1em; padding: 0.48em 2em; }
  .container {width: 90vw;}
  .breadcrumb-link {
    font-size: 1rem;
}

}

@media (max-width: 900px) {
  .position-fixed-breadcrumb { top: 100px; }
  body { padding-top: 141px; }
.header-bg-img {
    height: 100px;
    min-height: 100px;
}

  .poc-card-horizontal {
    flex-direction: column;
    min-height: 0;
    padding: 2rem 1.2rem;
    text-align: center;
    align-items: center;
  }
  .poc-card-img-wrap, .poc-card-img-horz {
    min-width: 120px;
    max-width: 120px;
    height: 120px;
    width: 120px;
  }
  .poc-card-body {
    align-items: center;
    text-align: center;
  }
  .poc-card-title {
    text-align: center !important;
  }
  .poc-card-desc{
    text-align: center !important;
       font-size: 0.9rem;}
  .container {
width: 95vw;
}
  .main-header-content { padding-bottom: 2.2em;}

}
@media (max-width: 700px) {
  .footer-main { font-size: 0.93em; }
  .footer-link { font-size: 1em; }

  .section-title { font-size: 1.2rem; }
  .relation-logo { max-width: 130px; }
  .sdgs-icon { width: 100px; height: 100px; }
  .sdgs-desc { font-size: 0.99rem; margin-left: 0.4rem; }

.sdgs-logo {
    margin-bottom: 0.8em;
  height:35px;

}
}

/* ===== レスポンシブ細部調整 ===== */
@media (max-width: 767px) {
  .main-header {
    min-height: 100px;
  }
  .app-card {
    max-width: 98vw;
    min-height: 250px;
    padding: 1.5rem 0.7rem;
  }
  section {
    margin-bottom: 2rem;
    margin-top: 1.2rem;
  }
    .movie-card {
    max-width: 98vw;
    min-height: 250px;
    padding: 1.5rem 0.7rem;
  }
  .movie-card-img {
 width: 50vw;

}
  .header-breadcrumb {
    display: none !important;
  }
  .main-header-content {align-items: flex-start; justify-content: flex-end;flex-direction: row-reverse;}
    .ms-4
  {margin-left:0 !important;}
  .row-cols-1>* {
   flex: 1 !important;
}

  .main-header-bar .container { flex-direction: column; align-items: flex-start; gap: 0.5em;}
    .header-btn {
        font-size: 1em;
    }
      .header-menu-btn { position:fixed;left:14px;z-index:2500; }
      .header-title {text-align: right;}

}
/* モバイル対応 */
@media (max-width: 600px) {
  .jpintro-carousel { gap: 1.2rem; padding: 0 1.8rem; }
  .jpintro-card { min-width: 75vw; max-width: 96vw; }
  .jpintro-arrow { width: 44px; height: 44px; font-size: 1.7rem; }
  .jpintro-card-img { width: 130px; height: 80px; }


  .ms-4
  {margin-left:0 !important;}
  .row-cols-1>* {
   flex: 1 !important;
}
.py-5 {
    padding-bottom: 0 !important;
}
.relation-section,.jpintro-section {
    margin-bottom: 0;
}
.relation-logo-row {
    margin-top: 0;
}
.app-contact-btn {
    font-size: 1rem;

}
}

@media (max-width: 600px) {
.form__name-group {
    height: 160px;

    flex-direction: column;

}
.form__phone-group {
    gap: 10px;
}
}