@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
	--main-width: 700px;
	--yellow: #ffd400;
	--blue: #18a5e5;
	--green: #8cc63f;
	--pink: #ff5aa5;
	--orange: #ef8200;
	--brown: #3b2a1c;
	--ink: #2c1d12;
	--gray-bg: #e3e3e3;
	--white: #ffffff;
	--text: #040000;
	--shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
	--yellow-band: 100vh; /* 背景の黄色帯の高さ（必要に応じて調整） */
	--font-body: "Noto Sans JP", sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-body);
	background: var(--gray-bg);
	color: var(--text);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--gray-bg);
}

/* ----------------------------------------
   全体レイアウト
---------------------------------------- */
.layout {
	width: 100%;
	min-height: 100vh;
	display: grid; /* 左・中央・右の3カラムをCSS Gridで配置 */
	grid-template-columns: minmax(0, 1fr) var(--main-width) minmax(0, 1fr);
	align-items: start;
	justify-items: center;
	/*background: linear-gradient(var(--yellow) 0, var(--yellow) var(--yellow-band), var(--gray-bg) var(--yellow-band));*/
	background: var(--yellow);
	padding: 0;
	position: relative;
	z-index: 1;
}

.side {
	width: 550px;
	padding: 32px 12px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	pointer-events: auto; /* メニュー操作を可能に */
	position: fixed; /* フローティング維持 */
	top: 0;
	bottom: 0;
	overflow-y: auto;
	z-index: 3;
}

.side-left {
	grid-column: 1; /* 左カラム */
  left: 50%;
  transform: translateX(
    calc(
      -1 * (var(--main-width) / 2)
      - 100%
    )
  );
}

.side-right {
	grid-column: 3; /* 右カラム */
  left: 50%;
  transform: translateX(calc(var(--main-width) / 2));
}

.main {
	grid-column: 2; /* 中央カラム */
	width: var(--main-width);
	margin: 0 auto;
	background: var(--white);
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.08);
	position: relative;
	z-index: 2;
	overflow: hidden;
}

.section {
	margin: 0;
}

/* ----------------------------------------
   左サイド（MENU）
---------------------------------------- */

.side-left .side-bg {
  position: absolute;
  inset: 0;
  background: url("../images/menu-bg-l.png") no-repeat left 193px;
  background-size: 550px;
  pointer-events: none;
  z-index: 0;
}
.side-menu {
	width: 100%;
	text-align: center;
	position: relative;
	margin-bottom: 28px;
}
.side-left-headline{
	display: block;
	height: 60px;
	width: 218px;
}
.is-news .menu-content img{
	width: 93px;
}
.is-lineup .menu-content img{
	width: 116px;
}
.is-shop .menu-content img{
	width: 88px;
}
.menu-content{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.menu-circles {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.side .menu-circles {
  align-items: center;
}
.menu-rotator {
  position: absolute;
  inset: 0;
  -webkit-animation: spin 12s linear infinite;
          animation: spin 12s linear infinite;
}
/* 左メニューの各メニューで回転開始の角度をずらす（初期配置をずらす） */
.side-left .is-news .menu-rotator {
	-webkit-animation-delay: -0.8s;
	        animation-delay: -0.8s;
}
.side-left .is-lineup .menu-rotator {
	-webkit-animation-delay: -4s;
	        animation-delay: -4s;
}
.side-left .is-shop .menu-rotator {
	-webkit-animation-delay: -7.2s;
	        animation-delay: -7.2s;
}

/* 全画面メニュー（#g-nav）内の回転開始もずらす */
#g-nav .gnav-menu-circles .is-news .menu-rotator {
	-webkit-animation-delay: -0.8s;
	        animation-delay: -0.8s;
}
#g-nav .gnav-menu-circles .is-lineup .menu-rotator {
	-webkit-animation-delay: -4s;
	        animation-delay: -4s;
}
#g-nav .gnav-menu-circles .is-shop .menu-rotator {
	-webkit-animation-delay: -7.2s;
	        animation-delay: -7.2s;
}
.menu-item{
	display: block;
	position: relative;
		width: 172px;
	height: 172px;
}
.menu-circle{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 172px;
	height: 172px;
	background-color: #fff;
	border-radius: 50%;
}
.is-news .menu-circle{
	border: 4px dashed var(--blue);
}
.is-lineup .menu-circle{
	border: 4px dashed var(--green);
}
.is-shop .menu-circle{
	border: 4px dashed var(--orange);
}

