@charset "utf-8";
/* ─────────────────────────────────────────────────────────────
   ヘッダー（ロゴ＋グローバルナビ）専用のCSS。

   ★ここが唯一の置き場。トップ（index.html）と下層ページ（pages/*.html）が
     同じこのファイルを読む。style.css には header の指定を書かないこと。
     （2026-09-06：style.css から丸ごと移設。順番は変えていない＝
      header.css → style.css の順に読むので、移設前と同じ優先順位になる）
   ───────────────────────────────────────────────────────────── */

.txt_jp {
}

.txt_en {
	font-family: forma-djr-text, "Archivo", "Helvetica Neue", Arial, sans-serif;
	font-weight: 900;
	font-style: normal;
}

@media screen and (min-width: 1260px) {
	.start header {
		top: -100%;
		opacity: 0;
	}
	header {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 80px;
		background-color:rgba(255,255,255,0.49);
		border-top: 1px solid rgba(240,240,240,0.49);
		border-bottom: 1px solid rgba(240,240,240,0.49);
		z-index: 999;
		opacity: 1.0;
		transition: 2.0s all ease;
	}
	header h1 img {
		width: auto;
		height: 38px;
	}
	/* ロゴとナビを横並びにする。absoluteだとロゴの上に乗るので flex に変更 */
	header .inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80px;
		padding-right: 30px;
	}
	header .logo {
		height: auto;
		padding: 0 0 0 59px;
		flex: none;
	}
	header .header_nav {
		position: static;
		flex: none;
	}
	header .header_nav ul {
		font-size: 0;
	}
	header .header_nav ul li {
		display: inline-block;
		height: 55px;
		border-radius: 16px;
		position: relative;
		padding: 0 20px;
		margin-right: 10px;
		z-index: 2;
		cursor: pointer;
		border: 1px solid rgba(255,255,255,0.00);
		transition: all ease 0.3s;
	}
	header .header_nav ul li.navon	{
		display: inline-block;
		height: 55px;
		border: 1px solid #767676;
		border-radius: 16px;
		position: relative;
		padding: 0 20px;
		margin-right: 10px;
		z-index: 2;
		transition: all ease 0.3s;	
	}
	header .header_nav ul li.navon::before {
		content: "";
		display: table-cell;
		width: 100%;
		height: 55px;
		border: 3px solid rgba(240,240,240,0.49);
		position: absolute;
		z-index: 1;
		top: 1px;
		left: 1px;
		border-radius: 16px;
		box-sizing: border-box;
		transition: all ease 0.5s;
	}
	header .header_nav ul li:nth-last-child(1) {
		margin-right: 0;
	}
	header .header_nav ul li span {
		display: block;
		text-align: center;
	}
	header .header_nav ul li span.txt_en {
		font-size: 20px;
		text-align: center;
		line-height: 14px;
		padding-top: 15px;
		padding-bottom: 6px;
	}
	header .header_nav ul li span.txt_jp {
		font-size: 15px;
		line-height: 1.0;
		color:rgba(0,0,0,0.40);
		transition: 0.5s all ease;
		opacity: 0;
	}
	header .header_nav ul li:hover span.txt_jp,
	header .header_nav ul li.navon span.txt_jp {
		opacity: 1.0;
		transition: 0.5s all ease;
	}
	/* HARK：ラベルを <a> で包む。CSSやJSが落ちても素のリンクとして機能する */
	header .header_nav ul li.hark > a {
		display: block;
		color: inherit;
		text-decoration: none;
	}
	.header_nav .btn {
		display: none;
	}
}
/* 1260〜1400px：7項目が収まるようナビの余白を詰める */
@media screen and (min-width:1260px) and (max-width:1400px) {
	header .header_nav ul li,
	header .header_nav ul li.navon {
		padding: 0 12px;
		margin-right: 4px;
	}
	header .header_nav ul li span.txt_en {
		font-size: 18px;
	}
	header .logo {
		padding-left: 32px;
	}
	header .inner {
		padding-right: 16px;
	}
}
@media screen and (max-width: 1259px) {
	header {
		width: 100%;
		height: 80px;
		background-color: rgba(255,255,255,0.49);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.start header {
		transform: translateY(-80px);
		transition: 0.3s all ease 2.5s;
	}
	.stop header {
		transform: translateY(0);
		transition: 0.3s all ease 2.5s;
	}
	
	header .logo {
		padding-top: 24px;
		padding-left: 53px;
	}
	header .logo img {
		width: 300px;
		height: auto;
	}
	.header_nav {
		position: fixed;
		right: 0;
		top: 160px;
		z-index: 999;
		transform: translateX(0);
		transition: 0.3s all ease;
	}
	.start .header_nav {
		position: fixed;
		top: 160px;
		z-index: 999;
		transform: translateX(100%);
		transition: 0.3s all ease 2.5s;
	}
	.stop .header_nav {
		position: fixed;
		top: 160px;
		z-index: 999;
		transform: translateX(0);
		transition: 0.3s all ease 2.5s;
	}
	
	.open .header_nav {
		position: fixed;
		z-index: 999;
		transform: translateX(-11px);
		transition: 0.3s all ease;
	}
	.header_nav .txt_jp {
		display: none;
	}
	.header_nav ul {
	}
	.open .header_nav ul {
	}
	.header_nav ul {
		width: 81px;
		display: flex;
		flex-wrap: wrap;
		margin-top: 7px;
	}
	.header_nav li {
		flex: 0 0 100%;
		cursor: pointer;
		margin-bottom: 7px;
		transform: rotate(-90deg);
		transition: 0.3s all ease;
		opacity: 0.0;
	}
	.header_nav li:nth-child(1) {
		transform: translateY(-88px) rotate(-90deg);
		transition: 0.3s all ease;
	}
	.header_nav li:nth-child(2) {
		transform: translateY(-176px) rotate(-90deg);
		transition: 0.3s all ease;
	}
	.header_nav li:nth-child(3) {
		transform: translateY(-264px) rotate(-90deg);
		transition: 0.3s all ease;
	}
	.header_nav li:nth-child(4) {
		transform: translateY(-352px) rotate(-90deg);
		transition: 0.3s all ease;
	}
	.header_nav li:nth-child(5) {
		transform: translateY(-440px) rotate(-90deg);
		transition: 0.3s all ease;
	}
	.header_nav li:nth-child(6) {
		transform: translateY(-528px) rotate(-90deg);
		transition: 0.3s all ease;
	}
	.open .header_nav li {
		transform: translateY(0) rotate(0);
		transition: 0.3s all ease;
		opacity: 1.0;
	}
	.header_nav li:hover {
		opacity: 0.6;
	}
	.header_nav li span {
		font-size: 14px;
		display: table-cell;
		width: 81px;
		height: 81px;
		text-align: center;
		vertical-align: middle;
		background: url("../img/sptbn_white.png") center center no-repeat;
		background-size: 81px 81px;
	}
	.header_nav li:nth-child(1) {
		font-size: 16px;
	}
	.header_nav .btn {
		font-family: forma-djr-text, "Archivo", "Helvetica Neue", Arial, sans-serif;
		font-weight: 900;
		font-style: normal;		
		display: table-cell;
		width: 81px;
		height: 81px;
		text-align: center;
		vertical-align: middle;
		position: relative;
		z-index: 999;
		cursor: pointer;
	}
	.header_nav .btn {
		transform: rotate(-90deg);
		transition: 0.3s all;
		color: #000;
		background: url("../img/sptbn_white.png") center center no-repeat;
		background-size: 81px 81px;
		
	}
	.open .header_nav .btn {
		color: #FFF;
		transform: rotate(0);
		transition: 0.3s all;
		background: url("../img/sptbn_black.png") center center no-repeat;
		background-size: 81px 81px;;
	}
	.header_nav .btn span:nth-child(1) {
		font-size: 16px;
		position: absolute;
		bottom: 37px;
		left: 50%;
		transform: translateX(-50%);
	}
	.header_nav .btn span:nth-child(2) {
		content: "";
		display: table-cell;
		width: 34px;
		height: 4px;
		background-color: #000;
		border-radius: 2px;
		position: absolute;
		left: 50%;
		bottom: 26px;
		transform: translateX(-50%);
		transition: 0.6s all;
	}
	.header_nav .btn span:nth-child(3) {
		content: "";
		display: table-cell;
		width: 34px;
		height: 4px;
		background-color: #000;
		border-radius: 2px;
		position: absolute;
		left: 50%;
		bottom: 16px;
		transform: translateX(-50%);
		transition: 0.6s all;
	}
	.open .header_nav .btn span:nth-child(2) {
		content: "";
		display: table-cell;
		width: 34px;
		height: 4px;
		background-color: #FFF;
		border-radius: 2px;
		position: absolute;
		left: 50%;
		bottom: 26px;
		transform: translateX(-50%) translateY(4px) rotate(-18deg);
		transition: 0.6s all;
	}
	.open .header_nav .btn span:nth-child(3) {
		content: "";
		display: table-cell;
		width: 34px;
		height: 4px;
		background-color: #FFF;
		border-radius: 2px;
		position: absolute;
		left: 50%;
		bottom: 16px;
		transform: translateX(-50%) translateY(-6px) rotate(18deg);
		transition: 0.6s all;
	}
}
@media screen and (max-width: 767px) {
	header {
	  background: none;
	}
	header .logo {
	  padding-top: 30px;
	  padding-left: 26px;
	}
	header .logo img {
	  width: 180px;
	  height: auto;
	}	
	.stop .header_nav {
	  position: fixed;
	  top: 30px;
	  z-index: 999;
	  transform: translateX(0);
	  transition: 0.3s all ease 2.5s;
	}
	.header_nav {
	  top: 30px;
	}	
}

/* HARK ナビ（SP含む共通）。<a> がラベルを包むので、CSSやJSが落ちても素のリンクとして動く */
.header_nav ul li.hark > a{display:block;color:inherit;text-decoration:none}
/* ナビが7項目になったので、SPの開閉アニメーションに7番目を追加 */
@media screen and (max-width:900px){
	.header_nav li:nth-child(7){transform:translateY(-616px) rotate(-90deg);transition:0.3s all ease}
	.open .header_nav li:nth-child(7){transform:translateY(0) rotate(0)}
}

/* ── 下層ページ（pages/*.html）と共用 ─────────────────────── */

/* ナビ項目のリンク。ラベルを <a> が包む＝CSSやJSが落ちても素のリンクとして動く
   （プログレッシブ・エンハンスメント。透明な <a> を重ねる当て木にしない） */
header .header_nav ul li > a{
	display: block;
	color: inherit;
	text-decoration: none;
}
@media screen and (min-width: 1260px) {
	/* 下層はロゴを <p class="logo"> に入れる（h1 はページ見出しに使うため）ので、
	   .logo 側にも同じ高さ指定を持たせる */
	header .logo img{ width: auto; height: 38px }
}