@charset "UTF-8";

/* 01_フォント指定 */
body {
	font-family: ヒラギノ角ゴ W3 JIS2004, sans-serif;
}
#main strong {
	font-family: ヒラギノ角ゴ W6 JIS2004, sans-serif;
}
/* @end */


/* 02_初期設定 */
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
  margin: 0;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
	text-decoration: underline;
	transition: all .5s;
	color: #0f0f0f;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

li {
  list-style: none;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

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

button {
	border: none;
	cursor: pointer;
	outline: none;
}
/* @end */


/* 03_body */
body {
	color: #0F0F0F;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 16px;
	font-weight: 400;
	min-width: calc(960px + 40px);
	-webkit-text-size-adjust: 100%;
	overflow-y: scroll;
	width: 100%;
	background-color: #f7f6f5;
}
/* @end */


/* 04_header */
#header-area {
	/* position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0 auto; */
}
#header{
	position: relative;
	margin: 0 auto;
	padding: 0 20px;
	height: 186px;
	background-color: #0f0f0f;
}
#header .header-logo {
	position: relative;
	float: left;
	margin: 15px 0 0 0;
}
#header .header-logo a {
	display: block;
}
#header .header-logo a img {
	width: 200px;
}
.menu-close #sp-nav-area {
	visibility: hidden;
	opacity: 0;
}
.menu-open #sp-nav-area {
	visibility: visible;
	opacity: 1;
}
.menu-close #sp-nav-area,
.menu-open #sp-nav-area {
	transition: all .4s;
}
/* @end */


/* 05_global-nav */
#global-nav-area {
	float: right;
	width: calc(100% - 200px);
	height: 42px;
	margin-top: 120px;
}
#global-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: auto;
	padding: 0;
	width: 100%;
}

#global-nav ul.global-nav-c1 {
	display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  height: 100%;
  margin-bottom: 0;
  width: 100%;
}

#global-nav ul.global-nav-c1 > li {
	height: 100%;
	margin: 0 0 0 30px;
	white-space: nowrap;
}

#global-nav ul.global-nav-c1 > li > a::before {
	content: "";
	position: absolute;
	height: 70px;
	width: 70px;
	margin: auto;
	top: -100px;
	bottom: 0;
	left: 0;
	right: 0;
}

#global-nav ul.global-nav-c1 > li:first-child > a::before {
	background: url("../images/menu-01.png") no-repeat center / 70px 70px;
}

#global-nav ul.global-nav-c1 > li:nth-of-type(2) > a::before {
	background: url("../images/menu-02.png") no-repeat center / 70px 70px;
}

#global-nav ul.global-nav-c1 > li:nth-of-type(3) > a::before {
	background: url("../images/menu-03.png") no-repeat center / 70px 70px;
}

#global-nav ul.global-nav-c1 > li:nth-of-type(4) > a::before {
	background: url("../images/menu-04.png") no-repeat center / 70px 70px;
}

header .global-nav-c2 {
	overflow-x: visible;
	margin: 0 auto;
	width: 1024px;
}

#global-nav > ul > li > a {
	display: inline-block;
	line-height: 1.4;
	text-decoration: none;
	padding: 24px 0;
	color: #fff;
	position: relative;
	font-weight: 600;
	width: 130px;
	text-align: center;
}

#global-nav > ul > li:nth-child(6) > a::after {
	right: 0;
}

#global-nav > ul .close {
	background: #ffffff;
	height: 0;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	width: 100%;
	left: 0;
	top: 99%;
	z-index: 1000;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	transition: all .4s;
}

#global-nav > ul .close ul {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: flex-start;
	-moz-align-items: flex-start;
	-ms-align-items: flex-start;
	align-items: flex-start;
}

#global-nav > ul .close li {
	text-align: left;
	width: 232px;
	margin: 0 32px 30px 0;
}

#global-nav > ul .close li:nth-child(4n) {
	margin-right: 0;
}

#global-nav > ul .close li a,
#global-nav > ul .close li a::before {
	transition: all .5s;
}

#global-nav > ul .close li a:hover {
	background-color: #ccc;
}

#global-nav > ul .close li a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid #ffffff;
	width: calc(100% - 1px);
	height: 98%;
	height: calc(100% - 1px);
}

#global-nav > ul .close li a:hover::before {
	border: 1px solid #0f0f0f;
}

#global-nav > ul > li:hover > .close {
	height: auto;
	opacity: 1;
	background: #0f0f0f;
	padding: 45px 0 22px;
}

#global-nav > ul .close li:nth-child(n+2) {
	margin-top: 0;
}

#global-nav > ul .close a {
	display: block;
	background: #FFFFFF;
	color: #0F0F0F;
	font-size: 15px;
	text-decoration: none;
	padding: 19px 31px 19px 21px;
	position: relative;
	font-weight: normal;
	line-height: 1.4;
	width: 100%;
	height: 100%;
}

#global-nav > ul > li:hover .move-line::before,
.menu-01 #global-nav > ul > li:first-child .move-line::before,
.menu-02 #global-nav > ul > li:nth-of-type(2) .move-line::before,
.menu-03 #global-nav > ul > li:nth-of-type(3) .move-line::before,
.menu-04 #global-nav > ul > li:nth-of-type(4) .move-line::before {
	transform: scale(1, 1);
}

span.move-line {
	font-size: 10px;
	letter-spacing: 5px;
	margin-right: -5px;
}

.move-line::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 18px;
	width: 100%;
	height: 2px;
	background: #fff;
	transition: .3s all;
	transform: scale(0, 1);
}
/* @end */


/* 06_main */
#mainvisual {
	margin-bottom: 90px;
}
#mainvisual-pic {
    position: relative;
}
/* #mainvisual-pic::before {
	background-color: rgba(40, 30, 10, .2);
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
} */
#mainvisual-pic img {
	width: 100VW;
	min-width: 1064px;
}

#pankuzu-area {
	padding-bottom: 50px;
	padding-top: 30px;
}
#pankuzu {
	font-size: 12px;
  line-height: 1.4;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}
#pankuzu li {
	position: relative;
	float: left;
	color: #777;
	padding: 0 0.4em 0 1.1em;
}
#pankuzu li:first-of-type {
	background: url("../images/pankuzu.png") no-repeat left center / 16px;
  padding: 0 0.4em 0 21px;
}
.cs-hm #pankuzu li:first-of-type {
	background: url("../images/pankuzu_hm.png") no-repeat left center / 16px;
  padding: 0 0.4em 0 21px;
}
#pankuzu li:first-of-type::before {
	content: none;
}
#pankuzu li::before {
	content: ">";
	display: block;
	height: 1em;
	width: 0.6em;
	transform: scale(.6, 1);
	position: absolute;
	top: -1px;
	left: 0;
}
#pankuzu a {
	color: #777;
	text-decoration-color: #777;
}
#pankuzu a:hover {
	text-decoration-color: #0f0f0f;
	color: #0f0f0f;
}

#main {
	position: relative;
	width: 100%;
}

#content {
	margin: 0 auto 80px;
	padding: 0 20px;
	width: calc(960px + 40px);
	position: relative;
}

.top #content {
	margin-bottom: 0;
}

#content section {
	margin-bottom: 75px;
  position: relative;
}

.top #main #content section {
	margin-bottom: 45px;
	margin-top: 65px;
}

#content section.bg_change{
	background-color: #efefef;
	width: calc(100vw - 9px);
	margin-left: calc((100vw - 1024px) / -2);
	padding: 0 calc((100vw - 1024px) / 2);
	margin-top: -37px;
	padding-top: 37px;
	padding-bottom: 37px;
	margin-bottom: calc(75px - 37px);
}

