.home-stats {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.subpage-stats {
	display: flex;
	flex-direction: row;
	gap: 16px;
}
.subpage-stats>*,
.home-stats>* {
	flex: 1;
}

/* NEWS */

.home-news {
	margin-top: 70px;
}

/* .home-news * {
	background-color: #ff00ff11;
} */

.home-news h2 {
	margin: 0 0 20px 0;
	text-align: center;
	font-size: 20pt;
	font-weight: 900;
	color: var(--color-shade);
}

.home-news ul {
	margin: 0;
	list-style: none;
	padding: 0;
	/* background: white; */
}

.home-news li {
	padding-bottom: 1.5em;
	margin-bottom: 1.5em;
	border-bottom: 1px solid var(--color-airline);
}

.news-date {
	font-family: "ヒラギノ角ゴシック";
	color: var(--color-shade);
}

.news-cols {
	padding-top: 6px;
	display: flex;
	align-items: start;
}

.news-cols>* {
	flex: 1 0 50%;
}

.news-title {
	color: var(--color-shade);
	font-weight: bold;
	text-decoration: none;
	overflow: hidden;
}
.news-title>div {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.news-sample {
	font-size: 11pt;
	overflow: hidden;
}
.news-sample>div {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.news-list-button {
	margin-top: 2.5em;
	text-align: center;
}
.news-list-button .button {
	font-size: 15px;
	padding: 12px 47px;
}

.error-area {
	margin-bottom: 60px;
}

/* home books */

.home-books {
	position: relative;
	margin-top: 110px;
	padding: 35px 20px 20px 20px;
	background: white url('/material/nsite_img/grid01.png') repeat top 10px left 10px;
	border-radius: 5px;
	box-shadow: var(--shadow-default);
	text-align: center;
}

.home-books::before {
	position: absolute;
	top: -40px;
	right: 59%;
	display: block;
	content: "";
	background-image: url('/material/nsite_img/home-books-icon.png');
	background-size: cover;
	width: 128px;
	height: 98px;
}

.home-books h2 {
	margin: 0 0 10px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--color-shade);
	font-size: 25px;
	line-height: 1;
}

.home-books .books-catch {
	margin: 0;
	color: var(--color-shade);
	font-weight: bold;
	font-size: 12pt;
}

.home-books .books-mid {
	margin: 30px 0 7px 0;
	font-size: 11pt;
}

.home-books .books-close {
	margin: 0 0 0 0;
	font-size: 25px;
	font-weight: 900;
}

.sep-book-select,
.sep-underline {
	margin: 0 0 40px 0;
	border: none;
	background-color: #e5e5e5;
	height: 1px;
}

.sep-underline {
	display: none;
}

.study-problem-ask-teacher>.sep-underline {
	margin-bottom: 0;
	margin-top: 20px;
}

.sep-book-select,
.sep-underline {
	/* display: block; */
}

.study-problem-ask-teacher>.problem-ask-teacher {
	border: none;
}

.page-units .return-links._bottom {
	margin-top: 20px;
}

.book-list-access-btn {
	margin: auto;
}

/* units page >>> */

.textbook-with-score {
	background: var(--color-cream);
	padding: 40px;
	display: flex;
	gap: 30px;
}
.textbook-with-score .textbook {
	margin-bottom: 0;
	flex: 1 1 50%;
}
.textbook-with-score .textbook-img {
	flex: 0 0 150px;
}

.textbook-with-score .book-study-score {
	flex: 0 1 45%;
}

.stats-pannel.with-textbook {
	margin-bottom: 12px;
}

.stats-pannel.with-textbook .body {
	padding: 15px;
}

.stats-pannel.with-textbook em {
	font-size: 12pt;
}

.stats-pannel.with-textbook .score-number {
	font-size: 40px;
}

.stats-pannel.progression .body {
	padding: 5px 15px;
}

.stats-pannel.progression .progression-line {
	display: flex;
	align-items: center;
	margin: 4px 0 0 0;
	padding: 0 0 4px 0;
	border-bottom: 1px solid var(--color-airline);
}
.stats-pannel.progression .progression-line:last-child {
	border: none;
}

.stats-pannel.progression .progression-line>* {
	flex: 1;
}

.stats-pannel.progression .progression-line em {
	flex: 0 1 42%;
	font-size: 10pt;
	margin-bottom: 0;
}
.stats-pannel.progression .score-number {
	font-size: 24px;
}
.stats-pannel.progression .score-number::after {
	font-size: 15px;
	font-weight: normal;
}
.stats-pannel.progression .score-number-full {
	align-self: flex-end;
	font-size: 14px;
}
.stats-pannel.progression .score-number-full b {
	font-size: 15px;
}
.stats-pannel.progression .level {
	color: #2eaaff;
	display: flex;
	justify-content: space-between;
}
.stats-pannel.progression .level .question {
	color: #b3b3b3;
}

.book-study-score .score-legend {
	margin-top: 15px;
	font-size: 11px;
	color: var(--color-shade);
}

.book-units-selection {
	margin-top: 40px;
	margin-bottom: 60px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	/* text-align: justify; */
	gap: 20px;
	flex-wrap: wrap;
}

.book-units-selection>* {
	/* display: inline-block; */
	/* margin: 0.5em; */
	/* flex: 1 1 calc(100% / 6 - 20px); */
}

.book-units-selection a.button {
	display: block;
}

/* <<< units page */

/* ユニットのカテゴリの選択 >>> */
.page-units .textbook-with-score {
	margin-bottom: 20px;
}

.unit-categories-header {
	color: var(--color-shade);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 20px;
}

.unit-categories-search {
	flex: 0 1 45%;
	position: relative;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid var(--color-input-border);
	background-color: var(--color-input-bg);
}

.unit-categories-search button {
	position: absolute;
	appearance: none;
	border: none;
	background: transparent;
	padding: 0 5px;
	top: 0;
	right: 8px;
	bottom: 0;
	font-size: 30px;
}

.unit-categories-search input[type=text] {
	appearance: none;
	border: none;
	font-size: 13px;
	margin-right: 30px;
	padding: 5px;
	width: calc(100% - 40px); /* 40px is padding + button */
	outline: none;
	background: transparent;
	/* border: 1px solid red; */
}

.unit-categories-display {
	display: flex;
	gap: 35px;
	align-items: baseline;
}

.unit-categories-display-total,
.unit-categories-display-count {
	font-size: 13px;
}

.unit-categories-display-count {
	display: flex;
	gap: 10px;
	align-items: baseline;
}
.unit-categories-display-count a {
	text-decoration: none;
	padding: 2px 3px;
}
.unit-categories-display-count a:hover {
	cursor: pointer;
}
.unit-categories-display-count a.selected {
	color: white;
	background-color: var(--color-shade);
}

.page-categories #unit-categories-table {
	margin-bottom: 80px;
}

#unit-categories-table p { /* modal */
	margin-bottom: 2pt;
	font-size: 13px;
	color: var(--color-shade);
}