.is-news .scissors {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 41px;
  height: 28px;
  background: url("../images/hasami-bl.svg") no-repeat center / contain;
  transform: translateX(-50%);
  z-index: 2;
}
.is-lineup .scissors {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 41px;
  height: 28px;
  background: url("../images/hasami-gr.svg") no-repeat center / contain;
  transform: translateX(-50%);
  z-index: 2;
}
.is-shop .scissors {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 41px;
  height: 28px;
  background: url("../images/hasami-or.svg") no-repeat center / contain;
  transform: translateX(-50%);
  z-index: 2;
}
.menu-sub {
	font-size: 12px;
	margin-top: 8px;
	font-weight: 700;
}
.is-news .menu-sub {
	color: var(--blue);
}
.is-lineup .menu-sub {
	color: var(--green);
}
.is-shop .menu-sub {
	color: var(--orange);
}

/* ----------------------------------------
   右サイド（MOVIES）
---------------------------------------- */

.side-right .side-bg {
  position: absolute;
  inset: 0;
  background: url("../images/menu-bg-r.png") no-repeat left 180px;
  background-size: 550px;
  pointer-events: none;
  z-index: 0;
}
.side-right-headline{
	display: block;
	height: 64px;
	width: 223px;
}

.side-right-mov{
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.side-right-mov img{
	display: block;
	width: 240px;
	height: auto;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 0.5rem;
	box-shadow: var(--shadow);
}


/* ----------------------------------------
   ヒーロー
---------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: 1066px;
  overflow: hidden;
  background: #fff;
}

.hero-title {
  position: absolute;
  z-index: 4;
  display: block;
  margin: 0 auto;
  width: 672px;
	height: 429px;
	top: 28px;
	left: 17px;
}
.hero-photo {
  position: absolute;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hero-photo--large {
  width: 457px;
  height: 457px;
  right: 25px;
  top: 313px;
  z-index: 1;
}

.hero-photo--small {
  width: 270px;
  height: 270px;
  left: 24px;
  top: 691px;
  z-index: 3;
}

.hero-char {
  position: absolute;
}

.hero-char--sunsun {
  right: 11px;
  top: 586px;
  width: 422px;
  z-index: 4;
}

.hero-char--kumorin {
  left: 14px;
  top: 416px;
  width: 320px;
  z-index: 5;
}

.hero-char--yellow {
  left: 73px;
  top: 922px;
  width: 174px;
  z-index: 3;
}

.hero-char--devil {
  right: 161px;
  top: 218px;
  width: 186px;
  z-index: 1;
}
.hero-char {
  will-change: transform;
}

/* ----------------------------------------
   ヒーローキャラクターのアニメーション
---------------------------------------- */
.hero-char--sunsun {
	-webkit-animation: float-sunsun 6s ease-in-out infinite;
	        animation: float-sunsun 6s ease-in-out infinite;
	transform-origin: 50% 60%;
	-webkit-animation-delay: -1.8s;
	        animation-delay: -1.8s;
}

.hero-char--kumorin {
	-webkit-animation: float-kumorin 5.5s ease-in-out infinite;
	        animation: float-kumorin 5.5s ease-in-out infinite;
	transform-origin: 50% 50%;
	-webkit-animation-delay: -0.3s;
	        animation-delay: -0.3s;
}

.hero-char--yellow {
	-webkit-animation: peek-yellow 4.8s ease-in-out infinite;
	        animation: peek-yellow 4.8s ease-in-out infinite;
	transform-origin: 100% 100%;
	-webkit-animation-delay: -3.2s;
	        animation-delay: -3.2s;
}

.hero-char--devil {
	-webkit-animation: peek-devil 4.2s ease-in-out infinite;
	        animation: peek-devil 4.2s ease-in-out infinite;
	transform-origin: 50% 100%;
	-webkit-animation-delay: -1.1s;
	        animation-delay: -1.1s;
}

@-webkit-keyframes float-sunsun {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-14px) rotate(-1deg);
	}
	100% {
		transform: translateY(0) rotate(0deg);
	}
}

@keyframes float-sunsun {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-14px) rotate(-1deg);
	}
	100% {
		transform: translateY(0) rotate(0deg);
	}
}

@-webkit-keyframes float-kumorin {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-10px) rotate(1deg);
	}
	100% {
		transform: translateY(0) rotate(0deg);
	}
}

@keyframes float-kumorin {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-10px) rotate(1deg);
	}
	100% {
		transform: translateY(0) rotate(0deg);
	}
}

@-webkit-keyframes peek-yellow {
	0%,
	25%,
	100% {
		transform: translateY(-100px);
	}
	40%,
	60% {
		transform: translateY(0);
	}
}

