@charset "UTF-8";

body { width: 100%; height: 100%; min-width: 768px; margin: 0px auto; padding: 0px; }
a { text-decoration: underline; }

/* nav ******************************************** */
.nav_erea_box {
    position: sticky;
    top: 0; /* 画面上部から0pxの位置で固定 */
    background: #fff; 
    border-top: 5px solid #4B77D1;
    z-index: 1000; /* 他のコンテンツの下に隠れないよう前面に配置 */
    }
.nav_erea {
    width: 90%;
    max-width: 1080px;
    min-width: 768px;
    margin: 0px auto;
    padding: 20px 0px 0px;
}

/* ① トップレベルの <ul> を横並びにする */
.nav_erea nav > ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* トップレベルの <li> の基準設定 */
.nav_erea nav > ul > li {
    position: relative;
    padding: 15px 5px;
}

/* メニューのテキストリンク（上層） */
.nav_erea nav > ul > li > a {
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

/* メニューのテキストリンク（上層）ホバーした際の色変化 */
.nav_erea nav > ul > li > a:hover {
    color: #4B77D1;
}

/* ② & ③ 下層の <ul> の設定（初期状態は非表示） */
.nav_erea nav > ul > li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 250px;
    background-color: #587db8; /* 「スクリーンショット 2026-09-10 095806.png」に近い背景色 */
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10;
}

/* 下層メニューの <li> と <a> のデザイン */
.nav_erea nav > ul > li > ul > li {
    padding: 0;
}

.nav_erea nav > ul > li > ul > li > a {
    display: block;
    padding: 10px 20px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
}

/* 下層メニューをホバーした際の色変化 */
.nav_erea nav > ul > li > ul > li > a:hover {
    background-color: #a0c2fa;
}

/* ② & ③ マウスオーバー時に下層の <ul> を表示させる */
.nav_erea nav > ul > li:hover > ul {
    display: block;
}
/* nav ******************************************** */

/* header ******************************************** */
.header_box1 { width: 100%; }
.header_box2 { 
  width: 100%; 
  padding: 50px 0px; 
  background-image: url('/product/pallet/assets/img/common/kv-sample-pc.png'); 
  background-repeat: no-repeat; 
  background-attachment: scroll; 
  background-position: center center; 
  background-size: cover; 
  }
.header_box3 { 
  width: 90%; 
  margin: 0px auto; 
  color: #fff; 
  }
/* header ******************************************** */

/* パンくず ******************************************** */
.pan_box { width: 90%; margin: 1rem auto; }
.pan_box UL { 
  display: flex; 
  gap: 10px; 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  }
/* パンくず ******************************************** */

/* DIV BOX ******************************************** */
.worp_box1 { width: 90%; margin: 0 auto; padding: 1rem 0px; }
.worp_box1 h2 { 
  width: 100%; 
  margin: 0px auto; 
  text-align: center; 
  font-size: 34px; 
  font-weight: bold; 
  border-bottom: 3px solid #4769b9; 
  }

.worp_box2 { width: 100%; margin: 0; padding: 5rem 0px; }
.worp_box2 h3 { 
  margin: 0 auto; 
  font-size: 25px; 
  padding-left: 10px; 
  border-left: 4px solid #4769b9; 
  }


/* FOOTER ******************************************** */
.footer_box { width: 100%; margin: 2rem auto 0; border-top: 1px dotted #ccc; }
.footer_box1 { width: 90%; margin: 2rem auto; }
.footer_li { width: 100%; }
.footer_li ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; }
.footer_li .li_link { display: flex; align-items: center; }
/* FOOTER ******************************************** */