/* 復習 */
table.study-history-problems,
#unit-categories-table table {
	width: 100%;
	/* border-spacing: 1px; */
	background-color: #e5e5e5;
	border-radius: 5px;
	margin-bottom: 15px;
}
table.study-history-problems th,
#unit-categories-table th {
	padding: 10px;
	font-weight: bold;
	font-size: 11pt;
	background-color: var(--color-shade);
	color: white;
	white-space: nowrap;
}
table.study-history-problems th:first-of-type,
#unit-categories-table th:first-of-type {
	border-top-left-radius: 4px;
}
table.study-history-problems th:last-of-type,
#unit-categories-table th:last-of-type {
	border-top-right-radius: 4px;
}
table.study-history-problems tr:last-child td:first-of-type,
#unit-categories-table tr:last-child td:first-of-type {
	border-bottom-left-radius: 4px;
}
table.study-history-problems tr:last-child td:last-of-type,
#unit-categories-table tr:last-child td:last-of-type {
	border-bottom-right-radius: 4px;
}
table.study-history-problems td,
#unit-categories-table td {
	font-size: 13px;
	padding: 20px;
	background-color: white;
}
table.study-history-problems td.review {
	text-align: center;
}
table.study-history-problems .button,
#unit-categories-table .button {
	padding: 3px 30px;
	font-size: 10pt;
	font-weight: bold;
	white-space: nowrap;
}
table.study-history-problems .th_width{
	width:140px;
}
/* >>> 復習 */

#unit-categories-table .cate-score,
#unit-categories-table .cate-study,
#unit-categories-table .cate-hist,
#unit-categories-table .cate-period {
	text-align: center;
}
#unit-categories-table .cate-period ._small {
	display: block;
	white-space: nowrap;
	font-size: 11px;
}

#unit-categories-table .study-over,
#unit-categories-table .not-available {
	color: #9ea4a7;
}

.unit-categories-footer {
	color: var(--color-shade);
	display: flex;
	justify-content: flex-end;
}

.units-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	align-items: baseline;
	margin-top: 40px;
	padding: 0 15px;
}

.units-breadcrumbs a {
	text-decoration: none;
	color: var(--color-shade);
}
.units-breadcrumbs a:hover {
	text-decoration: underline;
}

.units-breadcrumbs span {
	color: #9ea4a7;
}
.study-history-msg {
	font-size: 11px;
	color: var(--color-shade);
	padding-bottom: 20px;
}
/* <<< ユニットのカテゴリの選択 */

/* PORTFOLIO >>> */

