@charset "UTF-8";
html {
	scrollbar-gutter: stable;
}

/*----------------------------------------
 Common
----------------------------------------*/
body {
	font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
	color: #003165;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	animation: loadFinish 1.5s ease;
	overflow-y: scroll;
	overflow-x: hidden;
}
body#mayoi {
	color: #005062;
}

@keyframes loadFinish {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
img {
	width: 100%;
  max-width: 100%;
  height: auto;
	display: block;
}
.sup-ad {
	position: relative;
}
.sup-ad sup {
	position: absolute;
	right: calc(6vw / 8.28);
	font-size: calc(16vw / 8.28);
	font-weight: normal;
	letter-spacing: -.05em;
}
.heading {
	text-align: center;
	margin-bottom: calc(120vw / 8.28);
}
.section-title {
	position: relative;
	font-family: "MuseoModerno", sans-serif;
	font-weight: 500;
	font-size: calc(55vw / 8.28);
	display: inline-block;
}
.section-title::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #003165;
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform 0.8s;
}
body#mayoi .section-title::after {
	background: #005062;
}
.section-title.started::after {
	transform: scale(1, 1);
}

/* common-btn */
.common-btn .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #003165;
	font-family: "Overpass", sans-serif;
	font-weight: 800;
	font-size: calc(32vw / 8.28);
	letter-spacing: 0.15em;
	line-height: 1;
	width: calc(540vw / 8.28);
	height: calc(110vw / 8.28);
	position: relative;
	background-color: #fff;
	border: solid 2px #003165;
	border-radius: 60px;
	margin: 0 auto;
}
body#mayoi .common-btn .btn {
	color: #005062;
	border: solid 2px #005062;
}
.common-btn .btn .arrow {
	position: absolute;
	top: 50%;
	right: calc(40vw / 8.28);
	transform: translateY(-50%);
	width: calc(44vw / 8.28);
	height: calc(44vw / 8.28);
	transition: 500ms;
}
.common-btn .btn .arrow .path {
	fill: #003165;
	transition: 500ms;
}
.common-btn .btn:hover .arrow .path {
	fill: #ed7fa4;
}
body#mayoi .common-btn .btn .arrow .path {
	fill: #005062;
	transition: 500ms;
}
body#mayoi .common-btn .btn:hover .arrow .path {
	fill: #ef811e;
}
.common-btn .btn:hover .arrow {
	right: calc(20vw / 8.28);
}

/* click me! */
.top-char {
	display: none;
}
.other-char {
	display: block;
}
.top-page .top-char {
	display: block;
}
.top-page .other-char {
	display: none;
}

/* snsアイコン */
.js-hover-fade {
  position: relative;
  display: inline-block;
}
.js-hover-fade img {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}
.img-off {
  position: static;
  opacity: 1;
  z-index: 10;
}
.img-on {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 20;
}

/* 1行テキストホバー */
.hover-line {
	position: relative;
	line-height: normal;
}
.hover-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: #003165;
  transition: width 0.4s ease;
}
body#mayoi .hover-line::after {
	background-color: #005062;
}
.menu-txt:hover .hover-line::after,
button:hover .hover-line::after {
  width: 100%;
}

/* 2行テキストホバー */
.hover-multiline {
	display: inline;
	background-image: linear-gradient(90deg, rgba(255, 255, 255), rgba(255, 255, 255));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0 1px;
	transition: background-size .4s;
}
a:hover .hover-multiline {
	background-size: 100% 1px;
}

/* cap */
.cap {
	font-size: calc(20vw / 8.28);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0.025em;
}

main {
	background-color: #fff;
}

/*-- PC --------*/
@media screen and (min-width: 769px) {
	.sup-ad sup {
		font-size: calc(12vw / 19.2);
		right: calc(4vw / 19.2);
	}
	.container {
		display: flex;
		justify-content: center;
	}
	main {
		margin-left: calc(100% / 3);
  	margin-right: calc(100% / 3);
		position: relative;
	}
	.movie-content {
		position: fixed;
		top: 0;
		right: 0;
		width: calc(100% / 3);
		height: 100vh;
		z-index: 2;
	}
	.top-movie {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.section-title {
		font-size: calc(44vw /19.2);
	}
	.common-btn .btn {
		font-size: calc(21vw /19.2);
		width: calc(420vw / 19.2);
		height: calc(82vw / 19.2);
	}
	.common-btn .btn .arrow {
		width: calc(35vw / 19.2);
    height: calc(35vw / 19.2);
		right: calc(30vw / 19.2);
	}
	.common-btn .btn:hover .arrow {
		right: calc(20vw / 19.2);
	}
	.heading {
		margin-bottom: calc(80vw / 19.2);
	}
	.cap {
		font-size: calc(14vw / 19.2);
	}
}

/*----------------------------------------
 Header
----------------------------------------*/
.header {
	position: fixed;
	width: 100%;
	height: calc(166vw / 8.28);
	z-index: 30;
	overflow: hidden;
}
body.open .header {
	height: 100%;
}
.header-logo {
	position: relative;
	width: calc(298vw / 8.28);
	margin: calc(42vw / 8.28) auto 0;
	z-index: 30;
}
.header-sp-toggle {
	position: fixed;
	top: calc(35vw / 8.28);
	right: calc(26vw / 8.28);
	z-index: 40;
	width: calc(109vw / 8.28);
	height: calc(130vw / 8.28);
}
.header-character .character {
	width: calc(109vw / 8.28);
}
.header-character.animate__bounceOutLeft {
	opacity: 1 !important;
}
.header-character .slide-tremble {
	animation: slide-tremble 0.1s 20 linear alternate;
}
@keyframes slide-tremble {
	0% {transform:translate(0, 0) rotate(-3deg);}
	50% {transform:translate(0, -1px) rotate(0deg);}
	100% {transform:translate(0, 0)rotate(3deg);}
}
.click-tremble.on {
	animation: click-tremble 0.1s 20 linear alternate;
}
@keyframes click-tremble {
	0% {transform:translate(0, 0) rotate(-3deg);}
	50% {transform:translate(0, -1px) rotate(0deg);}
	100% {transform:translate(0, 0)rotate(3deg);}
}
.header-character.off {
	display: none;
}
.header-sp-toggle .cross-mark span {
	content: "";
	position: absolute;
	top: calc(65vw / 8.28);
	right: calc(26vw / 8.28);
	width: calc(70vw / 8.28);
	height: 1px;
	transition: transform .6s ease-in-out;
	background: #003165;
	visibility: hidden;
	opacity: 0;
	transition: opacity .6s ease, visibility .6s ease;
}
#mayoi .header-sp-toggle .cross-mark span {
	background: #005062;
}
.header-sp-toggle .cross-mark span:nth-of-type(1) {
	transform: rotate(45deg);
}
.header-sp-toggle .cross-mark span:nth-of-type(2) {
	transform: rotate(-45deg);
}
body.open .header-sp-modal,
body.open .cross-mark span {
	visibility: visible;
	opacity: 1;
}
body.open .cross-mark.animate__bounceInRight {
	animation-delay: .4s;
}
main::-webkit-scrollbar,
.header-sp-modal::-webkit-scrollbar {
	display: none;
}
.header-sp-modal {
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility .6s ease;
	overscroll-behavior: contain;
	overflow-y: scroll;
}
@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.header-sp-modal.animate__bounceInRight {
	animation-delay: .3s;
	opacity: 1 !important;
}
@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 1;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 1;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.header-menu {
	margin: calc(220vw / 8.28) 0 calc(30vw / 8.28);
	text-align: center;
}
.header-menu li:not(:nth-of-type(1)) {
	margin-top: calc(60vw / 8.28);
}
.header-menu .menu-txt {
	font-family: "Overpass", sans-serif;
	font-weight: 600;
	font-size: calc(70vw / 8.28);
	letter-spacing: 0.1em;
	text-align: center;
	color: #fff;
	-webkit-text-stroke: 1px #003165;
}
.header-menu li:nth-child(even) .menu-txt {
	-webkit-text-stroke: 1px #ed7fa4;
}
.header-menu li:nth-child(even) .menu-txt .hover-line::after {
	background-color: #ed7fa4;
}
body .nav-character .character-blue {
	display: none;
}
body.open .nav-character .character-blue.play {
	display: block;
	position: absolute;
	right: calc(40vw / 8.28);
	z-index: 30;
	width: calc(85vw / 8.28);
}
body.open .nav-character {
	position: relative;
	height: 100vh;
}
.pc-character {
	display: none;
}
.header-menu li:not(:nth-of-type(1)) div {
	margin-bottom: calc(60vw / 8.28);
}
/* common-list-sns */
.common-list-sns {
	display: flex;
	justify-content: center;
	margin-bottom: calc(80vw / 8.28);
}
.common-list-sns .sns-icon:not(:last-of-type) {
	margin-right: calc(74vw / 8.28);
}
.common-list-sns .instagram img {
	width: calc(43vw / 8.28);
}
.common-list-sns .x img {
	width: calc(42vw / 8.28);
}
.common-list-sns .tiktok img,
.common-list-sns .threads img,
.common-list-sns .youtube img {
	width: calc(38vw / 8.28);
}

