@charset "utf-8";

/*--------------------------------------------------
 * 共通
 * loading-contents - ロード + サウンド選択 画面
 * サイドボタン - SNS 公式X + サウンド切り替え
 * site-contents - サイトコンテンツ
 * top-contents - トップコンテンツ
 * recommended-contents - レコメンド + 本フレームマスク
 * イントロダクション・ストーリー・スタッフ 背景設定
 * introduction-contents - イントロダクション
 * story-contents - ストーリー
 * staff-contents - スタッフ
 * movie-contents - 映像
 * products-contents - 商品情報
 * footer-contents
 *
 * lower page
 *
--------------------------------------------------*/


/*--------------------------------------------------
 * 共通
--------------------------------------------------*/
:root {
	/* width */
	--sp-max-width: 834px;
	--pc-max-width: 1200px;
  /* Color */
  --main-color-black: #282828;
  --color-white: #FFFFFF;
  --color-black: #000000;
	--color-gray: #666666;
	--color-darkgray: #4c4c4c;
	--color-ultramarine: #4e5d96;
	--color-lightblue: #36436A;
	--color-darkblue: #04112e;
	--color-yellow-high: #f7f7f2;
	--color-yellow-mid: #bfbba3;
	--color-yellow-low: #c4b762;
	--color-lightyellow: #FAF1E0;
	--color-highlightyellow: #fffaf0;
	--color-yellow: #c3b558;
	--color-darkyellow: #928428;
  --color-transp: transparent;
	/* Font Family */
	--main-font-family: 'Shippori Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Times New Roman', serif;
	--font-family-coronette: 'coronette',serif;
	--font-family-shippori: 'Shippori Mincho', serif;
	/* base size & font-size */
	--size10: min(1.2vw, 10px);
	--size12: min(1.44vw, 12px);
	--size14: min(1.68vw, 14px);
	--size16: min(1.92vw, 16px);
	--size18: min(2.16vw, 18px);
	--size20: min(2.4vw, 20px);
	--size22: min(2.64vw, 22px);
	--size24: min(2.88vw, 24px);
	--size26: min(3.12vw, 26px);
	--size28: min(3.36vw, 28px);
	--size30: min(3.6vw, 30px);
	--size32: min(3.84vw, 32px);
	--size34: min(4.08vw, 34px);
	--size36: min(4.32vw, 36px);
	--size38: min(4.56vw, 38px);
	--size40: min(4.8vw, 40px);
	--size48: min(5.76vw, 48px);
	--size50: min(6vw, 50px);
	--size60: min(7.19vw, 60px);
	--size70: min(8.39vw, 70px);
	--size80: min(9.59vw, 80px);
	--size100: min(11.99vw, 100px);
	--size120: min(14.39vw, 120px);
	--size150: min(17.99vw, 150px);
	--size200: min(23.98vw, 200px);
	--size400: min(47.96vw, 400px);
	--size600: min(71.94vw, 600px);
	/* easing */
	--easing-time: .5s;
	--easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Google fonts */
.material-symbols-outlined {
	font-size: inherit;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

/* ----- Color */
.color--white {
	color: var(--color-white);
}
.color--darkblue {
	color: var(--color-darkblue);
}
.color--darkyellow {
	color: var(--color-darkyellow);
}

/* ----- 改行 */
br.pc {
	display: none;
}
br.sp {
	display: block;
}
/* 改行 PC 835px以上 */
@media (min-width: 835px) {
	br.pc {
		display: block;
	}
	br.sp {
		display: none;
	}
}

/* ----- SNSボタン */
.sns-btn {
	display: block;
	width: var(--size70);
	height: var(--size70);
	border-radius: 50%;
	outline: 1px solid var(--main-color-black);
	outline-offset: 3px;
}
/* SNSボタン PC 835px以上 */
@media (min-width: 835px) {
	.sns-btn {
		width: 40px;
		height: 40px;
	}
}

/* ----- サウンドボタン */
.sound-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-darkyellow);
	line-height: 1;
	border: 1px solid var(--color-darkyellow);
	border-radius: 50%;
	outline: 1px solid var(--color-darkyellow);
	outline-offset: 3px;
	cursor: pointer;
	transition: var(--easing-time) var(--easing-out);
}
.sound-btn.--first-btn {
	padding: var(--size40);
	font-size: var(--size60);
	opacity: 1;
	visibility: visible;
}
.sound-btn.--select-btn {
	position: absolute;
	padding: var(--size16);
	font-size: var(--size40);
	width: var(--size70);
	height: var(--size70);
	opacity: 0;
	visibility: hidden;
}
.sound-btn.sound-selected,
.sound-btn:hover {
	color: var(--color-white);
	background-color: var(--color-darkyellow);
}
.sound-btn.--select-btn.sound-selected {
	opacity: 1;
	visibility: visible;
}
/* サウンドボタン PC 835px以上 */
@media (min-width: 835px) {
	.sound-btn.--first-btn {
		padding: 24px;
		font-size: 34px;
	}
	.sound-btn.--select-btn {
		padding: 8px;
		font-size: 20px;
		width: 40px;
		height: 40px;
	}
}

/* ----- コンテンツ */
.box-inner-xl {
	padding: var(--size600) var(--size50);
}
.box-inner-l {
	padding: var(--size400) var(--size50);
}
.box-inner-m {
	padding: var(--size200) var(--size50);
}
.box-inner-s {
	padding: var(--size120) var(--size40);
}

/* ----- コンテンツ タイトル */
.heading {
	padding-bottom: var(--size100);
	font-family: var(--font-family-coronette);
	font-size: var(--size48);
	text-align: center;
}
@media (min-width: 835px) {
	.heading {
		font-size: 40px;
	}
}

/* ----- コンテンツ2重枠 */
.double-frame-contents {
	position: relative;
	background-color: #04112eb3;
	opacity: 0;
	visibility: hidden;
	transition: var(--easing-time) var(--easing-out);
	z-index: 25;
}
.double-frame-contents.elm-visible {
	opacity: 1;
	visibility: visible;
}
.double-frame-contents.bg-products {
	background-color: #04112eb3;
}
.double-frame-contents.bg-special {
	background-color: #25325cb3;
}
.bg-lower .double-frame-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	height: 100vh;
	top: 0;
	background-image: url(/muse-labo/hagureboshi/assets/img/hagureboshi-bg.webp);
	background-repeat: repeat;
	background-position: center;
	z-index: 25;
}
.elm-fixed.bg-lower .double-frame-bg {
	position: fixed;
}
.elm-fixed.elm-abs .double-frame-bg {
	position: absolute;
	top: unset;
	bottom: 0;
}
.double-frame {
	position: absolute;
	width: 100%;
	height: 100%;
	height: 100vh;
	top: 0;
	pointer-events: none;
	transition: var(--easing-time) var(--easing-out);
	z-index: 26;
}
.elm-fixed .double-frame {
	position: fixed;
}
.elm-fixed.elm-abs .double-frame {
	position: absolute;
	top: unset;
	bottom: 0;
}
.bg-products .double-frame {
	box-shadow: 0 0 0 var(--size20) var(--color-darkblue) inset,
							0 0 0 var(--size22) var(--color-darkyellow) inset,
							0 0 0 var(--size24) var(--color-darkblue) inset,
							0 0 0 var(--size26) var(--color-darkyellow) inset;
}
.bg-special .double-frame {
	box-shadow: 0 0 0 var(--size20) #25325c inset,
							0 0 0 var(--size22) var(--color-darkyellow) inset,
							0 0 0 var(--size24) #25325c inset,
							0 0 0 var(--size26) var(--color-darkyellow) inset;
}
.bg-lower .double-frame {
	box-shadow: 0 0 0 var(--size20) var(--color-lightyellow) inset,
							0 0 0 var(--size22) var(--color-darkyellow) inset,
							0 0 0 var(--size24) var(--color-lightyellow) inset,
							0 0 0 var(--size26) var(--color-darkyellow) inset;
}

