/* ============================================================
   layout.css — ヘッダー・グローバルナビ・ドロワー・フッター
   header / #pc_nav (PC) / #nav-container (SP ドロワー) / footer
   ============================================================ */

/* ---------- header ---------- */
header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	/*position: absolute;top:0;*/
	position: absolute;
	color: #fff;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 999;
	background:url("../img/shared/bk_head.webp");
	width: 100%;
}
header a{text-decoration: none !important; color: #fff}
header a:hover{color: #fff}
header .w1180{display: flex;justify-content: space-between;	padding: 0.5rem 0;align-items: center;width: 100%}
/* 肩書きは現在非表示 (HTML の style="display:none" から移設) */
header .shoulder{display: none;font-size:0.9rem;font-weight: bold;margin-bottom: 8px}
header .site_title{font-size: 1.6rem;margin: 0;padding: 0}
/* HTML の style="margin-left:2rem" から移設 */
header .access.pc span{margin-left: 2rem}

header .flex a{display: flex;align-items: center;}
header .flex a .img{width: 15%;margin-right: 1em}
@media (max-width: 820px) {
header .w1180{padding: 0.5rem 0;width: 94%}
}
@media (max-width: 767px) {
header .w1180{display: block;}
header .w1180 .logo .flex a { width: 100%; padding-right: 45px; box-sizing: border-box; gap: 8px; }
header .w1180 .logo .site_title{font-size: clamp(15px, 4.8vw, 22px);line-height: 1.5rem;position: static;transform: none;flex: 1;text-align: center;white-space: nowrap;}

header .flex a .img{width: 24%;margin-right: 1em}
header .shoulder{font-size:0.8rem;margin-bottom: 5px}

.sp_nav{display: none}
.sp_nav.fixed{display: flex;background:url("../img/shared/bk_head.webp");width: 100%;justify-content: space-between;align-items: center;padding:0.5rem 1rem}
.sp_nav.fixed .sp_title{font-size: 1.1rem;line-height: 1.5rem;color: #fff;position: absolute;left: 50%;transform: translateX(-50%);white-space: nowrap;}
.sp_nav.fixed .button{margin: 0 0 0 auto !important;top: 0 !important}

.sp_nav2{display: block}
.sp_nav2.fixed{display: none}

}

/* ---------- PC global nav (#pc_nav) ---------- */
/*pc_nav*/
#pc_nav{width: 100%;z-index: 999; position: absolute;top: 84px}
#pc_nav.fixed{width: 100%;z-index: 999; position: fixed;top: 0px}
#pc_nav .home{display: none;}
#pc_nav.fixed .home{display: none;}

#pc_nav a{text-decoration: none !important}
#pc_nav .gnav{ background:url("../img/shared/bk_nav.webp") }

#pc_nav  .gnav ul.flex{display: flex;justify-content:space-between;align-items: center}
#pc_nav  .gnav li a{color: #fff;}
#pc_nav  .gnav li{font-size: 0.8rem; line-height: 1.4em;}
#pc_nav  .gnav li{border-right: 1px solid #C7C1BB;height: 51px; padding:1rem 2.5rem 1rem 0}
#pc_nav.fixed .gnav li{padding:1rem 1.3rem}
#pc_nav  .gnav li.br{padding-top: 0.5rem}
#pc_nav  .gnav li.end{border-right: none;height: 51px; padding-right: 0}
#pc_nav  .gnav li span{font-size: 1.1rem}

#pc_nav  .gnav li ul{position:absolute;z-index:9999;     margin-top: 15px;margin-right: 0;margin-left: -35px;}
#pc_nav.fixed   .gnav li ul{position:absolute;z-index:9999;     margin-top: 15px;margin-right: 0;margin-left: -25px;}

#pc_nav  .gnav li ul li,
#pc_nav.fixed  .gnav li ul li{overflow: hidden;  float:none; text-align:left;  height: 0;  -webkit-transition: .2s;  transition: .2s;  padding:0; font-size: 15px;border: none;background-color: var(--c-brown);background-image: url("../img/shared/bk_nav.webp")}

#pc_nav .gnav li.pt ul li a,
#pc_nav .gnav li ul li a{font-size:16px;padding:12px 20px;width:330px; height: auto;text-align:left;  font-weight: normal;  display:block; border-top: 1px solid #C7C1BB; color:#FFF;  text-decoration:none; line-height:1.2em; background: none}

#pc_nav .gnav li.pt ul li:first-child a:first-child ,
#pc_nav .gnav li ul li:first-child a:first-child {border-top:none }

#pc_nav .gnav li:hover ul li{  overflow: visible;height:44px;}

@media (max-width: 1024px) {
#pc_nav .gnav ul.flex { justify-content: space-between; }
#pc_nav .gnav li{padding: 0.5rem 0; height: auto; flex: 1 1 auto; text-align: center;}
#pc_nav .gnav li a{white-space: nowrap;}
#pc_nav .gnav li.end{padding-right: 0; height: auto;}
#pc_nav.fixed .gnav li{padding: 0.5rem 0;}
#pc_nav .gnav li span{font-size: 0.7rem}
header .site_title{font-size: 1.3rem;}
header .access{font-size: 0.75rem; white-space: nowrap;}
header .access span{margin-left: 1rem !important;}
header .w1180{width: 96%; padding: 0.5rem 2%;}
}

/* ---------- PC global nav — hover submenu ---------- */
/* --- PC nav hover submenu (クルスカリダクションについて → 会社概要) --- */
#pc_nav .gnav li.has-submenu {
	position: relative;
}
/* Parent anchor has no href (inert) — keep pointer cursor for visual consistency */
#pc_nav .gnav li.has-submenu > a {
	cursor: pointer;
}
#pc_nav .gnav li.has-submenu > ul {
	display: block;
	visibility: hidden;
	opacity: 0;
	transform: scaleY(0);
	transform-origin: top center;
	pointer-events: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	z-index: 9999;
	/* bk_nav.png は rgba(108,94,78,0.76) の半透明テクスチャのため、
	   下地に不透明色を敷かないと背景画像が透けて文字が読めなくなる */
	background-color: var(--c-brown);
	background-image: url("../img/shared/bk_nav.webp");
	min-width: 100%;
	width: auto;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}