/* common-list-shop */
body.open .common-list-shop {
	display: block;
}
body.open .footer .common-list-shop,
.footer .common-list-shop {
	display: none;
}
.common-list-shop {
	text-align: left;
	margin: 0 calc(49vw / 8.28) calc(149vw / 8.28);
}
.common-list-shop li {
	border-bottom: solid 1px #003165;
	padding: calc(44vw / 8.28) calc(164vw / 8.28) calc(34vw / 8.28);
}
body#mayoi .common-list-shop li {
	border-bottom: solid 1px #005062;
}
.common-list-shop li:nth-of-type(1) {
	border-top: solid 1px #003165;
}
body#mayoi .common-list-shop li:nth-of-type(1) {
	border-top: solid 1px #005062;
}
.common-list-shop .shop-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}
.common-list-shop li a {
	display: block;
	font-size: calc(34vw / 8.28);
	letter-spacing: 0.075em;
	color: #003165;
	font-weight: 700;
}
body#mayoi .common-list-shop li a {
	color: #005062;
}
.common-list-shop .arrow {
	width: calc(44vw / 8.28);
	height: calc(44vw / 8.28);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	transition: 500ms;
}
.common-list-shop .arrow .path {
	fill: #003165;
	transition: 500ms;
}
body#mayoi .common-list-shop .arrow .path {
	fill: #005062;
}
.common-list-shop li a:hover .arrow {
	right: calc(-20vw / 8.28);
}
.common-list-shop li a:hover .arrow .path {
	fill: #ed7fa4;
}
body#mayoi .common-list-shop li a:hover .arrow .path {
	fill: #ef811e;
}
/*-- PC --------*/
@media screen and (min-width: 769px) {
	#mayoi-alt .header,
	#mayoi-alt .header.is-mv {
		background-color: #f3a5bf;
	}
	.header {
		top: 0;
		left: 0;
		height: 100vh;
		background-repeat: no-repeat;
		background-size: cover;
		width: calc(100% / 3);
		transition: background-color 500ms;
	}
	#mayoi-alt .header.is-products {
		background-color: #3277b2;
	}
	#mayoi-alt .header.is-features {
		background-color: #cadff4;
	}
	#mayoi-alt .header.is-concept,
	#mayoi-alt .header.is-instagram,
	#mayoi-alt .header.is-topics,
	#mayoi-alt .header.is-news,
	#mayoi-alt .header.is-shoplist {
		background-color: #fff;
	}
	.header-logo {
		width: 100%;
		max-width: calc(278vw / 19.2);
		height: calc(44vw / 19.2);
		margin: calc(58vw / 19.2) auto 0;
	}
	.pc-character {
		display: block;
		width: calc(78vw / 19.2);
		position: absolute;
		top: calc(40vw / 19.2);
		right: calc(58vw / 19.2);
	}
	#mayoi .header.is-products .pc-character {
		width: calc(115vw / 19.2);
		top: calc(80vw / 19.2);
		right: calc(50vw / 19.2);
	}
	#mayoi .header.is-concept .pc-character,
	#mayoi .header.is-features .pc-character {
		width: calc(68vw / 19.2);
		right: calc(63vw / 19.2);
	}
	.header-sp-toggle,
	.header-sp-modal,
	.nav-character {
		display: none;
	}
	.header-sp-modal {
		opacity: 1;
		visibility: visible;
		display: block;
		background-color: unset;
		height: auto;
	}
	.header-common {
		position: absolute;
		top: 55%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}
	.header-common nav {
		position: static;
		transition: opacity .6s ease, visibility .6s ease;
		overscroll-behavior: contain;
		overflow-y: hidden;
	}
	.header-common nav::-webkit-scrollbar {
		display: none;
	}
	.header-menu {
		margin: 0 0 calc(60vw / 19.2);
		text-align: center;
	}
	.header-menu .menu-txt {
		font-size: calc(26vw / 19.2);
	}
	.header-menu .menu-txt:hover {
		cursor: pointer;
	}
	#mayoi-alt .is-mv .header-menu .menu-txt {
		color: #f3a5bf;
	}
	.is-products .header-menu .menu-txt {
		color: #3277b2;
	}
	.is-features .header-menu .menu-txt {
		color: #cadff4;
	}
	.is-mv .header-menu .menu-txt,
	.is-products .header-menu .menu-txt,
	.is-mv .header-menu li:nth-child(even) .menu-txt,
	.is-products .header-menu li:nth-child(even) .menu-txt {
    -webkit-text-stroke: 1px #fff;
	}
	.is-mv .header-menu li .menu-txt .hover-line::after,
	.is-products .header-menu li .menu-txt .hover-line::after,
	#mayoi .header.is-products .header-menu li .menu-txt .hover-line::after {
		background-color: #fff;
	}
	.header-menu li:not(:nth-of-type(1)) div {
		margin-bottom: 0;
	}
	#mayoi .header,
	#mayoi .header.is-mv {
		background-color: #fad9bc;
	}
	#mayoi .header.is-products {
		background-color: #33adae;
	}
	#mayoi .header.is-features {
		background-color: #b5e1e2;
	}
	#mayoi .header.is-concept,
	#mayoi .header.is-instagram,
	#mayoi .header.is-topics,
	#mayoi .header.is-news,
	#mayoi .header.is-shoplist {
		background-color: #fff;
	}
	#mayoi .is-mv .header-menu .menu-txt {
		color: #fad9bc;
	}
	#legacy-news-page .header-menu li:not(:nth-of-type(1)),
	#legacy-shoplist-page .header-menu li:not(:nth-of-type(1)) {
		margin-top: calc(25vw / 19.2);
	}
	#legacy-news-page .common-list-sns,
	#legacy-shoplist-page .common-list-sns {
		margin-bottom: calc(30vw / 19.2);
  }
	#legacy-news-page .header-menu,
	#legacy-shoplist-page  .header-menu {
		margin: 0 0 calc(35vw / 19.2);
		text-align: center;
	}
	.header-menu li:not(:nth-of-type(1)) {
		margin-top: calc(20vw / 19.2);
	}
	.header.is-mv .header-menu .mayoi-brand .menu-txt {
		border: solid 2px #00999a;
	}
	.header.is-mv .header-menu .mayoi-alt .menu-txt,
	#legacy-news-page .header .header-menu .mayoi-alt .menu-txt {
		border: solid 2px #00559e;
	}
	#mayoi .header.is-concept .header-menu .mayoi-brand .menu-txt {
		border: solid 2px #f5b377;
	}
	#mayoi .is-products .header-menu .menu-txt {
		color: #33adae;
	}
	#mayoi .header-menu .menu-txt {
		color: #fad9bc;
	}
	#mayoi .is-features .header-menu .menu-txt {
		color: #b5e1e2;
	}
	#mayoi .is-mv .header-menu .mayoi-brand .menu-txt {
		border: solid 2px #00999a;
	}

	/* series-btn */
	.header.is-mv .header-menu li.series-btn .mayoi-brand .srs,
	#legacy-news-page .header .header-menu li.series-btn .mayoi-brand .srs {
		color: #00999a;
	}
	.header.is-mv .header-menu li.series-btn .mayoi-alt .srs,
	#legacy-news-page .header .header-menu li.series-btn .mayoi-alt .srs {
		color: #00559e;
	}
	.header.is-mv .header-menu li.series-btn .mayoi-brand .menu-txt,
	#legacy-news-page .header .header-menu li.series-btn .mayoi-brand .menu-txt {
		border: solid 2px #00999a;
		-webkit-text-stroke: 1px #f85800;
	}
	.header.is-mv .header-menu li.series-btn .mayoi-alt .menu-txt,
	#legacy-news-page .header .header-menu li.series-btn .mayoi-alt .menu-txt {
		-webkit-text-stroke: 1px #e5467c;
	}
	.series-btn .menu-txt {
		width: calc(300vw / 19.2);
		padding: calc(13vw / 19.2) 0 calc(8vw / 19.2);
	}
	.series-btn .srs {
		font-size: calc(15vw / 19.2);
	}
	.header-menu li.series-btn div:first-child {
		margin-right: calc(10vw / 19.2);
	}
	.header-menu .series-btn .menu-txt {
		width: calc(166vw / 19.2);
		border-radius: 40px;
		font-size: calc(23vw / 19.2);
		transition: 200ms;
	}
	.header-menu .series-btn .menu-txt:hover {
		opacity: .6;
	}
	#mayoi-alt .is-features .header-menu li.series-btn .mayoi-alt .menu-txt .sub-color {
		color: #cadff4;
	}
	#mayoi-alt .header-menu li.series-btn .mayoi-alt .menu-txt .sub-color {
    -webkit-text-stroke: 1px #0c508b;
	}
	#mayoi .is-products .header-menu li:not(.series-btn) .menu-txt {
		-webkit-text-stroke: 1px #fff;
	}
	#mayoi .is-products .header-menu li:not(.series-btn):nth-child(even) .menu-txt {
		-webkit-text-stroke: 1px #fff;
	}
	#mayoi .is-products .header-menu li.series-btn .mayoi-alt .srs {
		color: #f6bfd1;
	}
	#mayoi .is-products .header-menu li.series-btn .mayoi-alt .menu-txt {
		border: solid 2px #f6bfd1;
		-webkit-text-stroke: 1px #f6bfd1;
	}
	#mayoi .is-products .header-menu li.series-btn .mayoi-alt .menu-txt .sub-color {
		-webkit-text-stroke: 1px #f6bfd1;
	}
	#mayoi .is-products .header-menu li.series-btn .mayoi-brand .srs {
		color: #f8c69a;
	}
	#mayoi .is-products .header-menu li.series-btn .mayoi-brand .menu-txt {
		border: solid 2px #f8c69a;
		-webkit-text-stroke: 1px #f8c69a;
	}
	#mayoi .is-products .header-menu li.series-btn .mayoi-brand .menu-txt .sub-color {
		-webkit-text-stroke: 1px #f8c69a;
	}
	#mayoi-alt .is-products .header-menu li.series-btn .mayoi-alt .srs {
		color: #ed7fa4;
	}
	#mayoi-alt .is-products .header-menu li.series-btn .mayoi-alt .menu-txt,
	#legacy-shoplist-page .header-menu li.series-btn .mayoi-alt .menu-txt {
		border: solid 2px #ed7fa4;
		-webkit-text-stroke: 1px #ed7fa4;
	}
	#mayoi-alt .is-products .header-menu li.series-btn .mayoi-alt .menu-txt .sub-color,
	#legacy-shoplist-page .header-menu li.series-btn .mayoi-alt .menu-txt .sub-color {
		-webkit-text-stroke: 1px #ed7fa4;
	}
	#mayoi-alt .is-products .header-menu li.series-btn .mayoi-brand .srs,
	#legacy-shoplist-page .header-menu li.series-btn .mayoi-brand .srs {
		color: #8cd1d1;
	}
	#mayoi-alt .is-products .header-menu li.series-btn .mayoi-brand .menu-txt,
	#legacy-shoplist-page .header-menu li.series-btn .mayoi-brand .menu-txt {
		border: solid 2px #8cd1d1;
		-webkit-text-stroke: 1px #8cd1d1;
	}
	#mayoi-alt .is-products .header-menu li.series-btn .mayoi-brand .menu-txt .sub-color,
	#legacy-shoplist-page .header-menu li.series-btn .mayoi-brand .menu-txt .sub-color {
		-webkit-text-stroke: 1px #8cd1d1;
	}
	#mayoi .is-features .header-menu li.series-btn .mayoi-alt .srs {
		color: #00559e;
	}
	#mayoi .is-features .header-menu li.series-btn .mayoi-alt .menu-txt {
		border: solid 2px #00559e;
		-webkit-text-stroke: 1px #e5467c;
	}
	#mayoi .is-features .header-menu li.series-btn .mayoi-brand .srs {
		color: #00999a;
	}
	#mayoi .is-features .header-menu li.series-btn .mayoi-brand .menu-txt {
		border: solid 2px #00999a;
		-webkit-text-stroke: 1px #f85800;
	}
	#mayoi .is-features .header-menu li.series-btn .mayoi-brand .menu-txt .sub-color {
		-webkit-text-stroke: 1px #00999a;
	}
	#mayoi .is-mv .header-menu li.series-btn .mayoi-brand .srs {
    color: #00999a;
	}
	.header-bottom-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* common-list-sns */
	.common-list-sns {
		margin-bottom: calc(30vw / 19.2);
  }
	.common-list-sns .sns-icon:not(:last-of-type) {
		margin-right: calc(40vw / 19.2);
	}
	.common-list-sns .instagram img,
	.common-list-sns .legacy-social img {
		width: calc(24vw / 19.2);
	}
	.common-list-sns .x img {
		width: calc(23vw / 19.2);
	}
	.common-list-sns .tiktok img,
	.common-list-sns .threads img {
		width: calc(21vw / 19.2);
	}

	/* common-list-shop */
	.common-list-shop {
		width: 100%;
		margin: 0 calc(123vw / 19.2);
		border-top: solid 1px #003165;
	}
	.common-list-shop li:nth-of-type(1) {
		border-top: none;
	}
	.common-list-shop li {
		padding: calc(20vw / 19.2) calc(89vw / 19.2);
	}
	.common-list-shop li a {
		font-size: calc(18vw / 19.2);
	}

	.common-list-shop .arrow {
		width: calc(24vw / 19.2);
    height: calc(24vw / 19.2);
	}
	.common-list-shop li a:hover .arrow {
		right: calc(-10vw / 19.2);
	}

	/* gloosy */
	body#mayoi .common-list-shop li:nth-of-type(5) {
		border-bottom: none;
	}
	body#mayoi .common-list-shop li:nth-of-type(1) {
		border-top: none;
	}
	body#mayoi .common-list-shop li {
		padding: calc(18vw / 19.2) 0 calc(18vw / 19.2) calc(30vw / 19.2);
	}
	body#mayoi .common-list-shop li {
		padding: calc(18vw / 19.2) 0;
	}
	body#mayoi .common-list-shop li:nth-of-type(2),
	body#mayoi .common-list-shop li:nth-of-type(4) {
		padding-left: calc(40vw / 19.2);
		padding-right: calc(30vw / 19.2);
	}
	body#mayoi .common-list-shop li:nth-of-type(1),
	body#mayoi .common-list-shop li:nth-of-type(3),
	body#mayoi .common-list-shop li:nth-of-type(5) {
		padding-left: calc(30vw / 19.2);
		padding-right: calc(15vw / 19.2);
	}
	body#mayoi .common-list-sns {
		margin: calc(40vw / 19.2) calc(110vw / 19.2) 0 0;
		justify-content: flex-end;
		flex-wrap: wrap;
  }
	body#mayoi footer .common-list-shop {
		display: none;
	}
	body#mayoi .common-list-shop {
		width: calc(455vw / 19.2);
		display: flex;
		flex-wrap: wrap;
		border-top: solid 1px #005062;
		border-bottom: solid 1px #005062;
		margin: 0 auto;
	}
	body#mayoi	.common-list-shop > * {
		width: 50%;
	}
	body#mayoi .header-bottom-list {
		flex-direction: column-reverse;
	}
	body#mayoi .mayoi-decoration {
		position: absolute;
		bottom: 0;
		left: calc(90vw / 19.2);
		width: 50%;
		/* min-width: 260px; */
		z-index: -1;
	}
	body#mayoi .common-list-sns .sns-icon {
		width: 100%;
		text-align: right;
	}
	body#mayoi .common-list-sns .sns-icon:nth-of-type(1) {
		margin-right: calc(100vw / 19.2);
	}
	body#mayoi .common-list-sns .sns-icon:nth-of-type(2) {
		margin-right: calc(50vw / 19.2);
		margin-top: calc(-8vw / 19.2);
	}
	body#mayoi .common-list-sns .sns-icon:nth-of-type(3) {
		margin-right: calc(15vw / 19.2);
		margin-top: calc(15vw / 19.2);
	}

	#mayoi .header.is-mv .mayoi-decoration .image-1,
	#mayoi .header.is-mv .pc-character .char-01 {
		display: block;
	}
	#mayoi .header.is-concept .mayoi-decoration .image-2,
	#mayoi .header.is-concept .pc-character .char-02 {
		display: block;
	}
	#mayoi .header.is-products .mayoi-decoration .image-3,
	#mayoi .header.is-products .pc-character .char-03 {
		display: block;
	}
	#mayoi .header.is-features .mayoi-decoration .image-4,
	#mayoi .header.is-features .pc-character .char-04 {
		display: block;
	}

	#mayoi .header.is-instagram .pc-character .char-05,
	#mayoi .header.is-topics .pc-character .char-05,
	#mayoi .header.is-news .pc-character .char-05,
	#mayoi .header.is-shoplist .pc-character .char-05,
	#mayoi .header.is-instagram .mayoi-decoration .image-5,
	#mayoi .header.is-topics .mayoi-decoration .image-5,
	#mayoi .header.is-news .mayoi-decoration .image-5,
	#mayoi .header.is-shoplist .mayoi-decoration .image-5 {
		display: block;
	}
}