/* ----- リンクボタン枠 */
.btn-frame {
	display: block;
	margin: .15em;
	padding: .3em .7em;
	color: var(--color-white);
	background-color: var(--color-ultramarine);
	text-align: center;
	border-radius: 2em;
	outline: 1px var(--color-ultramarine) solid;
	outline-offset: .15em;
}
.btn-frame.active,
.slick-current .btn-frame {
	background-color: var(--color-darkyellow);
	outline-color: var(--color-darkyellow);
}
.btn-frame.none {
	background-color: #808080;
	outline-color: #808080;
	pointer-events: none;
}
.btn-frame:hover {
	text-decoration: none;
}

/* ----- カールセル slick用 */
.slick-slide a {
	display: block;
}

/* ----- lity設定 */
.lity {
	background: #faf1e0e6;
}
.lity-content:after {
	content: none;
}
.lity-close {
	color: var(--main-color-black);
	text-shadow: none;
}
.lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited {
	color: var(--main-color-black);
	text-shadow: none;
}


/*--------------------------------------------------
 * loading-contents - ロード + サウンド選択 画面
--------------------------------------------------*/
/* ----- ロード画面 */
#loading-wrap{
	position:fixed;
	width:100%;
	height:100%;
	height: 100vh;
	height: 100dvh;
	inset: 0;
	background-color: var(--color-lightyellow);
	z-index:9999;
}
.loading {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	width: 100%;
	height: 100%;
	inset: 0;
	background-color: var(--color-lightyellow);
	font-size: 14px;
	line-height: 1.2;
	z-index: 9999;
}
.loading-star1,
.loading-star2,
.loading-star3 {
	width: 7px;
	animation: loading-star 4s ease-out infinite;
  animation-delay: 1s;
}
.loading-star1 {
  animation-delay: 1s;
}
.loading-star2 {
  animation-delay: 2s;
}
.loading-star3 {
  animation-delay: 3s;
}
@keyframes loading-star {
  0%   { opacity: 1; visibility: visible; }
  20%  { opacity: 0; visibility: hidden; }
  40%  { opacity: 1; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}
/* ----- サウンド選択画面 */
.sound-contents {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--size50);
	width: 100%;
	height: 100%;
	text-align: center;
	background-image: url(/muse-labo/hagureboshi/assets/img/hagureboshi-bg.webp);
	background-repeat: repeat;
	background-position: center;
}
.sound-desc {
	font-size: var(--size36);
}
.sound-desc span {
	color: var(--color-darkyellow);
}
.sound-select-box {
	display: flex;
	gap: var(--size40);
}
.sound-notes {
	font-size: var(--size26);
}
/* サウンド選択画面 PC 835px以上 */
@media (min-width: 835px) {
	.sound-desc {
		font-size: 18px;
	}
	.sound-notes {
		font-size: 13px;
	}
}


/*--------------------------------------------------
 * サイドボタン - SNS 公式X + サウンド切り替え
--------------------------------------------------*/
.side-btn-box {
	position: fixed;
	display: flex;
	flex-direction: column;
	gap: var(--size40);
	right: 5%;
	bottom: 6%;
	z-index: 99;
}
.sns-box,
.sound-box {
	width: var(--size70);
	height: var(--size70);
}
/* SNS 公式X + サウンド切り替え PC 835px以上 */
@media (min-width: 835px) {
	.side-btn-box {
		gap: 14px;
	}
	.sns-box,
	.sound-box {
		width: 40px;
    height: 40px;
	}
}


/*--------------------------------------------------
 * site-contents - サイトコンテンツ
--------------------------------------------------*/
.site-contents {
	background-color: var(--main-color-black);
}


/*--------------------------------------------------
 * top-contents - トップコンテンツ
--------------------------------------------------*/
.top-contents {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 11;
}
/* ----- visual メインビジュアル */
.top-visual-box {
	position: relative;
	width: 100%;
	height: 100%;
}
/* visual メインビジュアル PC 835px以上 */
@media (min-width: 835px) {
	.top-visual-box {
		height: calc(100vw * (1155/1920));
		min-height: 1155px;
		overflow: hidden;
	}
	.visual-image {
		width: 100%;
    height: 100%;
	}
	.visual-image img {
		width: 100%;
    height: 100%;
    object-fit: cover;
	}
}
/* ----- outline ロゴ・受付リンク */
.outline-box {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
	inset: 0;
	/* padding: var(--size80) var(--size60) var(--size60); */
	padding: var(--size80) var(--size60) var(--size40);
}
.top-logo {
	width: min(65.95vw, 550px);
}
.top-logo img {
	filter: drop-shadow(0px 0px 1px #FFF) drop-shadow(0px 0px 2px #FFF) drop-shadow(0px 0px 2px #FFF) drop-shadow(0px 0px 4px #FFF) drop-shadow(0px 0px 5px #FFF);
}
.top-link-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* gap: var(--size40); */
	gap: var(--size20);
}
/* outline ロゴ・受付リンク PC 835px以上 */
@media (min-width: 835px) {
	.outline-box {
		padding: 100px 30px 60px;
	}
	.top-link-box {
		flex-direction: row;
		gap: 30px;
	}
}