.portfolio-filters {
	margin-bottom: 50px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.portfolio-filters .filter-label {
	font-weight: bold;
	color: #8092a0;
}

.portfolio-filters .filter-days {
	display: flex;
	align-items: center;
	gap: 10px;
}

.portfolio-filters .filter-days .input-text.input-default {
	display: flex;
	align-items: center;
	font-size: 15px;
	width: 135px;
	padding: 15px;
	color: black;
	font-weight: bold;
}

.portfolio-filters .filter-days .input-text.input-default input {
	font-size: 15px;
	width: 2.3em;
	border: 1px solid transparent;
	background: transparent;
	color: var(--color-fade);
	font-weight: normal;
	text-align: center;
}
.portfolio-filters .filter-days .input-text.input-default input.days-y {
	width: 3.5em;
}
.portfolio-filters .filter-days .input-text.input-default input:focus::placeholder {
	color: transparent;
}
.portfolio-filters .filter-days .input-text.input-default input:focus {
	outline: none;
	border-bottom-color: var(--accent-color);
}
.portfolio-filters .filter-days .input-text.input-default input:invalid {
	background-color: var(--color-err-bg);
	color: black;
}

.portfolio-filters .filter-button {
	margin-left: 60px;
}
.portfolio-filters .filter-button .button {
	font-weight: bold;
	font-size: 12pt;
	padding-left: 40px;
	padding-right: 40px;
}
.portfolio-filters .filter-print {
	margin-left: auto;
	font-size: 36px;
	--button-action-color: #8d9daa;
}

.stats-pannel.portfolio {
	margin-bottom: 40px;
}

.stats-pannel.portfolio .body {
	padding: 15px;
	display: flex;
	/* align-items: flex-end; */
	/* justify-content: space-evenly; */
}
.stats-pannel.portfolio .body>* {
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: center;
}
.stats-pannel.portfolio .body .big {
	flex: 1.5;
}
.stats-pannel.portfolio .body>*:not(:last-child) {
	border-right: 1px solid var(--color-border-default);
}

.stats-pannel.portfolio em {
	margin: 0 0 auto 0;
/*	font-size: 12pt;	*/
font-size: 11pt;
}

.stats-pannel .portfolio-number span {
	font-size: 25px;
	font-weight: bold;
}

.stats-pannel .portfolio-number span.xl {
	font-size: 40px;
	font-weight: bold;
}


.portfolio-units {
	margin-bottom: 60px;
}

@media screen {
	.portfolio-units {
		padding: 60px 40px;
		background-color: #fafafa;
	}
}

.portfolio-units .stats-pannel.portfolio.errored .unit-title::after {
	font: var(--fa-font-solid);
	font-size: 30pt;
	content: "\2b"; /* + */
}
.portfolio-units .stats-pannel.portfolio.errored .body {
	padding: 0.5em;
	color: var(--color-err-info);
	font-size: 14pt;
}

.portfolio-units .stats-pannel.portfolio .body {
	padding: 30px 15px;
}
.portfolio-units .stats-pannel.portfolio .body em {
	color: #8092a0;
}

.portfolio-units .stats-pannel.portfolio {
	margin-bottom: 24px;
}

.portfolio-units .stats-pannel.portfolio:not(.open) .details {
	display: none;
}

.portfolio-units .stats-pannel.portfolio:not(.open) .body {
	display: none;
}

.stats-pannel.portfolio .unit-title {
	position: relative;
	border-radius: 6px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	padding: 26px 70px 26px 26px;
	background-color: white;
	cursor: pointer;
}
.stats-pannel.portfolio.open .unit-title,
.stats-pannel.portfolio .unit-title:hover {
	background-color: #d3e5f2;
}

.stats-pannel.portfolio .unit-title h3::after {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Line Awesome Free';
	font-weight: 900;
	font-size: 30pt;
	content: "\f067"; /* + */
	color: var(--button-action-color);
	line-height: 1;
}
.stats-pannel.portfolio.loading .unit-title h3::after {
	font-family: 'Line Awesome Free';
	font-weight: 900;
	animation: la-spin 2s infinite linear;
	font-size: 30pt;
	content: "\f110"; /* spin */
	top: 30%;
}
.stats-pannel.portfolio.open .unit-title h3::after {
	font-family: 'Line Awesome Free';
	font-weight: 900;
	font-size: 30pt;
	content: "\f068"; /* - */
}

.stats-pannel.portfolio .unit-title h3,
.stats-pannel.portfolio .unit-title h4 {
	margin: 0;
}
.stats-pannel.portfolio .unit-title h3 {
	font-size: 15px;
}
.stats-pannel.portfolio .unit-title h4 {
	margin-top: 10px;
	font-weight: normal;
	font-size: 14px;
}


.portfolio .reference-cat {
	padding: 5px 1em;
	background-color: #eee;
	cursor: pointer;
}
.portfolio .reference-cat:hover {
	background-color: var(--color-shade);
	color: white;
}
.portfolio .reference-cat.loading {
	cursor: progress;
	display: flex;
	gap: 5px;
	align-items: center;
}
.portfolio .reference-cat.loading::after {
	font-family: 'Line Awesome Free';
	font-weight: 900;
	animation: la-spin 2s infinite linear;
	content: "\f110"; /* spin */
}

.portfolio .details>.details {
	margin-left: 1em;
}
.portfolio .details>.details .hist-resp-header {
	border-top: none;
}

.portfolio .details .hist-resp-row {
	display: grid;
	grid-template-columns: 3fr 1fr 1fr  1fr 1.5fr;
	grid-auto-rows: auto;
	padding: 0 15px;
	border-top: 1px solid var(--color-airline);
}
.portfolio .details .hist-resp-row>* {
	padding: 5px;
}

.portfolio .details .hist-resp-row .td_unit_name {
	align-self: center;
}

.portfolio .details .hist-resp-header {
	text-align: center;
	font-weight: bold;
}

.portfolio .details .hist-resp-row .hist-resp-col-label {
	display: none;
	font-weight: bold;
	color: var(--color-shade);
}

.portfolio .details .hist-resp-row .td_point,
.portfolio .details .hist-resp-row .td_question_num,
.portfolio .details .hist-resp-row .td_challenge,
.portfolio .details .hist-resp-row .td_study_time {
	text-align: center;
}

.portfolio-graph {
	margin-bottom: 60px;
}

.portfolio-graph .graph-title {
	padding: 0 0 20px 0;
	gap: 20px;
	align-items: flex-start;
}
.portfolio-graph .graph-title span {
	color: var(--color-text);
	font-size: 18px;
}
.portfolio-graph .graph-title small {
	font-size: 14px;
}

/* <<< PORTFOLIO */

/* LOGIN >>> */
.login-pannel {
	margin: auto;
	max-width: 670px;
	border-radius: 5px;
	box-shadow: var(--shadow-default);

	background-color: white;
}

.login-pannel-inner {
	padding: 70px 15px;
}
.login-pannel-inner .body {
	max-width: 460px;
	margin: auto;
}

.login-pannel-title {
	font-size: 18px;
	text-align: center;
	font-weight: bold;
	color: var(--color-shade);
	margin-bottom: 65px;
}

.login-input-text {
	margin: 15px auto 21px auto;
	font-size: 13px;
}
.login-input-text input {
	font-size: 13px;
}
.login-input-text #eye {
	color: var(--color-shade);
	cursor: pointer;
}

