@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic&display=swap');

/*◆CSSリセット
-------------------------------------*/

html, body, div, span, p, a, ul, li, table, tr, th, td, form, input, select, textarea, button {
	margin: 0;
	padding: 0;
	line-height: 1.6;
	font-size: 100%;
}

html, body {
	min-width: 320px;
}

html {
	font-size: 86%;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-webkit-tap-highlight-color: transparent;
	
	scroll-behavior:smooth;
	overflow-y: scroll;
}

body {
	cursor : default; 
}

body::after {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50%, 100%;
}

div, span, ul, li {
	box-sizing: border-box;
}

a {
	background-color: transparent;
	text-decoration : none;
}

a:link, a:visited, a:active {
	font-weight:bold;
}

a:hover {
	cursor: pointer;
	transition: all .1s ease;
}

ul {
	list-style: none;
}

p {
	margin-block-start: 0;
}

::-ms-expand {
	display: none;
}

label {
	cursor: pointer;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*◆WEBフォント
-------------------------------------*/

a:link, .str, .m2, .m3, .m3 span, .m4, .m4nb, .mtitle, .menu li a, .menus li a, .title, .mth, .mchart1,.mchart2, .youkoso, .tab_item {
	font-family: 'BIZ UDPGothic', Meiryo, sans-serif;
	font-weight:700;
}

/* 技能(_skill.css) */
.gth, .gthn, .iksm, .gth1, .gth1_, .gth2, .gth3, .gth4, .gth5, .gth6, .gtb1, .gtb1_, .gtb2, .gtb3 {
	font-family: 'BIZ UDPGothic', Meiryo, sans-serif;
	font-weight:700;
}

/* キャラシート(_charasheet.css) */
.frmtitle {
	font-family: 'BIZ UDPGothic', Meiryo, sans-serif;
	font-weight:700;
}

.m1, .csm2, .csm3 a, .fontL {
	font-family: 'Noto Sans JP', Meiryo, sans-serif;
	font-weight:900;
}

/*◆汎用コマンド
-------------------------------------*/

/* ほんの少しスペース */
.sp {
	height:10px;
}

/* 行幅最小 */
.g0 {
	height:18px;
}

/* 行幅1 */
.g1 {
	height:23px;
	min-height:23px;
}

/* 行幅2 */
.g2 {
	height:40px;
	min-height:40px;
}

/* 行幅3 */
.g3 {
	height:60px;
	min-height:60px;
}

/* 行幅5 */
.g5 {
	height:99px;
	min-height:99px;
}

/* 行幅6 */
.g6 {
	height:119px;
	min-height:119px;
}

/* 行幅9 これだけキャラクターシートの都合で例外の高さ */
.g9 {
	height:223px;
	min-height:223px;
}

/* 行幅12 */
.g12 {
	height:256px;
	min-height:256px;
}

/* 行幅18 */
.g18 {
	height:398px;
	min-height:398px;
}

/* 中央揃え */
.ctr {
	text-align: center;
}

/* 左 */
.bl{
	border-radius: 3px 0 0 3px;
}

/* 上 */
.bu{
	border-radius: 3px 3px 0 0;
}

/* 右 */
.br{
	border-radius: 0 3px 3px 0;
}

/* 下 */
.bd{
	border-radius: 0 0 3px 3px;
}

/* 左上 */
.bul{
	border-radius: 3px 0 0 0;
}

/* 右上 */
.bur{
	border-radius: 0 3px 0 0;
}

/* 右下 */
.bdr{
	border-radius: 0 0 3px 0;
}

/* 左下 */
.bdl{
	border-radius: 0 0 0 3px;
}

/* 全部 */
.bb{
	border-radius: 3px;
}

.bg {
	display:none;
	margin-top: 26px;
	text-align: center;
}

.bg img {
	border-radius: 3px;
	width:100%;
	max-width:900px;
}

.vmiddle {
	vertical-align: middle;
}

.underline {
	border-bottom:solid;
	border-width:2px;
}

/*◆ベース
-------------------------------------*/

/* 背景（キャラorグラデ - 背景 - 黒帯） */
.bodyimg0, .bodyimg1 {
	background-position: center top; /*スマートフォン*/
	background-size: auto, auto, auto 0px;
	background-repeat: repeat-x;
}

.main {
	position: relative;
	min-height: calc(var(--vh) * 100 - 182px);
	width: 100%;
	max-width: 640px; /*本来は983pxの場所 17足して1000*/
	margin: 0 auto;
	padding-left: 16px;
	padding-right: 16px;
	padding-bottom: 110px;
	transform-origin: center center;
}

#page_menu {
	z-index: 4;
	position: fixed;
	right: -65px;
	bottom: 10px;
	border-radius: 5px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 44px 44px;
}