/*----------------------------------------
 Footer
----------------------------------------*/
.footer,
.common-list-shop {
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	letter-spacing: 0.075em;
}
.footer-logo {
	width: calc(201vw / 8.28);
	margin: 0 auto calc(113vw / 8.28);
}
.footer-bg-block {
	background-color: #2d2d2d;
	color: #fff;
	padding: calc(78vw / 8.28) 0;
}
body#mayoi .footer-bg-block {
	background-color: #2d2d2d;
}
.footer-list-nav a {
	position: relative;
	display: block;
}
.footer-list-nav .hover-line::after {
	background-color: #fff;
}
.footer-list-nav {
	display: flex;
	justify-content: center;
	margin-bottom: calc(74vw / 8.28);
	font-size: calc(22vw / 8.28);
	letter-spacing: 0.1em;
}
.footer-list-nav li:not(:last-of-type) {
	padding-right: calc(65vw / 8.28);
}
.footer-copy {
	font-size: calc(20vw / 8.28);
	letter-spacing: 0.1em;
	text-align: center;
}

/*-- PC --------*/
@media screen and (min-width: 769px) {
	.header-sp-toggle,
	footer .footer-logo,
	footer .common-list-sns,
	footer .common-list-shop {
		display: none;
	}
	.footer-bg-block {
		padding: calc(40vw / 19.2) 0;
	}
	.footer-list-nav {
		font-size: calc(14vw / 19.2);
		margin-bottom: calc(20vw / 19.2);
	}
	.footer-list-nav li:not(:last-of-type) {
    padding-right: calc(65vw / 19.2);
	}
	.footer-copy {
		font-size: calc(12vw / 19.2);
	}
}