/*--------------------------------------------------
 * recommended-contents - レコメンド + 本フレームマスク
--------------------------------------------------*/
/* ----- レコメンド */
.recommended-contents {
	--book-maskSize: 0%;
	--book-maskClipTopH: 0px;
	--book-maskClipRepeatH: 0px;
	--book-maskClipBottomH: 0px;
	--rec-scaleSize: 0px;
	--rec-opacity: 1;
	--rec-visibility: visible;
}
.recommended-contents {
	position: relative;
	width: 100%;
	height: 100%;
}
/* ----- レコメンド + 本フレームマスク 素材 */
.book-frame-bg {
	position: absolute;
	width: 100%;
	height: 100vh;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 10;
}
.elm-fixed .book-frame-bg {
	position: fixed;
}
.mask-clipping {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.mask-clipping-bg {
	width: 100%;
	background-image: url(/muse-labo/hagureboshi/assets/img/recommended-bg.webp);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: var(--easing-time) var(--easing-out);
}
.mask-clipping-top {
	height: var(--book-maskClipTopH);
	mask-image: url(/muse-labo/hagureboshi/assets/img/recommended-bg.webp), url(/muse-labo/hagureboshi/assets/img/mask-image-top.webp);
	mask-position: bottom;
	mask-repeat: repeat, no-repeat;
	mask-size: 100%, var(--book-maskSize);
	mask-composite: exclude;
	-webkit-mask-image: url(/muse-labo/hagureboshi/assets/img/recommended-bg.webp), url(/muse-labo/hagureboshi/assets/img/mask-image-top.webp);
	-webkit-mask-position: bottom;
	-webkit-mask-repeat: repeat, no-repeat;
	-webkit-mask-size: 100%, var(--book-maskSize);
	-webkit-mask-composite: xor;
}
.mask-clipping-repeat {
	height: var(--book-maskClipRepeatH);
	mask-image: url(/muse-labo/hagureboshi/assets/img/recommended-bg.webp), url(/muse-labo/hagureboshi/assets/img/mask-image-repeat.webp);
	mask-position: top;
	mask-repeat: repeat, repeat-y;
	mask-size: var(--book-maskSize);
	mask-composite: exclude;
	-webkit-mask-image: url(/muse-labo/hagureboshi/assets/img/recommended-bg.webp), url(/muse-labo/hagureboshi/assets/img/mask-image-repeat.webp);
	-webkit-mask-position: top;
	-webkit-mask-repeat: repeat, repeat-y;
	-webkit-mask-size: var(--book-maskSize);
	-webkit-mask-composite: xor;
}
.mask-clipping-bottom {
	height: var(--book-maskClipBottomH);
	mask-image: url(/muse-labo/hagureboshi/assets/img/recommended-bg.webp), url(/muse-labo/hagureboshi/assets/img/mask-image-bottom.webp);
	mask-position: top;
	mask-repeat: repeat, no-repeat;
	mask-size: 100%, var(--book-maskSize);
	mask-composite: exclude;
	-webkit-mask-image: url(/muse-labo/hagureboshi/assets/img/recommended-bg.webp), url(/muse-labo/hagureboshi/assets/img/mask-image-bottom.webp);
	-webkit-mask-position: top;
	-webkit-mask-repeat: repeat, no-repeat;
	-webkit-mask-size: 100%, var(--book-maskSize);
	-webkit-mask-composite: xor;
}
/* ----- レコメンド 背景素材 */
.recommended-bg {
	position: absolute;
	width: 100%;
	height: 100vh;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	perspective: 1000px;
	z-index: 11;
}
.elm-fixed .recommended-bg {
	position: fixed;
}
.recommended-bg1 {
	position: absolute;
	inset: 0;
	background-image: url(/muse-labo/hagureboshi/assets/img/recommended-bg1.webp);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: var(--rec-opacity);
	visibility: var(--rec-visibility);
	transform: translate3d(0, 0, var(--rec-scaleSize));
	filter: blur(calc(var(--rec-scaleSize)/600));
	transition: var(--easing-time) var(--easing-out);
}
.recommended-bg2 {
	position: absolute;
	inset: 0;
	background-image: url(/muse-labo/hagureboshi/assets/img/recommended-bg2.webp);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: var(--rec-opacity);
	visibility: var(--rec-visibility);
	transform: translate3d(0, calc(var(--rec-scaleSize)*0.07), calc(var(--rec-scaleSize)*1.5));
	filter: blur(calc(var(--rec-scaleSize)/500));
	transition: var(--easing-time) var(--easing-out);
}
.recommended-bg3 {
	position: absolute;
	inset: 0;
	background-image: url(/muse-labo/hagureboshi/assets/img/recommended-bg3.webp);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: var(--rec-opacity);
	visibility: var(--rec-visibility);
	transform: translate3d(0, 0, calc(var(--rec-scaleSize)*3));
	filter: blur(calc(var(--rec-scaleSize)/400));
	transition: var(--easing-time) var(--easing-out);
}
/* ----- レコメンド カールセル */
.recommended-box {
	position: relative;
	padding: var(--size150) var(--size50) var(--size18);
	z-index: 12;
}
/* レコメンド カールセル PC 835px以上 */
@media (min-width: 835px) {
	.recommended-box {
		padding-top: 300px;
	}
}
/* ----- レコメンド カールセル slick用 */
.recommended-list .slick-slider {
	width: 100%;
	max-width: min(93.53vw, 780px);
	margin: auto;
	padding: 0 var(--size60);
}
.recommended-list .slick-slider li {
	padding: 0 var(--size20);
}
.recommended-list .slick-slider .slick-prev,
.recommended-list .slick-slider .slick-next {
	width: var(--size50);
	height: var(--size50);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.recommended-list .slick-slider .slick-prev {
	left: 0;
	background-image: url(/muse-labo/hagureboshi/assets/img/slick-prev-white.svg);
}
.recommended-list .slick-slider .slick-next {
	right: 0;
	background-image: url(/muse-labo/hagureboshi/assets/img/slick-next-white.svg);
}
.recommended-list .slick-slider .slick-prev:before,
.recommended-list .slick-slider .slick-next:before {
	content: none;
}
/* レコメンド カールセル slick用 PC 835px以上 */
@media (min-width: 835px) {
	.recommended-list .slick-slider {
		max-width: 1050px;
		padding: 0 30px;
	}
	.recommended-list .slick-slider .slick-prev,
	.recommended-list .slick-slider .slick-next {
		width: 30px;
		height: 30px;
	}
}


/*--------------------------------------------------
 * イントロダクション・ストーリー・スタッフ
 *  --  レイヤー順序
 *  背景 0-2
 *  コンテンツ 5
--------------------------------------------------*/
.introduction-contents,
.story-contents,
.staff-contents,
.introduction-box,
.story-box,
.staff-box {
	position: relative;
}
.introduction-box,
.story-box,
.staff-box {
	z-index: 5;
}

/*--------------------------------------------------
 * イントロダクション・ストーリー・スタッフ
 *  --  背景設定
--------------------------------------------------*/
.content-bg {
	position: sticky;
	width: 100%;
	height: 100vh;
	inset: 0;
	perspective: 1000px;
	overflow: hidden;
}
.content-bg--introduction,
.content-bg--story,
.content-bg--staff {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	background-position: bottom;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	transform: translate3d(0, 0, 0) scale(1);
	transition: var(--easing-time) var(--easing-out);
}
.content-bg--introduction {
	background-image: url(/muse-labo/hagureboshi/assets/img/intro-bg.webp);
}
.content-bg--story {
	background-image: url(/muse-labo/hagureboshi/assets/img/story-bg.webp);
}
.content-bg--staff {
	background-image: url(/muse-labo/hagureboshi/assets/img/staff-bg.webp);
}
.set-introduction .content-bg--introduction {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 1px) scale(var(--bg-scale));
}
.set-story .content-bg--story,
.set-staff .content-bg--staff {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 1px);
}
.set-introduction,
.set-staff {
	color: var(--color-darkblue);
	transition: var(--easing-time) var(--easing-out);
}
.set-story {
	color: var(--color-white);
	transition: var(--easing-time) var(--easing-out);
}
.set-story .story-text {
	text-shadow: 0 0 3px var(--color-darkblue), 0 0 4px var(--color-darkblue), 0 0 6px var(--color-darkblue);
}