#page_menu a{
	display: block;
	width: 44px;
	height: 44px;
}

#page_menu.fade {
	transition: all .2s ease;
}

.footer {
	position: relative;
	text-align:center;
	margin: 0 auto;
	padding: 79px 0 80px;
}

.footer a {
	display: block;
}

.footermain {
	width: 100%;
}

/*◆メニュー
-------------------------------------*/

.top {
	display: none; /*スマートフォンの場合非表示*/
	position: absolute;
	z-index: 3;
	top: 0;
	justify-content: center;
	width: 100%;
	max-width:100%;
	height: auto;
	padding:0;
}

/* ★menu(ul) > menu_caption(li)/menu_search > menu_contents(ul) > menu_content(li) */
.menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	max-width: 983px; /*17足して1000*/
	height: fit-content;
}

.menu_caption, .menu_search {
	width: calc((100% - 52px) / 7);
	cursor: pointer;
}

.menu_caption, .menu_content, .menu_search {
	font-size: 0.9rem;
	position: relative;
	text-align: center;
}

.menu_caption a, .menu_search a {
	display: block;
	line-height: 47px;
}

.menu_caption img {
	width: 100%;
	max-width: 82px;
	height: 47px;
}

.menu_content a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 47px;
	line-height: 1.5;
	padding: 0 12px;
}

.menu_contents {
	visibility: hidden;
	position: absolute;
	z-index: 3;
	opacity: 0;
	width: 100%;
	border-radius: 0 0 3px 3px;
}

.menu_contents li:first-child {
	border-radius: 0;
}

.menu_contents li:last-child {
	border-radius: 0 0 3px 3px;
}

.menu_caption, .menu_content {
	transition: all .2s ease;
}

.menu_caption:hover, .menu_content:hover {
	transition: all .2s ease;
}

.menu_caption:hover .menu_contents {
	position:absolute;
	visibility: visible;
	opacity: 1;
	top: 47px;
	left:auto;
}

.menu_search {
	width: 52px;
}
	
/*◆メニュー(スマートフォン)
-------------------------------------*/

.tops {
	display: none;
	position: fixed;
	overflow-y: auto;
	z-index: 3;
	top: 0;
	justify-content: center;
	width: 100%;
	max-width:100%;
	height: 100%;
	padding: 5% 0;
}

.tops.menu-fixed{
	display: flex;
}

.menus {
	width: 100%;
	height: fit-content;
}

.menus_label{
    display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
}

.menus_caption{
	display: none;
}

.menus_content, .menus_search {
	font-size: 0.9rem;
	text-align: center;
}

.menus_content a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 47px;
	line-height: 1.5;
}

.menus_content {
	transition: all .2s ease;
}

.menus_content:hover {
	transition: all .2s ease;
}

.menus_search a {
	display: block;
	line-height: 47px;
}

/*◆検索欄・検索ボタン
-------------------------------------*/

.searchbutton {
	border-radius: 3px;
	width: 31px;
	height: 31px;
	margin: 7px auto;
	background-image: url("../../img/main/search_2x.png");
	background-repeat: no-repeat;
	background-size: 27px 27px;
	background-position:center center;
}

a:hover .searchbutton {
	transition: all .2s ease;
}

.searchbox {
	border-radius: 3px;
	max-width: 330px;
	margin: 4px 7px 20px;
	padding: 5px;
}

.searchbox input[type="text"]{
	font-size: 1.1rem;
	border: none;
	width: calc(100% - 38px);
	height: 32px;
	padding-left: 3px;
}

.searchbox input[type="text"]:focus {
	outline : none;
}

.searchbox input[type="submit"]{
	font-size: 1.4rem;
	background: none;
	border: none;
	outline : none;
	width: 32px;
	height: 32px;
	background-image: url("../../img/main/search_2x.png");
	background-repeat: no-repeat;
	background-size: 27px 27px;
	background-position:center center;
}

/*◆ページ送り
-------------------------------------*/

.pager .pagination {
	text-align: center;
}

.pager .pagination li {
	display: inline-block;
	text-align: center;
	width: 50px;
	height: 50px;
	position: relative;
	margin: 0 2px;
	top: 35px;
}

.pager .pagination li a {
	display:table;
	position: absolute;
	text-align: center;
	vertical-align: middle;
	left: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	transition: all  0.3s ease;
	border-radius: 50%;
}

.pager .pagination li a span {
	display:table-cell;
	vertical-align:middle;
}