#mayoi-alt .mayoi-image,
#mayoi .alternate-image,
#legacy-news-page .mayoi-image,
#legacy-shoplist-page .mayoi-image {
	display: none;
}
#mayoi .is-concept .header-menu .menu-txt,
#mayoi .is-instagram .header-menu .menu-txt,
#mayoi .is-topics .header-menu .menu-txt,
#mayoi .is-news .header-menu .menu-txt,
#mayoi .is-shoplist .header-menu .menu-txt {
	color: #fff;
}
/* Temporarily hidden navigation items; markup is preserved for later re-enabling. */
.header-menu .nav-news,
.header-menu .nav-shop-list {
	display: none;
}

/* Left navigation tone: charcoal + orange. */
#mayoi .header,
#mayoi .header.is-mv,
#mayoi .header.is-products,
#mayoi .header.is-features,
#mayoi .header.is-concept,
#mayoi .header.is-instagram,
#mayoi .header.is-topics,
#mayoi .header.is-news,
#mayoi .header.is-shoplist,
#mayoi .header-sp-modal {
	background-color: #fff !important;
}

#mayoi .header .header-menu .menu-txt,
#mayoi .header-sp-modal .header-menu .menu-txt {
	color: #2d2d2d !important;
	-webkit-text-stroke: 0 !important;
}