/*--------------------------------------------------
 * introduction-contents - イントロダクション
--------------------------------------------------*/
/* ----- イントロダクション */
.introduction-box {
	padding: 600px var(--size50) var(--size400);
}
.intro-text {
	text-align: center;
}
.intro-text>p {
	margin: auto;
}
.intro-heading {
	width: min(77.94vw, 650px);
	padding-top: var(--size20);
}
.intro-lead {
	width: min(72.54vw, 605px);
	padding-top: var(--size40);
}
.intro-text-image1 {
	width: min(64.15vw, 535px);
	padding-top: var(--size80);
}
.intro-text-image2 {
	width: min(69.54vw, 580px);
	padding-top: var(--size60);
}
.intro-lead img,
.intro-text-image1 img {
	filter: drop-shadow(0px 0px 1px #f8f1e5CC) drop-shadow(0px 0px 2px #f8f1e5CC) drop-shadow(0px 0px 5px #f8f1e5);
}
/* イントロダクション PC 835px以上 */
@media (min-width: 835px) {
	.intro-heading {
		width: 500px;
		padding-top: 60px;
	}
	.intro-lead {
		width: 465px;
		padding-top: 60px;
	}
	.intro-text-image1 {
		width: 570px;
		padding-top: 60px;
	}
	.intro-text-image2 {
		width: 440px;
		padding-top: 50px;
	}
}


/*--------------------------------------------------
 * story-contents - ストーリー
--------------------------------------------------*/
/* ----- ストーリー サイドイメージ */
.story-image-box {
	position: absolute;
	width: 100%;
	max-width: var(--pc-max-width);
	height: 100%;
	inset: 0;
	margin: auto;
	overflow: hidden;
}
.story-image {
	position: absolute;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.story-image1 {
	width: min(23.98vw, 200px);
	height: min(23.98vw, 200px);
	top: 26%;
	left: 1%;
	background-image: url(/muse-labo/hagureboshi/assets/img/story-image1.webp);
}
.story-image2 {
	width: min(20.38vw, 170px);
	height: min(20.38vw, 170px);
	top: 46%;
	left: -4%;
	background-image: url(/muse-labo/hagureboshi/assets/img/story-image2.webp);
}
.story-image3 {
	width: min(35.97vw, 300px);
	height: min(35.97vw, 300px);
	top: 63%;
	left: -6%;
	background-image: url(/muse-labo/hagureboshi/assets/img/story-image3.webp);
}
.story-image4 {
	width: min(35.97vw, 300px);
	height: min(35.97vw, 300px);
	top: 25%;
	right: -6%;
	background-image: url(/muse-labo/hagureboshi/assets/img/story-image4.webp);
}
.story-image5 {
	width: min(20.38vw, 170px);
	height: min(20.38vw, 170px);
	top: 50%;
	right: -4%;
	background-image: url(/muse-labo/hagureboshi/assets/img/story-image5.webp);
}
.story-image6 {
	width: min(23.98vw, 200px);
	height: min(23.98vw, 200px);
	top: 72%;
	right: 1%;
	background-image: url(/muse-labo/hagureboshi/assets/img/story-image6.webp);
}
/* ストーリー サイドイメージ PC 835px以上 */
@media (min-width: 835px) {
	.story-image1 {
		top: 29%;
		left: 4%;
	}
	.story-image2 {
		top: 50%;
		left: 2%;
	}
	.story-image3 {
		top: 63%;
		left: 7%;
	}
	.story-image4 {
		width: min(35.97vw, 300px);
		height: min(35.97vw, 300px);
		top: 26%;
		right: 2%;
		background-image: url(/muse-labo/hagureboshi/assets/img/story-image4.webp);
	}
	.story-image5 {
		top: 51%;
		right: 1%;
	}
	.story-image6 {
		top: 74%;
		right: 11%;
	}
}
/* ----- ストーリー */
.story-text {
	position: relative;
	font-size: var(--size28);
	text-align: center;
	line-height: 2;
	text-shadow: 0 0 3px var(--color-white), 0 0 4px var(--color-white), 0 0 6px var(--color-white);
}
/* ストーリー PC 835px以上 */
@media (min-width: 835px) {
	.story-text {
		font-size: 15px;
		line-height: 2.6;
	}
}


/*--------------------------------------------------
 * staff-contents - スタッフ
--------------------------------------------------*/
/* ----- コメントボタン */
.staff-comment-btn a {
	position: relative;
	display: block;
	padding: .35em .6em .6em;
	color: var(--color-yellow);
	background: var(--color-darkblue);
	font-size: var(--size20);
	font-weight: 700;
	text-align: center;
	line-height: 1;
	border-radius: 4em;
}
.staff-comment-btn a::after {
	content: '';
	position: absolute;
	height: 0;
	width: 0;
	top: 95%;
	left: .2em;
	border: solid transparent;
	border-width: .6em;
	border-top-color: var(--color-darkblue);
	transform: skewX(-48deg);
	pointer-events: none;
}
.staff-comment-btn a:hover {
	text-decoration: none;
}
/* コメントボタン PC 835px以上 */
@media (min-width: 835px) {
	.staff-comment-btn a {
		font-size: 13px;
	}
}
/* ----- スタッフ 2カラム枠 */
.staff-list.staff-list-2clm {
	display: flex;
	flex-direction: column;
	gap: var(--size60);
	width: 100%;
}
.staff-list-detail {
	display: flex;
	gap: var(--size40);
}
.staff-detail-image {
	width: min(22.78vw, 190px);
}
.staff-detail-image img {
	outline: 1px var(--color-darkyellow) solid;
}
.staff-detail-profile {
	width: min(57.55vw, 480px);
}
.staff-credit {
	font-size: var(--size24);
	font-weight: 700;
	line-height: 1;
}
.staff-name-box {
	display: flex;
	align-items: center;
	gap: var(--size12);
}
.staff-name {
	font-size: var(--size36);
	font-weight: 700;
}
.staff-career {
	padding-top: var(--size14);
	font-size: var(--size28);
	text-align: justify;
}
/* スタッフ 2カラム枠 PC 835px以上 */
@media (min-width: 835px) {
	.staff-list {
		max-width: var(--pc-max-width);
		margin: auto;
	}
	.staff-list.staff-list-2clm {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.staff-list-detail {
		gap: 24px;
	}
	.staff-detail-profile {
    width: 250px;
	}
	.staff-credit {
		font-size: 14px;
	}
	.staff-name {
		font-size: 28px;
	}
	.staff-career {
		font-size: 14px;
	}
}
/* ----- スタッフ 3カラム枠 */
.staff-list.staff-list-3clm {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: var(--size60);
	padding-top: var(--size60);
}
.staff-list-outline {
	width: 43%;
	width: 100%;
	padding: 0 0.5em;
}
.staff-outline-profile {
	display: flex;
	align-items: center;
	gap: var(--size20);
}
.staff-separator {
	display: none;
}
/* スタッフ 3カラム枠 PC 835px以上 */
@media (min-width: 835px) {
	.staff-list.staff-list-3clm {
		gap: 30px;
	}
	.staff-list-outline {
    width: fit-content;
    padding: 0;
	}
	.staff-outline-profile {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
	}
	.staff-separator {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 16px;
	}
}

/*--------------------------------------------------
 * movie-contents - 映像
--------------------------------------------------*/
/* ----- 映像 */
.movie-contents {
	position: relative;
	width: 100%;
	height: 100%;
}
.movie-contents::before {
	content: "";
	position: absolute;
	z-index: 20;
	width: 100%;
	height: calc(100vw * (160/1920));
	bottom: 100%;
	background: linear-gradient(to bottom, rgba(37,43,59,0) 0%,rgba(37,43,59,0.6) 50%,rgba(37,43,59,1) 100%);
}
.movie-bg {
	position: absolute;
	width: 100%;
	height: 100vh;
	inset: 0;
	background-image: url(/muse-labo/hagureboshi/assets/img/movie-bg.webp);
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 20;
}
.elm-fixed .movie-bg {
	position: fixed;
}
.movie-box {
	position: relative;
	padding: var(--size200) var(--size50) var(--size400);
	z-index: 21;
}
.movie-contents .heading {
	padding-bottom: var(--size60);
	color: var(--color-white);
}
/* ----- 映像サムネイル枠 */
.movie-thumbnail-box {
	--movie-frameMaxW: 950px;
	--movie-frameMaxH: 600px;
	--movie-thumbMaxW: 800px;
	--movie-thumbMaxH: 450px;
	--movie-frameW: 950px;
	--movie-frameH: 600px;
	--movie-thumbW: 800px;
	--movie-thumbH: 450px;

	position: relative;
	width: 100%;
	max-width: var(--movie-frameMaxW);
	height: var(--movie-frameH);
	max-height: var(--movie-frameMaxH);
	margin: auto;
	overflow: hidden;
}
.movie-frame-below,
.movie-frame-above {
	position: absolute;
	inset: 0;
	margin: auto;
	pointer-events: none;
}
.movie-frame-below {
	width: var(--movie-thumbW);
	max-width: var(--movie-thumbMaxW);
	height: var(--movie-thumbH);
	max-height: var(--movie-thumbMaxH);
	z-index: 22;
}
.movie-frame-above {
	z-index: 24;
}
.movie-thumbnail {
	position: absolute;
	width: var(--movie-thumbW);
	max-width: var(--movie-thumbMaxW);
	height: var(--movie-thumbH);
	max-height: var(--movie-thumbMaxH);
	inset: 0;
	margin: auto;
	overflow: hidden;
	z-index: 23;
}
/* ----- 映像タイトル枠 */
.movie-title-box {
	position: relative;
	/* display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--size12); */
	width: 100%;
	margin: auto;
	margin-top: calc(-1 * var(--size20));
	padding-bottom: var(--size20);
}
.movie-title {
	font-size: var(--size28);
}
.movie-thumbnail .slick-prev {
	left: -20px;
}
.movie-thumbnail .slick-next {
	right: -20px;
}
/* 映像タイトル枠 PC 835px以上 */
@media (min-width: 835px) {
	.movie-title-box {
		max-width: 800px;
	}
	.movie-title {
		font-size: 18px;
	}
}
/* ----- レコメンド カールセル slick用 */
.movie-title-box .slick-track {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	transform: unset !important;
	width: 100% !important;
	max-width: 100% !important;
}
.movie-title-box .slick-track li {
	width: auto !important;
	width: 100% !important;
	padding: .5em .25em;
	float: none !important;
}
.movie-title-box .slick-track li:not(:nth-child(-n+2)) {
	width: 50% !important;
}
/* レコメンド カールセル PC 835px以上 */
@media (min-width: 835px) {
	.movie-title-box .slick-track li {
		width: 50% !important;
		padding: .5em;
	}
}


/*--------------------------------------------------
 * products-contents - 商品情報
--------------------------------------------------*/
/* ----- 商品情報 */
.products-contents {
	position: relative;
	z-index: 25;
}
.products-box {
}
#products .heading {
	color: var(--color-darkyellow);
}
.products-data-column {
	display: flex;
	flex-direction: column;
	gap: var(--size40);
	color: var(--color-yellow-high);
}
/* 商品情報 PC 835px以上 */
@media (min-width: 835px) {
	.products-data-column {
		flex-direction: row;
		justify-content: center;
		gap: min(5.26vw, 50px);
    max-width: 950px;
		margin: auto;
	}
}
/* ----- 作品タイトル */
.products-title.sp {
	display: block;
	font-size: var(--size48);
	text-align: center;
	line-height: 1;
}
.products-title.pc {
	display: none;
}
/* 作品タイトル PC 835px以上 */
@media (min-width: 835px) {
	.products-title.sp {
		display: none;
	}
	.products-title.pc {
		display: block;
    font-size: 32px;
		padding: 0 20px;
	}
}
/* ----- 商品画像・情報 */
.products-image,
.products-detail {
	width: 100%;
}
.products-image .slick-slider .slick-list {
	border: 1px var(--color-darkyellow) solid;
}
/* 商品画像・情報 PC 835px以上 */
@media (min-width: 835px) {
	/* vw 835px - 1100px / width 280px - 540px */
	.products-image {
		width: clamp(17.5rem, -33.703rem + 98.11vw, 33.75rem);
	}
	.products-detail {
		width: 360px;
	}
}
/* ----- 商品画像 カールセル slick用 */
.products-image .slick-slider .slick-prev,
.products-image .slick-slider .slick-next {
	width: var(--size60);
	height: var(--size60);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 26;
}
.products-image .slick-slider .slick-prev {
	left: 3.5%;
	background-image: url(/muse-labo/hagureboshi/assets/img/slick-prev.svg);
}
.products-image .slick-slider .slick-next {
	right: 3.5%;
	background-image: url(/muse-labo/hagureboshi/assets/img/slick-next.svg);
}
.products-image .slick-slider .slick-prev:before,
.products-image .slick-slider .slick-next:before {
	content: none;
}
/* 商品画像 カールセル slick用 PC 835px以上 */
@media (min-width: 835px) {
	.products-image .slick-slider .slick-prev,
	.products-image .slick-slider .slick-next {
		width: 30px;
		height: 30px;
	}
}
/* ----- セパレータ */
.products-separator-line {
	width: 100%;
	border-top: 1px var(--color-darkyellow) solid;
}
/* ----- スタッフ */
.products-staff {
	font-size: var(--size30);
	padding: 0 var(--size30) var(--size48);
}
.products-staff li + li {
	padding-top: .2em;
}
.products-staff li:nth-child(6) {
	padding-top: 1em;
}
/* スタッフ PC 835px以上 */
@media (min-width: 835px) {
	.products-staff {
		font-size: 15px;
		padding: 20px 20px 36px;
	}
}
/* ----- 商品概要 */
.products-outline {
	padding: var(--size30) var(--size30) var(--size48);
}
.products-price {
	font-size: var(--size36);
	color: var(--color-yellow-high);
}
.products-price span {
	font-size: var(--size28);
}
.products-items {
	display: flex;
}
.products-items,
.products-shipping {
	font-size: var(--size28);
}
.products-sale,
.products-sale-link {
	padding-top: var(--size26);
	font-size: var(--size32);
}
.products-sale span {
	letter-spacing: -3px;
}
/* 商品概要 PC 835px以上 */
@media (min-width: 835px) {
	.products-outline {
		padding: 20px 20px 30px;
	}
	.products-price {
		font-size: 18px;
	}
	.products-price span {
		font-size: 15px;
	}
	.products-items,
	.products-shipping {
		font-size: 15px;
	}
	.products-sale,
	.products-sale-link {
		padding-top: 15px;
		font-size: 18px;
	}
}
/* ----- CDインデックス */
.products-cd-index {
	padding: var(--size48) var(--size30);
	font-size: var(--size30);
}
.products-cd-index dt {
	color: var(--color-yellow-mid);
}
/* CDインデックス PC 835px以上 */
@media (min-width: 835px) {
	.products-cd-index {
    padding: 36px 20px;
		font-size: 15px;
	}
}
/* ----- 奥付 */
.products-colophon {
	padding: var(--size48) var(--size30) var(--size120);
	font-size: var(--size26);
}
.products-colophon li + li {
	padding-top: 0.2em;
}
/* 奥付 PC 835px以上 */
@media (min-width: 835px) {
	.products-colophon {
		padding: 30px 20px 80px;
		font-size: 13px;
	}
}
/* ----- コミケ情報 */
.products-data-c103 {
	padding: var(--size50);
	background-color: var(--color-darkblue);
}
.products-c103-head {
	padding-bottom: var(--size40);
	font-size: var(--size32);
	text-align: left;
}
.products-c103-head a {
	color: var(--color-yellow-low);
	border-bottom: 1px solid;
}
.products-c103-head a:hover {
	text-decoration: none;
	border-bottom: transparent;
}
.products-c103-box {
	display: flex;
	flex-direction: column;
	gap: var(--size40);
	color: var(--color-yellow-high);
}
.products-c103-image {
	max-width: 500px;
	margin: 0 auto;
}
.products-c103-desc {
	font-size: var(--size30);
	text-align: justify;
}
.products-c103-outline dt {
	padding-top: var(--size40);
	color: var(--color-yellow-mid);
	font-size: var(--size32);
}
.products-c103-outline dd {
	font-size: var(--size30);
}
.products-c103-outline dd span {
	display: block;
	font-size: var(--size32);
}
.products-c103-link {
	padding-top: var(--size14);
	width: min(38.37vw, 320px);
}
/* コミケ情報 PC 835px以上 */
@media (min-width: 835px) {
	.products-data-c103 {
		max-width: 950px;
		padding: 40px;
    margin: auto;
	}
	.products-c103-head {
		padding-bottom: 30px;
		font-size: 22px;
		text-align: center;
	}
	.products-c103-head a span {
		display: inline-block;
	}
	.products-c103-box {
		flex-direction: row;
	}
	.products-c103-image {
		width: 45%;
    max-width: 350px;
	}
	.products-c103-detail {
		width: 55%;
    max-width: 440px;
	}
	.products-c103-desc {
		font-size: 15px;
	}
	.products-c103-outline dt {
		padding-top: 20px;
		font-size: 15px;
	}
	.products-c103-outline dd {
		font-size: 18px;
	}
	.products-c103-outline dd span {
		font-size: 15px;
	}
	.products-c103-link {
		width: 100%;
		max-width: 200px;
	}
}


/*--------------------------------------------------
 * special-contents - スペシャル
--------------------------------------------------*/
/* ----- スペシャル */
.special-contents {
	position: relative;
	z-index: 25;
}
.special-box {
	padding: var(--size100) var(--size40) var(--size200);
}
#special .heading {
	color: var(--color-darkyellow);
}
.special-list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	gap: 40px;
	padding: 0 var(--size20);
}
.special-list a,
.special-list a:hover {
	text-decoration: none;
}
.special-list-title {
	padding: var(--size16);
	color: var(--color-yellow-high);
	font-size: 15px;
	line-height: 1;
}
.special-separator-line {
	width: 100%;
	border-top: 1px var(--color-darkyellow) solid;
}
.special-list-link {
	padding: var(--size10);
	color: var(--color-darkyellow);
	font-size: 13px;
	text-align: right;
	line-height: 1;
}
/* スペシャル PC 835px以上 */
@media (min-width: 835px) {
	.special-list {
		justify-content: flex-start;
		max-width: 990px;
		margin: auto;
	}
}


