@charset "utf-8";

/*--------------------------------------------------
 * destyle.css
 *
 ***
 * 共通
 * viewer Contents
 *  --  ビューワー 初期説明
 *  --  ビューワー メニューバー
 *  --  ビューワー 設定パネル
 *  --  ビューワー 表示切り替え用の各種設定
 *  --  ビューワー 本文の各種設定
 * Novel Data Contents
 *  --  試し読み 注意事項
 *  --  書籍情報
--------------------------------------------------*/

@media (max-width: 320px) {
}
@media (max-width: 375px) {
}
@media (max-width: 640px) {
}
@media (min-width: 641px) {
}
@media (min-width: 1124px) {
}

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     destyle(リセットcss)     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="number"]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}
/* iOSでのデフォルトスタイルをリセット　Formボタン */
input[type="submit"],input[type="button"] {border-radius: 0;-webkit-box-sizing: content-box;-webkit-appearance: button;appearance: button; border: none;box-sizing: border-box;cursor: pointer;}input[type="submit"]::-webkit-search-decoration,input[type="button"]::-webkit-search-decoration { display: none;}input[type="submit"]::focus,input[type="button"]::focus {outline-offset: -2px;}


/*+-+-+-+-+-+-+-ここより下が自社で設定しているデフォルト設定になります。+-+-+-+-+-+-+-*/

/*--------------------------------------------------
 * 共通
--------------------------------------------------*/
:root {
	/* width */
	--main-max-width: 640px;
	/* text height */
	--max-height: 880px;
  /* Color */
  --main-color-black: #333333;
  --color-white: #FFFFFF;
  --color-lightgray: #f9f9f9;
  --color-gray: #CCCCCC;
  --color-charcoal: #4e454a;
  --color-black: #000000;
  --color-orange: #ee762e;
  --color-transp: transparent;
  /* Font Size */
  --fontsize-small: 13px;
  --fontsize-medium: 16px;
  --fontsize-large: 20px;
  --fontsize-12: min(1.88vw, 12px);
  --fontsize-14: min(2.19vw, 14px);
  --fontsize-16: min(2.5vw, 16px);
  --fontsize-18: min(2.81vw, 18px);
  --fontsize-20: min(3.13vw, 20px);
  --fontsize-22: min(3.44vw, 22px);
  --fontsize-24: min(3.75vw, 24px);
  --fontsize-26: min(4.06vw, 26px);
  --fontsize-28: min(4.38vw, 28px);
  --fontsize-30: min(4.69vw, 30px);
  --fontsize-40: min(6.25vw, 40px);
  --fontsize-50: min(7.81vw, 50px);
	/* Font Family */
	--fontfamily-mincho: 'YuMincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', 'Times New Roman', serif;;
	--fontfamily-gothic: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

	/* スクロールバー */
  --sb-track-color: #cccccc;
  --sb-thumb-color: #666666;
  --sb-size: 10px;
}

html{}
body{
	font-family:'Noto Sans JP', sans-serif;
	font-size:16px;
	color:#333333;
	background:#FFFFFF;
	line-height:1.6;
	letter-spacing: 1px;
	width: 100%;
	height:100%;
	overflow:auto;
	word-wrap:break-word;
	overflow-wrap:break-word;
	font-feature-settings:'palt' 1;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	-webkit-text-size-adjust:100%;

	scrollbar-color: var(--sb-thumb-color)
									 var(--sb-track-color);
}
::-webkit-scrollbar {
  width: var(--sb-size);
	height: var(--sb-size);
}
::-webkit-scrollbar-track {
  background: var(--sb-track-color);
}
::-webkit-scrollbar-thumb {
	background: var(--sb-thumb-color);
	border-radius: 8px;
}
img{
	max-width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
}
a{
	color:#333333;
	text-decoration:none;
	outline:none;
}
a:hover{
	text-decoration:underline;
}