.top #content section.bg_change {
	padding-top: 77px;
	padding-bottom: 77px;
}

#content section:last-child {
	margin-bottom: 0;
}
/* @end */


/* 07_h1,h2,h3,h4,p */
#h1-area {
	display: table;
	position: relative;
	overflow: hidden;
	background-color: #0f0f0f;
	background-repeat: no-repeat;
	background-size: auto 100%;
	min-width: calc(960px + 40px);
	width: 100%;
	height: 120px;
}

#h1-area h1 {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	margin: auto;
	height: 100%;
	width: calc(960px + 40px);
	font-size: 30px;
	font-weight: 500;
	color: #fff;
	letter-spacing: .08em;
	line-height: 1;
}

#h1-area span {
	display: block;
	width: 100%;
	line-height: 1.4;
	padding: 0 15px;
}

.h2_normal {
	text-align: center;
	color: #0f0f0f;
	font-size: 28px;
	font-weight: 500;
	margin-bottom: 1.5em;
}

.top .h2_normal {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	letter-spacing: .2em;
}
.h3_normal {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.75;
	margin-bottom: 1em;
	display: flex;
	align-items: center;
}
.h3_normal::before {
	background: #0f0f0f;
  background-color: rgb(15, 15, 15);
	content: "";
	height: 28px;
	width: 8px;
	margin-right: 13px;
}
.h3_normal::after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #aaa;
	margin-left: 1em;
}
.h4_normal {
	position: relative;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.75;
	margin-bottom: 0.6em;
	margin-left: 1.6em;
	display: flex;
	align-items: center;
}
.h4_normal::before {
	content: "";
	position: absolute;
	border-top: 17px solid #0f0f0f;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
	top: 6.5px;
	left: -1.6em;
}
.h4_normal::after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #aaa;
	margin-left: 1em;
}
.h5_normal {
	font-size: 14px;
	font-weight: 600;
	position: relative;
	margin-left: 15px;
	margin-bottom: 16px;
}
.h5_normal::before {
	content: "";
	position: absolute;
	width: 6px;
	height: 22px;
	top: -3px;
	left: -15px;
	background: #0f0f0f;
}
#content p {
	line-height: 1.8;
	margin-bottom: 18px;
	font-size: 15px;
}

strong {
	font-weight: bold;
}

.last-text {
	margin-bottom: 45px !important;
}
/* @end */


/* 08_画像パターン*/
figure {
	margin-bottom: 1em;
}

#content [class*="pattern"] [class*="col"]:last-of-type,
#content [class*="pattern"] [class*="col"] > :last-child {
	margin-bottom: 0;
}

.left-col {
	float: left;
}

.right-col {
	float: right;
}

[class*="pattern1-"],
[class*="pattern2-"],
[class*="pattern3-"],
[class*="pattern4-"] {
	margin-bottom: 2em;
}

.pattern1-1 .left-col {
	width: calc((100% - 40px) / 2);
}

.pattern1-1 .right-col {
	width: calc((100% - 40px) / 2);
}

.pattern2-3 .left-col, .pattern3-2 .right-col {
	width: calc(((100% - 40px) / 5) * 2);
}

.pattern2-3 .right-col, .pattern3-2 .left-col {
	width: calc(((100% - 40px) / 5) * 3);
}

.pattern1-1-1,
.pattern1-1-1-1 {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.pattern1-1-1 .col {
	width: calc((99.9% - (40px * 2)) / 3 );
	margin-right: 40px;
}

.pattern1-1-1 .col:nth-of-type(3n),
.pattern1-1-1-1 .col:nth-of-type(4n) {
	margin-right: 0;
}

.pattern1-1-1-1 .col {
	width: calc((100% - (40px * 3)) / 4 );
	margin-right: 40px;
}

.pattern1-1-x {
	display: flex;
	flex-wrap: wrap;
}
.pattern1-1-x .col {
	width: calc((100% - 40px) / 2);
	margin-bottom: 40px;
}
.pattern1-1-x .col:nth-of-type(odd) {
	margin-right: 40px;
}
/* @end */


/* 09_注意文*/
#content .caution {
	position: relative;
	margin-left: 1.5em;
}

.caution::before {
	position: absolute;
	content: "※";
	color: red;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'font-library' !important;
	speak: none;
	font-size: .8em;
	top: 0.2em;
	left: -1.5em;
}
/* @end */


/* 10_位置*/
.p-center {
	text-align: center !important;
}
.p-left {
	text-align: left !important;
}
.p-right {
	text-align: right !important;
}
.f-center {
	justify-content: center !important;
}
/* @end */


/* 11_テキスト、ボタンリンク*/
.link-btn {
	position: relative;
	display: inline-block;
	border: 1px solid #0f0f0f;
  line-height: 1.5;
  width: 100%;
  max-width: 392px;
	margin-bottom: 2em;
	z-index: 0;
}
.link-btn::after {
	content: "";
	position: absolute;
	background-color: #fff;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -2;
}
.link-btn a {
	position: relative;
	display: inline-block;
	text-align: center;
	width: 100%;
	padding: 17px 15px;
	font-weight: bold;
	color: #0f0f0f;
	letter-spacing: .05em;
	text-decoration: none;
}
.link-btn a::before {
	content: "";
	position: absolute;
	background-color: #0f0f0f;
	transition: all .5s;
	height: 100%;
	width: 100%;
	opacity: 0;
	top: 0;
	left: 0;
	z-index: -1;
}
.link-btn a:hover {
	color: #fff;
}
.link-btn a:hover::before {
	opacity: 1;
}
.elink::after {
	background: url("../images/elink-icon.png") no-repeat center / 100% auto;
  content: "";
  display: inline-block;
	margin-bottom: -4px;
  margin-left: 4px;
  height: 18px;
  width: 18px;
}
.top .tw-btn a {
	font-weight: 300;
	letter-spacing: .1em;
}
.top .tw-btn::after {
	background-color: inherit;
}
.tw-btn a::before {
	background-color: #aaa;
}
.tw-btn a:hover {
	color: inherit;
}
.link a {
	position: relative;
	display: inline;
	padding-left: 20px;
}
.link a:hover {
	text-decoration: none;
}
.link a::before {
	content: "";
	position: absolute;
	border-top: 2px solid #0f0f0f;
	border-right: 2px solid #0f0f0f;
	height: 5px;
	width: 5px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	top: 4px;
	left: 0;
}

/* @end */


/* 12_箇条書き*/
.list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 15px;
	line-height: 1.7;
}
ul.list li::before {
	content: "";
  position: absolute;
  background: #888;
  border-radius: 50%;
  left: 0;
  top: 11px;
  height: 6px;
  margin-right: 10px;
  width: 6px;
}
.list ul {
	margin: 18px 0 26px;
}
.list ul li::before {
	background: #aaa;
}
/* @end */