.login-optx {
	display: flex;
	gap: 12px;
	flex-direction: column;
	font-size: 13px;
	line-height: 1;
	align-items: flex-end;
	color: var(--color-shade);
}
.login-optx a {
	text-decoration: none;
}

a.login-link {
	text-decoration: none;
	font-size: 13px;
	color: var(--color-shade);
}

.login-btn {
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: center;
	padding-top: 30px;
}
.login-btn .button {
	display: block;
	margin: auto;
	width: 220px;
}

.center-text-line {
	display: flex;
	align-items: center;
	font-size: 13px;
	padding: 60px 0 50px 0;
	color: var(--color-fade);
	gap: 1em;
}

.center-text-line:before,
.center-text-line:after {
  content: "";
  flex-grow: 1;
  height: 1px; 
  background: var(--color-fade);
}

.login-btm {
	display: flex;
	gap: 0px 15px;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 15px;
	color: var(--color-shade);
	text-align: center;
}
.login-btm a {
	text-decoration: none;
	font-weight: bold;
}
/* <<< LOGIN */

/* Q&A >>> */
.page-qanda a:hover,
.page-qanda input:not([type="text"]):hover{
	cursor:pointer;
}

.qanda-sort-container{
	display:flex;
	align-items: center;
	margin-bottom: 64px;
}

.qanda-sort-container>.check-box{
	display:flex;
}

.qanda-unit{
	border-top:1px solid var(--color-border-default);
	padding:48px 0px 50.5px;
	border-collapse: collapse;
}
.qanda-unit:last-child{
	border-bottom: 1px solid var(--color-border-default);
}

.qanda-unit>.qanda-unit-header{
	display:flex;
	gap:20px;
	margin-bottom:30px;
}
.page-qanda .book-name,
.page-qanda .unit-name{
	color:var(--color-fade);
}
.page-qanda .qanda-unit-header-top{
	width:70%;
}
.qanda-unit-header-top>.book-name{
	font-weight: bold;
}
.qanda-unit-header-bottom{
	display:flex;
	margin-left:auto;
	gap:20px;
}
.qanda-regist-time-outer{
	display:flex;
	height:1em;
	vertical-align:baseline;
	white-space: nowrap;
	align-items:center;
	margin-top:3px;
}
.qanda-regist-time-outer>.regist-time{
	font-size: 13px;
	/* font-weight:bold; */
	font-family:"ヒラギノ角ゴシック";
}
.qanda-regist-time-outer>.la-clock{
	color:var(--color-fade);
}
.qanda-status{
	padding:0.5px;
	width:79px; 
	height:max-content;
	font-size:13px;
	color:#FFFFFF;
	white-space: nowrap;
	margin-left:auto;
	text-align:center;
}
.flag-0{
	background-color:var(--color-failure);
}
.flag-1{
	background-color:var(--color-success);
}
.flag-2{
	background-color:var(--button-action-color2)
}

.qanda-unit>.unit-name{
	margin-bottom: 30px;
}
.qanda-unit-bottom{
	display:flex;
}
.qanda-unit-bottom>.question-title{
	font-weight:bold;
	width:40%;
}

.page-qanda .unit-categories-display{
	margin-bottom:30px;
	justify-content: flex-end;
	color:var(--color-shade);
}
.qanda-sort-button{
	width:144px;
	height:41px;
	border-radius:100px;
	color:var(--button-action-color);
	font-weight:bold;
	font-size:15px;
	border:1px solid var(--button-action-color);
	background-color: #FFFFFF;
	margin-left:auto;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.25);
}