@keyframes peek-yellow {
	0%,
	25%,
	100% {
		transform: translateY(-100px);
	}
	40%,
	60% {
		transform: translateY(0);
	}
}

@-webkit-keyframes peek-devil {
	0%,
	25%,
	100% {
		transform: translateY(100px);
	}
	40%,
	60% {
		transform: translateY(0);
	}
}

@keyframes peek-devil {
	0%,
	25%,
	100% {
		transform: translateY(100px);
	}
	40%,
	60% {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-char--sunsun,
	.hero-char--kumorin,
	.hero-char--yellow,
	.hero-char--devil {
		-webkit-animation: none;
		        animation: none;
		transform: none;
	}
}

.hero-credit {
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 234px;
	height: 17px;
	z-index: 7;
}

.hero-inner {
  position: relative;
  width: 700px;
  height: 1066px;
  transform-origin: top center;
}




/* ----------------------------------------
   NEWS
---------------------------------------- */
.news {
	background: var(--blue);
	padding: 26px 0 32px;
	position: relative;
}

.news .section-title img{
	display: block;
	margin: 0 auto;
	width: 311px;
}

.news .section-title{
	margin: 2rem auto 4rem;
}

.news-list {
	position: relative;
	width: 100%;
	padding: 0 30px 30px;
	overflow: hidden;
}

.news-card {
	background: #fff;
	border-radius: 14px;
	padding: 12px;
	font-size: 12px;
	border: 3px solid #ffd96a;
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.08);
}

.news-card p {
	margin: 0;
	line-height: 1.4;
}
.news-card p a{
	text-decoration: none;
}

.news-card img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 8px;
	border-radius: 8px;
	aspect-ratio: 4/3;
	-o-object-fit: cover;
	   object-fit: cover;
}

.news-list .swiper-wrapper {
	align-items: stretch;
}

.news-list .swiper-slide {
	width: 240px;
	display: flex;
	flex-direction: column;
}

.news-list .swiper-pagination {
	bottom: 0;
}

.news-list .swiper-pagination-bullet {
	background: #fff;
	opacity: 0.6;
}

.news-list .swiper-pagination-bullet-active {
	opacity: 1;
}

/* ----------------------------------------
   フィルム風サムネイル帯
---------------------------------------- */
.thumb-grid {
	position: relative;
	padding: 32px 0 32px;
	background: #000;
	overflow: hidden;
}

.thumb-grid::before,
.thumb-grid::after {
	content: "";
	position: absolute;
	left: 0px;
	right: 0;
	height: 12px;
	background: repeating-linear-gradient(90deg, #FFF 0 18px, transparent 18px 33px);
	border-radius: 0;
}

.thumb-grid::before {
	top: 10px;
}

.thumb-grid::after {
	bottom: 10px;
}

.thumb-grid .swiper-wrapper {
	align-items: center;
	transition-timing-function: linear;
}

.thumb-grid .swiper-slide {
	width: auto;
	display: flex;
	padding: 0 6px;
}

.thumb-grid img {
	width: 264px;
	height: 206px;
	-o-object-fit: cover;
	   object-fit: cover;
}

/* ----------------------------------------
   LINE UP
---------------------------------------- */
.lineup {
	background: var(--green);
	padding: 26px 0 44px;
	position: relative;
	text-align: center;
}

.lineup .section-title img{
	display: block;
	margin: 0 auto;
	width: 357px;
}

.lineup-subtitle img{
	display: block;
	margin: 20px auto 40px;
	width: 457px;
}

.lineup-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 0 32px;
}

.lineup-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 29px;
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
}

.lineup-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.lineup-thumb {
	display: block;
}

.lineup-main img {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	border: 6px solid #fff;
	box-shadow: var(--shadow);
}

.lineup-title {
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	line-height: 1.5;
}
.lineup-title img {
	border: none;
	box-shadow: none;
}

.lineup-title:hover {
	text-decoration: underline;
}

.lineup-cta {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5rem auto 10rem;
	width: 100%;
	max-width: 360px;
}

.lineup-cta-button {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #1eaa39;
	text-decoration: none;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.5;
	background-color: #fff;
	padding: 8px 28px;
	border-radius: 999px;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
}

.lineup-cta-button:hover {
	opacity: 0.8;
}


/* ----------------------------------------
  フッターメニュー
---------------------------------------- */
.footer-menu {
	background: #fff;
	padding: 0 0 70px;
	position: relative;
}