/* 13_立ち絵配置パターン：分岐ページ*/
/*
.list-wrapper
.liver-item　　→ .cha-item
.icon-wrapper
.name　　→ .cha-name
.ifebQF　→ .cha-flame
.shadow
.icon　→ .cha-icon
*/
#content .list-wrapper {
	width: 100%;
	margin: 3rem auto 0px;
	opacity: 1;
	transition: opacity 0.2s ease-out 0s;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 3em 0px;
	justify-items: center;
}
#content .list-wrapper .cha-item {
	width: 197px;
	text-align: center;
	margin-bottom: 18px;
}
.list-wrapper .icon-wrapper {
	border-radius: 50%;
	overflow: visible;
	position: relative;
	margin: 0px auto;
	cursor: pointer;
	width: 197px;
	height: 197px;
}
.icon-wrapper .cha-flame img {
	transform: scale(1);
	transition: all .3s;
}
.icon-wrapper:hover .cha-flame img {
	transform: scale(1.05);
}
.cha-flame {
	width: 100%;
	border-radius: 50%;
	height: 100%;
	position: relative;
	z-index: 0;
	background: rgb(255, 255, 255);
	overflow: hidden;
}
.cha-flame .icon-wrapper > .cha-icon {
	padding-bottom: 100%;
	transition: all 0.2s cubic-bezier(0.45, 0, 0.55, 1) 0s;
	transform: translateZ(0px);
	height: 100%;
	width: 100%;
}
.cha-flame.shadow {
	box-shadow: rgba(0 0 0 / 13%) 0px 7px 15px;
}
#content p.cha-name {
	line-height: 22px;
	margin-top: 22px;
	text-align: center;
	letter-spacing: 0.05em;
	margin-bottom: 0;
}
.netabare-sys {
	text-align: right;
}
.netabare-btn {
	margin-bottom: 0;
	width: 180px;
  font-size: 13px;
}
.netabare-btn a {
	cursor: pointer;
	padding: 10px 15px;
}
.netabare-off .netabare-btn a:hover {
	color: #0f0f0f;
}
.netabare-on .netabare-btn a {
	color: #fff;
}
.netabare-sys .netabare-btn a:hover::before {
	opacity: 0;
	transition: all 0.3s;
}
.netabare-on .netabare-btn a::before {
	opacity: 1;
}
.netabare-on .netabare-sys .netabare-btn a:hover::before {
	opacity: 1;
}
/* js操作用 */
.netabare-off .cha-netabare {
	display: none;
}
/* @end */


/* 14_通過記録系パターン*/
div.filter-box {
	display: flex;
	flex-wrap: wrap;
	margin: 5px 0;
}
div.filter-box div[class*="table-count-"],
div.filter-box div[class*="sce-cat-btn-"] {
	margin: 5px -1px 0px 0px;
}
div[class*="table-count-"],
div[class*="sce-cat-btn-"] {
	padding: 1px 9px;
  margin: 10px 0;
  border: solid 1px #0f0f0f;
	width: max-content;
}
div[class*="table-count-"] {
	background-color: #efefef;
}
div[class*="sce-cat-btn-"] {
	cursor: pointer;
	transition: all .5s;
}
#content div[class*="table-count-"] p,
#content div[class*="sce-cat-btn-"] p {
	margin: 0;
  padding: 0;
	font-size: 13px;
}
.sce-cat-01-only div.sce-cat-btn-01,
.sce-cat-02-only div.sce-cat-btn-02,
.sce-cat-03-only div.sce-cat-btn-03,
.sce-cat-04-only div.sce-cat-btn-04,
.sce-cat-05-only div.sce-cat-btn-05,
.sce-cat-06-only div.sce-cat-btn-06 {
	background-color: #0f0f0f;
	color: #fff;
}
table[class*="table-pattern-"] {
	width: 100%;
}
table[class*="table-pattern-"] th,
table[class*="table-pattern-"] td {
	border-color: #888;
	border-style: solid;
	border-width: 1px;
	padding: 12px 20px 10px;
}
table[class*="table-pattern-"] th {
	font-weight: normal;
	text-align: left;
}
table.table-pattern-02 th {
	width: 65%;
}
table.table-pattern-02 td {
	background-color: #efefef;
}
table.table-pattern-04 td,
table.table-pattern-07 td {
	text-align: center;
	background-color: #efefef;
}
table.table-pattern-03 th {
	text-align: center;
	width: 20%;
	background-color: #efefef;
}
table.table-pattern-04 th,
table.table-pattern-07 th {
	width: 80%;
}
table.table-pattern-05 th {
	width: 70%;
}
table.table-pattern-05 td {
	width: 15%;
}
table.table-pattern-05 td,
table.table-pattern-06 td {
	text-align: center;
}
table.table-pattern-06 th {
	width: 80%;
}
.ho-cat-01 {
	background-color: #ee7c6c !important;
}
.ho-cat-02 {
		background-color: #8ccbd0 !important;
}
.ho-cat-03 {
		background-color: #fef07a !important;
}
.ho-cat-04 {
		background-color: #cedb4f !important;
}
.ho-cat-05 {
		background-color: #f9ae48 !important;
}
.ho-cat-kp {
		background-color: #a68ed6 !important;
}
.ho-cat-no {
		background-color: #efefef !important;
}
.sce-cat-01-only .sce-cat-02,
.sce-cat-01-only .sce-cat-03,
.sce-cat-01-only .sce-cat-04,
.sce-cat-01-only .sce-cat-05,
.sce-cat-01-only .sce-cat-06,
.sce-cat-02-only .sce-cat-01,
.sce-cat-02-only .sce-cat-03,
.sce-cat-02-only .sce-cat-04,
.sce-cat-02-only .sce-cat-05,
.sce-cat-02-only .sce-cat-06,
.sce-cat-03-only .sce-cat-01,
.sce-cat-03-only .sce-cat-02,
.sce-cat-03-only .sce-cat-04,
.sce-cat-03-only .sce-cat-05,
.sce-cat-03-only .sce-cat-06,
.sce-cat-04-only .sce-cat-01,
.sce-cat-04-only .sce-cat-02,
.sce-cat-04-only .sce-cat-03,
.sce-cat-04-only .sce-cat-05,
.sce-cat-04-only .sce-cat-06,
.sce-cat-05-only .sce-cat-01,
.sce-cat-05-only .sce-cat-02,
.sce-cat-05-only .sce-cat-03,
.sce-cat-05-only .sce-cat-04,
.sce-cat-05-only .sce-cat-06,
.sce-cat-06-only .sce-cat-01,
.sce-cat-06-only .sce-cat-02,
.sce-cat-06-only .sce-cat-03,
.sce-cat-06-only .sce-cat-04,
.sce-cat-06-only .sce-cat-05 {
	display: none;
}
/* @end */



/* 15_インフォメーションパターン*/
.info-area {
	margin-bottom: 60px;
}
.info-area ul li {
	border-bottom: 1px dotted #000;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1em 0.7em;
}
#content .info-area li p {
	margin-bottom: 0;
}
.info-area .date-cat {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.info-area .date-cat .date {
	width: 140px;
}
.info-area .date-cat .info-cat {
	background-color: #0f0f0f;
  color: #FFF;
  font-size: 13px;
  font-weight: 700;
  font-feature-settings: "palt";
  letter-spacing: .04em;
  text-align: center;
  width: 120px;
}
.info-area ul li > div {
	width: calc(100% - 8.5em - 120px - 1.2em);
	margin-left: 20px;
}
.info-area ul li a {
	color: #0f0f0f;
	text-decoration: none;
}
.info-area ul li a:hover {
	text-decoration: underline;
}
.info-btn {
	text-align: center;
}
.info-btn .link-btn::after {
	background-color: #0f0f0f;
}
.info-btn .link-btn {
	width: 28%;
	overflow: hidden;
}
.info-btn a {
	padding: 10px 15px 10px 125px;
	letter-spacing: .46em;
	color: #fff;
}
.info-btn span::before {
	background: url("../images/info-btn.png") no-repeat center / 100% auto;
	content: "";
	position: absolute;
	height: 44px;
	width: 111px;
	top: 0;
	left: 0;
	transform: scale(1);
	transition: all .5s;
}
.info-btn a:hover span::before {
	transform: scale(1.1);
}
.menu-info .info-area {
	margin-bottom: 30px;
}
/* @end */


/* 49_ページ先頭に戻るボタン */
#top-btn {
	position: fixed;
  bottom: 25px;
  right: 20px;
  z-index: 10;
}
#top-btn a {
	position: relative;
	display: block;
	width: 48px;
	height: 48px;
	background-color: #f2f0e9;
	opacity: .6;
	border-radius: 30%;
	right: 0;
	bottom: 0;
	border: 1px solid #333;
}
#top-btn a::after {
	content: "";
	position: absolute;
  top: 13px;
  left: 13px;
	border-right: 10px solid transparent;
	border-bottom: 17px solid #333;
	border-left: 10px solid transparent;
}
/* @end */


