/*
Theme Name: RUSUTSU-R
Version: 1.0
*/


/* CSSリセット */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	font-weight: 500;
	font-size: 16px;
    line-height: 30px;
	color:#282828;
	letter-spacing:0.05em;
	background:#f8f8f8;
	padding-top:94px;
}

@media (max-width:600px){
	body{
		padding-top:70px;
	}
}


/* ===== ヘッダー（ロゴ最上位に） ===== */

header {
  position: fixed; /* 最初から固定にしてしまう */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
  transform: translateY(0);
  transition: transform 0.4s ease;
}

header.is-hidden {
  transform: translateY(-100%); /* 上に消える */
  transition: transform 0.4s ease;
}

header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(0);
	transition: transform 0.4s ease;
}



.header-container {
  display: flex;
  justify-content: space-between;
  padding: 0 22px;
	padding-top:17px;
	padding-bottom:8px;
}

header .left a{
	max-width:293px;
	display:block;
	display:block;
}

header .left a img{
	width:100%;
	height:100%;
	object-fit:contain;
}


/* ===== ハンバーガー（×に変形） ===== */
.hamburger {
  position: relative;
  width: 63px;
  height: 63px;
  border: none;
  background: url("/rrwp/wp-content/themes/RUSUTSU-R/img/noise-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
	z-index:1200;
}

.hamburger__bar {
  display: block;
  width: 30px;
  height: 3px;
  background: #fff;
  transition: transform .25s ease, opacity .25s ease;
}

.hamburger.is-active {
  gap: 0;
}

.hamburger.is-active .hamburger__bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
}

.hamburger.is-active .hamburger__bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.hamburger.is-active .hamburger__bar:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, -50%);
}

.hamburger.is-active .hamburger__bar:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* ===== フルスクリーン“メニュー画面” ===== */
/* 画面全体をメニュー化。フェードでふわっと出現 */
.offcanvas {
  position: fixed;
  inset: 0;               /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100vh;
  background: #fff;       /* 画面全体を白背景のメニューとして表示 */
  z-index: 1100;          /* header(1200)より下 */
  display: flex;          /* 中央寄せのためのフレックス */
  align-items: center;    /* 縦中央 */
  justify-content: center;/* 横中央 */
  opacity: 0;             /* 初期は見えない */
  pointer-events: none;
  transition: opacity .25s ease; /* フェード */
}
.offcanvas.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* メニュー内容（最大900pxで中央。文字は左揃え） */
.offcanvas__list {
  list-style: none;
  margin: 0;
  padding: 32px 24px;
  text-align: left;
  max-width: 600px;
  width: min(90vw, 600px);
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:32px 0px;
}

.offcanvas__list li{
	width:48%;
}

.offcanvas__list a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #111;
  font-size: 18px;
	font-weight:bold;
	color:#215093;
}
.offcanvas__list a:hover { opacity: .85; }

/* メニュー表示中は背面スクロール停止 */
.body--no-scroll {
  overflow: hidden;
  touch-action: none;
}

@media (max-width:600px){
	.header-container{
		padding:15px;
	}
	header .left a{
		max-width:152px;
	}
	.hamburger{
		width:40px;
		height:40px;
		gap:4.44px;
	}
	.hamburger__bar{
		width:19.05px;
		height:1.9px;
	}
	.offcanvas__list{
		gap:0px;
		padding:0;
	}
	.offcanvas__list li{
		width:100%;
	}
	.offcanvas__list li a{
				font-size:16px;
		padding:12px 0px;
	}
}