/*◆見出しとテキスト
-------------------------------------*/

/*均等割付*/
.text1, .text2, .text3, .text3_2column, .text4, .text4_2column, mindent {
	text-align:justify;
}

/*均等割り付けしない*/
.no_just{
	text-align:left;
}

.m1 {
	position: relative;
	font-size: 1.8rem;
	padding-top:37px; /*スマートフォン*/
}

.m2 {
	position: relative;
	z-index: 0;
	font-size: 1.5rem;
	margin: 80px 0 0;
	padding: 12px 18px;
	border-radius: 3px;
}

.m2:before {
	content: '';
	display: block;
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 5px;
	right: 5px;
	z-index: -1;
	border-radius: 3px;
	background-position:left center;
	background-repeat: no-repeat;
	background-size:cover;
}

.m3 {
	font-size: 1.3rem;
	border-bottom-left-radius: 2px;
	margin-top: 50px;
	padding: 0 8px 4px;
}

.m4, .m4nb {
	font-size: 1.1rem;
	margin: 36px 4px 0;
}

.m4 {
	background-position:left center;
	background-repeat: no-repeat;
	background-size: 21px 21px;
	padding: 2px 27px;
}

/* アイコン無 */
.m4nb {
	padding: 2px;
}

.m5 {
	background-position:left 3px;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	padding-left: 22px;
}

.text1 {
	padding-top:6px;
}

.text2 {
	padding: 24px 5px 0;
}

.text3, .text3_2column {
	padding: 18px 5px 0;
}

.text4, .text4_2column {
	padding: 14px 5px 0;
}

.text3_2column, .text4_2column {
	column-gap: 40px;
	column-count: 1; /*スマートフォン*/
}

.column {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0px 30px;
}

.column_item, .column_item3t {
	width:100%;
}

/*3カラム 今のところはキャラ作成のみ*/
/*幅を均等にしつつ、min-widthを超えると改行*/
.column_item3t {
	flex: 1;
	min-width:250px;
}

.faq {
	display: flex;
	align-items: center;
	min-height: 60px;
	border-radius: 3px;
	padding: 8px;
	font-size: 1.1rem;
}

/* 裁判のチャート */
.mchart1,.mchart2 {
	text-align: center;
	max-width: 300px;
	margin: 0 auto;
	padding: 3px;
}

.mchart1 {
	border-radius: 3px;
}

.matuei {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 14px;
}

/*◆メモ
-------------------------------------*/

/* 大枠 repnotes rtab→replay.css */
.notes, .repnotes, .rtab, .mindent {
	position: relative;
	z-index: 0;
}

.notes:before, .rtab:before, .repnotes:before {
	content: '';
	display: block;
	position: absolute;
	top: -10px;
	bottom: -10px;
	left: -10px;
	right: -10px;
	z-index: -1;
	border-radius: 3px;
}

.notes {
	width:100%;
	margin: 4px auto;
	padding: 48px 12px 10px;
}

/* タイトル */
.notes .title {
	display: inline-block;
	position: absolute;
	font-size: 1.1rem;
	line-height: 2.1rem;
	height: 2.1rem;
	width: calc(100% - 20px);
	top: 10px;
	left: 10px;
	margin: 0 auto;
	text-align:center;
}

/* 割り込み処理解説 */
.mindent {
	font-size: 0.9rem;
	border-radius: 3px;
	margin: 12px 0;
	padding: 12px 8px;
}

/* 割り込み処理解説(裁判ページのほう) */
.warikomi {
	margin-top: 12px;
	line-height: 1;
}

/*◆メインテーブル
-------------------------------------
※角丸のみ技能テーブルと兼用*/

.mtab {
	border-collapse:separate;
	border-spacing: 0;
	width: 100%;
	margin: 4px auto;
	table-layout: fixed;
}

.mtab th:first-child, .gtab th:first-child {
	border-radius: 3px 0 0 0;
}

.mtab th:last-child, .gtab th:last-child {
	border-radius: 0 3px 0 0;
}

.mtab th:only-child, .gtab th:only-child {
	border-radius: 3px 3px 0 0;
}

.mtab tr:last-child td:first-child, .gtab tr:last-child td:first-child {
	border-radius: 0 0 0 3px;
}

.mtab tr:last-child td:last-child, .gtab tr:last-child td:last-child {
	border-radius: 0 0 3px 0;
}

.mtab tr:last-child  td:only-child, .gtab tr:last-child td:last-child {
	border-radius: 0 0 3px 3px;
}

.mth, .mtd, .mtext {
	padding: 4px 8px;
}