/* 50_footer */
#footer-area {
	position: relative;
	background-color: #0f0f0f;
}
#footer {
	margin: auto;
 	max-width: 1064px;
	padding: 35px 20px 39px;
}
#footer figure {
	text-align: center;
}
#footer figure img {
	height: 54px;
	width: auto;
}
#copyright {
	font-size: 12px;
  letter-spacing: .3em;
  margin: auto;
  text-align: center;
	color: #fff;
}



/* 71_シナリオ一覧 */
.sce-flame.shadow {
	box-shadow: rgba(0 0 0 / 50%) 0px 0px 8px;
}
span.sce-times {
	color: #888;
	font-size: 13px;
}
span.sce-times::before {
	content: " (";
}
span.sce-times::after {
	content: ")";
}
span[class*="sce-ho"] {
	color: #fff;
	padding: 3px 5px 2px 5px;
	margin-left: 10px;
	font-size: 13px;
	border-radius: 3px;
	white-space: nowrap
}
span.sce-ho1 {
	background-color: #ea5549;
}
span.sce-ho2 {
	background-color: #25b7c0;
}
span.sce-ho3 {
	background-color: #fcc800;
}
span.sce-ho4 {
	background-color: #65ab31;
}
span.sce-ho-n {
	padding-left: 15px;
}
ul.sce-cam li {
	color: #888;
	font-size: 13px;
	margin-bottom: 11px;
}
ul.sce-cam li::before {
	top: 8px;
}
.sce-logo figure {
	position: relative;
}
.sce-logo figure::before {
	content: "";
	position: absolute;
	background: url(/common/images/img_sleeve.png);
	width: 100%;
	height: 100%;
	z-index: 5;
}
.sce-logo figure img:first-child {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
  right: 0;
	margin: auto;
	max-width: 90%;
  max-height: 90%;
	width: auto;
  height: auto;
}
div.pl-btn {
	justify-content: center;
}
div.pl-btn div[class*="sce-cat-btn-"] {
	padding: 1px 20px;
}
/* @end */


