@charset "utf-8";

/*=====================================
common.css
=====================================*/

/*-------------------------------------
 head
-------------------------------------*/
.headThumb {
	float: left;
	max-width: 100px;
	margin: 0 30px 20px 0;
}
.headTitle {
	display: flex;
	align-items: center;
	margin: 0 0 20px 0;
}
.headTitle h1 {
	font-size: 30px;
	font-weight: bold;
}
.headTitle .txt {
	margin: 3px 0 0 20px;
	color: #777;
}
.headTool {
	display: flex;
	align-items: center;
	margin: 0 0 20px 0;
}
.headSummary {
	clear: both;
	display: flex;
	padding: 10px 0 0 0;
}
.headSummary .box {
	width: 45%;
	margin: 0 50px 0 0;
	padding: 20px 30px;
	background: #f2f2f2;
}
.headSummary .pic {
	max-width: 360px;
	margin-right: 40px;
	flex-shrink: 0;
}
.headSummary .txt {
	line-height: 1.8;
	flex: 1;
}

.txtList01 {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 -20px 0;
}
.txtList01 li {
	padding: 0 20px 20px 0;
	color: #777;
}


/*-------------------------------------
 title
-------------------------------------*/
.ttlStyle01 {
	margin: 0 0 15px 0;
	color: #0091d7;
	font-size: 20px;
	font-weight: bold;
}
.ttlGroup01 {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ttlLink01 a {
	display: inline-block;
}
.ttlLink01 a:after {
	content: "\f138";
	display: inline-block;
	margin-left: 10px;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	vertical-align: middle;
}



/*-------------------------------------
 unit
-------------------------------------*/
.unitRow01 {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -50px 0 0;
}
.unitRow01 .unitBlock {
	display: flex;
	flex-direction: column;
	width: 50%;
	flex-shrink: 0;
	padding-right: 50px;
}
.unitRow01 .unitBox01 {
	height: 100%;
}
.unitBlock {
	padding: 0 0 20px 0;
}
.unitBox01 {
	margin: 0 0 20px 0;
	padding: 20px 30px;
	border-radius: 10px;
	background: #fff;
}


/*-------------------------------------
 list
-------------------------------------*/
.dlList01 {
	display: grid;
	grid-template-columns: 150px 1fr;
}
.dlList01 dt {
	padding: 10px 10px 10px 0;
	font-weight: bold;
}
.dlList01 dd {
	padding: 10px 0;
}
.dlList01 dd a {
	text-decoration: underline;
}

.thumbList01 {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -50px 0 0;
}
.thumbList01 .clm {
	width: 50%;
	padding: 0 50px 20px 0;
}
.thumbList01 .card a {
	display: flex;
	align-items: center;
	border-radius: 10px;
	background: #fff;
}
.thumbList01 .thumb {
	width: 120px;
	flex-shrink: 0;
}
.thumbList01 .item {
	padding: 20px;
}
.thumbList01 .item .txt {
	color: #333;
	font-size: 14px;
}

.thumbList02 {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -50px 0 0;
}
.thumbList02 .clm {
	width: 33.333%;
	padding: 0 50px 20px 0;
}
.thumbList02 .card a {
	display: flex;
	align-items: center;
	min-height: 100px;
	border-radius: 10px;
	background: #fff;
}
.thumbList02 .thumb {
	position: relative;
	width: 100px;
	min-height: 100px;
	flex-shrink: 0;
}
.thumbList02 .thumb:before {
	content: "\f2bd";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	color: #aaa;
	font-family: "Font Awesome 6 Free";
	font-size: 50px;
	font-weight: 900;
	transform: translate(-50%,-50%);
}
.thumbList02 .thumb img {
	position: relative;
	z-index: 1;
	border-radius: 10px 0 0 10px;
}
.thumbList02 .item {
	padding: 20px;
}

.numList01 li {
	margin: 0 0 20px 0;
}
.numList01 li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	font-size: 16px;
	text-decoration: none;
	background: #fff;
}
.numList01 li a .num {
	color: #9dc3e6;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 30px;
	font-weight: bold;
	white-space: nowrap;
}