#mayoi .header .header-menu li:nth-child(even) .menu-txt,
#mayoi .header-sp-modal .header-menu li:nth-child(even) .menu-txt {
	color: #e57523 !important;
}

#mayoi .header .header-menu .hover-line::after,
#mayoi .header-sp-modal .header-menu .hover-line::after {
	background-color: #e57523 !important;
}

#mayoi .header .header-logo .mayoi-image {
	filter: brightness(0) saturate(100%);
}

/* まよい飯 wordmark: bold, geometric Japanese lettering. */
.brand-wordmark {
	display: block;
	white-space: nowrap;
	font-family: "Arial Black", "Noto Sans JP", sans-serif;
	font-size: clamp(25px, 2.8vw, 54px);
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1;
	color: #2d2d2d;
}
.brand-logo-image {
	display: block;
	width: 200%;
	height: auto;
	max-width: none;
}
.header-logo .brand-logo-image {
	width: 100%;
	max-width: 100%;
}
.footer-logo .brand-logo-image {
	width: 200%;
	margin: 0 auto;
}
.footer-logo .brand-wordmark {
	align-items: center;
	text-align: center;
	color: currentColor;
}
.footer-logo {
	display: block;
	color: inherit;
	text-decoration: none;
}

#mayoi .header .common-list-shop li {
	border-color: #e57523 !important;
}

#mayoi .header .common-list-shop li:first-of-type {
	border-top-color: #e57523 !important;
}

#mayoi .header .header-menu li.series-btn .menu-txt {
	border-color: #e57523 !important;
	-webkit-text-stroke: 1px #e57523 !important;
}

#mayoi .header .header-menu li.series-btn .srs,
#mayoi .header .header-menu li.series-btn .sub-color {
	color: #e57523 !important;
	-webkit-text-stroke: 0 !important;
}

#mayoi .header .common-list-shop li a,
#mayoi .header .common-list-shop .arrow .path {
	color: #2d2d2d !important;
	fill: #e57523 !important;
}

#mayoi .header .common-list-shop li:nth-child(even) a {
	color: #e57523 !important;
}

#mayoi .header .common-list-sns img {
	filter: brightness(0) saturate(100%) invert(52%) sepia(63%) saturate(1217%) hue-rotate(346deg) brightness(93%) contrast(92%);
}

/* The footer reuses the legacy hover markup; show the new YouTube icon directly. */
.footer .common-list-sns .youtube .img-off {
	display: none !important;
}
.footer .common-list-sns .youtube .img-on {
	position: static;
	opacity: 1;
}
.footer .common-list-sns .legacy-social {
	display: none;
}

/* Keep the four requested SNS links together as a compact row. */
#mayoi .header .common-list-sns {
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	margin-right: 0;
}
#mayoi .header .common-list-sns .sns-icon,
#mayoi .header .common-list-sns .sns-icon:nth-of-type(1),
#mayoi .header .common-list-sns .sns-icon:nth-of-type(2),
#mayoi .header .common-list-sns .sns-icon:nth-of-type(3),
#mayoi .header .common-list-sns .sns-icon:nth-of-type(4) {
	width: auto;
	margin: 0 14px;
	text-align: center;
}
#mayoi .header .common-list-sns .instagram { order: 1; }
#mayoi .header .common-list-sns .tiktok { order: 2; }
#mayoi .header .common-list-sns .youtube { order: 3; }
#mayoi .header .common-list-sns .threads { order: 4; }

/* Keep the header free of decorative character marks. */
#mayoi .header .pc-character,
#mayoi .header .header-character,
#mayoi .header .nav-character {
	display: none !important;
	visibility: hidden !important;
}