.footer-menu-inner {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	background: #fff;
	padding: 0 36px 44px;
	position: relative;
}

.footer-menu-characters {
	margin: 0 auto 100px;
	width: 100%;
	max-width: 700px;
	aspect-ratio: 1419 / 194; /* footer-image.webp の縦横比 */
	background: url("../images/footer-image.webp") no-repeat center / contain;
}

.footer-menu-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 36px;
	align-items: end;
}

.footer-menu-block h3 {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.5;
	color: #666;
	text-align: center;
}

.footer-menu-block ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	gap: 18px;
	align-items: center;
	justify-content: center;
}
.footer-menu-block li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 22px;
	height: 22px;
}
.footer-menu-block li img{
	width: 20px;
}
.footer-menu-block:not(:nth-child(2)){
	padding-bottom: 2px;
}
.footer-menu-block:nth-child(2){
	display: flex;
	justify-content: center;
}
.footer-menu-block ul li a {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
}
.footer-menu-copy {
	margin: 10vh 0 0;
	text-align: center;
	font-size: 12px;
	color: #666;
	line-height: 1.6;
}

@media (max-width: 959px) {
	.footer-menu-inner {
		padding: 0 28px 38px;
	}

	.footer-menu-characters {
		margin: 0 auto 100px;
	}

	.footer-menu-columns {
		grid-template-columns: 1fr;
	}
	.footer-menu-block li{
		width: 48px;
		height: 48px;
	}
}

@media (max-width: 700px) {
	.footer-menu {
		padding: 0 0 106px;
	}

	.footer-menu-inner {
		width: 100%;
		padding: 0 0 32px;
	}

	.footer-menu-characters img {
		width: 72px;
		height: 72px;
		padding: 8px;
	}

	.footer-menu-copy {
		line-height: 1.5;
	}
	.footer-menu-columns{
		padding: 0 16px;
	}
	.footer-menu-block ul{
		gap: 0;
	}
	.footer-menu-columns .footer-menu-block:nth-child(1) {
    order: 2;
  }
  .footer-menu-columns .footer-menu-block:nth-child(2) {
    order: 1;
  }
	.footer-menu-columns .footer-menu-block:nth-child(3) {
		order: 3;
	}
	.footer-menu-block ul li a{
		display: inline-flex;
		width: 48px;
		height: 48px;
		padding: 12px;
	}
	.footer-menu-block ul li img{
		width: 24px;
	}
}

/* ----------------------------------------
   バナー
---------------------------------------- */
.banner {
	padding: 24px 0 32px;
	background: #fff;
}

.banner img {
	width: calc(100% - 40px);
	margin: 0 auto;
	border-radius: 12px;
	box-shadow: var(--shadow);
}


/* ----------------------------------------
   SP
---------------------------------------- */
@media (max-width: 959px) {
	.layout {
		display: block; /* 1カラム表示に簡略化 */
		background: var(--yellow);
	}

	.main {
		width: 100%;
		max-width: 700px;
		box-shadow: none;
	}

	.news-list {
		padding: 0 16px 26px;
	}

	.news-list .swiper-slide {
		width: 210px;
	}

	.thumb-grid img {
		width: 180px;
		height: 130px;
	}

	.lineup-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.lineup-main img {
		width: 100%;
		max-width: 300px;
	}
}


@media (max-width: 700px) {
  .layout {
    display: block;
    background: var(--yellow);
  }

  .side-left,
  .side-right {
    display: none;
  }

  .main {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: none;
  }
	.hero {
    width: 375px;
    height: 571px; /* SP用に再定義 */
		margin: 0 auto;
  }

  .hero-title {
    width: 360px;
		height: 230px;
    left: 10px;
    top: 15px;
  }
	.hero-photo--large {
  width: 245px;
  height: 245px;
  right: 14px;
  top: 168px;
  z-index: 1;
	}

	.hero-photo--small {
		width: 145px;
		height: 145px;
		left: 13px;
		top: 371px;
		z-index: 3;
	}
	.hero-char--sunsun {
		right: 6px;
		top: 314px;
		width: 226px;
		z-index: 4;
	}

	.hero-char--kumorin {
		left: 5.5px;
		top: 223px;
		width: 173px;
		z-index: 5;
	}

	.hero-char--yellow {
		left: 39px;
		top: 494px;
		width: 93px;
		z-index: 3;
	}

	.hero-char--devil {
		right: 85.5px;
		top: 117px;
		width: 100px;
		z-index: 1;
	}
	.hero-char {
		will-change: transform;
	}

	.hero-credit {
		position: absolute;
		right: 10px;
		bottom: 16px;
		width: 125px;
		height: 9px;
		z-index: 7;
	}

	.hero-inner {
		position: relative;
		width: 375px;
		height:  571px;
		transform-origin: top center;
	}
	/* ----------------------------------------
	NEWS
	---------------------------------------- */
	.news {
		padding: 20px 0 28px;
		position: relative;
	}
	.news .section-title img{
		width: 166px;
	}

	.news .section-title{
		margin: 0 auto 28px;
	}
	/* ----------------------------------------
	LINE UP
	---------------------------------------- */
	.lineup {
		padding: 13px 0 22px;
	}

	.lineup .section-title img{
		width: 191px;
	}

	.lineup-subtitle img{
		margin: 10px auto 20px;
		width: 245px;
	}
}