/* 80_キャラシ用 */
body.cs-page,
body.cs-page #h1-area {
	min-width: calc(600px + 40px);
}
body.cs-page #h1-area {
	height: 10px;
	background-color: inherit;
}
body.cs-page #content {
	width: calc(600px + 40px);
}
body.cs-page #footer-area {
	background-color: inherit;
	border-top: 1px solid #aaa;
}
body.cs-page #footer-area figure {
	position: relative;
}
body.cs-page #footer-area figure::before {
	content: "";
	position: absolute;
	background: url(/common/images/img_sleeve.png);
	width: 100%;
	height: 100%;
	z-index: 5;
	left: 0;
}
body.cs-page #copyright {
	color: #0F0F0F;
}
body.cs-page #content section {
	margin-bottom: 16px;
}
body.cs-page #content section.cs-overview {
	margin-bottom: 30px;
}
h4.accordion {
	cursor: pointer;
}
h4.h4_normal.accordion::before {
	transition: .4s;
}
h4.h4_normal.accordion.accordion-action::before {
	transform:rotate(-90deg);
}
h4.h4_normal.accordion.accordion-hide + div {
	display: none;
}
h4.h4_normal.accordion.accordion-hide::before {
	transform:rotate(-90deg);
}
h4.h4_normal.accordion.accordion-action.accordion-hide::before {
	transform:rotate(0deg);
}
div[class*="ability-"]{
	margin-bottom: 3px;
}
div.ability-str div:first-of-type::before {
	content: "STR";
	margin-right: 19px;
}
div.ability-con div:first-of-type::before {
	content: "CON";
	margin-right: 16px;
}
div.ability-pow div:first-of-type::before {
	content: "POW";
	margin-right: 14px;
}
div.ability-dex div:first-of-type::before {
	content: "DEX";
	margin-right: 18px;
}
div.ability-app div:first-of-type::before {
	content: "APP";
	margin-right: 18px;
}
div.ability-siz div:first-of-type::before {
	content: "SIZ";
	margin-right: 23px;
}
div.ability-int div:first-of-type::before {
	content: "INT";
	margin-right: 21px;
}
div.ability-edu div:first-of-type::before {
	content: "EDU";
	margin-right: 16px;
}
.Area-ability div[class*="ability-"] div:first-of-type {
	background: #e0e0e0;
	border-radius: 3px;
	height: 21px;
	line-height: 21px;
	font-size: 12px;
}
.Area-ability div[class*="ability-"] div:first-of-type::before {
	margin-left: 6px;
}
.Area-ability {
	margin-bottom: 10px;
}
section.cs-overview .pattern1-1 {
	margin-bottom: 0;
}
section.cs-overview .pattern1-1 .left-col {
	width: calc(((100% - 20px) / 5) * 3 ) !important;
}
section.cs-overview .pattern1-1 .right-col {
	width: calc(((100% - 20px) / 5) * 2 ) !important;
}
.cs-hm .cs-color-space {
	display: flex;
  margin-top: 3px;
}
.cs-color-space div {
	display: inline-block;
}
.cs-color-space div.cs-color-border {
	width: 55px;
	height: 10px;
	border-radius: 3px;
	margin-left: 3px;
}
.cs-hm .cs-color-space div.cs-color-border {
	margin-right: 8px;
}
.cs-color-space div.cs-color-name {
	font-size: 12px;
}
.cs-share-space {
	margin: 12px 0px 0px 3px;
}
.cs-ccfolia-space {
	margin: 5px 0px 0px 3px;
}
.cs-ccfolia-space button,
.cs-share-space button {
	background: #808080;
	text-align: center;
	font-size: 12px;
	line-height: 23px;
	border-radius: 3px;
	color: #fff;
	height: 26px;
	border: 1px solid #808080;
	transition: .3s;
}
.cs-ccfolia-space button:hover,
.cs-share-space button:hover {
	opacity: .8;
	transition: .3s;
}
section.cs-overview .left-col table,
section.cs-overview .Area-subskill table,
section.cs-skill table {
	border-collapse: separate;
	border-spacing: 3px;
	width: 100%;
}
section.cs-overview .left-col table {
	margin-bottom: -3px;
}
section.cs-overview .left-col th {
	font-size: 12px;
	font-weight: 400;
	background: #e0e0e0;
	width: 55px;
	padding: 5px;
	border-radius: 3px;
	vertical-align: baseline;
	text-align: center;
	line-height: 2em;
}
section.cs-overview .left-col td {
	padding: 5px;
	line-height: 18px;
	font-size: 14px;
}
section.cs-overview tr div {
	font-size: 12px;
	margin-top: 3px;
	color: #808080;
}
section.cs-skill .pattern1-1 .left-col {
	width: calc((100% - 20px) / 2) !important;
}
section.cs-skill .pattern1-1 .right-col {
	width: calc((100% - 20px) / 2) !important;
}
section.cs-overview .Area-subskill th {
	font-size: 12px;
	font-weight: 400;
	background: #e0e0e0;
	padding: 5px;
	border-radius: 3px;
	vertical-align: baseline;
	text-align: center;
	line-height: 16px;
}
section.cs-skill th {
	font-size: 12px;
	font-weight: 400;
	background: #e0e0e0;
	padding: 5px;
	border-radius: 3px;
	vertical-align: baseline;
	text-align: center;
	line-height: 16px;
	width: 100%;
}
section.cs-skill .pattern1-1-1 .col2:nth-of-type(2) .col:last-child  {
	margin-right: 0;
}
section.cs-overview .Area-subskill td,
section.cs-skill td {
	font-size: 12px;
	font-weight: 400;
	border: 1px solid #e0e0e0;
	padding: 5px;
	border-radius: 3px;
	text-align: center;
	vertical-align: middle;
}
.Area-skill-btn {
	width: 120px;
	background: #808080;
	cursor: pointer;
	text-align: center;
	font-size: 13px;
	line-height: 24px;
	border-radius: 3px;
	color: #fff;
	height: 26px;
	margin: 8px 0px 8px 7px;
	border: 1px solid #808080;
	transition: .3s;
}
.Area-skill-btn:hover {
	opacity: .8;
	transition: .3s;
}
.active-skill-all .Area-skill-btn {
	background: #fff;
	color: #808080;
	border: 1px solid #808080;
}
#content [class*="pattern"] div.col2 {
	display: contents;
}
section.cs-skill tr {
	display: none;
}
section.cs-skill tr.active-skill {
	display: inherit;
}
section.cs-skill .active-skill-all tr {
	display: inherit;
}
section.cs-item table {
	border-collapse: collapse;
	width: 100%;
}
section.cs-item table tr th:first-of-type,
section.cs-item table tr td:first-of-type {
	width: 30%;
}
section.cs-item table th,
section.cs-item table td {
	border:1px solid #e0e0e0;
	font-size: 13px;
	font-weight: 400;
	text-align: left;
	padding: 7px;
}
section.cs-item table th {
	background: #e0e0e0;
	height: 20px;
}
section.cs-item table td {
	line-height: 21px;
}
section.cs-spell .list-points {
	font-size: 13px;
}
section.cs-spell .list-points ul.list li::before,
section.cs-played .played-list li::before {
	top: 8px;
}
section.cs-spell .list-points ul.list li {
	margin-bottom: 10px;
}
span.en-spell::before {
	content: "(" ;
	white-space: pre ;
}
span.en-spell::after {
	content: ")";
}
span.page-spell {
	background: #808080;
	color: #fff;
	padding: 2px 5px 2px 5px;
	margin-left: 2px;
	font-size: 12px;
	border-radius: 3px;
	white-space: nowrap;
}
#content section.cs-detail p {
	font-size: 13px;
}
.Area-detail div {
	margin-bottom: 50px;
}
.Area-detail-person {
	position: relative;
	margin-left: 16px;
}
.Area-detail-person::before {
	content: "";
	position: absolute;
	width: 3px;
	height: 100%;
	top: -2px;
	left: -16px;
	background: #0f0f0f;
}
.Area-detail-person div {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}
.gg-volume {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs,1));
width: 8px;
height: 8px;
border: 2px solid;
border-right: 0;
-webkit-perspective: 12px;
perspective: 12px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.gg-volume::after,
.gg-volume::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute
}
.gg-volume::before {
left: 2px;
transform: rotateY(-90deg);
width: 10px;
height: 10px;
border: 2px solid;
border-left: 0;
top: -3px
}
.gg-volume::after {
width: 8px;
height: 16px;
border: 6px double;
border-left: 0;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
right: -14px;
top: -6px
}
.Area-detail-voice {
	position: relative;
	background: #e0e0e0;
	padding: 56px 10px 16px 10px;
	border-radius: 3px;
}
span.gg-volume {
	position: absolute;
	top: 25px;
	left: 49%;
  transform: translateX(-49%);
  -webkit-transform: translateX(-49%);
  -ms-transform: translateX(-49%);
}
#content section.cs-detail .Area-detail-voice p {
	font-size: 12px;
}
#content section.cs-detail .Area-detail-voice p:last-child {
	margin-bottom: 0px;
}
section.cs-played .played-list li {
	width: fit-content;
	margin-bottom: 10px;
	font-size: 13px;
}
section.cs-played .played-list li a {
	text-decoration: none;
}
section.cs-played .played-list li a:hover {
	opacity: .5;
	transition: .3s;
}
span.sce-hok {
	background-color: #808080;
}
.Area-played-btn {
	width: 120px;
	background: #808080;
	cursor: pointer;
	text-align: center;
	font-size: 13px;
	line-height: 26px;
	border-radius: 3px;
	height: 26px;
	margin-bottom: 13px;
	transition: .3s;
}
.Area-played-btn:hover {
	opacity: .8;
	transition: .3s;
}
.Area-played-btn a {
	text-decoration: none;
	color: #fff;
}
section.cs-db table {
	border-collapse: collapse;
}
section.cs-db table th {
	border: 1px solid #e0e0e0;
	font-size: 13px;
	font-weight: 400;
	text-align: left;
	padding: 7px;
	background: #f2f1f0 ;
}
section.cs-db table td {
	border: 1px solid #e0e0e0;
	font-size: 13px;
	font-weight: 400;
	text-align: center;
	padding: 7px;
}
div.DBtable-ability {
	margin-bottom: 20px;
}
section.cs-db table tr:first-of-type th {
	text-align: center;
}
section.cs-played-index a {
	text-decoration: none;
}
.cs-played-item {
	padding: 14px 14px 14px 14px;
	background: #fcfcfc;
	border-radius: 10px;
	border: 1px solid #e0e0e0;
	transition: .3s;
}
.cs-played-item:hover {
	box-shadow: rgba(0 0 0 / 40%) 2px 2px 6px;
	transition: .3s;
}
#content .cs-played-item p {
	margin-bottom: 0;
}
section.cs-played-index .Area-played-btn,
section.cs-played-detail .Area-played-btn {
	margin-left: auto;
	margin-right: auto;
}
.played-main-image {
	text-align: center;
}
.played-main-image figure img {
	width: auto;
	max-height: 500px;
}
body.cs-page #content section.cs-played-detail {
	margin-bottom: 50px;
}
#content .played-main-text p.played-date {
	background: #e0e0e0;
	padding: 5px 10px 5px 10px;
	width: fit-content;
	border-radius: 3px;
}
#content .played-main-text p.played-kp {
	position: relative;
	margin-bottom: 10px;
}
#content .played-main-text p.played-kp::before {
	content: "KP/ "
}
#content .played-main-text p.played-pl {
	padding-left: 15px;
	margin-bottom: 5px;
}
#content .played-main-text p.played-pl span {
	margin-right: 20px;
}
#content .played-main-text p.played-pl span::before {
	content: "HO "
}
.played_chara_box {
	background: #0f0f0f;
  background-color: rgb(15, 15, 15);
	display: block;
	content: "";
	height: 26px;
	width: 6px;
	position: absolute;
}
.text-flame {
	background: #e0e0e0;
	padding: 10px;
	border-radius: 3px;
	margin-bottom: 25px;
}
#content .text-flame p {
	font-size: 12px;
}
#content .text-flame p:last-child {
	margin-bottom: 0;
}
/* @end */