/* Replace the former shop rows with Mayoi's SNS links. */
.common-list-shop > li:nth-child(5) {
	display: block;
}
.common-list-shop > li:nth-child(-n+4) .hover-line {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.common-list-shop > li:nth-child(-n+4) .hover-line::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.common-list-shop > li:nth-child(1) .hover-line::before {
	background-image: url("../img/common/sns_instagram_off.png");
}
.common-list-shop > li:nth-child(2) .hover-line::before {
	background-image: url("../img/common/sns_tiktok_off.png");
}
.common-list-shop > li:nth-child(3) .hover-line::before {
	background-image: url("../img/common/sns_youtube.svg");
}
.common-list-shop > li:nth-child(4) .hover-line::before {
	background-image: url("../img/common/sns_threads_off.png");
}

/* The four-row SNS list is now the single social entry point. */
#mayoi .header .header-bottom-list > .common-list-sns,
#mayoi .footer .common-list-sns {
	display: none;
}

/* SNS links: monochrome black treatment. */
#mayoi .header .common-list-shop,
#mayoi .header .common-list-shop > li,
#mayoi .header .common-list-shop > li:first-of-type {
	border-top-color: #2d2d2d !important;
	border-bottom-color: #2d2d2d !important;
	border-left-color: #2d2d2d !important;
	border-right-color: #2d2d2d !important;
	color: #2d2d2d !important;
	background-color: transparent;
	}
#mayoi .header .common-list-shop > li a,
#mayoi .header .common-list-shop > li:nth-child(even) a {
	color: #2d2d2d !important;
}
#mayoi .header .common-list-shop .arrow .path {
	fill: #2d2d2d !important;
}
#mayoi .header .common-list-shop > li:nth-child(-n+4) .hover-line::before {
	filter: brightness(0) saturate(100%);
}
#mayoi .common-list-shop > li,
#mayoi .common-list-shop > li:first-of-type {
	border-top-color: #2d2d2d !important;
	border-bottom-color: #2d2d2d !important;
}
#mayoi .common-list-shop > li a,
#mayoi .common-list-shop > li:nth-child(even) a {
	color: #2d2d2d !important;
}
#mayoi .common-list-shop .arrow .path { fill: #2d2d2d !important; }
#mayoi .common-list-shop > li:nth-child(-n+4) .hover-line::before {
	filter: brightness(0) saturate(100%);
}
#mayoi .common-list-sns img {
	filter: brightness(0) saturate(100%);
}

/* Mayoi menu labels and three vertically stacked destination buttons. */
#mayoi .header-menu li.series-btn {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: calc(42vw / 19.2) !important;
}
#mayoi .header-menu li.series-btn > div {
	display: block !important;
	width: 100%;
	margin: 0 !important;
}
#mayoi .header-menu li.series-btn .menu-txt {
	display: block;
	box-sizing: border-box;
	width: calc(240vw / 19.2) !important;
	max-width: 90%;
	padding: calc(11vw / 19.2) calc(14vw / 19.2) !important;
	border: 2px solid #2d2d2d !important;
	border-radius: 999px;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(13px, 1.05vw, 20px) !important;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.25;
	text-align: center;
	color: #2d2d2d !important;
	-webkit-text-stroke: 0 !important;
}
#mayoi .header-menu li.series-btn .menu-txt:hover {
	opacity: .65;
}
#mayoi .header .header-menu li.series-btn .menu-txt,
#mayoi .header-sp-modal .header-menu li.series-btn .menu-txt {
	color: #2d2d2d !important;
	border-color: #e57523 !important;
	-webkit-text-stroke: 0 !important;
}
#mayoi .header .header-menu li.series-btn .menu-txt:hover,
#mayoi .header-sp-modal .header-menu li.series-btn .menu-txt:hover {
	background-color: #e57523 !important;
	border-color: #e57523 !important;
	color: #fff !important;
	-webkit-text-stroke: 0 !important;
}
#mayoi .header-menu li:not(.series-btn) .menu-txt,
#mayoi .header-menu li:not(.series-btn):nth-child(even) .menu-txt {
	color: #2d2d2d !important;
	-webkit-text-stroke: 0 !important;
}
#mayoi .header .header-menu li:not(.series-btn) .menu-txt,
#mayoi .header-sp-modal .header-menu li:not(.series-btn) .menu-txt {
	color: #2d2d2d !important;
	-webkit-text-stroke: 0 !important;
}
#mayoi .header .header-menu li:not(.series-btn) .menu-txt:hover,
#mayoi .header-sp-modal .header-menu li:not(.series-btn) .menu-txt:hover {
	color: #e57523 !important;
}
#mayoi .header .header-menu li:not(.series-btn) .hover-line::after,
#mayoi .header-sp-modal .header-menu li:not(.series-btn) .hover-line::after {
	display: none !important;
}
#mayoi .header .common-list-shop .arrow .path,
#mayoi .common-list-shop .arrow .path {
	fill: #e57523 !important;
}

@media screen and (max-width: 768px) {
	#mayoi .header-menu li.series-btn {
		gap: calc(16vw / 8.28);
		margin-top: calc(96vw / 8.28) !important;
	}
	#mayoi .header-menu li.series-btn .menu-txt {
		width: calc(520vw / 8.28) !important;
		padding: calc(14vw / 8.28) calc(18vw / 8.28) !important;
		font-size: calc(36vw / 8.28) !important;
	}
}

/* Compact the three destination frames slightly while preserving their
   readable touch target in the hamburger navigation. */
#mayoi .header-menu li.series-btn .menu-txt {
  width: min(380px, 86%) !important;
  min-height: 80px;
}
@media screen and (max-width: 768px) {
  #mayoi .header-menu li.series-btn .menu-txt {
    width: min(84vw, 380px) !important;
    min-height: 84px;
  }
}

/* Mayoi mobile navigation/footer polish. */
.common-list-shop > li:nth-child(5) .hover-line {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.common-list-shop > li:nth-child(5) .hover-line::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url("../img/common/sns_note.svg") center / contain no-repeat;
	filter: brightness(0) saturate(100%);
}

/* Keep the three destination links readable in the compact hamburger menu. */
#mayoi .header-menu li.series-btn .menu-txt {
	width: min(420px, 92%) !important;
	min-height: 88px;
	padding: 14px 20px !important;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.25;
	box-shadow: 7px 7px 0 #e57523;
}

.sp-menu-visual { display: none; }