#pc_nav .gnav li.has-submenu:hover > ul,
#pc_nav .gnav li.has-submenu:focus-within > ul {
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
	pointer-events: auto;
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s;
}
#pc_nav .gnav li.has-submenu > ul > li {
	display: block;
	float: none;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	text-align: left;
	overflow: visible;
}
#pc_nav .gnav li.has-submenu > ul > li + li > a {
	border-top: 1px solid #C7C1BB;
}
#pc_nav .gnav li.has-submenu > ul > li > a {
	display: block;
	width: auto;
	padding: 14px 22px;
	color: #fff;
	text-align: left;
	font-size: 15px;
	line-height: 1.4;
	border: none;
	background: transparent;
}
#pc_nav .gnav li.has-submenu > ul > li > a:hover {
	/* 明るくすると白文字の対比が 4.41:1 に落ちるため、暗くして 8.19:1 を確保 */
	background: rgba(0, 0, 0, 0.18);
	color: #fff;
}

@media (max-width: 820px) {
	#pc_nav .gnav li.has-submenu > ul {
		display: none !important;
	}
}

/* ---------- SP drawer (#nav-container / #nav-container .panel) ---------- */
/*ドロワー*/

main {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

#nav-container {
  position: fixed;
  height: 100vh;
  width: 100%;
  pointer-events: none;
	z-index: 99999;
}
#nav-container .bg {
  position: absolute;
  top: 70px;
  right: 0;
  width: 100%;
  height: calc(100% - 70px);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: .3s;
  transition: .3s;
  background: #000;
}
#nav-container:focus-within .bg {
  visibility: visible;
  opacity: .6;
}
#nav-container * {
  visibility: visible;
}

#nav-container .button {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 9;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  border-radius: 0;
  height: 45px;
  width: 30px;
  cursor: pointer;
  pointer-events: auto;
  margin-right: 1rem;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
top:22px;
	float: right;
}
#nav-container .icon-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  -webkit-transition: .3s;
  transition: .3s;
}
#nav-container .icon-bar:nth-child(2){width: 100%}
#nav-container .icon-bar:nth-child(3){width: 100%}
#nav-container .icon-bar + .icon-bar {
  margin-top: 5px;
}

#nav-container:focus-within .button {
  pointer-events: none;
}
#nav-container:focus-within .icon-bar:nth-of-type(1) {
  -webkit-transform: translate3d(0,8px,0) rotate(45deg);
          transform: translate3d(0,8px,0) rotate(45deg); background: #000912;
}
#nav-container:focus-within .icon-bar:nth-of-type(2) {
  opacity: 0;
}
#nav-container:focus-within .icon-bar:nth-of-type(3) {
  -webkit-transform: translate3d(0,-8px,0) rotate(-45deg);
          transform: translate3d(0,-8px,0) rotate(-45deg);width: 100%;background:#000912;
}

#nav-container .panel {
  margin-top: 45px;
  padding: 0 20px 20px 20px;
  width: 95%;
  position: absolute;
  top: 0;
  right: 0;
height: calc(100% - 50px);
  background: var(--c-beige);
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-transform: translateX(+100%);
          transform: translateX(+100%);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  will-change: transform;
  contain: paint;
}
#nav-container .panel.dam {
	margin-top: 0;

  pointer-events: none;

}
#nav-container .panel .area{overflow: auto; height: 100%;-webkit-overflow-scrolling: touch;}
#nav-container .panel ul {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#nav-container .panel li a {

  display: block;
  text-transform: uppercase;
  -webkit-transition: color .1s;
  transition: color .1s;
}

#nav-container .panel li a:hover {
  color: #333;
}

#nav-container:focus-within .panel {
  -webkit-transform: none;
          transform: none;
}