/* Swiperの速度感を一定に見せるための保険 */
.thumb-grid .swiper-wrapper {
	transition-timing-function: linear;
}

/* フルスクリーンメニューはデスクトップ幅では非表示 */
.openbtn,
.circle-bg,
#g-nav {
	display: none;
}

/*モバイルのメニュー部分*/

@-webkit-keyframes breathe {
	0% {
		transform: rotate(45deg) scale(1);
	}
	50% {
		transform: rotate(45deg) scale(1.06);
	}
	100% {
		transform: rotate(45deg) scale(1);
	}
}

@keyframes breathe {
	0% {
		transform: rotate(45deg) scale(1);
	}
	50% {
		transform: rotate(45deg) scale(1.06);
	}
	100% {
		transform: rotate(45deg) scale(1);
	}
}


@media (max-width: 1500px) {
	.openbtn {
		display: inline-block;
		position: fixed;
		right: 16px;
		bottom: 16px;
		width: 76px;
		height: 76px;
		border: none;
		border-radius: 50%;
		padding: 0;
		cursor: pointer;
		background: #fff;
		border: 2px solid #D31420;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
		transition: background-color 0.25s ease, transform 0.25s ease;
		z-index: 1200;
	}
  .openbtn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -60%);
    background: url("../images/hasami-or.svg") no-repeat center / contain;
    transition: transform 0.35s ease;
  }

	.openbtn::after {
    content: "MENU";
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #D31420;
    line-height: 1;
    transition: opacity 0.25s ease;
  }
	.openbtn.active {
		background: #f4a300;
		transform: none;
		border: 2px solid #fff;
		-webkit-animation: breathe 2.4s ease-in-out infinite;
		        animation: breathe 2.4s ease-in-out infinite;
	}
  .openbtn.active::after {
    content: "CLOSE";
		color: #fff
  }
	.openbtn.active::before {
    transform: translate(-50%, -60%) rotate(45deg);
  }

	.circle-bg {
		display: block;
		position: fixed;
		right: -150vmax;
		bottom: -150vmax;
		width: 300vmax;
		height: 300vmax;
		border-radius: 50%;
		background: #fff9e5;
		transform: scale(0);
		transition: transform 0.65s ease;
		z-index: 1090;
		pointer-events: none;
	}

	.circle-bg.circleactive {
		transform: scale(1);
	}

	#g-nav {
		display: flex;
		position: fixed;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 72px 24px 64px;
		box-sizing: border-box;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.35s ease 0.05s, visibility 0s linear 0.35s;
		z-index: 1100;
		color: #2b2b2b;
	}

	#g-nav.panelactive {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.35s ease 0s, visibility 0s;
	}

}

@media (max-width: 1499px) {
	.side-left,
	.side-right {
		display: none;
	}
}

/* ----------------------------------------
   モバイルメニュー（g-nav）用スタイル
   デスクトップのサイドメニューと同じデザインを横並びで表現
---------------------------------------- */

/* 回転アニメーション（デスクトップメニューでも使用） */
@-webkit-keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* モバイルメニュー全体のレイアウト */
#g-nav-list {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: center;
	width: 100%;
	max-width: 800px;
}

/* MENUエリア（左サイドメニューと同デザイン、横並び） */
.gnav-menu {
	width: 100%;
	text-align: center;
}

.gnav-menu-headline {
	display: block;
	height: 60px;
	width: 218px;
	margin: 0 auto 28px;
}

/* モバイル用メニューサークルコンテナ（横並び） */
.gnav-menu-circles.menu-circles {
	display: flex;
	flex-direction: row; /* デスクトップはcolumn、モバイルはrow */
	gap: 24px; /* 横並びなので間隔を調整 */
	justify-content: center;
	align-items: center;
	flex-wrap: wrap; /* 画面幅が狭い場合は折り返し */
}