@media screen and (max-width: 768px) {
	/* The mobile page keeps only the hamburger control at the top. */
	#mayoi .header-logo { display: none !important; }
	#mayoi .header { height: 82px; overflow: visible; }

	#mayoi .header-sp-modal { padding: 0 16px 42px; }
	#mayoi .sp-menu-visual {
		display: block;
		position: relative;
		z-index: 1;
		width: min(62vw, 250px);
		height: auto;
		margin: 86px auto 4px;
		pointer-events: none;
	}
	#mayoi .header-sp-modal .header-menu {
		position: relative;
		z-index: 2;
		margin-top: 12px;
	}
	#mayoi .header-menu li.series-btn .menu-txt {
		width: min(90vw, 420px) !important;
		min-height: 92px;
		padding: 16px 22px !important;
		font-size: 16px !important;
		box-shadow: 7px 7px 0 #e57523;
	}

	/* Footer: compact centred logo followed by icon-only SNS links. */
	#mayoi footer .footer-logo {
		display: block !important;
		width: min(42vw, 170px);
		margin: 56px auto 22px;
	}
	#mayoi footer .footer-logo .brand-logo-image {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}
	#mayoi footer .common-list-shop { display: none !important; }
	#mayoi footer .common-list-sns {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 22px;
		margin: 0 auto 34px;
	}
	#mayoi footer .common-list-sns .sns-icon,
	#mayoi footer .common-list-sns .sns-icon:nth-of-type(1),
	#mayoi footer .common-list-sns .sns-icon:nth-of-type(2),
	#mayoi footer .common-list-sns .sns-icon:nth-of-type(3),
	#mayoi footer .common-list-sns .sns-icon:nth-of-type(4) {
		width: auto;
		margin: 0;
	}
	#mayoi footer .common-list-sns img {
		width: 24px !important;
		height: 24px;
		object-fit: contain;
		filter: brightness(0) saturate(100%) !important;
	}
	#mayoi footer .common-list-sns .alternate-image { display: none !important; }
	#mayoi footer .common-list-sns .mayoi-image { display: block !important; }
	#mayoi footer .common-list-sns .img-on { display: none !important; opacity: 1 !important; }
	#mayoi footer .common-list-sns .img-off { display: block !important; opacity: 1 !important; position: static; }
	#mayoi footer .common-list-sns .img-off.alternate-image { display: none !important; }
	#mayoi footer .common-list-sns .youtube .img-off { display: none !important; }
	#mayoi footer .common-list-sns .youtube .img-on { display: block !important; }
}

/* Final compact frame size for the three destination links. */
#mayoi .header-menu li.series-btn .menu-txt {
  width: min(380px, 86%) !important;
  min-height: 80px;
}

/* TOP mobile header cleanup: keep only the hamburger control, with no
   reserved white strip or duplicate touch-me artwork inside the drawer. */
@media screen and (max-width: 768px) {
  #mayoi.top-page .header {
    height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }
  #mayoi.top-page .header-sp-toggle {
    display: block !important;
    padding: 0;
    border: 0;
    background: transparent;
  }
  #mayoi.top-page .header .header-character {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #mayoi.top-page .header .header-character .top-char.mayoi-image {
    display: block !important;
  }
  #mayoi.top-page .header .header-character .top-char.alternate-image,
  #mayoi.top-page .header .header-character .other-char {
    display: none !important;
  }
  #mayoi .header-sp-modal .sp-menu-visual {
    display: none !important;
  }
  #mayoi .header-sp-modal .header-menu {
    margin-top: 100px !important;
  }
  #mayoi .header-sp-modal .header-menu li.series-btn .menu-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
  }
}
@media screen and (max-width: 768px) {
	#mayoi .header-menu li.series-btn .menu-txt {
		width: min(84vw, 380px) !important;
		min-height: 84px;
	}
}

/* Latest navigation sizing: slightly smaller frames, larger separation, and
   a consistent 20px label size across desktop and the hamburger menu. */
#mayoi .header-menu li.series-btn {
	gap: 22px !important;
}
#mayoi .header-menu li.series-btn .menu-txt {
	width: min(340px, 78%) !important;
	min-height: 72px !important;
	padding: 12px 18px !important;
	font-size: 20px !important;
}
@media screen and (max-width: 768px) {
	#mayoi .header-menu li.series-btn {
		gap: 22px !important;
	}
	#mayoi .header-menu li.series-btn .menu-txt {
		width: min(78vw, 340px) !important;
		min-height: 72px !important;
		padding: 12px 16px !important;
		font-size: 20px !important;
	}
}

/* PC left-column refinement: give the logo and navigation more breathing room
   and vertically centre the labels inside the smaller destination buttons. */
@media screen and (min-width: 769px) {
	#mayoi .header-menu {
		transform: translateY(24px);
	}
	#mayoi .header-menu li.series-btn .menu-txt {
		min-height: 64px !important;
		padding: 8px 16px !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		line-height: 1.2 !important;
	}
}

/* Shared hamburger-menu finishing pass.  The drawer artwork is restored on
   every Mayoi page, while the fixed mobile header itself takes no layout
   space so it cannot leave a white strip above the page content. */
@media screen and (max-width: 768px) {
	#mayoi .header {
		height: 0 !important;
		overflow: visible !important;
		background: transparent !important;
	}
	#mayoi .header-sp-toggle {
		top: 14px !important;
	}
	#mayoi .header .header-character {
		display: block !important;
		visibility: visible !important;
	}
	#mayoi .header .header-character .top-char.mayoi-image,
	#mayoi .header .header-character .other-char.mayoi-image {
		display: block !important;
	}
	#mayoi .header .header-character .alternate-image {
		display: none !important;
	}
	#mayoi .header-sp-modal .sp-menu-visual {
		display: block !important;
		position: relative;
		z-index: 1;
		width: min(58vw, 220px);
		height: auto;
		margin: 76px auto 0;
		line-height: 0;
		pointer-events: none;
	}
	#mayoi .header-sp-modal .sp-menu-visual img {
		display: block;
		width: 100%;
		height: auto;
	}
	#mayoi .header-sp-modal .header-menu {
		margin-top: 12px !important;
	}
	#mayoi .header-sp-modal .header-menu > li:nth-child(-n+3):not(.series-btn) .menu-txt {
		font-size: 18px !important;
		line-height: 1.3 !important;
	}
	#mayoi .header-sp-modal .header-bottom-list {
		margin-top: 36px !important;
	}
}

/* The desktop left navigation uses the same compact label scale and keeps a
   clear visual gap between the destination buttons and SNS rows. */
@media screen and (min-width: 769px) {
	#mayoi .header-menu > li:nth-child(-n+3):not(.series-btn) .menu-txt {
		font-size: 18px !important;
		line-height: 1.3 !important;
	}
	#mayoi .header-bottom-list {
		margin-top: 30px !important;
	}
}