.mtd {
	font-weight:bold;
	text-align: center;
}

.mtext {
	vertical-align: top;
}

/*◆タブ(現状はキャラシのみ)
-------------------------------------*/

.tab_item {
	text-align: center;
	line-height: 36px;
	border-radius: 3px;
	width: 176px;
	float: left;
	margin: 25px 2px 0;
}

input[name="tab_item"] {
	display: none;
}

.tab_content {
	display: none;
	clear: both;
	overflow: hidden;
}

/*◆挿絵
-------------------------------------*/

.ss1{
	background-image: url(../../img/main/s_sixpence.png);
	background-position:right 10% top 100%;
	background-repeat: no-repeat;
}

/*◆アップデート情報
-------------------------------------*/

#UpdateHTML{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99999;
}

#UpdateMAIN{
	position: fixed;
	display: block;
	justify-content: center;
	align-items: center;
	max-width: 800px;
	width:100%;
	border-radius: 6px;
	padding:0 18px 10px 18px;
}

#CloseUpdate{
	font-size: 1.4rem;
	outline : none;
	width: calc(100% - 200px);
	border-radius: 50px;
	margin: 56px 100px 20px 100px;
	padding: 10px;
}

#CloseUpdate:hover {
	transition: all .2s ease;
}

/*◆開閉
-------------------------------------*/

summary {
	margin: 18px 5px 0;
	cursor: pointer;
	padding-left:20px;
	transition: all 0.1s ease;
}

summary.m2 {
	padding-left:40px;
}

summary::after { /* 最初の状態 */
	content: "+";
	position: absolute;
	left: 20px;
	transition: all 0.1s ease;
}

summary:hover::after {
	transform: rotate(45deg);
}

.dcontent {
	display : none;
}

/*◆秘匿
-------------------------------------*/

.secret {
	border-radius:3px;
	padding: 6px 40px;
	transition: all 0.2s ease;
	cursor: pointer;
}

/*◆スライダー
-------------------------------------*/

.sliderarea {
	overflow: hidden;
}

.slider{
	display: none;
}

.slider.slick-initialized{
	display: block;
	max-width: 980px;
	margin: 0 auto;
}

.slider img{
	width: 100%;
}

.slick-list {
	overflow: visible;
}

.slick-slide {
	height:auto;
	position: relative;
}

.slick-slide::after {
	position: absolute;
	content: "";
	left: 0;
	width: 100%;
	height: 20px;
}

.slick-slide::after {
	bottom: 0;
	background-image: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.1), transparent);
}

.slick-prev,
.slick-next
{
	z-index: 100;
}

.slick-next{
	right:4px!important;
}

.slick-prev{
	left:4px!important;
}

/*◆レスポンシブ対応
-------------------------------------
スマートフォン⇔タブレットの切り替えは技能に留める*/

/*●PC用
-------------------------------------*/

@media screen and (min-width: 768px) {

	html {
		font-size: 90%;
	}

	body::after {
		background-size: auto, 100%;
	}
	
	.m1 {
		font-size: 2.1rem;
	}

	.m2 {
		font-size: 1.6rem;
	}

/* 文字位置変更 */
	.m1 {
		padding-top:82px;
	}
	.text1 {
		padding-bottom:24px;
	}
	
/* 背景変更 */
	.bodyimg0 {
		background-repeat: no-repeat, repeat-x, repeat-x;
	}
	
	.bodyimg1 {
		background-position: center top 47px, center top 47px, center top;
		background-size: auto, auto, auto 47px;
		background-repeat: no-repeat, repeat-x, repeat-x;
	}
	
	.main {
		max-width: 983px; /*17足して1000*/
	}

	#page_menu {
		background-size: 62px 62px;
	}

	#page_menu a{
		width: 62px;
		height: 62px;
	}
	
/* メニュー */
	.top {
		display: flex;
	}
	
	.tops {
		display: none;
	}

/* メニュー開閉で付与 */
	.top.menu-fixed{
		display: flex;
		position: fixed;
	}
	
	.tops.menu-fixed{
		display: none;
	}

/* 1カラム→2カラム */
	.text3_2column, .text4_2column {
		column-count: 2;
	}
	.column_item {
		flex: 1;
	}
	
/* トップの聖女表示 */
	.ss2{
		background-image: url(../../img/main/s_saint.png);
		background-repeat: no-repeat;
		background-position:center;
		background-size: cover;
		background-size: auto;
		background-position:right center;
	}
	
	#page_menu.neti {
		display:none;
	}

/* bg表示 */
	.bg {
		display: block;
	}
}