.qanda-sort-button:hover{
	color:#fff;
	background-color:var(--button-action-color);
}
.qanda-sort-container>form{
	display:flex;
	align-items:center;
	flex:1;
	gap: 20px;
}
.page-qanda .check-box{
	/* white-space: nowrap; */
	margin:auto;
	font-size:15px;
	display:flex;
	gap:17.5px;

}
.page-qanda .check-box-outer{
	white-space: nowrap;
}
.qanda-checkbox{
margin:0;
margin-right:3px;
position:relative;
top:1px;
accent-color:var(--color-fade);
border-color: #485065;
transform: scale(1.1);
}

.qanda-footer{
	margin-top:34px;
}

.qanda-paging-outer{
	display:flex;
	justify-content:end;
	margin-bottom:60px;
}
.page-qanda .paging{
	flex-wrap: wrap;
}
.qanda-paging-arrow{
	display:flex;
	align-items:center;
}
.page-qanda .question-title,
.page-qanda .question-content{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-qanda .qanda-detail:hover,
.page-qanda .qanda-detail:active {
	color: #8092a0;
}

/* <<< Q&A */

/* >>>Q&A DETAIL */

.page-qanda .question-container{
	background-color:#FAFAFA;
	padding:30px 40px;
}

.qanda-detail-header{
	margin-bottom:40px;
}
.qanda-detail-header .book-name{
	font-weight:bold;
	margin-bottom:12px;
}

.qanda-thread-header{
	display: flex;
	justify-content: space-between;
	margin:60px 0px 40px;
}

.thread-unit-left {
	color: var(--color-fade);
}

.thread-user-name {
	font-size: 14px;
}

.qanda-regist-time-outer {
	font-size: 13px;
}

.page-qanda .thread-unit-container{
	border-top:1px solid var(--color-border-default);
	padding:40px 0px 40px;
}

.page-qanda .thread-unit-header{
	display:flex;
	margin-bottom:40px;
}

.page-qanda .thread-footer-top{
	display: flex;
	justify-content: space-between;
	margin-bottom:30px;
}

.page-qanda .thread-unit-left{
	margin-right:10px;
}
.thread-footer-content>input{
	width:100%;
	height: 100px;
}

.thread-footer-content{
	margin-bottom:30px;
}

.thread-footer-bottom{
	text-align:center;
}

.qanda-form-header{
	display:flex;
	margin-bottom:30px;
	align-items:center;
	justify-content: space-between;
}

.qanda-form-left{
	display:flex;
	align-items: center;
}
.qanda-form-left .las {
	color: var(--color-fade);
}

.qanda-form-header h3{
	margin:0;
	margin-right:10px;
}

.page-qanda .problem-ask-teacher-sendbtns{
	display:flex;
	justify-content: center;
	margin-top:30px;
}

.page-qanda .problem-ask-teacher-sendbtns>input{
	width: 242px;
	height:51px;
	font-size:15px;
	line-height: 0;
}

.qanda-thread-footer{
	margin-bottom:60px;
}

.page-qanda .qanda-unit-header i {
	color:var(--color-fade);
}

.qanda-resolve-href{
	color:#2eaaff;
	font: normal normal bold 15px/30px Hiragino Sans;
}

.qanda-resolve-href:hover{
	color: #6cc3ff;
}

.page-qanda .input-text:invalid{
	background-color:var(--color-input-bg);
}
.page-qanda-end .qanda-thread-footer{
	margin-top:60px;
	margin-bottom:180px;
}

.page-qanda textarea::placeholder{
	color:var(--color-fade);
	font: normal normal normal 13px/23px Hiragino Sans;
}
/* <<< Q&A DETAIL*/

/* ユーザー情報ページ >>> */
.page-userinfo .page-title span {
	display: flex;
	align-items: center;
}

.page-userinfo .page-title span {
	color: black;
	font-size: 23px;
	font-weight: normal;
}

.page-userinfo .page-title .la {
	font-size: 48px;
	color: var(--color-shade);
}

.userinfo-layout {
	margin-bottom: 60px;
	margin-top: 20px;
	display: flex;
	gap: 44px;
	align-items: flex-start;
}
.userinfo-menu {
	width: 215px;
}
.userinfo-menu dl {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.userinfo-layout>div {
	flex: 1;
}
.userinfo-menu form,
.userinfo-menu hr {
	margin: 0;
}

.userinfo-menu button {
	padding: 0;
	text-align: left;
	font-size: 15px;
	font-weight: normal;
}
.userinfo-menu button:hover,
.userinfo-menu .active button {
	font-weight: bold;
}

.userinfo-data {
	flex: 1;
	background-color: var(--color-input-bg);
	padding: 30px 60px 40px 60px;
	--line-sep: 40px;
}
.userinfo-data.userinfo-data-form {
	--line-sep: 10px;
}

.userinfo-data th,
.userinfo-data td {
	padding-bottom: var(--line-sep);
	vertical-align: top;
	font-size: 15px;
}

.userinfo-data td input {
	margin-bottom: 0;
}

.userinfo-data small {
	font-size: 11px;
	color: #485065;
}

.userinfo-data th {
	width: 160px;
	text-align: left;
	color: var(--color-fade);
}

.userinfo-data .indi {
	color: var(--color-failure);
	font-weight: bold;
}

.userinfo-indication {
	color: var(--color-shade);
	font-size: 12px;
}
.userinfo-indication._sep {
	padding-top: 15px;
}

.userinfo-data-form .text-info {
	margin-bottom: 1em;
}

.userinfo-data-form table {
	width: 100%;
}
.userinfo-data-form .input-text {
	display: block;
	width: 100%;
	padding: 15px 20px;
	font-size: 15px;
	background-color: white;
	color: black;
}

.userinfo-data-form select[name=pref],
.userinfo-data-form .input-text[name=zip] {
	width: 220px;
}
.userinfo-data-form input:disabled,
.userinfo-data-form input[type=text]:read-only,
.userinfo-data-form input[type=password]:read-only {
	opacity: 0.5;
}
.userinfo-data-form input[type=checkbox] {
	width: 16px;
	height: 16px;
	margin-right: 10px;
}
.userinfo-form-zip {
	display: flex;
	gap: 15px;
	align-items: center;
}
.userinfo-form-zip a {
	display: flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	color: var(--color-shade);
	font-size: 15px;
}
.userinfo-form-zip .la {
	font-size: 21px;
}

.userinfo-data .userinfo-data-form-last>* {
	padding-bottom: 50px;
}

.userinfo-data-end {
	font-size: 15px;
	text-align: center;
}

.userinfo-secede {
	margin-top: 15px;
	font-size: 13px;
	color: var(--color-fade);
}

.user-info-orders{
	flex: 1;
}

.userinfo-order-footer{
	margin-top:30px;
	border-top:1px solid var(--color-fade);
	padding-top:40px;
	display:flex;
}

.userinfo-order-footer a{
	color: var(--color-shade);
    text-decoration: none;
    font-size: 13px;
}

.order-padding{
	display:block;
	padding: 40px 60px;
	background-color: var(--color-input-bg);
	margin-bottom:2px;
}
.order-text-container{
	display: flex;
}
.order-text-img{
	width: 84px;
	box-shadow: var(--book-shadow);
}
.order-text-left{
	margin-right: 28px;
}

.order-text-title{
	font-size:14px;
	font-weight:bold;
	margin-bottom:70px;
}

.order-text-limit{
	border:1px solid #485065;
	background: #FFFFFF 0% 0% no-repeat padding-box;
	opacity:1;
	padding:4px 12px;
	font: normal normal normal 12px/25px Hiragino Sans;
	color:#485065;
	width:max-content;
	white-space: nowrap;
}

.sep-order-text{
	margin:0 0 50px 0;
}
/* <<< ユーザー情報ページ */


/* REFERENCE >>> */
.page-title {
	gap: 0px;
}
.page-title .serif {
	margin: 0 40px 0 0;
}
.page-title .reference-explain {
	padding-top: 20px;
	font-size: 13pt;
	font-weight: normal;
	color: black;
	align-self: flex-start;
}
.page-title .small-text {
	font-size: 13px;
}

.textbook-desc{
	gap:0px;
}
.textbook-with-code {
	background: var(--color-input-bg);
	padding: 40px 20px 0 40px;
	/* display: flex; */
}
.textbook-with-code .textbook {
	margin-bottom: 0;
	flex: 1 1 50%;
}
.textbook-with-code .textbook-message {
	font-size: 13px;
	margin:10px 20px 30px 0;
}
.textbook-with-code .textbook-img {
	flex: 0 0 150px;
}

.textbook-with-code .textbook-detail span{
	display: inline-block;
	margin-bottom: 5px;
}

.textbook-with-code .title {
	color: var(--color-fade);
	font-weight: bold;
}

.textbook-with-code .textbook-detail .title{
	width: 6em;
	text-align: left;
}

.textbook-with-code .textbook-detail .access{
	color: var(--color-fade);
	margin-top: 30px;
	width:160px;
}

.textbook-detail-code {
	display: flex;
	gap: 10px;
	align-items: center;
}
.textbook-detail-code .title {
	white-space: nowrap;
}

.textbook-detail-msg {
	line-height:2em;
	margin-top: 5px;
	text-align: left;
}

.apply-botton {
	background: var(--color-input-bg);
	text-align: center;
	padding: 40px;
}

.bottom-navi {
	margin-top: 60px;
}

.textbook-end {
	background: var(--color-input-bg);
	padding: 40px;
	text-align: center;
	line-height:1.5em;
	/* display: flex; */
}

.start-botton {
	text-align: center;
	padding: 40px;
}

.register-book-input-group {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.input-text.input-default.error {
	background-color: var(--color-err-bg);
}

.register-book-input-group input {
	font-size: 15px;
	width: 4.5em;
	flex: 1 1 4em;
	appearance: none;
	border: none;
	background-color: transparent;
	text-align: center;
	letter-spacing: 5px;
}

.register-book-input-group input:focus {
	border:2px solid var(--color-input-bg);
	outline: none;
	text-align: left;
}

.errros-list {
	color: var(--color-failure);
	text-align: center;
	font-size: 11pt;
	list-style: none;
	margin-top: -35px;
	margin-bottom: 10px;
}

.textbook-confirm-list {
	text-align: center;
	font-size: 11pt;
	list-style: none;
	margin-top: -35px;
	margin-bottom: 10px;
}

.textbook-desc .button-registered {
	flex: 0;
	margin-top: auto;
	margin-right: auto;
	padding: 0.5em 2em;
	font-weight: 900;
	text-decoration: none;
	color: var(--color-input-bg);
	text-align: center;
	background:var(--color-input-border);
	border: 0.5px solid #CBCBCB;
	opacity: 1;
	width: 10em;
}
.button-disable {
	color: white;
	border: 1px solid var(--color-input-border);
	background:var(--color-input-border);
	font-weight: bold;
}
.books-search {
	flex: 0 1 45%;
	position: relative;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid var(--color-input-border);
	background-color: var(--color-input-bg);
	width:95%;
	margin: auto;
}

.books-search button {
	position: absolute;
	appearance: none;
	border: none;
	background: transparent;
	padding: 0 5px;
	top: 0;
	right: 8px;
	bottom: 0;
	font-size: 30px;
}

.books-search input[type=text] {
	appearance: none;
	border: none;
	font-size: 13px;
	margin-right: 30px;
	padding: 5px;
	width: calc(100% - 40px); /* 40px is padding + button */
	outline: none;
	background: transparent;
	/* border: 1px solid red; */
}
.reference-flexbox {
	display: flex;
    justify-content: space-between;
	text-align: left;
}
.search-text {
	width: 55%;
	margin: 0px;
}
.disp-count {
	width: 50%;
	margin: auto .5rem;
	padding: 10px;
}

.btn-reference-classcode{
	width:98%;
}
.reference-title-margin{
	margin-bottom: 15px;
}
/* detail */

.detail-flexbox {
	display: flex;
}
.detail-img {
	width: 17%;
	margin: auto;
	text-align: center;
}
.detail-info {
	width: 83%;
	margin: auto .5rem;
	padding: 10px;
}
.flexbox-code {
	display: flex;
	margin-top: 10px;
}
.box-left {
	margin-top: 10px;
}
.box-right {
	flex: 100%;
	margin: auto .5rem;
}
.box-left .title {
	white-space: nowrap;
}
.flexbox-code .box-right-text {
	margin:  10px 0 0 20px;
}
.userinfo-status-color{
	color:var(--color-shade);
	font-weight: bold;
}
/* 検索と件数 */
.search_wrapper {
	display: flex;
	margin-top: 10px;
	color: #485065;
}
.search_title {
	width: 100px;
	margin-left:10px;
}
.search_space {
	flex: 1;
}
.search_page_size{
	width: 140px;
	margin-left: 20px;
}
/* /共通/ 件数 */
#units_total_count{
	font-weight: bold;
}
.reference-line{
	margin: 20px 0;
	background-color: #e5e5e5;
	height: 2px;
}
/* <<< REFERENCE */

/* CLASS_CODE >>> */
/* 画面を真ん中にする */
.info-disparea{
	width: 80%;
	margin-left: 80px;
}
.info-text{
	text-align:center;
	margin-top: 15px;
}

.classcode_pc{
	display:block;
	margin-top:40px;
}
.classcode_sp{
	display:none;
}
.userinfo_class_title{
	width:150px;
}
.userinfo_class_title td {
	margin-top: 10px;
}
.table_classcode {
	width: 100px;
	margin-right: 20px;
	font-size: 15px;
} 
.table_classcode th {
	width: 130px;
	text-align: left;
	color: var(--color-fade);
	font-weight: bold;
}
/* <<< CLASS_CODE */

/* PASSWORD_RESET >>> */
.resetpw-pannel {
	margin: auto;
	max-width: 670px;
	border-radius: 5px;
	box-shadow: var(--shadow-default);
	background-color: white;
}
.resetpw-pannel-inner {
	padding: 70px 15px;
	font-size: 11px;
}
.resetpw-pannel-title {
	font-size: 18px;
	text-align: center;
	font-weight: bold;
	color: var(--color-shade);
	margin-bottom: 25px;
}
.resetpw-description {
	font-size: 15px;
	color: var(--color-shade);
	margin-bottom: 25px;
}
.resetpw-description div {
	max-width: 460px;
	margin: auto;
}

.resetpw-pannel-inner .body {
	max-width: 460px;
	margin: auto;
}
.resetpw-input-text {
	margin: 15px auto 21px auto;
	font-size: 13px;
}
.resetpw-input-text-size {
	font-size: 13px!important;
}
.resetpw-optx {
	display: flex;
	gap: 12px;
	flex-direction: column;
	font-size: 13px;
	line-height: 1;
	align-items: flex-end;
	color: var(--color-shade);
}
.resetpw-optx a {
	text-decoration: none;
}
.resetpw-btn {
	padding-top: 30px;
}
.resetpw-btn button {
	display: block;
	margin: auto;
	width: 220px;
}
.resetpw-btn.btn-padding{
	padding-top: 130px;
}
.modoru a {
	text-decoration: none;
}
.resetpw-pannel-bottom-notice {
	margin: auto;
	max-width: 670px;
}
.resetpw-error-block {
	color:red;
	font-size:13px;
}
/* <<< PASSWORD_RESET */
/* CLASS-CODE >>>*/ 
.classcode_wrapper {
	display: flex;
	margin-top: 10px;
}
.classcode_title {
	width: 100px;
	margin-right: 20px;
	color: var(--color-fade);
	font-size: 15px;
	font-weight: bold;
}
.classcode_name {
	flex: 1;
}
.classcode_status{
	width: 100px;
	margin-left: 20px;
}
/*  <<< CLASS-CODE  */

/* PLAY-VOICE >>> */
.sound-wrapper {
    display: flex;
}
.sound-wrapper > .xbutton{
    margin-top: 20px;
    position: relative;
    width: 37px;/*丸の大きさ(横)*/
    height: 37px;/*丸の大きさ(縦)*/
    margin-right:5px;
}

/*----------------
     再生ボタン
 -----------------*/

 /*丸*/
.sound-wrapper > .xbutton > .play_button:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #505050;
}

/*矢印部分*/
.sound-wrapper > .xbutton > .play_button:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 66%;
    transform: translate(-50%, -50%);
    width: 0px;
    height: 0px;
    border: 8px solid transparent;/*pxで矢印の大きさ(縦)*/
    border-left: 12px solid #fff;/*pxで矢印の大きさ(縦)*/
}