/*--------------------------------------------------
 * footer-contents
--------------------------------------------------*/
.footer-contents {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	padding: var(--size60) var(--size40) var(--size40);
	background-image: url(/muse-labo/hagureboshi/assets/img/footer-bg.webp);
	background-position: 92% 0;
	background-size: cover;
	z-index: 25;
}
.footer-hagureboshi img {
	width: min(45.56vw, 380px);
	filter: drop-shadow(0px 0px 2px #fff8f2) drop-shadow(0px 0px 2px #fff8f2) drop-shadow(0px 0px 6px #fff8f2);
}
.footer-KyoaniMuseLabo {
	padding-top: var(--size40);
}
.footer-KyoaniMuseLabo img {
	width: var(--size200);
	filter: drop-shadow(0px 0px 2px #fff8f2) drop-shadow(0px 0px 7px #fff8f2);
}
.footer-kyotoanimation {
	padding-top: var(--size30);
}
.footer-kyotoanimation img {
	width: min(32.97vw, 275px);
	filter: drop-shadow(0px 0px 2px #fff8f27F) drop-shadow(0px 0px 2px #fff8f2) drop-shadow(0px 0px 6px #fff8f2);
}
.copyright {
	padding-top: var(--size30);
	font-size: var(--size24);
	font-weight: 700;
	text-shadow: 0px 0px 2px var(--color-lightyellow),0px 0px 3px var(--color-lightyellow), 0px 0px 5px var(--color-lightyellow);
}
/* footer-contents PC 835px以上 */
@media (min-width: 835px) {
	.footer-contents {
		height: 350px;
		background-position: right 0;
	}
	.footer-hagureboshi img {
		width: 270px;
	}
	.footer-KyoaniMuseLabo {
		padding-top: 30px;
	}
	.footer-KyoaniMuseLabo img {
		width: 140px;
	}
	.footer-kyotoanimation {
		padding-top: 20px;
	}
	.footer-kyotoanimation img {
		width: 210px;
	}
	.copyright {
		padding-top: 30px;
		font-size: 12px;
	}
}




/*--------------------------------------------------
 * lower page
--------------------------------------------------*/
/*--------------------------------------------------
 * header-contents
--------------------------------------------------*/
.header-contents {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--size70);
	width: 100%;
	height: 100px;
	padding: var(--size34) var(--size20);
	background-image: url(/muse-labo/hagureboshi/assets/img/header-bg--sp.webp);
	background-size: cover;
	background-position: center;
}
.lower-logo {
}
.lower-logo img {
	filter: drop-shadow(0px 0px 1px #FFF) drop-shadow(0px 0px 1px #FFF) drop-shadow(0px 0px 1px #FFF) drop-shadow(0px 0px 2px #FFF);
}
.menu-list {
	display: none;
}
/* header-contents PC 835px以上 */
@media (min-width: 835px) {
	.header-contents {
		background-image: url(/muse-labo/hagureboshi/assets/img/header-bg.webp);
	}
	.menu-list {
		display: flex;
		flex-wrap: wrap;
	}
	.menu-list li {
		padding-right: 18px;
		padding-bottom: .2em;
	}
	.menu-list a {
		color: var(--color-white);
		font-family: var(--font-family-coronette);
		font-size: 16px;
		text-shadow: 0px 0px 1px var(--color-ultramarine), 0px 0px 3px var(--color-darkblue);
	}
}

/*--------------------------------------------------
 * sub-menu-contents
--------------------------------------------------*/
.sub-menu-contents {

}
.sub-menu-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--size18);
	padding: var(--size40);
	background-color: #323232;
	font-size: var(--size22);
	font-family: var(--font-family-coronette);
}
.sub-menu-list a {
	color: var(--color-white);
}
/* sub-menu-contents PC 835px以上 */
@media (min-width: 835px) {
	.sub-menu-contents {
		display: none;
	}
}


/*--------------------------------------------------
 * lower-contents
--------------------------------------------------*/
.lower-contents {
	position: relative;
	z-index: 25;
}
.lower-box {
	padding: var(--size100) var(--size40) var(--size120);
}
.lower .heading {
	padding-bottom: var(--size60);
	color: var(--color-darkyellow);
}
.lower-head {
	padding-bottom: var(--size30);
	color: var(--main-color-black);
	font-size: var(--size40);
	text-align: center;
}
.lower-data-box {
	width: 100%;
	max-width: var(--sp-max-width);
	margin: auto;
	padding: var(--size50) var(--size40);
	background-color: var(--color-highlightyellow);
}
.lower-sub-head {
	padding-bottom: var(--size30);
	color: var(--main-color-black);
	font-size: var(--size36);
	text-align: center;
}
.lower-sub-head ~ .lower-sub-head {
	padding-top: var(--size50);
}
.download-icon,
.loupe-icon {
	position: absolute;
	bottom: 0;
	right: 0;
	width: var(--size60);
}
.lower-notes {
	padding-top: var(--size80);
	color: var(--main-color-black);
	font-size: var(--size26);
	text-align: left;
}
.lower-notes li {
	padding-left: 1em;
	text-indent: -1em;
}
/* lower-contents PC 835px以上 */
@media (min-width: 835px) {
	.lower-head {
		font-size: 24px;
	}
	.lower-data-box {
		padding: 50px 77px;
	}
	.lower-sub-head {
		font-size: 20px;
	}
	.download-icon,
	.loupe-icon {
		width: 40px;
	}
	.lower-notes {
		padding-top: 50px;
		font-size: 13px;
	}
}


/*--------------------------------------------------
 * special キャンペーン記事
--------------------------------------------------*/
.special-article .lower-head {
	width: 100%;
	max-width: var(--sp-max-width);
	margin: auto;
	padding: 0 var(--size40) var(--size30);
	text-align: justify;
}
.special-article .lower-data-box {
	text-align: justify;
	font-size: var(--size28);
}
.special-article a {
	color: var(--color-darkyellow);
	text-decoration: underline;
}
.special-article a:hover {
	text-decoration: none;
}
.article-image {
	padding: var(--size30) 0;
}
.article-image img {
	width: var(--size400);
}
.article-notes {
	font-size: var(--size26);
}
.list--num {
	padding-left: 1.25em;
	text-indent: -1em;
}
.list--dot {
	padding-left: 1.5em;
	list-style: disc outside;
}
.article-notes li + li,
.article-list li + li {
	padding-top: 0.25em;
}
.article-pdtop20-10 {
	padding-top: var(--size20);
}
.article-pdtop30-20 {
	padding-top: var(--size30);
}
.article-pdtop80-40 {
	padding-top: var(--size80);
}
/* special キャンペーン記事 PC 835px以上 */
@media (min-width: 835px) {
	.special-article .lower-head {
		padding: 0 77px 30px;
	}
	.special-article .lower-data-box {
		font-size: 15px;
	}
	.article-notes {
		font-size: 13px;
	}
	.article-pdtop20-10 {
		padding-top: 10px;
	}
	.article-pdtop30-20 {
		padding-top: 20px;
	}
	.article-pdtop80-40 {
		padding-top: 40px;
	}
}



/*--------------------------------------------------
 * クリスマスカード
--------------------------------------------------*/
.christmas-card {
	text-align: center;
}
.christmas-card-link {
	position: relative;
	display: inline-block;
}
.christmas-card-link {
	width: min(27.58vw, 230px);
}
.christmas-card-size {
	padding-top: var(--size12);
	color: var(--main-color-black);
	font-size: var(--size30);
	text-align: center;
}
/* クリスマスカード PC 835px以上 */
@media (min-width: 835px) {
	.christmas-card-link {
    width: 100%;
		max-width: 180px;
	}
	.christmas-card-size {
		font-size: 15px;
	}
}


/*--------------------------------------------------
 * アイコン・壁紙プレゼント
--------------------------------------------------*/
.icon-list {
	display: flex;
	justify-content: center;
	gap: var(--size40);
}
.wallpaper-list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--size40);
	text-align: center;
}
.icon-link,
.wallpaper-link {
	position: relative;
	display: inline-block;
}
.icon-link {
	width: min(19.18vw, 160px);
}
.wallpaper-link-sp {
	width: min(27.58vw, 230px);
}
.wallpaper-link-pc {
	width: min(64.75vw, 540px);
}
.wallpaper-size {
	padding-top: var(--size20);
	font-size: var(--size30);
	text-align: center;
}
/* アイコン・壁紙プレゼント PC 835px以上 */
@media (min-width: 835px) {
	.wallpaper-list {
		flex-direction: row;
	}
	.icon-link {
    width: 100%;
		max-width: 150px;
	}
	.wallpaper-link-sp {
    width: 100%;
		max-width: 130px;
	}
	.wallpaper-link-pc {
    width: 100%;
		max-width: 498px;
	}
	.wallpaper-size {
		font-size: 15px;
	}
}