/* Mayoi mobile menu: the trigger is the supplied touch-me artwork.  The
   artwork is deliberately hidden while the drawer is open so the drawer
   contains links only; the cross remains the close control. */
.touch-me-trigger {
	display: none !important;
}
.sp-only-break {
	display: none;
}
@media screen and (max-width: 768px) {
	#mayoi .header-sp-toggle {
		overflow: visible !important;
		background: transparent !important;
		border: 0 !important;
	}
	#mayoi .header-sp-toggle .touch-me-trigger {
		display: block !important;
		position: absolute;
		right: -8px;
		top: -8px;
		z-index: 1;
		width: min(118px, 30vw);
		max-width: none;
		height: auto;
		pointer-events: none;
	}
	#mayoi .header-sp-toggle .cross-mark {
		position: relative;
		z-index: 2;
	}
	body#mayoi.open .header-sp-toggle .touch-me-trigger {
		display: none !important;
	}
	#mayoi .header-sp-modal .sp-menu-visual {
		display: none !important;
	}
	#mayoi .header-sp-modal .header-menu {
		margin-top: 48px !important;
	}
	.sp-only-break {
		display: block;
	}
}

/* Videos remain inline media on every device.  The source controls are kept
   for play/pause, while fullscreen, PiP and download affordances are removed. */
.mayoi-central video {
	display: block;
	max-width: 100%;
}
.mayoi-central video::-webkit-media-controls-fullscreen-button,
.mayoi-central video::-webkit-media-controls-picture-in-picture-button {
	display: none !important;
}

/* Final Mayoi navigation/media correction. Keep the global links centred in
   the left column and restore the desktop-only fixed movie rail. */
#mayoi .header-menu,
#mayoi .header-common .header-menu {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	align-items: center;
}
#mayoi .header-menu > li {
	width: 100% !important;
	text-align: center !important;
}
#mayoi .header-menu > li:not(.series-btn) {
	display: flex !important;
	justify-content: center !important;
}
#mayoi .header-menu > li.series-btn {
	align-items: center !important;
}
#mayoi .header-menu > li.series-btn > div {
	width: 100% !important;
	text-align: center !important;
}
#mayoi .header-menu > li.series-btn .menu-txt {
	margin-left: auto !important;
	margin-right: auto !important;
}
.movie-content .top-movie {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The legacy YouTube rule targeted a hover-on image that no longer exists;
   keep the real footer icons visible. */
#mayoi .footer .common-list-sns .youtube .img-off,
#mayoi .footer .common-list-sns .note .img-off {
	display: block !important;
	opacity: 1 !important;
	position: static !important;
}
#mayoi .footer .common-list-sns .note img {
	filter: brightness(0) saturate(100%) !important;
}

@media screen and (max-width: 768px) {
	/* A stable 50px white band keeps the logo readable and starts all page
	   content below it, including the home MV and subpage title artwork. */
	#mayoi .header {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 50px !important;
		min-height: 50px !important;
		overflow: visible !important;
		background: #fff !important;
	}
	/* The home page had an older, more-specific zero-height header rule;
	   explicitly restore the same 50px band there as on every subpage. */
	#mayoi.top-page .header {
		height: 50px !important;
		min-height: 50px !important;
		background: #fff !important;
	}
	#mayoi.top-page .header-sp-toggle {
		top: 0 !important;
	}
	#mayoi .header-logo {
		display: block !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		width: min(110px, 32vw) !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		transform: translate(-50%, -50%) !important;
		z-index: 32 !important;
	}
	#mayoi .header-logo .brand-logo-image {
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
	}
	#mayoi .header-sp-toggle {
		top: 0 !important;
		right: 6px !important;
		width: 58px !important;
		height: 50px !important;
	}
	#mayoi .header-sp-toggle .touch-me-trigger {
		width: min(92px, 25vw) !important;
		max-width: none !important;
		height: 50px !important;
		right: -8px !important;
		top: 0 !important;
		object-fit: contain;
		object-position: right center;
	}
	#mayoi .mayoi-central {
		padding-top: 50px !important;
	}
	#mayoi .movie-content {
		display: none !important;
	}
	#mayoi .footer .common-list-sns .sns-icon {
		display: block !important;
		visibility: visible !important;
	}
	/* Leave a clear gap between the centred logo band and the first menu link
	   when the hamburger drawer is open. */
	#mayoi .header-sp-modal .header-menu {
		margin-top: 72px !important;
	}
}

/* Desktop wide-viewport fix: keep the logo and the fixed left navigation in
   normal flow so the logo cannot cover the first navigation links. */
@media screen and (min-width: 769px) {
	#mayoi .header {
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: auto;
		scrollbar-width: none;
	}

	#mayoi .header::-webkit-scrollbar {
		display: none;
	}

	#mayoi .header-logo {
		flex: 0 0 auto;
		width: min(278px, calc(278vw / 19.2), calc(100% - 32px)) !important;
		max-width: none !important;
		height: auto !important;
		margin: min(58px, calc(58vw / 19.2)) auto 0 !important;
	}

	#mayoi .header-common {
		position: static !important;
		flex: 0 0 auto;
		transform: none !important;
		margin-top: min(42px, calc(42vw / 19.2));
	}

	#mayoi .header-menu {
		margin-bottom: clamp(28px, 6.8vh, 60px) !important;
	}

	#mayoi .header-menu > li:not(.series-btn) ~ li:not(.series-btn) {
		margin-top: clamp(12px, 2.2vh, 20px) !important;
	}

	#mayoi .header-menu > li.series-btn {
		gap: clamp(14px, 2.5vh, 22px) !important;
		margin-top: clamp(24px, 4.8vh, 42px) !important;
	}

	#mayoi .header-menu li.series-btn .menu-txt {
		min-height: clamp(48px, 7.2vh, 64px) !important;
	}

	#mayoi .header-bottom-list {
		margin-top: clamp(12px, 3.4vh, 30px) !important;
	}

	#mayoi .header .common-list-shop {
		width: min(455px, calc(455vw / 19.2), calc(100% - 24px)) !important;
	}

	#mayoi .header .common-list-shop > li {
		padding-top: clamp(10px, 2vh, 18px) !important;
		padding-bottom: clamp(10px, 2vh, 18px) !important;
	}

	#mayoi .header .common-list-shop > li a {
		font-size: clamp(16px, 2vh, 18px) !important;
	}

	#mayoi .header .common-list-shop .arrow {
		width: clamp(20px, 2.7vh, 24px) !important;
		height: clamp(20px, 2.7vh, 24px) !important;
	}
}