#nav-container .panel .area{padding: 1rem 0;background:var(--c-beige);}
#nav-container .panel ul.menu{ margin:0 0 20px 0}
#nav-container .panel ul li a,
#nav-container .panel ul li.triger{padding:15px 10px; border-bottom: 2px solid #EAE7DE;display: block}
#nav-container .panel ul li{font-weight: bold;font-size: 1.3rem}
#nav-container .panel ul li a{background: url("../img/shared/icons/sp_icon_y.webp") no-repeat 96% center;background-size: 8px}
#nav-container .panel ul li.triger{background: url("../img/shared/icons/icon_plus.webp") no-repeat 96% center;background-size: 12px}
#nav-container .panel ul li.triger.active{background: url("../img/shared/icons/icon_minus.webp") no-repeat 96% center;background-size: 12px}
#nav-container .panel .open li{padding-left: 1rem;line-height: 1.1;width: 100%;font-size: 1rem;font-weight: normal}
#nav-container .panel .open li:last-child{border: none}
#nav-container .panel a{text-decoration: none !important;}

/* ---------- header (ロゴ周りの詳細) ---------- */
header {
    height: 84px;
    padding-top: 10px;
}

header .logo {
    min-width: 200px;
    flex-shrink: 0;
}

header .logo .img img {
    height: 60px;
    width: 67px;
    min-width: 67px;
    flex-shrink: 0;
    object-fit: contain;
}

header .logo .flex a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 15px;
}

header .logo .site_title {
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    margin: 0;
    line-height: 1;
}

header .logo .shoulder {
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 5px;
    margin-left: 2px;
}

@media (max-width: 767px) {
    header .logo .site_title {
        font-size: 20px;
    }
}

/* ---------- footer ---------- */
/*------------------------------------
FOOTER
------------------------------------*/

footer .bk_brown a{color: #fff !important;text-decoration: none !important}
footer .bk{background: url("../img/shared/foot_bk.webp") no-repeat center center / cover; padding:3rem 0 2rem 0}
footer .bk .flex_bnr{display: flex;justify-content: center;width: 90%;margin: 0 auto;column-gap: 60px}

footer .bk_brown{background: var(--c-brown); color: #fff !important;padding: 4rem 0 0 0 }
footer .bk_brown .flex{display: flex;}
footer .bk_brown .logo{width: 51%}
footer .bk_brown .logo_flex{display: flex;column-gap: 20px;font-size: 1.5rem;line-height: 2rem;align-items: center}
footer .bk_brown .logo_flex img{width: 115px}
footer .bk_brown .logo_flex .text{text-align: center}
footer .bk_brown .menu{display: flex;justify-content: space-between;column-gap: 60px}
footer .bk_brown .menu ul li{margin-bottom: 20px}

footer .bk_brown .copy{text-align: center; font-size: 12px; padding-bottom: 1rem;margin-top: 2rem}

@media (max-width: 767px) {

footer .bk{padding:2rem 0}
footer .bk_brown{padding: 3rem 0 6rem 0 }
footer .bk .flex_bnr{display: block;width: 90%;margin: 0 auto;}
footer .bk .flex_bnr p{margin: 10px 0}
footer .bk_brown .flex{display: block;text-align: center}
footer .bk_brown .logo{width: 100%;margin-bottom: 40px}
footer .bk_brown .logo_flex{display: block;font-size: 1.2rem;line-height: 2rem;}
footer .bk_brown .logo_flex img{width: 30%}
footer .bk_brown .logo_flex .img{margin-bottom: 20px}

/* SP: 11項目を縦1列にすると長くなるため2段組みにする。
   display:contents で <ul> を潰すとリストのセマンティクスが失われるので
   マルチカラムで流し込む (DOM 順・リスト構造はそのまま) */
footer .bk_brown .menu{display: block;column-count: 2;column-gap: 1rem}
footer .bk_brown .menu ul{break-inside: auto}
footer .bk_brown .menu ul li{margin-bottom: 26px;break-inside: avoid}
footer .bk_brown .copy{margin-top: 40px}
}

/* ---------- 現在地の表示 ----------
   HTML 側で、自分自身を指すリンクに aria-current="page" を、
   下位ページを持つ親項目に .is_current を付けている。 */
#pc_nav .gnav li a[aria-current="page"],
#pc_nav .gnav li.is_current > a{
	position: relative;
	font-weight: bold;
}
#pc_nav .gnav li a[aria-current="page"]::after,
#pc_nav .gnav li.is_current > a::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.6rem;
	height: 2px;
	background: var(--c-gold);
}
/* 下層メニュー内では下線が窮屈になるため文字色で示す */
#pc_nav .gnav li ul li a[aria-current="page"]{color: var(--c-gold)}
#pc_nav .gnav li ul li a[aria-current="page"]::after{display: none}

#nav-container .panel a[aria-current="page"],
#nav-container .panel li.is_current{
	color: var(--c-gold);
	font-weight: bold;
}