/*--------------------------------------------------
 * ギャラリー
--------------------------------------------------*/
.special-gallery .lower-data-box {
	background-color: var(--color-transp);
}
.gallery-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--size60);
}
.gallery-link {
	position: relative;
	display: inline-block;
	outline: 1px var(--color-darkyellow) solid;
}
.gallery-link {
	width: min(26.38vw, 220px);
}
.quarter-circle {
	position: absolute;
	width: 5%;
	height: 5%;
	background-color: var(--color-darkyellow);
}
.quarter-circle1 {
	inset: 0 auto auto 0;
	border-radius: 0 0 100% 0;
}
.quarter-circle2 {
	inset: 0 0 auto auto;
	border-radius: 0 0 0 100%;
}
.quarter-circle3 {
	inset: auto auto 0 0;
	border-radius: 0 100% 0 0;
}
/* ギャラリー PC 835px以上 */
@media (min-width: 835px) {
	.special-gallery .lower-data-box {
		max-width: 660px;
		padding: 50px 0;
	}
	.gallery-list {
		justify-content: flex-start;
		gap: 30px;
	}
	.gallery-link {
    width: 100%;
		max-width: 200px;
	}
}
/* ギャラリー PC 900px以上 */
@media (min-width: 1010px) {
	.special-gallery .lower-data-box {
		max-width: 890px;
	}
}


