@charset "UTF-8";

@media screen and (max-width: 480px) {}
/*tablet 768px以下*/
@media screen and (max-width: 767px) {}
/*pc 1000px以下*/
@media screen and (max-width: 1000px) {}

img {
  width: 100%;
  height: auto;
}
a {
	display: block;
	height: auto;
  color: #000;
  text-decoration: none;
	transition: all 0.4s ease;
}
a:hover {
  opacity: 0.7;
	transition: all 0.4s ease;
}
/* 文字基準 */
html, h1, h2, h3, h4, h5, h6, p ,span {
  font-family: "Noto Sans", sans-serif;
  line-height: 1.6;
}
.noto-sans- {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* 文字基準 */
/*header*/
header {
	width: 100%;
	position: fixed;
	z-index: 500; /* 追加：main-contentより上に */
  display: block;
}
header.is-scrolled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75px; /* グラデーションの高さ（調整可） */
  pointer-events: none;
  background-color: #fff;
}

.header-contents{
	display: flex;
	justify-content: space-between;
	align-items: center;
		height: 93px;
	padding: 0px 50px;
}

.header-contents a{
	display: block;
	height: auto;
}

.header_logo{
	width: 214px;
}
.header_logo img{
	filter: invert(15%) sepia(6%) saturate(16%) hue-rotate(341deg) brightness(101%) contrast(87%);
}
.header-contents .cart{
	width: 40px;
}
.header-contents .cart img{
	filter: invert(15%) sepia(6%) saturate(16%) hue-rotate(341deg) brightness(101%) contrast(87%);
}
.menu_sp{
	display: none;
}



/* PCレイアウト調整 */
@media (min-width: 501px) {
    body {
        font-size: calc(16px + 0.5vw); /* ウィンドウ幅に応じた文字サイズ */
    }
}

@media screen and (min-width: 501px) {
    .main_bg {
        background-image: url("../img/bg/pc_bg.webp");
        background-size: cover;              /* ★画面いっぱい */
    background-position: center top;     /* 必要なら center center */
    background-repeat: no-repeat;
			width: 100%;
			height: 100vh;
			padding-top: 93px;
    }
}

.side-menu {
  position: fixed;
  top: 0;
  height: 100vh;
  padding-top: 93px;
  text-align: center;
  transition: all 0.3s ease;
}


.left-menu {
  left: 0;
  width: calc(50% - 19.7rem);
	display: flex;
	align-items: center;
	justify-content: center;
}
.left-menu .left-img{
	width: 130px;
}
.left-menu .left-img img{
	filter: invert(15%) sepia(6%) saturate(16%) hue-rotate(341deg) brightness(101%) contrast(87%);
}

.right-menu{
	right: 0;
	width: calc(50% - 19.7rem);
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu_pc .menu-nav{
	text-align: left;
}
.menu_pc .menu-item{
	margin: 50px 0px; 
}

.menu_pc .menu-item img{
	width: auto;
	height: 47px;
	object-fit: cover;
	filter: invert(15%) sepia(6%) saturate(16%) hue-rotate(341deg) brightness(101%) contrast(87%);
}

@media screen and (min-width: 501px) {
  .main-content {
    max-width: 39.3rem;
    margin: 0 auto;

    height: calc(100vh - 186px);  /* ★上下分引く */
    transform: translateY(0px);  /* ★視覚的に下へ */

    overflow-y: auto;
    overflow-x: hidden;

    border-radius: 50px;
  }
	footer {
        max-width: 39.3rem;
        margin: 0px auto;
        background-color: #E0E0E0;
        height: 40px;
		text-align: center;
    }
	
}

footer p{
	font-size: 1.2rem;
  font-weight: 400;
	color: #333333;
}

@media screen and (max-width: 1180px) {
	.right-menu{
		padding: 0px 20px;
	}
	.menu_pc .menu-item img{
		    height: 3.5vw;
	}

}

.hamburger{
  display:none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: absolute;
				        top: 17px;
		right: 30px;
	z-index: 700;
  padding: 0;
}

.hamburger span{
  position:absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background:#000;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.hamburger span:nth-child(1){ top: 14px; }
.hamburger span:nth-child(2){ top: 21px; }
.hamburger span:nth-child(3){ top: 28px; }

/* × に変化 */
.hamburger.is-active span{
  background:#fff;
}
.hamburger.is-active span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity: 0; }
.hamburger.is-active span:nth-child(3){ top: 21px; transform: rotate(-45deg); }

@media screen and (max-width: 900px) {
	.side-menu{
		display: none;
	}
	
	.hamburger{
    display: inline-block;
  }

  /* 全画面メニュー：普段は見えない（display:noneは使わず、opacityでフェード） */
  .menu_sp{
    display: block;
    position: fixed;
    inset: 0;
    z-index: 600;            /* これはそのままでOK */
    padding-top: 93px;
    background: none;        /* ★背景は消す */

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
  }

  .menu_sp.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
	
	.menu_sp::before{
    content:"";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../img/bg/menu_bg.webp") center/cover no-repeat;
  }
	
	/* ★メニュー中身は背景より前 */
  .menu_sp .margin-menu{
    position: relative;
    z-index: 1;
    height: calc(100vh - 93px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
	.margin-menu .menu-nav{
		display: flex;
    flex-direction: column;
    width: max-content; 
	}
	.header-contents a{
		display: inline-block;
	}

 .menu_sp .menu-item{
    margin: 30px 0;
    text-align: left;         /* ← 左寄せ */
    width: 100%;              /* ← 幅を揃える */
  }

  .menu_sp .menu-item img{
    width: auto;
    height: 44px;
    display: block;
  }
	
	.header-contents{
		justify-content: center;
	}

	.header_logo{
		position: relative;
		z-index: 700;
		        text-align: center;
	}
  /* カート＆ハンバーガーの間隔 */
  .header-contents .cart{
    margin-right: 8px;
		    width: 50px;
		position: absolute;
				        top: 29px;
		right: 50px;
		z-index: 700;
  }
	
	/* メニュー開いたときロゴ＆カートを白に */
header.menu-open .header_logo img,
header.menu-open .cart img {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(104%) contrast(102%);
}
	
}

@media screen and (max-width: 500px) {
	.header-contents{
		height: 75px;
	}
	.header_logo{
		width: 183px;
	}
	.header-contents .cart{
		width: 20px;
		        top: 25px;
	}
	.header-contents .cart a{
		width: 20px;
	}
	.hamburger{
		    top: 13px;
		right: 10px;
	}
    .display_pc {
        display: none;
    }
    .display_sp {
        display: block;
    }
	  .main_bg {
    height: auto;
    overflow: visible;
  }

  .main-content {
    height: auto;
    overflow: hidden;
  }
	footer {
        margin: 0px auto;
        background-color: #E0E0E0;
        height: 40px;
		text-align: center;
    }
}