/* 81_トップページ */
body.top,
body.top #h1-area {
	min-width: calc(400px + 40px);
}
body.top #content {
	width: calc(400px + 40px);
}
body.top #h1-area {
	background-color: #f7f6f5;
}
body.top #footer-area {
	background-color: #f7f6f5;
}
body.top #copyright {
	color: #0f0f0f;
}
/* @end */


/* 82_CS一覧　分岐ページ */
body.db-cs-list,
body.db-cs-list #h1-area {
	min-width: calc(600px + 40px);
}
body.db-cs-list #content {
	width: calc(600px + 40px);
}
div.db-cs-list-btn {
	width: 80px;
	height: 26px;
	margin-bottom: 22px;
	cursor: pointer;
	line-height: 26px;
	border-radius: 3px;
	background: #808080;
	text-align: center;
	color: #fff;
	font-size: 14px;
	transition: .3s;
}
div.db-cs-list-btn:hover {
	opacity: .8;
	transition: .3s;
}
body.db-cs-list ul {
	border-left: 1px solid #0F0F0F;
}
body.db-cs-list div.db-cs-list-area li {
	width: fit-content;
	display: none;
}
body.db-cs-list div.db-cs-list-area li.active {
	display: block;
}
body.db-cs-list div.db-cs-list-area.active-cs li {
	display: block;
}
body.db-cs-list ul.list li::before {
	content: none;
}
body.db-cs-list ul li a {
	text-decoration: none;
	transition: all .3s;
}
body.db-cs-list ul li a:hover {
	opacity: .5;
}
body.db-cs-list ul li a {
	display: flex;
}
body.db-cs-list ul li a div:first-of-type {
	width: 50px;
	text-align: center;
	margin-right: 20px;

}
/* @end */


/* 83_ハウスルールページ */
body.houserules-page {
	color: #332f2d;
	background-color: #eee;
}
body.houserules-page .h2_normal {
	color: #332f2d;
}
body.houserules-page .h3_normal {
	font-size: 16px;
}
body.houserules-page .h3_normal::before {
	background-color: #332f2d;
	height: 22px;
}
body.houserules-page .h4_normal::before {
	border-top: 17px solid #332f2d;
}
body.houserules-page,
body.houserules-page #h1-area {
	min-width: calc(600px + 40px);
}
body.houserules-page #h1-area {
	background-color: #1c658c;
	height: 100px;
}
body.houserules-page #h1-area h1 {
	font-size: 23px;
}
body.houserules-page #h1-area span:nth-of-type(2) {
	font-size: 12px;
	letter-spacing: 1px;
}
body.houserules-page #content {
	width: calc(600px + 40px);
}
body.houserules-page #content p,
body.houserules-page #content li {
	font-size: 13px;
}
body.houserules-page #footer-area {
	background-color: inherit;
	border-top: 1px solid #1c658c;
}
body.houserules-page #footer-area figure {
	position: relative;
}
body.houserules-page #footer-area figure::before {
	content: "";
	position: absolute;
	background: url(/common/images/img_sleeve.png);
	width: 100%;
	height: 100%;
	z-index: 5;
	left: 0;
}
body.houserules-page #copyright {
	color: #1c658c;
}
body.houserules-page #content section {
	margin-bottom: 60px;
}
body.houserules-page #anchor-area {
	margin-bottom: 30px;
}
body.houserules-page #anchor-area ul {
	display: flex;
	flex-wrap: wrap;
}
body.houserules-page #anchor-area li {
	width: calc(100% / 3);
	margin-bottom: 30px;
}
body.houserules-page #anchor-area a {
	text-decoration: none;
	color: #1c658c;
}
body.houserules-page #anchor-area a:hover {
	opacity: .4;
}
body.houserules-page #anchor-area .link a::before {
	border-top: 2px solid #1c658c;
	border-right: 2px solid #1c658c;
	top: 3px;
}
body.houserules-page .text-flame {
	border: solid 4px #d8d2cb;
	background-color: #eeeeee;
	padding: 20px;
}
body.houserules-page .text-flame-title {
	background-color: #d8d2cb;
	margin: -20px -20px 0 -20px;
	padding: 5px 18px 7px 16px;
	font-weight: bold;
}
.houserules-strong {
	color: #398ab9;
	font-weight: bold;
}
body.houserules-page .list li {
	padding-left: 16px;
}
body.houserules-page ul.list li::before {
	top: 8px;
}
body.houserules-page div.ind-20 {
	padding-left: 20px;
}

/* 001_04_lightboxの編集 */
body.lb-disable-scrolling {
  overflow: hidden;
}
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  opacity: 0.9;
  display: none;
}
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
}
.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
	border: 1px solid #ddd;
}
.lightbox a img {
  border: none;
}
.lb-outerContainer {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  background-color: #fff;
}
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}
.lb-loader {
  position: absolute;
  top: 48%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}
.lb-cancel {
  display: block;
  margin: 0 auto;
}

.lb-cancel {
  width: 25px;
  height: 25px;
  clear: both;
}
.lb-cancel {
  border: 4px rgba(0, 0, 0, 0.25) solid;
  border-top: 4px black solid;
  border-radius: 50%;
  -webkit-animation: spCircRot .6s infinite linear;
  animation: spCircRot .6s infinite linear;
}
@-webkit-keyframes spCircRot {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes spCircRot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
.lb-container > .nav {
  left: 0;
}
.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}
.lb-nav a.lb-next::before,
.lb-nav a.lb-prev::before {
	border-top: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
.lb-nav a.lb-prev {
	position: absolute;
	width: 50%;
	left: 0;
	opacity: 1;
	transition: opacity 0.6s;
}
.lb-nav a.lb-prev::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
  height: 30px;
  width: 30px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.lb-nav a.lb-prev::after {
	content: "";
	position: absolute;
	top: calc(50% - 20px);
  left: -40px;
  height: 70px;
  width: 40px;
}
.lb-nav a.lb-prev:hover {
  opacity: 0.7;
}
.lb-nav a.lb-next {
	position: absolute;
  width: 50%;
  right: 0;
  opacity: 1;
  transition: opacity 0.6s;
}
.lb-nav a.lb-next::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -30px;
  height: 30px;
  width: 30px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.lb-nav a.lb-next::after {
	content: "";
	position: absolute;
	top: calc(50% - 20px);
	right: -40px;
  height: 70px;
  width: 40px;
}
.lb-nav a.lb-next:hover {
  opacity: 0.7;
}
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
	position: relative;
}
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}
.lb-data {
  padding: 0 4px;
  color: #ccc;
}
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
.lb-data .lb-caption a {
  color: #4ae;
}
.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #ddd;
}
.lb-data .lb-close {
	display: block;
	float: right;
  opacity: 1;
  transition: opacity 0.2s;
	width: 24px;
	height: 24px;
}
.lb-data .lb-close::before,
.lb-data .lb-close::after {
	content: "";
	position: absolute;
	background-color: #ddd;
  height: 1px;
  width: 30px;
  top: 0;
  right: 0;
}
.lb-data .lb-close::before {
	transform: translateY(16px) translateX(0) rotate(45deg);
}
.lb-data .lb-close::after {
	transform: translateY(16px) translateX(0) rotate(-45deg);
}
.lb-data .lb-close:hover {
  cursor: pointer;
  opacity: .7;
}
/* @end */