/*--------------------------------------------------
 * 試し読み
--------------------------------------------------*/
.viewer-contents {
	width: 100%;
	height: 100%;
	background-image: url(/muse-labo/hagureboshi/assets/img/hagureboshi-bg.webp);
	background-repeat: repeat;
	background-position: center;
	padding: var(--size70) 0 var(--size120);
}
.lower .heading.viewer-heading {
	padding-bottom: 0;
	color: var(--main-color-black);
	font-family: var(--font-family-shippori);
	font-size: var(--size40);
}
.sub-heading {
	display: block;
	color: var(--color-darkyellow);
	font-family: var(--font-family-coronette);
	font-size: var(--size24);
}
.viewer-sound {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	max-width: 1500px;
	height: 100%;
	margin: auto;
	padding: 5px 15px 15px;
}
.swiper {
	width: 100%;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
}
.swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	text-align: center;
	background-color: #fff;
	background-size: cover;
	background-position: center;
}
.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mySwiper2 {
	width: 100%;
	max-width: 1500px;
	height: 100%;
}
.mySwiper {
	height: 20%;
	box-sizing: border-box;
	padding: var(--size30) 0;
}
.mySwiper .swiper-wrapper {
	justify-content: unset;
}
.mySwiper .swiper-slide {
	width: 25%;
	max-width: 200px;
	height: 100%;
	opacity: 0.4;
}
.mySwiper .swiper-slide-thumb-active {
	opacity: 1;
}
/* 試し読み PC 835px以上 */
@media (min-width: 835px) {
	.mySwiper {
		padding: 40px 0;
	}
	.mySwiper .swiper-wrapper {
		justify-content: center;
	}
}