/* モバイル用メニューアイテム（デスクトップと同じスタイルを継承）
   .menu-item、.menu-circle、.scissors、.menu-content などのスタイルは
   デスクトップメニューと同じクラスを使用しているため、グローバルなスタイルが自動適用される */

/* MOVIEエリア（右サイドメニューと同デザイン、横並び） */
.gnav-movie {
	width: 100%;
	text-align: center;
}

.gnav-movie-headline {
	display: block;
	height: 64px;
	width: 223px;
	margin: 0 auto 28px;
}

/* モバイル用動画リスト（横並び） */
.gnav-movie-list.side-right-mov {
	display: flex;
	flex-direction: row; /* デスクトップはcolumn、モバイルはrow */
	gap: 24px; /* 横並びなので間隔を調整 */
	justify-content: center;
	align-items: center;
	flex-wrap: wrap; /* 画面幅が狭い場合は折り返し */
}

.gnav-movie-list.side-right-mov img {
	width: 180px; /* モバイルでは少し小さめに */
	height: auto;
	-o-object-fit: cover;
	   object-fit: cover;
}

/* モバイル表示時のレスポンシブ調整 */
@media (max-width: 700px) {
	#g-nav-list {
		gap: 36px;
	}

	.gnav-menu-circles.menu-circles {
		gap: 16px; /* より小さな画面では間隔をさらに狭く */
	}

	/* モバイルではメニューアイテムを少し小さく */
	#g-nav .menu-item {
		width: 140px;
		height: 140px;
	}

	#g-nav .menu-circle {
		width: 140px;
		height: 140px;
	}

	#g-nav .is-news .menu-content img {
		width: 76px;
	}

	#g-nav .is-lineup .menu-content img {
		width: 95px;
	}

	#g-nav .is-shop .menu-content img {
		width: 72px;
	}

	#g-nav .menu-sub {
		font-size: 10px;
		margin-top: 6px;
	}

	.gnav-movie-list.side-right-mov {
		gap: 16px;
	}

	.gnav-movie-list.side-right-mov img {
		width: 140px; /* より小さな画面ではさらに小さく */
	}
}

/* ----------------------------------------
   取扱店舗モーダルウィンドウ
---------------------------------------- */

/* モーダル本体（デフォルトは非表示） */
.modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* モーダルが開いている状態 */
.modal.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* 背景オーバーレイ */
.modal-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(2px);
	        backdrop-filter: blur(2px);
}

/* モーダルウィンドウ本体 */
.modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9);
	width: 90%;
	max-width: 600px;
	max-height: 90vh;
	background-color: var(--white);
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	transition: transform 0.3s ease;
}

.modal.is-active .modal-content {
	transform: translate(-50%, -50%) scale(1);
}

/* 閉じるボタン */
.modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: opacity 0.2s ease;
}

.modal-close:hover {
	opacity: 0.7;
}

.modal-close span {
	position: absolute;
	width: 24px;
	height: 2px;
	background-color: var(--brown);
	border-radius: 1px;
}

.modal-close span:first-child {
	transform: rotate(45deg);
}

.modal-close span:last-child {
	transform: rotate(-45deg);
}

/* モーダルの中身 */
.modal-body {
	padding: 48px 32px 32px;
	overflow-y: auto;
	max-height: calc(90vh - 96px);
}

.modal-title {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 700;
	color: var(--brown);
	text-align: center;
}

.modal-text {
	text-align: center;
}

.modal-text p {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	color: var(--text);
}

/* モバイル表示時の調整 */
@media (max-width: 700px) {
	.modal-content {
		width: 95%;
		max-width: none;
		border-radius: 12px;
	}

	.modal-body {
		padding: 40px 24px 24px;
		max-height: calc(90vh - 80px);
	}

	.modal-title {
		font-size: 20px;
		margin-bottom: 20px;
	}

	.modal-text p {
		font-size: 14px;
	}

	.modal-close {
		top: 12px;
		right: 12px;
		width: 36px;
		height: 36px;
	}

	.modal-close span {
		width: 20px;
	}
}

/* YouTube動画モーダル用のスタイル */
.modal-youtube .modal-content-youtube {
	max-width: 900px;
	width: 95%;
}

.modal-body-youtube {
	padding: 0 !important; /* 既存の.modal-bodyのpaddingを上書き */
	position: relative;
	overflow: hidden;
	padding-bottom: 56.25% !important; /* 16:9のアスペクト比を維持 */
	height: 0;
	max-height: none !important; /* 既存のmax-heightを上書き */
}