/* ----- Google Fonts Icons ----- */
.material-symbols-outlined {
	cursor: pointer;
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.icon-fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.icon-w700 {
  font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}

/* ----- loading ----- */
#overlay{position:fixed;width:100%;height:100%;text-align:center;background:#FFF;z-index:9999;}

/*--------------------------------------------------
 * viewer Contents
--------------------------------------------------*/
/*
 *  --  ビューワー 初期説明
 */
.viewer-explain {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	width: 100px;
	height: 100px;
	inset: 0;
	margin: auto;
	background-color: #000000cc;
	border-radius: 10px;
	transition: .25s ease-out;
	z-index: 98;
}
.viewer-explain.explain--show {
	visibility: visible;
	opacity: 1;
}
.arrow-vertical,
.arrow-horizontal {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-white);
	line-height: 1;
}
.viewer__line--horizontal .arrow-vertical,
.viewer__line--vertical .arrow-horizontal {
	display: flex;
}
.viewer-explain .material-symbols-outlined {
	font-size: 48px;
}
.viewer-explain p {
	padding: 5px;
	font-weight: 700;
}

/*
 *  --  ビューワー メニューバー
 */
.viewer-menubar {
	position: fixed;
	width: 100%;
	top: 0;
	font-size: 18px;
	line-height: 1;
	background-color: var(--color-white);
	box-shadow: 0px -5px 12px 0px var(--color-black);
	transform: translateY(-110%);
	transition: .25s ease-out;
	z-index: 99;
}
.viewer-menubar.menubar--show {
	transform: translateY(0%);
}
.menubar-box {
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
}
@media (min-width: 641px) {
	.menubar-box {
		flex-direction: row;
		justify-content: space-between;
	}
}
.menubar-pageTitle {
	padding: 20px 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.menubar-btnList {
	display: flex;
	padding: 0 30px;
	border-bottom: 1px solid var(--color-gray);
	justify-content: space-between;
}
@media (min-width: 641px) {
	.menubar-btnList {
		border-bottom: none;
	}
}
.menubar-btnList input {
	display: none;
}
.menubar-btnList span {
	position: relative;
	width: 56px;
  height: 56px;
	padding: 10px;
	font-size: 36px;
}
@media (max-width: 640px) {
	.menubar-btnList .line-horizontal span {
		transform: rotate(90deg);
	}
}
@media (min-width: 641px) {
	.menubar-btnList span:hover::before,
	.menubar-btnList span:hover::after {
		position: absolute;
		right: 0;
		margin: auto;
	}
	.menubar-btnList span:hover::before {
		content: "";
		width: 8px;
		top: 100%;
		left: 0;
		border: 4px solid transparent;
		border-bottom-color: var(--color-charcoal);
	}
	.menubar-btnList .line-horizontal span:hover::before {
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
	}
	.menubar-btnList span:hover::after {
		content: attr(data-tooltip);
		width: fit-content;
		top: calc(100% + 8px);
		padding: .5em;
		color: var(--color-white);
		background-color: var(--color-charcoal);
		font-size: 12px;
		font-weight: 700;
		text-align: center;
	}
	.menubar-btnList .line-horizontal span:hover::after {
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
	}
	.menubar-btnList .line-horizontal span {
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}
}
.menubar-btn__text-line li {
	display: block;
}
.menubar-btn__text-line li.checked {
	display: none;
}

.viewer-percent {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	width: 170px;
	bottom: 2em;
	right: 0;
	left: 0;
	padding: 5px;
	margin: auto;
	text-align: center;
	font-size: 16px;
	line-height: 1;
	background-color: var(--color-white);
	box-shadow: 0px 0 3px -2px var(--color-black);
	border-radius: 5px;
	transition: .25s ease-out;
	z-index: 99;
}
.viewer-percent.menubar--show {
	visibility: visible;
	opacity: 1;
}

/*
 *  --  ビューワー 設定パネル
 */
.viewer-control {
	position: fixed;
	display: grid;
	visibility: hidden;
	opacity: 0;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	inset: 0;
	transition: .25s ease-out;
	z-index: 100;
}
.viewer-control.control--show {
	visibility: visible;
	opacity: 1;
}
.control-bg {
	position: absolute;
	inset: 0;
	margin: auto;
	background-color: #0000004d;
}
.control-inner {
	position: relative;
	width: clamp(17.5rem, 12.5rem + 25vw, 22.5rem);
	max-height: 90vh;
	padding-bottom: min(1.09vw, 7px);
	background-color: var(--color-lightgray);
	font-size: clamp(1rem, 0.75rem + 1.25vw, 1.25rem);
	line-height: 1;
	border-radius: 2%;
	overflow-y: auto;
}
.control-btn__close {
	position: absolute;
	top: clamp(0.25rem, 0.125rem + 0.63vw, 0.375rem);
	right: clamp(0.75rem, 0.25rem + 2.5vw, 1.25rem);
}
.control-btn__close .material-symbols-outlined {
	font-size: clamp(2.125rem, 1.75rem + 1.88vw, 2.5rem);
}
.control-title {
	padding: clamp(0.75rem, 0.563rem + 0.94vw, 0.938rem);
	font-weight: 700;
	text-align: center;
	border-bottom: 1px solid var(--color-gray);
}
.control-box {
	padding: min(2.34vw, 15px) min(4.69vw, 30px) min(3.91vw, 25px);
}
.control-box + .control-box {
	padding: 0 min(4.69vw, 30px) min(3.91vw, 25px);
}
.control-header {
	font-size: clamp(0.75rem, 0.625rem + 0.63vw, 0.875rem);
}
.control-btn {
	display: grid;
	padding-top: clamp(0.5rem, 0.375rem + 0.63vw, 0.625rem);
	font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1rem);
}
.control-btn.viewer__fontsize {
	grid-template-columns: 1fr 1fr 1fr;
}
.control-btn.viewer__line,
.control-btn.viewer__fontfamily,
.control-btn.viewer__spacing {
	grid-template-columns: 1fr 1fr;
}
.control-btn.viewer__color {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	justify-items: center;
}
.control-btn label {
	position: relative;
	display: block;
	outline: 2px solid var(--color-gray);
	text-align: center;
	cursor: pointer;
}
.control-btn:not(.viewer__color) label {
	padding: .6em;
	background-color: var(--color-lightgray);
}
.control-btn:not(.viewer__color) .checked label {
	background-color: var(--color-orange);
}
.control-btn.viewer__color label {
	width: clamp(2.375rem, 2.25rem + 0.63vw, 2.5rem);
	height: clamp(2.375rem, 2.25rem + 0.63vw, 2.5rem);
	border-radius: 50%;
}
.control-btn label input {
	display: none;
}
.control-btn.viewer__color label span {
	position: absolute;
	width: clamp(1.375rem, 1.188rem + 0.94vw, 1.563rem);
	height: clamp(1.375rem, 1.188rem + 0.94vw, 1.563rem);
	inset: 0;
	margin: auto;
	font-size: clamp(1.375rem, 1.188rem + 0.94vw, 1.563rem);
	color: var(--color-transp);
}
.control-btn.viewer__color .checked label span {
	color: var(--color-orange);
}