/* ポートレートモード */
@media (orientation: portrait) {
	.viewer-orientation {
		position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    inset: 0;
    background-color: #04112e80;
    z-index: 999;
	}
	.viewer-orientation.orientation-hidden {
		display: none;
	}
	.viewer-orientation img {
    width: 50%;
	}
}
/* ポートレートモード 835px以上 または ランドスケープモード */
@media (min-width: 835px), (orientation: landscape) {
	.viewer-orientation {
		display: none;
	}
}


/*--------------------------------------------------
 * インタビュー
--------------------------------------------------*/
.special-interview .lower-head {
	padding: 0 var(--size40) var(--size30);
}
.interview-lead {
	padding: var(--size40) 0 var(--size60);
	font-size: var(--size28);
	text-align: justify;
}
.interview-subhead {
	padding: var(--size10) var(--size20);
	color: var(--color-white);
	background-color: var(--color-darkyellow);
	font-size: var(--size36);
	text-align: center;
}
.interview-question {
	padding-left: 1em;
	color: var(--color-darkyellow);
	font-size: var(--size32);
	text-align: justify;
	text-indent: -1em;
}
.interview-answer {
	position: relative;
}
.answer-staff {
	position: absolute;
	top: 0;
	left: 0;
	width: min(13.43vw, 112px);
	height: min(13.43vw, 112px);
	z-index: 4;
}
.answer-text-box {
	position: relative;
	width: min(71.46vw, 596px);
	margin: 0 0 0 auto;
	padding-top: min(6.59vw, 55px);
	font-size: var(--size28);
	text-align: justify;
}
.answer-balloon {
	position: absolute;
	top: min(14.87vw, 124px);
	left: -1.3em;
	z-index: 2;
}
.answer-balloon .balloon-fill {
	stroke: none;
	fill: #faf2e1;
}
.answer-balloon .balloon-stroke {
	stroke-width: 2;
	fill: none;
}
.answer-text {
	position: relative;
}
.answer-text::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--size20);
	z-index: 1;
}
.answer-text>p {
	position: relative;
	display: block;
	padding: var(--size60) var(--size40);
	background-color: #faf2e1;
	border-radius: var(--size20);
	z-index: 3;
}
.answer-text-br {
	display: block;
	padding-top: 10px;
}
.answer-yamasaki .answer-balloon .balloon-stroke {
	stroke: #f59b00;
}
.answer-yamasaki .answer-text::before {
	background-color: #f59b00;
	box-shadow: 0 0 0 2px #f59b00;
}
.answer-sato .answer-balloon .balloon-stroke {
	stroke: #26bfc7;
}
.answer-sato .answer-text::before {
	background-color: #26bfc7;
	box-shadow: 0 0 0 2px #26bfc7;
}
.interview-image-inner {
	width: min(71.46vw, 596px);
	margin: 0 0 0 auto;
}
.interview-body .btn-frame {
	width: min(59.95vw, 500px);
	margin: auto;
	padding: 0.6em 0.7em;
	font-size: var(--size26);
}
.btn-frame-interview01.btn-frame {
	background-color: #f59b00;
	outline-color: #f59b00;
}
.btn-frame-interview02.btn-frame {
	background-color: #26bfc7;
	outline-color: #26bfc7;
}
/* インタビュー PC 835px以上 */
@media (min-width: 835px) {
	.special-interview .lower-head {
		text-align: center;
	}
	.interview-lead {
		padding: 30px 0 60px;
		font-size: 15px;
	}
	.interview-subhead {
		font-size: 24px;
	}
	.interview-question {
		font-size: 20px;
	}
	.interview-answer {
	}
	.answer-staff {
		width: 80px;
		height: 80px;
	}
	.answer-text-box {
		width: 600px;
		margin: auto;
		padding-top: 36px;
		font-size: 15px;
	}
	.answer-balloon {
		top: 85px;
	}
	.answer-text>p {
		padding: 40px;
	}
	.answer-text-br {
		padding-top: 16px;
	}
	.interview-image-inner {
		width: 600px;
		margin: auto;
	}
	.interview-body .btn-frame {
		width: 360px;
		font-size: 15px;
	}
}

/* インタビュー 要素の間隔 */
.pbS30P10 {
	padding-bottom: var(--size30);
}
.pbS30P20 {
	padding-bottom: var(--size30);
}
.pbS40P30 {
	padding-bottom: var(--size40);
}
.pbS80P70 {
	padding-bottom: var(--size80);
}
.pbS80P80 {
	padding-bottom: var(--size80);
}
/* インタビュー 要素の間隔 PC 835px以上 */
@media (min-width: 835px) {
	.pbS30P10 {
		padding-bottom: 10px;
	}
	.pbS30P20 {
		padding-bottom: 20px;
	}
	.pbS40P30 {
		padding-bottom: 30px;
	}
	.pbS80P70 {
		padding-bottom: 70px;
	}
	.pbS80P80 {
		padding-bottom: 80px;
	}
}

/* インタビュー 案内リンク */
.interview-footer {
	padding-top: var(--size80);
	border-top: 1px solid var(--color-darkyellow);
}
.interview-imagelinks>li {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: var(--size40);
}
.interview-imagelinks-img {
	width: min(59.95vw, 500px);
	margin: auto;
	padding-bottom: var(--size20);
}
.interview-imagelinks-txt {
	color: var(--color-darkyellow);
	font-size: var(--size26);
	text-align: left;
	text-decoration: underline;
}
.interview-imagelinks-img:hover + .interview-imagelinks-txt,
.interview-imagelinks-txt:hover {
	text-decoration: none;
}
.interview-textlinks>li + li {
	padding-top: 10px;
}
.interview-textlinks>li>a {
	display: block;
	padding: var(--size14) var(--size20);
	background-color: var(--color-lightyellow);
	color: var(--color-darkyellow);
	font-size: var(--size26);
	text-decoration: underline;
}
.interview-textlinks>li>a:hover {
	text-decoration: none;
}
/* インタビュー 案内リンク PC 835px以上 */
@media (min-width: 835px) {
	.interview-footer {
		padding-top: 70px;
	}
	.interview-imagelinks-img {
		width: 400px;
		padding-bottom: 15px;
	}
	.interview-imagelinks-txt {
		font-size: 15px;
		text-align: center;
	}
	.interview-textlinks>li>a {
		font-size: 15px;
	}
}