.numList02 {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -20px 0 0;
}
.numList02 li {
	width: 25%;
	padding: 0 20px 20px 0;
	flex-shrink: 0;
}
.numList02 li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	text-decoration: none;
	background: #fff;
}
.numList02 li a .num {
	color: #9dc3e6;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 22px;
	font-weight: bold;
	white-space: nowrap;
}

.linkList01,
.linkList02 {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px -10px 0;
}
.linkList01 li,
.linkList02 li {
	margin: 0 10px 10px 0;
}
.linkList01 li a,
.linkList02 li a {
	display: inline-block;
	padding: 2px 10px;
	color: #333;
	text-decoration: none !important;
	border-radius: 3px;
}
.linkList01 li a {
	background-color: #e9e9e9;
}
.linkList02 li a {
	background-color: #e9f4ff;
}



/*-------------------------------------
 table
-------------------------------------*/
.tblStyle01 {
	width: 100%;
	margin: 0 0 20px 0;
	border-radius: 10px;
	background: #fff;
}
.tblStyle01 th {
	padding: 15px;
	color: #777;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid #ccc;
}
.tblStyle01 td {
	padding: 15px;
	text-align: left;
	vertical-align: middle;
}
.tblStyle01 figure {
	width: 124px;
	margin: 0 0 0 20px;
}
.tblStyle02 {
	width: 100%;
	margin: 0 0 20px 0;
	border-radius: 10px;
	background: #fff;
}
.tblStyle02 th {
	padding: 15px;
	color: #777;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid #ccc;
}
.tblStyle02 th:nth-child(2),
.tblStyle02 th:nth-child(3) {
	width: 15%;
}
.tblStyle02 td {
	padding: 25px 15px;
	text-align: left;
	vertical-align: middle;
}


/*-------------------------------------
 btn
-------------------------------------*/
.btnBack01 {
	padding: 20px 0;
}
.btnBack01 a {
	display: inline-block;
}
.btnBack01 a:before {
	content: "\f137";
	display: inline-block;
	margin-right: 10px;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	vertical-align: middle;
}

.btnList01 {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 -20px 0;
}
.btnList01 li {
	padding: 0 20px 20px 0;
}
.btnList01 li a {
	display: block;
	min-width: 130px;
	padding: 5px 10px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border-radius: 30px;
	background: #293b60;
}
.btnList01.btnCenter {
	justify-content: center;
	margin: 20px 0;
}
.btnList01.btnCenter li {
	padding: 0 10px 20px;
}


/*-------------------------------------
 genre
-------------------------------------*/
.genreTab {
	background: #fff;
}
.genreTab .scroll {
	overflow-x: auto;
	overflow-y: hidden;
}
.genreTab ul {
	display: flex;
	padding: 20px;
	white-space: nowrap;
}
.genreTab ul li {
	padding: 0 30px;
}
.genreTab ul li a {
	color: #777;
}
.genreTab ul li.select a {
	color: #04158f;
	font-weight: bold;
}

.genreTab .scroll::-webkit-scrollbar {
  height: 6px;
}
.genreTab .scroll::-webkit-scrollbar-track {
  background-color: #ccc;
}
.genreTab .scroll::-webkit-scrollbar-thumb {
  background-color: #999;
}


/*-------------------------------------
 tag
-------------------------------------*/
.tagList01 {
	display: flex;
	flex-wrap: wrap;
}
.tagList01 li {
	padding: 0 20px 20px 0;
}
.tagList01 li a {
	color: #777;
}
.tagList01 li.select a {
	color: #04158f;
	font-weight: bold;
}

.tagTool {
	display: flex;
	justify-content: center;
	margin: 0 0 20px 0;
}
.tagTool li {
	padding: 0 20px 20px 0;
}
.tagTool li a {
	color: #777;
}


/*-------------------------------------
 search
-------------------------------------*/
.keywordSearch {
	margin: 0 0 50px 0;
	text-align: center;
}
.keywordSearch input[type=text] {
	width: 100%;
	max-width: 600px;
	height: 40px;
	margin: 0;
	padding: 3px 15px;
	border: none;
	background: #cdcdcd;
}