/* 99_調整用 */
/* PCSP表示 */
.pc_none{
	display: none;
}
.sp_none{
	display: block;
}
@media screen and (max-width: 768px) {
	.pc_none{
		display: block;
	}
  .sp_none{
		display: none;
  }
}
/* 色tr,rh,td*/
.cl-white {color: #fff !important;}
.cl-gray01 {color: #a5a5a5 !important;}
/* 表の色tr,rh,td*/
.bg-gray01 {background-color: #666 !important;}
.bg-gray02 {background-color: #d4d4d4 !important;}
/* margin */
.mb-0 {margin-bottom: 0px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-15 {margin-bottom: 15px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-25 {margin-bottom: 25px !important;}
.mb-30 {margin-bottom: 30px !important;}
.mb-35 {margin-bottom: 35px !important;}
.mb-40 {margin-bottom: 40px !important;}
.mb-45 {margin-bottom: 45px !important;}
.mb-50 {margin-bottom: 50px !important;}
.mb-55 {margin-bottom: 55px !important;}
.mb-60 {margin-bottom: 60px !important;}
.mb-70 {margin-bottom: 70px !important;}
.mb-80 {margin-bottom: 80px !important;}
.mb-95 {margin-bottom: 95px !important;}
.ml-10 {margin-left: 10px !important;}
.ml-15 {margin-left: 15px !important;}
.ml-20 {margin-left: 20px !important;}
.ml-25 {margin-left: 25px !important;}
.ml-30 {margin-left: 30px !important;}
.ml-35 {margin-left: 35px !important;}
.mr-10 {margin-right: 10px !important;}
.mr-15 {margin-right: 15px !important;}
.mr-20 {margin-right: 20px !important;}
.mr-25 {margin-right: 25px !important;}
.mr-30 {margin-right: 30px !important;}
.mr-35 {margin-right: 35px !important;}
.mt-10 {margin-top: 10px !important;}
.mt-15 {margin-top: 15px !important;}
.mt-20 {margin-top: 20px !important;}
.mt-25 {margin-top: 25px !important;}
.mt-30 {margin-top: 30px !important;}
.mt-35 {margin-top: 35px !important;}
/* padding */
.pb-0 {padding-bottom: 0 !important;}
.pb-80 {padding-bottom: 80px !important;}
/* width */
.w10{width:10% !important;}
.w20{width:20% !important;}
.w30{width:30% !important;}
.w40{width:40% !important;}
.w50{width:50% !important;}
.w50{width:60% !important;}
.w70{width:70% !important;}
.w80{width:80% !important;}
.w90{width:90% !important;}
.w100{width:100% !important;}
/* font-size */
.fs-12{font-size: 12px !important;}
.fs-13{font-size: 13px !important;}
.fs-14{font-size: 14px !important;}
/* color */
.color-red{color: red !important;}
/* @end */


/* ----------------------------------------------- */
/* ■PCないし共通レイアウトここまで■
/* ----------------------------------------------- */



/* ----------------------------------------------------------------------------------- */
/* ■Tbレイアウト■
/* ----------------------------------------------------------------------------------- */

@media screen and (max-width: 1064px) and (min-width: 769px) {
	#content section.bg_change {
		width: auto;
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.top-menu {
		width: auto;
		margin-left: -20px;
		margin-right: -20px;
	}
}

/* ----------------------------------------------------------------------------------- */
/* ■SPレイアウト■
/* ----------------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

/* 03_body */
	body{
		min-width: inherit;
		font-size:15px;
		width: 100%;
	}
/* @end */

/* 04_header */
	#header-area {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		margin: 0 auto;
		min-width: inherit;
	}
	header#header {
		position: fixed;
		z-index: 9999;
		height: 50px;
		padding: 5px 20px 5px 13px;
		width: 100%;
	}
	#header .header-logo {
		margin: auto;
	}
	#header .header-logo a img {
		width: 125px;
	}
/* @end */

/* 05_global-nav */
	#global-nav-area {
		display: none;
	}
	#h_menu_btn {
		position: absolute;
		right: 0;
		width: 50px;
		height: 50px;
		margin-top: -5px;
		z-index: 9999;
		background: #0f0f0f;
	}

	#h_menu_btn button {
		position: relative;
		display: block;
		height: 40px;
		width: 25px;
		margin: 15px auto 0;
		padding: 0;
		background: none;
	}

	#h_menu_btn span {
		display: block;
		position: relative;
		transition: .3s opacity;
		height: 2px;
		margin:0 auto;
		background: #ffffff;
	}

	#h_menu_btn .top {
		animation: menu-top .5s;
		animation-fill-mode: forwards;
		top: 0;
	}

	#h_menu_btn .middle {
		transition: .5s opacity;
		transform: translateY(-1px);
		opacity: 1;
		top: -12px;
	}

	#h_menu_btn .bottom {
		animation: menu-bottom .5s;
		animation-fill-mode: forwards;
		bottom: 24px;
	}

	.menu-close #sp-nav-area {
		visibility: hidden;
		opacity: 0;
	}
	.menu-open #sp-nav-area {
		visibility: visible;
		opacity: 1;
	}
	.menu-close #sp-nav-area,
	.menu-open #sp-nav-area {
		transition: all .4s;
	}
	#sp-nav-area {
		position: fixed;
		background-color: #0f0f0f;
		z-index: 9998;
		top: 0;
		height: 100vh;
    width: 100%;
	}
	#sp-nav {
		position: relative;
	}
	#sp-nav ul.sp-nav-main {
		margin-top: 100px;
	}
	.sp-nav-main li a {
		padding: 25px 0 20px 80px;
		border-bottom: 1px solid #fff;
		display: block;
		color: #fff;
		text-decoration: none;
	}
	.sp-nav-main > li span::before {
		content: "";
		position: absolute;
		height: 30px;
		width: 30px;
		margin: auto;
	}
	.sp-nav-main > li:first-child span::before {
		background: url("../images/menu-00.png") no-repeat center / 30px 30px;
		top: 16px;
		left: 25px;
	}
	.sp-nav-main > li:nth-of-type(2) span::before {
		background: url("../images/menu-01.png") no-repeat center / 30px 30px;
		top: 76px;
		left: 26px;
	}
	.sp-nav-main > li:nth-of-type(3) span::before {
		background: url("../images/menu-02.png") no-repeat center / 30px 30px;
		top: 137px;
		left: 25px;
	}
	.sp-nav-main > li:nth-of-type(4) span::before {
		background: url("../images/menu-03.png") no-repeat center / 30px 30px;
		top: 198px;
		left: 25px;
	}
	.sp-nav-main > li:nth-of-type(5) span::before {
		background: url("../images/menu-04.png") no-repeat center / 30px 30px;
		top: 259px;
		left: 24px;
	}

/* @end */

/* 06_main */
	#mainvisual {
		margin-bottom: 30px;
	}
	#mainvisual-pic img {
		min-width: 100%;
	}
	#pankuzu-area {
		margin-left: -2px;
		padding-top: 15px;
	}
	#main {
		margin-top: 0px;
	}
	#content {
		width: 100%;
		padding: 0 20px;
		margin-bottom: 54px;
	}
	#content section.bg_change {
		width: auto;
		margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
	}
	.top #main #content section {
		margin-bottom: 35px;
	}
/* @end */