/*ホバー時*/
@media (any-hover: hover) {
	.sound-wrapper > .xbutton > .play_button:hover::before {
    	background-color: red;
	}
}

/* 停止ボタン改定 */

.sound-wrapper > .xbutton > .stop_button {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #505050;
    margin-left:  4px;
    font-size:100px;
    color: #fff;
}
.sound-wrapper > .xbutton > .stop_button::before,
.sound-wrapper > .xbutton > .stop_button::after {
    position: absolute;
    top: 50%;
    transform: translateX(25%) translateY(-50%);
    width: 5px;
    height: 0.16em;
    box-sizing: border-box;
    background-color: currentColor;
    content: "";
}
.sound-wrapper > .xbutton > .stop_button::before {
    left: 40%;
}
.sound-wrapper > .xbutton > .stop_button::after {
    left: 63%;
}
@media (any-hover: hover) {
	.sound-wrapper > .xbutton > .stop_button:hover {
    	background-color: red;
	} 
}
/* <<< PLAY-VOICE */

/* user_information >>>*/
/*  遷移した場合のcloseボタン >>>*/
.btn-close-userinfo {
	padding: 1em 3.5em;
	font-size: 14px;
}
.userinfo_books_button{
	display:flex;
	justify-content: center;
	margin-top:30px;
}
/* <<< */