/*-------------------------------------
 paginate
-------------------------------------*/
.paginate {
	padding: 0 0 20px 0;
	color: #777;
}
.paginate a {
	color: #777;
}
.paginate em {
	color: #04158f;
	font-weight: bold;
}
.paginate a,
.paginate em {
	display: inine-block;
	padding: 15px;
}








/*-------------------------------------------------------------------
 Media Queries
-------------------------------------------------------------------*/


/* SP layout
-------------------------------------------------------------------*/
@media screen and (max-width: 768px) {


/*-------------------------------------
 head
-------------------------------------*/
.headTitle {
	display: block;
}
.headTitle h1 {
	font-size: 20px;
}
.headTitle .txt {
	margin: 3px 0 0 0;
}
.headTool {
	display: block;
}
.headSummary {
	display: block;
}
.headSummary .box {
	width: auto;
	margin: 0 0 20px 0;
	padding: 15px 20px;
}
.headSummary .pic {
	max-width: inherit;
	margin: 0 0 20px 0;
}



/*-------------------------------------
 unit
-------------------------------------*/
.unitRow01 {
	display: block;
	margin: 0;
}
.unitRow01 .unitBlock {
	width: auto;
	padding-right: 0;
}
.unitBox01 {
	padding: 15px 20px;
}


/*-------------------------------------
 list
-------------------------------------*/
.dlList01 {
	grid-template-columns: 100px 1fr;
}

.thumbList01,
.thumbList02 {
	display: block;
	margin: 0;
}
.thumbList01 .clm,
.thumbList02 .clm {
	width: auto;
	padding: 0 0 20px 0;
}
.thumbList01 .item .txt {
	font-size: 12px;
}

.numList01 li {
	margin: 0 0 15px 0;
}
.numList01 li a {
	padding: 15px;
	font-size: 14px;
}
.numList01 li a .num {
	font-size: 20px;
}

.numList02 {
	margin: 0 -15px 0 0;
}
.numList02 li {
	width: 50%;
	padding: 0 15px 15px 0;
}
.numList02 li a {
	padding: 10px 15px;
}
.numList02 li a .num {
	font-size: 18px;
}


/*-------------------------------------
 table
-------------------------------------*/
.tblScroll01,
.tblScroll02 {
  margin: 0 0 30px 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.tblScroll01 table {
  width: 200%;
  margin: 0 0 10px 0;
}

.tblStyle01 figure {
	width: 100px;
	margin: 0;
}
.tblStyle02 {
	width: auto;
}
.tblStyle02 th {
	white-space: nowrap;
}
.tblStyle02 td {
	padding: 20px 15px;
	white-space: nowrap;
}
.tblStyle02 th:nth-child(2),
.tblStyle02 th:nth-child(3) {
	width: auto;
}

.tblScroll01::-webkit-scrollbar,
.tblScroll02::-webkit-scrollbar {
  height: 6px;
}
.tblScroll01::-webkit-scrollbar-track,
.tblScroll02::-webkit-scrollbar-track {
  background-color: #ccc;
}
.tblScroll01::-webkit-scrollbar-thumb,
.tblScroll02::-webkit-scrollbar-thumb {
  background-color: #999;
}


/*-------------------------------------
 btn
-------------------------------------*/
.btnList01 {
	margin: 0;
}


/*-------------------------------------
 genre
-------------------------------------*/
.genreTab ul {
	padding: 15px 0;
}
.genreTab ul li {
	padding: 0 20px;
}















}



/* PC layout
-------------------------------------------------------------------*/

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

.btnList01 li a,
.thumbList01 .card a,
.thumbList02 .card a,
.numList01 li a,
.numList02 li a,
.linkList01 li a,
.linkList02 li a {
	text-decoration: none;
	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	backface-visibility: hidden;
}
.btnList01 li a:hover,
.thumbList01 .card a:hover,
.thumbList02 .card a:hover,
.numList01 li a:hover,
.numList02 li a:hover,
.linkList01 li a:hover,
.linkList02 li a:hover {
	opacity: 0.7;
}

.dlList01 dd a:hover {
	text-decoration: none;
}



}