/* 07_h1,h2,h3,h4,p */
	#h1-area {
		height: auto;
		min-height: 70px;
		min-width: inherit;
		overflow: hidden;
	}
	#h1-area h1 {
		font-size: 20px;
    letter-spacing: 0.04em;
    margin: auto;
    width: calc(100% - 30px);
	}
	.h2_normal {
		font-size: 21px;
		margin-bottom: 1em;
	}
	.h3_normal {
		font-size: 17px;
	}
	.h4_normal {
		font-size: 16px;
	}
	.h4_normal::before {
		top: 5.5px;
	}
	.last-text {
		margin-bottom: 30px !important;
	}
/* @end */


/* 08_画像パターン*/
	[class*="pattern"] [class*="col"] {
		width: 100%;
		margin-right: 0;
		margin-bottom: 2em;
	}
	[class*="col"] figure {
		text-align: center;
	}
	[class*="col"] figure img {
		width: 100%;
	}
	.left-col,
	.right-col {
		float: none;
	}
	.pattern1-1-x .col:nth-of-type(odd) {
		margin-right: 0;
	}
	.pattern1-1-x .col {
		width: 100%;
	}
/* @end */


/* 11_テキスト、ボタンリンク*/
/* @end */


/* 12_箇条書き*/
ul.list li::before {
  top: 9px;
}
ul.sce-cam li::before {
	top: 8px;
}
/* @end */


/* 13_立ち絵配置パターン：分岐ページ*/
	#content .list-wrapper {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 7vw;
		margin-top: 3rem;
	}
	#content .list-wrapper .cha-item {
		width: 100%;
	}
	.list-wrapper .icon-wrapper {
		width: 100%;
    height: 0px;
    padding-bottom: 100%;
	}
	.cha-flame {
		padding-bottom: 100%;
	}
	#content p.cha-name {
    margin-top: 1.1rem;
    letter-spacing: 0em;
	}
	.netabare-sys {
		text-align: center;
	}
	.netabare-btn {
		width: 100%;
	}
/* @end */


/* 15_インフォメーションパターン*/
	.info-area {
		margin-bottom: 30px;
	}
	.info-area ul li {
		flex-wrap: wrap;
		padding: 16px 10px 22px 12px;
	}
	#content .info-area .date-cat {
			flex-wrap: wrap;
    	margin-bottom: 6px;
    	width: 100%;
	}
	#content .info-area .date-cat .info-cat {
		min-width: 120px;
    margin-top: -1px;
    width: auto;
	}
	.info-area ul li > div {
		margin-left: 0;
		width: 100%;
	}
	.info-btn .link-btn {
		width: 100%;
	}
/* @end */


/* 30_Collaboration */
	.menu-03 section img.clb-display {
		width: auto;
		height: auto;
	}
/* @end */


/* 49_ページ先頭に戻るボタン */
	#top-btn {
		bottom: 10px;
		right: 10px;
	}
/* @end */


/* 50_footer */
	#footer {
		padding: 47px 20px 40px;
	}
/* @end */


/* 59_トップページ */
	.top-menu {
		flex-wrap: wrap;
		width: auto;
		margin-left: -20px;
		margin-right: -20px;
		margin-bottom: 37px;
	}
	.top-menu .col {
		width: 100%;
		border-width: 0px;
		border-top: 1px solid #FFF;
	}
	.top-menu .col:first-child {
		border-top: none;
	}
	.top-menu .col p a {
		height: 100px;
		background-position: 45px center;
		padding: 37px 0 0 160px;
		text-align: left;
	}
/* @end */


/* 70_キャラ詳細画面 */
	.menu-chara .pattern1-1-1 .col {
		float: left;
		margin-right: 10px;
		width: calc((100% - 10px) / 2) !important;
	}
	.menu-chara .pattern1-1-1 .col:nth-of-type(3n) {
		margin-right: 10px;
	}
	.menu-chara .pattern1-1-1 .col:nth-of-type(2n) {
		margin-right: 0;
	}
	.h2_chara {
		font-size: 25px;
	}
	.h2_chara_box {
		height: 44px;
	}
	.menu-chara .pattern1-1 .left-col {
		margin-bottom: 1em;
	}
	.menu-chara .pattern1-1 .standing img {
		width: auto;
		max-height: 500px;
	}
	.cha-item .link-btn {
		width: 60px;
	}
	.cha-item .link-btn a {
		font-size: 11px;
	}
/* @end */


/* 80_キャラシ用 */
	body.cs-page,
	body.cs-page #h1-area {
		min-width: inherit;
	}
	body.cs-page #h1-area {
		min-height: 10px;
	}
	body.cs-page #content {
		width: 100%;
	}
	section.cs-overview .Area-subskill th {
		width: 70px;
	}
	section.cs-overview .pattern1-1 .left-col,
	section.cs-skill .pattern1-1 .left-col {
		float: left;
	}
	section.cs-overview .pattern1-1 .right-col,
	section.cs-skill .pattern1-1 .right-col {
		float: right;
	}
	section.cs-overview .pattern1-1 .left-col {
		margin-bottom: 0;
	}
	.pattern1-1 .cs-color-space {
		margin-bottom: 0;
	}
	.cs-color-space div.cs-color-border {
		width: 55px;
		margin-bottom: 0;
	}
	.cs-color-space div.cs-color-name {
		width: auto;
	}
	#content [class*="pattern"] div.col2 {
		display: inherit;
		width: calc((100% - 20px) / 2);
	}
	#content .Area-skill .pattern1-1-1 {
		display: inherit;
	}
	#content [class*="pattern"] div.col2:first-of-type {
		float: left;
	}
	#content [class*="pattern"] div.col2:nth-of-type(2) {
		float: right;
	}
	#content [class*="pattern"] div.col2:first-of-type .col:first-of-type {
		margin-bottom: -9px;
	}
	.Area-skill-btn {
		font-size: 10px;
		width: 89px;
	}
	span.en-spell::before {
		content: "\A(" ;
		white-space: pre ;
	}
	.active-skill-none {
		display: none;
	}
	.active-skill-all .active-skill-none {
		display: inherit;
	}
/* @end */

/* 81_トップページ */
body.top,
body.top #h1-area {
	min-width: inherit;
}
body.top #content {
	width: 100%;
}
/* @end */

/* 82_CS一覧　分岐ページ */
body.db-cs-list,
body.db-cs-list #h1-area {
	min-width: inherit;
}
body.db-cs-list #content {
	width: 100%;
}
/* @end */

/* 83_ハウスルールページ */
body.houserules-page,
body.houserules-page #h1-area {
	min-width: inherit;
}
body.houserules-page #content {
	width: 100%;
}
body.houserules-page #anchor-area {
	margin-bottom: 50px;
}
body.houserules-page #anchor-area ul {
	display: block;
}
body.houserules-page #anchor-area li {
	width: auto;
	margin-bottom: 0;
	font-size: 16px;
	border-top: solid 1px #1c658c;
}
body.houserules-page #anchor-area li:last-child {
	border-bottom: solid 1px #1c658c;
}
body.houserules-page #anchor-area li div {
	text-align: left;
}
body.houserules-page #anchor-area a {
	display: block;
	padding: 15px;
	font-size: 13px;
}
body.houserules-page #anchor-area a:hover {
	opacity: 1;
}
body.houserules-page #anchor-area .link a::before {
	content: none;
}
/* @end */

/* 001_04_lightboxの編集 */
.lb-nav a.lb-next::before,
.lb-nav a.lb-prev::before,
.lb-nav a.lb-next::after,
.lb-nav a.lb-prev::after {
	content: none;
}
/* @end */

}