.youtube-embed-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.youtube-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* モバイル表示時の調整 */
@media (max-width: 700px) {
	.modal-youtube .modal-content-youtube {
		width: 95%;
	}

	.modal-body-youtube {
		padding-bottom: 56.25%; /* 16:9のアスペクト比を維持 */
	}
}

/* 店舗一覧表 */
#store-list details {
  margin-bottom: 12px;
}

#store-list summary {
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  padding: 8px 0;
}

.store-item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.store-name {
  font-weight: 500;
}

.store-address {
  font-size: 12px;
  color: #777;
}

/* details 全体 */
#store-list details {
  margin-bottom: 12px;
  border-radius: 12px;
}

/* summary（都道府県行） */
#store-list summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;

  padding: 14px 16px;
  margin: 0 -16px;
  border-radius: 10px;

  display: flex;
  align-items: center;
  gap: 8px;

  transition: background-color 0.2s ease;
}

/* ホバー・タップ感 */
#store-list summary:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

#store-list summary:active {
  background-color: rgba(0, 0, 0, 0.08);
}
.store-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}



/* フォーカス枠を消して見た目優先（必要なら戻せる） */
#store-list summary:focus {
  outline: none;
}

/* ▶ アイコン */
#store-list summary::before {
  content: "▶";
  display: inline-block;
  font-size: 12px;
  transition: transform 0.25s ease;
}

/* 開いたとき ▼ に回転 */
#store-list details[open] summary::before {
  transform: rotate(90deg);
}

/* 中身全体 */
#store-list details > .store-item {
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
/* 店舗1件 */
.store-item {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

/* 店舗名 */
.store-name {
  font-weight: 600;
  font-size: 15px;
}

/* 住所 */
.store-address {
  font-size: 12px;
  color: #777;
}


/* 開いたら表示 */
#store-list details[open] > .store-item {
  opacity: 1;
  transform: translateY(0);
}

#store-list summary:hover {
  opacity: 0.8;
}

#store-list summary:active {
  transform: scale(0.98);
}

@media (max-width: 700px) {

  #store-list summary {
    font-size: 14px;
    padding: 12px 4px;
  }

  .store-item {
    padding: 10px 0;
  }
}


#shop-modal-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: #4a3a2a; /* 今のブラウン系に合わせる */

  margin: 0 0 20px;
  padding-bottom: 12px;

  position: relative;
}

/* 下線（やさしめ） */
#shop-modal-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background-color: rgba(74, 58, 42, 0.25);
  border-radius: 2px;
  margin: 10px auto 0;
}

.store-online-button {
  display: inline-block;
  margin: 0 auto;
  padding: 10px 20px;

  font-size: 14px;
  font-weight: 600;
  color: #4a3a2a;
  text-decoration: none;

  border: 1px solid rgba(74, 58, 42, 0.4);
  border-radius: 999px;
  background: #fff;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.store-online-button:hover {
  background-color: rgba(74, 58, 42, 0.08);
}
.modal-body p.store-note {
	font-size: 12px;
	color: #777;
	text-align: center;
	margin: 0 auto 0.5rem;
	padding: 0.5rem;
	background: #efefef;
	border-radius: 10px;
}

/* ----------------------------------------
   トップに戻るボタン
---------------------------------------- */

.gototop {
	position: fixed;
	left: calc(50% - var(--main-width) / 2 + 24px); /* メインコンテンツの左端から24px右 */
	bottom: 32px;
	width: 120px;
	height: 120px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.8) translateY(0);
	transition: opacity 0.3s ease, visibility 0.3s ease;
	cursor: pointer;
	display: block;
}

/* 表示状態（ポンッと登場するアニメーション） */
@-webkit-keyframes popIn {
	0% {
		transform: scale(0.8) translateY(0);
	}
	50% {
		transform: scale(1.1) translateY(0);
	}
	100% {
		transform: scale(1) translateY(0);
	}
}

@keyframes popIn {
	0% {
		transform: scale(0.8) translateY(0);
	}
	50% {
		transform: scale(1.1) translateY(0);
	}
	100% {
		transform: scale(1) translateY(0);
	}
}

/* 上下に動くアニメーション */
@-webkit-keyframes float {
	0%, 100% {
		transform: scale(1) translateY(0);
	}
	50% {
		transform: scale(1) translateY(-8px);
	}
}

@keyframes float {
	0%, 100% {
		transform: scale(1) translateY(0);
	}
	50% {
		transform: scale(1) translateY(-8px);
	}
}

