/*共通部分*/
.container{
  width: 75vw;
}


h3{
font-size: calc(1.1rem + 1vw);
}

/* ページ全体を縦スクロールしない */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* ← body にはスクロールバーを出さない */
  display: flex;
  flex-direction: column;
}

/* 固定ヘッダー */
header.main-header {
  flex: 0 0 auto; /* 高さは自動 */
  z-index: 2000;
}

/* スクロール対象は main */
main {
  margin-top: 100px;
  padding-left: 200px;
  flex: 1 1 auto;              /* 残りの高さを占有 */
  overflow-y: auto;            /* 縦スクロールを有効に */
  -webkit-overflow-scrolling: touch; /* iOS スムーズスクロール */
}


/* ===== ヘッダー（背景画像＋グラデ） ===== */
.main-header {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: transparent;
  min-height: 100px;
  margin-bottom: 20px;
  z-index: 2000;
}
.header-bg-img {
background: url("../../image/AdobeStock_1441636206.jpeg") center/cover no-repeat;
  width: 100%;
  height: 100px;
  min-height: 100px;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
      filter: brightness(.65);
}
.position-fixed-top {
  position: fixed;
  top: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  z-index: 2000;
}


/*.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-bottom: 2.2em;*/
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
      flex-direction: row;

}
.header-title {
  font-size: 1.6rem;
  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.9vw;
  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;
}

/* ハンバーガーアイコンは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;
    display: none;

}

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"] .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));
}

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


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

body[data-theme="dark"] body{
  background: #1a202c;
  color: #f4f6fb;
}
/* サイドバー */
.sidebar-drawer {
  position: fixed;
  top: 0;
  left: 0;    /* ここを0に！ */
  width: 200px;
  max-width: 90vw;
  height: 100%;
  background: #fff;
  box-shadow: 1px 0 6px rgba(0,0,0,0.16);
  z-index: 1998;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transition: none;        /* PCではtransition不要 */
}

#sidebar ul {
  list-style: none;
}

#sidebar li + li {
  margin-top: 1rem;
}




.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;
  display: none;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 1.7em;
}
.sidebar-link {
  font-size: 0.9em;
  color: #2d2d2d;
  padding: 0.5em 0;
  text-decoration: none;
  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;
}

body[data-theme="dark"] .sidebar-inner { background-color: #393939; }
body[data-theme="dark"] .header-btn { background-color: #616161; color: white;}
body[data-theme="dark"] .sidebar-section-title{ color: white;}
body[data-theme="dark"] .sidebar-link { color: #ffffff; }





@media (min-width: 768px) {
  .header-menu-btn { display: none !important; }


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

  /*.sidebar-drawer { display: none !important; }*/
}


@media (max-width: 1100px) {

.header-title {
    font-size: 1.5rem;
}
}

@media (max-width: 950px) {
  .header-title { font-size: 1.1rem; padding-right: 15px; padding-left: 30px;}
  .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; }
}

@media (max-width: 900px) {
.header-bg-img {
    height: 80px;
    min-height: 80px;
}
  /*.main-header-content { padding-bottom: 2.2em;}*/


}

/* ===== レスポンシブ細部調整 ===== */
@media (max-width: 767.98px) {
  .main-header {
    min-height: 80px;
  }
    .sidebar-drawer {
    left: -330px;       /* 初期は左に隠す */
    transition: left .28s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
  }
  .sidebar-drawer.active {
    left: 0;
    pointer-events: auto;
  }
  .sidebar-close {

  display: block;
}
    .header-menu-btn {
    display: inline-block;
}
main{padding-left: 0; margin-top: 80px}
.container{
  width: 100%;
}
}

@media (max-width: 767px) {
  .header-breadcrumb {
    display: none !important;
  }
  .main-header-content {align-items: flex-start; justify-content: flex-end;flex-direction: row-reverse; min-height: 80px; }

  .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;}
}