/*
 *  --  ビューワー 表示切り替え用の各種設定
 *      .viewer-mainへの設定
 */
.viewer-main {
	width: 100%;
	text-align: justify;
	text-rendering: optimizeLegibility;
	font-feature-settings: normal;
}
/* ----- 書字方向 ----- */
/* 横書き */
.viewer__line--horizontal .viewer-main {
	height: 100%;
	-webkit-writing-mode: horizontal-tb;
	writing-mode: horizontal-tb;
}
/* 縦書き */
.viewer__line--vertical .viewer-main {
	height: 100%;
	min-height: 100vh;
	min-height: calc(var(--vh, 1vh) * 100);
	min-height: 100dvh;
	overflow-x: scroll;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

/* ----- 文字サイズ ----- */
/* 小 */
.viewer__fontsize--small .viewer-main {
	font-size: var(--fontsize-small);
}
/* 中 */
.viewer__fontsize--medium .viewer-main {
	font-size: var(--fontsize-medium);
}
/* 大 */
.viewer__fontsize--large .viewer-main {
	font-size: var(--fontsize-large);
}

/* ----- 文字フォント ----- */
/* 明朝体 */
.viewer__fontfamily--mincho .viewer-main {
	font-family: var(--fontfamily-mincho);
}
/* ゴシック体 */
.viewer__fontfamily--gothic .viewer-main {
	font-family: var(--fontfamily-gothic);
}

/* ----- 行間 ----- */
/* せまい */
.viewer__spacing--narrow .viewer-main {
	line-height: 1.5;
}
/* 広い */
.viewer__spacing--wide .viewer-main {
	line-height: 2;
}

/* ----- 背景色 ----- */
/* 白 */
.viewer__color--white .viewer-main,
label.viewer__color--white {
	color: #1e1e1e;
	background-color: #fff;
}
/* 灰 */
.viewer__color--gray .viewer-main,
label.viewer__color--gray {
	color: #333;
	background-color: #f5f5f5;
}
/* 黒 */
.viewer__color--black .viewer-main,
label.viewer__color--black {
	color: #f5f5f5;
	background-color: #282828;
}
/* 黄 */
.viewer__color--yellow .viewer-main,
label.viewer__color--yellow {
	color: #504025;
	background-color: #fff9e7;
}
/* 水 */
.viewer__color--blue .viewer-main,
label.viewer__color--blue {
	color: #1b1b1b;
  background-color: #e6f2fa;
}

/*
 *  --  ビューワー 本文の各種設定
 */
.novel-trialreading {
	margin: auto;
}
.viewer__line--horizontal .novel-trialreading {
	max-width: var(--main-max-width);
	padding: 0 20px;
}
.viewer__line--vertical .novel-trialreading {
	max-height: var(--max-height);
	padding: calc(60px + 1em) 0;
}
.novel-title-box {
	text-align: left;
	text-orientation: upright;
}

/* ----- 書影 サイズ調整 ----- */
.novel-cover {
	display: flex;
	align-items: center;
	justify-content: center;
}
.viewer__line--horizontal .novel-cover {
	width: 100%;
	height: 100vh;
	height: 100dvh;
}
.viewer__line--vertical .novel-cover {
	width: 100vw;
	height: 100%;
}
.novel-cover img {
	width: clamp(13.75rem, 5rem + 43.75vw, 22.5rem);
	height: 100%;
	object-fit: contain;
}

/* ----- 作品タイトル、話数タイトル 文字調整 ----- */
.novel-title {
	font-size: 24px;
	line-height: 1;
}
.viewer__line--horizontal .novel-title {
	margin: 80px 0 40px;
}
.viewer__line--vertical .novel-title {
	margin: 0 80px 0 40px;
}
.novel-author {
	font-size: 14px;
}
.viewer__line--horizontal .novel-author {
	margin: 40px 0 100px;
}
.viewer__line--vertical .novel-author {
	margin: 0 40px 0 100px;
}
.viewer__line--horizontal .novel-episode-title {
	margin: 0 1em;
}
.viewer__line--vertical .novel-episode-title {
	margin: 1em 0;
}

/* ----- ダッシュ文字調整（――） ----- */
/* ex. <span class="dash">――</span> */
.dash {
	display: inline-block;
	letter-spacing: -.15em;
}
.viewer__line--horizontal .dash {
	width: 2em;
}
.viewer__line--vertical .dash {
	height: 2em;
}

/* ----- 縦書き時に半角文字を横組み ----- */
/* ex. <span class="tcy">!?</span> */
.viewer__line--vertical .tcy {
	text-combine-upright: all;
}

/* ----- 圏点 ----- */
/* ex. <span class="emphasis">強調文字</span> */
/* 横書き -> ドット */
.viewer__line--horizontal .emphasis {
	text-emphasis-style: dot;
}
/* 縦書き -> ゴマ */
.viewer__line--vertical .emphasis {
	text-emphasis-style: sesame;
}

/* ----- 空行 ----- */
/* ex. <p class="empty-line">&nbsp;</p> */
.empty-line {
	padding: .5em;
}

/* ----- 場面転換 ----- */
/* ex. <p class="scene-change">・・・</p> */
.scene-change {
	display: flex;
	align-content: space-around;
	justify-content: space-around;
}
/* 横書き */
.viewer__line--horizontal .scene-change {
	width: 80%;
	padding: 0 3em;
}
/* 縦書き */
.viewer__line--vertical .scene-change {
	height: 80%;
	padding: 3em 0;
}

/* ----- 挿絵 サイズ調整 ----- */
/* ex. <div class="novel-img"><img src="" width="" height=""></div> */
.novel-img {
	display: grid;
	grid-template-rows: 1fr;
	justify-content: start;
}
.viewer__line--horizontal .novel-img {
	margin: 3em 0;
}
.viewer__line--vertical .novel-img {
	margin: 0 3em;
}
.novel-img img {
	/* max-width: min(100vw, 600px); */
	width: 100%;
	height: 100%;
}
.novel-img2 img {
	max-width: min(75vw, 480px);
	width: 100%;
	height: 100%;
}

/* ----- テキスト 右寄せ ----- */
.novel-episode-end {
	text-align: end;
}

/*--------------------------------------------------
 * Novel Data Contents
--------------------------------------------------*/
/*
 *  --  試し読み 注意事項
 */
.novel-data-content {
	margin: auto;
}
.viewer__line--horizontal .novel-data-content {
	max-width: var(--main-max-width);
	padding: 20px 20px 60px;
}
.viewer__line--vertical .novel-data-content {
	max-height: var(--max-height);
	padding: calc(60px + 1em) 20px;
}
.novel-continued {
	font-size: 1em;
}
.viewer__line--horizontal .novel-continued {
	margin: 160px 0 20px;
}
.viewer__line--vertical .novel-continued {
	margin: 0 160px 0 20px;
}
.novel-notice {
	font-size: 0.75em;
}
.viewer__line--horizontal .novel-notice {
	margin: 40px 0 100px;
}
.viewer__line--vertical .novel-notice {
	margin: 0 40px 0 100px;
}
.novel-notice li {
	text-indent: -1em;
	padding-inline-start: 1em;
}


/*
 *  --  書籍情報
 */
.novel-data-inner {
	padding: clamp(0.938rem, 0.625rem + 1.56vw, 1.25rem);
	background-color: var(--color-lightgray);
	font-family: var(--fontfamily-gothic);
	font-feature-settings: 'palt' 1;
	line-height: 1;
	-webkit-writing-mode: horizontal-tb;
	writing-mode: horizontal-tb;
}
.viewer__line--vertical .novel-data-inner {
	width: calc(100vw - 40px);
	max-width: var(--main-max-width);
}
.novel-data-box {
	display: flex;
	justify-content: space-between;
}
.novel-data-cover {
	width: 44%;
}
.novel-data-cover img {
	outline: 1px solid var(--color-gray);
}
.novel-data-detail-box {
	width: 52%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.novel-data-title {
	padding-top: clamp(0.938rem, -0.625rem + 7.81vw, 2.5rem);
	color: var(--main-color-black);
	font-size: var(--fontsize-22);
	font-weight: 700;
}
.novel-data-link {
	margin: clamp(0.625rem, 3.13vw, 1.25rem) 0;
}
.novel-data-link li + li {
	margin-top: clamp(0.625rem, 3.13vw, 1.25rem);
}
.novel-data-link-txt {
	display: flex;
	align-items: center;
	padding: .7em;
	color: var(--color-white);
	background-color: var(--color-orange);
	font-size: var(--fontsize-18);
	letter-spacing: 1.5px;
}
.novel-data-link-txt:hover {
	text-decoration: none;
}
.novel-data-link-txt span {
}
.novel-data-link-txt .material-symbols-outlined {
	margin-right: 5px;
	font-size: var(--fontsize-24);
}
.novel-data-kaesuma {
	display: flex;
	justify-content: flex-end;
}
.novel-data-link-img {
	display: block;
	width: clamp(4.688rem, 1.25rem + 17.19vw, 8.125rem);
	padding: .5em;
}