.gototop.is-visible {
	opacity: 1;
	visibility: visible;
	-webkit-animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards, float 2s ease-in-out infinite 0.4s;
	        animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards, float 2s ease-in-out infinite 0.4s;
}

.gototop img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity 0.2s ease;
}

.gototop:hover img {
	opacity: 0.8;
}

/* モバイル表示時の調整 */
@media (max-width: 959px) {
	.gototop {
		left: 24px; /* 左端から24px */
		bottom: 16px;
		width: 100px;
		height: 100px;
	}
}

@media (max-width: 700px) {
	.gototop {
		left: 16px;
		bottom: 16px;
		width: 80px;
		height: 80px;
	}
}

/* ----------------------------------------
   左右の浮遊キャラクター
---------------------------------------- */

.floating-char {
	position: fixed;
	z-index: 4;
	pointer-events: none;
	width: auto;
	height: auto;
	max-width: 150px;
}

/* 左側のキャラクター（画面左端から見切れる位置に固定配置） */
.floating-char--left {
	left: -75px; /* 画面左端から75px左に配置（max-width: 150pxの画像の半分が画面外） */
	top: 50vh;
	transform: translateY(-50%);
}

/* 右側のキャラクター（画面右端から見切れる位置に固定配置） */
.floating-char--right {
	right: -75px; /* 画面右端から75px右に配置（max-width: 150pxの画像の半分が画面外） */
	top: 25vh;
	transform: translateY(-50%);
}

/* モバイル表示時は非表示 */
@media (max-width: 1500px) {
	.floating-char {
		display: none;
	}
}

/* ----------------------------------------
   試作: 1024px〜1499pxの中間レイアウト
   戻す場合はこのブロックと main.js 冒頭の試作処理を削除
---------------------------------------- */
@media (min-width: 1024px) and (max-width: 1499px) {
	:root {
		--main-width: clamp(560px, 50vw, 700px);
		--hero-scale: 0.8;
		--hero-height: 853px;
	}

	.main {
		width: var(--main-width);
	}

	.hero {
		height: var(--hero-height);
	}

	.hero-inner {
		width: 700px;
		height: 1066px;
		transform: scale(var(--hero-scale));
		transform-origin: top left;
	}

	.side-left,
	.side-right {
		--side-slot: calc((100vw - var(--main-width)) / 2);
		--side-content-width: calc(var(--side-slot) - 16px);
		display: flex;
		width: var(--side-slot);
		padding: 24px 8px 40px;
		overflow-x: hidden;
		transform: none;
	}

	.side-left {
		left: 0;
	}

	.side-right {
		left: auto;
		right: 0;
	}

	.side-left .side-bg,
	.side-right .side-bg {
		display: none;
	}

	.side-left-headline,
	.side-right-headline {
		width: min(100%, 218px);
		height: auto;
		margin: 0 auto 24px;
	}

	.side-right-headline {
		width: min(100%, 223px);
	}

	.side .menu-circles,
	.side-right-mov {
		gap: clamp(18px, 2vw, 32px);
	}

	.side .menu-item,
	.side .menu-circle {
		width: clamp(132px, var(--side-content-width), 172px);
		height: clamp(132px, var(--side-content-width), 172px);
	}

	.side .is-news .menu-content img {
		width: 93px;
	}

	.side .is-lineup .menu-content img {
		width: 116px;
	}

	.side .is-shop .menu-content img {
		width: 88px;
	}

	.side .menu-sub {
		font-size: clamp(10px, 1vw, 12px);
		margin-top: 6px;
	}

	.side-right-mov img {
		width: clamp(144px, var(--side-content-width), 240px);
	}

	.openbtn,
	.circle-bg,
	#g-nav {
		display: none;
	}
}

@media (min-width: 1200px) and (max-width: 1279px) {
	:root {
		--hero-scale: 0.8571;
		--hero-height: 914px;
	}
}

@media (min-width: 1280px) and (max-width: 1359px) {
	:root {
		--hero-scale: 0.9143;
		--hero-height: 975px;
	}
}

@media (min-width: 1360px) and (max-width: 1399px) {
	:root {
		--hero-scale: 0.9714;
		--hero-height: 1036px;
	}
}

@media (min-width: 1400px) and (max-width: 1499px) {
	:root {
		--hero-scale: 1;
		--hero-height: 1066px;
	}
}

@media (min-width: 1500px) {
	.openbtn,
	.circle-bg,
	#g-nav {
		display: none;
	}
}