/* force_input 強制パスワード変更>>>*/
.force_userinfo_th{
	padding-top: 30px;
}
.force_userinfo_messeage{
	margin-bottom: 30px;
}
.force_userinfo_button{
	padding-top: 20px;
}
.force_userinfo_errormsg{
	color: var(--color-failure);
}
/* <<< force_input */

/* study 復習>>>*/

.restudy-line{
	display: none;
}
.restudy_contents {
	flex: 1;
	margin: auto;
}
.restudy_contents img {
	width: 100%;
}
.restudy-flexbox {
	display: flex;
}
.box1 {
	width: 55%;
	margin: auto;
}
.box2 {
	width: 45%;
	margin: auto .5rem;
}
.restudy-pc{
	display:block;
	margin-bottom: 40px;
}
.restudy-sp{
	display:none;
}
.restudy-problem{
	font-size: 14px;
	font-weight:bold;
}
img.img-responsive.img-size{
	max-width: 80px;
}
/* <<< 復習 */
.news-table  {
	width:100%;
	font-size: 16px;
}
.announces-date  {
	font-size: 14px;
	color: #485065;
	padding: 0 40px 10px 40px;
}
.announces-title  {
	/* font-size: 16px; */
	font-weight: bold;
	padding:0 40px 30px 40px;
}
.announces-detail  {
	/* font-size: 16px; */
	padding:20px 40px 0 40px;
}
.announces-border  {
	border: 1px solid #CBCBCB;
}


.reference_flexbox {
	display: flex;
	flex:1;
}
.reference_left {
	width: 50%;
	margin: auto;
	text-align: right;
	margin-right: 10px;
}
.reference_right {
	width: 50%;
	margin: auto;
	text-align: left;
	margin-left: 10px;
}

.resetpw-pannel-notice{
	padding:30px 15px;
	font-size: 11px;
}

/* ユーザー登録完了後のメッセージ*/
.userinfo-msg {
	text-align: center;
	margin-top:10px;
}