@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

/* ============================================================
   header
   ============================================================ */

.media_wrap_header {
	display: flex;
	justify-content: space-between;
	background: #FFF;
	border-bottom: 1px solid #CCC;
}

.media_wrap_header nav ul {
	display: flex;
}

.owned_logo {
	background: #FFF;
	border-radius: 0 100px 100px 0;
	padding-right: 50px;
}

.owned_logo > a {
	display: flex;
	color: #1266A4;
	justify-content: start;
	font-weight: bold;
	align-items: center;
	flex-wrap: wrap;
	height: 100%;
	user-select: none;
}

.owned_logo > a:hover {
	text-decoration: none;
}

.owned_logo img {
	width: 280px;
	padding-left: 30px;
}

.owned_logo:hover img {
	opacity: 1 !important;
}

.owned_logo a div {
	padding-left: 15px;
}

.logo_sp {
	display: none;
}

.media_nav_search {
	position: relative;
	z-index: 3;
	letter-spacing: 5px;
	cursor: pointer !important;
}

.owned_nav_menu li,
.media_nav_search {
	position: relative;
	user-select: none;
}

.owned_nav_menu li a:before,
.media_nav_search label:before {
	display: block;
	content: "";
	width: 30px;
	height: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.menu_contact a:before {
	background-image: url(../img/column/owned_media/question.svg);
}

.menu_material a:before {
	background-image: url(../img/column/owned_media/book.svg);
}

.media_nav_search label:before {
	background-image: url(../img/column/owned_media/loupe.svg);
}

.media_search_box {
	position: absolute;
	top: 60px;
	right: 0;
	background: #12347C;
	padding: 10px;
	border-radius: 10px;
	display: none;
	z-index: 0;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 150, .2);
}

.media_search_box:before {
	content: "";
	position: absolute;
	top: -18px;
	right: 78px;
	border: 20px solid transparent;
	border-top-width: 0;
	border-bottom-color: #12347C;
	z-index: 2;
}

#search_show:checked ~ .media_search_box {
	display: block;
}

#search_show:checked ~ .media_nav_search_button {
	background: #CCC;
}

.media_search_box #cse-search-box button {
	position: absolute;
	top: 12px;
	right: 36px;
	width: 0px;
	height: 0;
}

.media_search_box #cse-search-box button::before {
	content: '';
	display: inline-block;
	margin-right: 12px;
	width: 22px;
	height: 22px;
	background: url(../img/common/icon_search.svg) no-repeat center center / contain;
	vertical-align: middle;
}

.media_search_box input {
	border: 1px solid #555;
	border-radius: 5px;
	padding: 5px;
	color: #000;
}

.owned_nav_main_menu li > a,
.owned_nav_main_menu li label {
	display: block;
	text-align: center;
	font-size: 1.1em;
	border-bottom: 3px dotted #CCC;
	width: 160px;
	margin: 10px;
	padding: 10px;
	user-select: none;
}

.owned_nav_main_menu li > ul > li > a {
	border-bottom: 2px solid #CCC;
}

.owned_nav_main_menu li a:hover {
	text-decoration: none;
}

.owned_nav_main_menu li {
	position: relative;
}

.owned_nav_main_menu > li > a:before {
	position: absolute;
	background: #3175A7;
	width: 0%;
	height: 4px;
	content: "";
	display: block;
	bottom: 9px;
	left: 0px;
}

.owned_nav_main_menu > li:hover > .owned_nav_main_menu_li:before {
	width: 100%;
	transition: 0.4s;
}

.owned_nav_main_menu li label {
	padding-right: 30px;
	cursor: pointer;
}

.owned_nav_main_menu li label:after {
	content: "";
	position: absolute;
	display: block;
	border-left: 2px solid #000;
	border-bottom: 2px solid #000;
	width: 10px;
	height: 10px;
	transform: rotate(-45deg);
	top: 28px;
	right: 22px;
}

.owned_nav_main_menu li label + ul {
	position: absolute;
	flex-direction: column;
	overflow: hidden;
	z-index: 99;
	top: 60px;
	height: 0;
}

.owned_nav_main_menu li:hover label + ul {
	height: auto;
}

.owned_nav_main_menu li label + ul li a {
	font-size: 0.9em;
	width: 200px;
	background: #3175A7;
	color: #FFF;
	padding: 15px 0;
	margin: 0;
}

.owned_nav_main_menu li label + ul li a:hover {
	color: #000;
	background: #FFF;
}

.media_wrap_header nav {
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: end;
	padding: 20px;
}



/* ============================================================
   header - media queries
   ============================================================ */

@media print, screen and (max-width: 1400px) {
	.owned_logo {
		width: auto;
		justify-content: center;
		align-items: center;
	}
	.owned_logo div {
		display: none;
	}

}

@media print, screen and (min-width: 1000px) {
	.owned_nav_menu li a,
	.media_nav_search_button {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
		margin: 2px 5px;
		border: 1px solid #666;
		background: #FFF;
		width: 200px;
		font-size: 1.1em;
		box-shadow: 3px 3px #000;
		text-indent: 18px;
		cursor: pointer;
		border-radius: 5px;
	}
	.owned_nav_menu li a:active,
	.media_nav_search_button:active {
		box-shadow: none;
		transform: translate(3px, 3px);
	}
	.owned_nav_menu li a:hover,
	.media_nav_search_button:hover {
		background: #DDD;
		text-decoration: none;
		transition: 0.2s;
	}
}

@media print, screen and (max-width: 1000px) {
	body, main {
		margin-top: 0;
		padding-top: 0;
	}
	.owned_logo img {
		max-width: 150px;
		padding-left: 10px;
	}
	header .media_wrap_header {
		min-height: 90px;
		align-items: center;
	}
	.owned_logo a div {
		display: flex;
		padding: 0 20px;
		justify-content: center;
		align-items: center;
	}
	.media_nav_show {
		position: relative;
		display: block;
		color: #FFF;
		font-weight: bold;
		font-size: 0.8em;
		content: "";
		margin-top: 6px;
		margin-right: 10px;
		margin-left: auto;
		border: 2px solid #FFF;
		border-radius: 5px;
		width: 50px;
		height: 50px;
	}
	.media_nav_show div,
	.media_nav_show div:before,
	.media_nav_show div:after {
		position: absolute;
		content: "";
		height: 2px;
		width: 30px;
		background: #FFF;
		transition: 0.2s;
	}
	.media_nav_show div {
		top: 16px;
		left: 8px;
	}
	.media_nav_show div:before {
		top: 8px;
	}
	.media_nav_show div:after {
		top: -8px;
	}
	.owned_nav_main_menu li label:after {
		border-color: #FFF;
	}
	.media_nav_show:before {
		content: "MENU";
		display: flex;
		justify-content: center;
		align-items: end;
		width: 100%;
		height: 100%;
	}
	.owned_nav_main_menu li label + ul li a {
		width: 100%;
	}
	#sp_show_drop_menu_category {
		display: none;
	}
	#sp_show_drop_menu_category ~ .owned_nav_main_menu li label + ul {
		height: 0;
	}
	#sp_show_drop_menu_category:checked ~ .owned_nav_main_menu li label + ul {
		height: auto;
	}
	#sp_show_drop_menu_category:checked ~ .owned_nav_main_menu li label + ul a:before {
		display: none;
	}
	#sp_show_drop_menu_category:checked ~ .owned_nav_main_menu li label + ul a:hover {
		color: #12347C !important;
	}
	.owned_nav_main_menu li label + ul {
		position: static;
		width: 100%;
	}
	.owned_nav_main_menu li label + ul li {
		width: 100%;
	}
	#media_nav_show:checked ~ .media_nav_show:before {
		content: "CLOSE";
	}
	#media_nav_show:checked ~ .media_nav_show div {
		background: transparent;
	}
	#media_nav_show:checked ~ .media_nav_show div:before {
		transform: rotate(45deg);
		top: 0;
		transition: 0.2s;
	}
	#media_nav_show:checked ~ .media_nav_show div:after {
		transform: rotate(-45deg);
		top: 0;
		transition: 0.2s;
	}
	.media_header nav {
		height: 0;
		transition: 0.4s;
		overflow: hidden;
	}
	.media_header #media_nav_show:checked ~ nav {
		height: auto;
		transition: 0.4s;
	}
	.media_header nav,
	.media_header nav ul {
		flex-direction: column;
	}
	.media_header nav ul {
		width: 100%;
	}
	.owned_nav_menu {
		flex-direction: column-reverse !important;
	}
	.owned_nav_main_menu li label {
		display: flex;
		width: 100%;
		height: 100%;
		border-width: 0;
		color: #FFF;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
	header {
		width: 100% !important;
	}
	.media_wrap_header {
		background: #3175A7;
	}
	.media_wrap_header nav {
		padding: 0;
	}
	.media_wrap_header nav li {
		position: relative;
	}
	.media_wrap_header nav li a {
		border-width: 0 !important;
		color: #FFF !important;
	}
	.media_nav_search:before,
	.menu_material:before,
	.menu_contact:before {
		background-image: none;
	}
	.media_nav_search_button,
	.media_nav_search:before {
		display: none;
	}
	.media_search_box {
		display: flex;
		justify-content: center;
		position: static;
		border-radius: 0;
	}
	.media_search_box:before {
		display: none;
	}
	.media_search_box #cse-search-box {
		position: relative;
	}
	.media_search_box #cse-search-box button {
		top: 2px;
		right: 25px;
	}
	.owned_logo {
		left: 0;
	}
	.media_header nav {
		position: absolute;
		background: #317BB1;
		width: 100%;
		left: 0;
		top: 90px;
		z-index: 2;
	}
	.owned_nav_menu li a {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60px;
		padding: 10px;
		color: #FFF !important;
		width: 100%;
	}
	.media_header nav li,
	.media_header nav li a {
		width: 100%;
	}
	.media_header nav li:hover {
		background: #4B97CD;
	}
	.media_header nav li a:before {
		position: absolute;
		bottom: 0;
		left: 0;
		content: "";
		width: 100%;
		background: yellow;
		height: 0;
	}
	.media_header nav li:hover a:before {
		height: 5px;
		transition: 0.2s;
	}
}

@media print, screen and (max-width: 500px) {
	.owned_logo a div {
		display: none !important;
	}
}

/* ============================================================
   main 共通
   ============================================================ */

#colmuntag_area {
	background: #EAF0F9;
	padding: 20px 0;
	margin-top: 50px;
}

.media_wrap {
	display: flex;
	justify-content: center;
	margin: auto;
}

.column_h2 {
	position: relative;
	font-size: 2em !important;
	margin: 30px 0;
}

.category_list_h2 {
	font-size: 1.5em !important;
	text-align: left !important;
	margin-top: 50px !important;
	margin-bottom: 10px !important;
	padding-bottom: 0 !important;
}

.category_list_h2:after {
	background: transparent !important;
}

.column_h2:before,
.column_h3:before {
	content: "# ";
	color: #317BB1;
}

.column_h2:after {
	display: none;
}

.column_h2 i {
	display: block !important;
	position: absolute;
	content: "";
	font-weight: bold !important;
	font-size: 0.5em !important;
	left: 0px !important;
	top: -20px !important;
	color: #317BB1;
}

.column_h3 {
	font-size: 1.3em !important;
	text-align: left !important;
	margin-top: 50px !important;
	margin-bottom: 10px !important;
	color: #000 !important;
}

.column_h3:after {
	background: transparent !important;
}

#media_artucle_area {
	width: 100%;
	max-width: 1200px !important;
}

#media_content_area {
	width: 100%;
	max-width: 860px !important;
	padding: 30px;
	border: 1px solid #CCC;
	border-radius: 10px;
	margin-top: 100px;
	background: #FFF;
	margin-bottom: 30px;
}

#media_content_area h2 {
	position: relative;
	margin-top: 100px;
	color: #000;
	z-index: 0;
}

#media_content_area h2:before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: -25px;
	width: 100%;
	height: 5px;
	background: #3175A7;
	transform: translateX(-50%);
	opacity: 0.5;
}

#media_content_area h2:after {
	width: 100%;
	background: #3175A7;
	opacity: 0.5;
	height: 5px;
}

#media_content_area > h3 {
	font-size: 1.4em;
	margin-top: 50px;
	margin-bottom: 20px;
	border-left: 5px solid #113778;
	padding: 10px 15px;
	background: #EAF0F9;
}

#media_content_area dt {
	font-weight: bold;
	padding: 20px 0;
	padding-bottom: 5px;
	font-size: 1.2em;
	color: #317BB1;
}

#column_right_side {
	width: 350px;
	padding: 20px;
	margin-top: 110px;
	margin-bottom: 20px;
}

#column_right_side h2 {
	font-size: 1.2em !important;
	text-align: left !important;
	color: #FFF;
	margin: 0;
	padding: 5px 0;
	text-indent: 20px;
	border-bottom: 2px solid #98BAD3;
	background: #317BB1;
	background: linear-gradient(138deg, rgba(49, 123, 177, 1) 74%, rgba(17, 55, 120, 1) 94%);
}

#column_right_side h2:before {
	position: absolute;
	display: block;
	content: "";
	top: 9px;
	left: 0;
	border: 6px solid #317BB1;
}

#column_right_side h2:after {
	display: none;
}

.column_category {
	padding: 0;
	text-indent: 35px;
	margin-top: 10px;
	margin-bottom: 60px;
	background: #FFF;
	border: 1px solid #CCC;
	border-radius: 10px;
}

.column_category li {
	position: relative;
	padding: 10px 0;
	border-bottom: 1px dashed #CCC;
}

.column_category li:last-child {
	border-bottom-width: 0;
}

.column_category li:before {
	position: absolute;
	top: -5px;
	left: 0;
	display: block;
	content: "▲";
	font-size: 0.8em;
	transform: rotate(90deg);
	color: #317BB1;
}

.popular_columns {
	padding: 0;
	width: 100%;
	margin-bottom: 60px;
	background: rgba(255,255,255,.5);
	border: 1px solid #EEE;
}

.material_ranking {
	margin-top: 20px;
	counter-reset: li;
	border: 1px solid #CCC;
}

.material_ranking li {
	position: relative;
	background: #FFF;
}

.popular_columns.material_ranking li a div {
	width: 250px;
	padding-left: 38px;
	padding-right: 5px;
	font-weight: bold;
}

.material_ranking li.material_rank:before {
	position: absolute;
	display: flex;
	width: 25px;
	height: 100%;
	font-size: 0.9em;
	justify-content: center;
	align-items: center;
	counter-increment: li;
	content: counter(li);
	padding-left: 2px;
	padding-bottom: 2px;
	color: #FFF;
	border-bottom: 1px solid #555;
}

.material_ranking li:first-child.material_rank:before {
	background: #317bb1;
}

.material_ranking li:nth-child(2).material_rank:before,
.material_ranking li:nth-child(3).material_rank:before {
	background: #3eaeed;
}

.material_ranking li:nth-child(4).material_rank:before,
.material_ranking li:nth-child(5).material_rank:before {
	background: #939393;
}

.popular_columns li a {
	display: flex;
	border-bottom: 1px solid #CCC;
	align-items: center;
	padding: 10px 0;
}

.popular_columns li a div {
	width: 200px;
	padding: 0 0 10px 10px;
}

.popular_columns li a div div {
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0.9em;
}

.popular_columns li a div time {
	color: #999;
	font-size: 0.8em;
}

.popular_columns figure {
	width: 100px;
	height: auto;
	border: 1px solid #CCC;
}
.popular_columns figure img {
	width: 100%;
	height: auto;
}

/* ============================================================
   コラム
   ============================================================ */

#media_top_ranking {
	padding: 50px 30px;
}

#media_top_recommended {
	margin-bottom: 150px;
}

.owned_media_colmun {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: auto;
	width: 100%;
}

.owned_media_colmun li {
	position: relative;
	width: 100%;
	max-width: 350px;
	height: 380px;
	background: #FFF;
	box-shadow: 0 4px 15px 2px rgba(49, 123, 177, 0.2);
	margin: 20px 10px;
	border-radius: 8px;
	padding-bottom: 30px;
	border: 1px solid #CCC;
}

.owned_media_colmun li figure {
	overflow: hidden;
	border-radius: 8px 8px 0 0;
}

ol.owned_media_colmun li a:before {
	position: absolute;
	display: flex;
	justify-content: center;
	content: "1";
	font-weight: bold;
	font-size: 1.2em;
	color: #FFF;
	border-top: 5px solid #3075A7;
	border-right: 20px solid #3075A7;
	border-left: 20px solid #3075A7;
	border-bottom: 10px solid transparent;
	width: 40px;
	height: 45px;
	top: -17px;
	left: 5px;
	z-index: 5;
}

ol.owned_media_colmun li a:after {
	position: absolute;
	display: block;
	content: "";
	border: 5px solid #3385C0;
	border-bottom-width: 8px;
	border-top-width: 8px;
	border-top-color: transparent;
	border-right-color: transparent;
	width: 5px;
	height: 5px;
	top: -17px;
	left: 45px;
}

ol.owned_media_colmun li:nth-child(2) a:before {
	content: "2";
	border-color: #3385C0;
	border-bottom-color: transparent;
}

ol.owned_media_colmun li:nth-child(3) a:before {
	content: "3";
	border-color: #26A4D8;
	border-bottom-color: transparent;
}

ol.owned_media_colmun li:nth-child(2) a:after {
	border-left-color: #62A1CF;
	border-bottom-color: #62A1CF;
}

ol.owned_media_colmun li:nth-child(3) a:after {
	border-left-color: #6FC1DF;
	border-bottom-color: #6FC1DF;
}

.owned_media_colmun li strong {
	display: block;
}

.owned_media_colmun li a > div {
	padding: 15px;
}

.owned_media_colmun li a > div div {
	margin-bottom: 20px;
}

.owned_media_colmun li a > div time {
	font-weight: bold;
	font-size: 0.8em;
}

.owned_media_colmun li a > div em {
	font-size: 0.8em;
	border: 1px solid #317BB1;
	border-radius: 3px;
	margin-left: 10px;
	padding: 3px 8px 5px 8px;
}

.owned_media_colmun li a > div .tags_for_wach_calum {
	position: absolute;
	padding: 0 20px;
	width: 100%;
	left: 0;
	bottom: 0;
}

.owned_media_colmun figure {
	position: relative !important;
	overflow: hidden;
	width: 100%;
}

.owned_media_colmun figure:before {
	display: block;
	content: "";
	padding-top: 52.5%;
}

.owned_media_colmun li a figure img {
	position: absolute;
	width: 100%;
	opacity: 1 !important;
	top: 0;
	left: 0;
}

.owned_media_colmun li:hover {
	box-shadow: 0 4px 20px 2px rgba(49, 123, 177, 0.5);
	transition: 0.3s;
}

.owned_media_colmun li:hover a figure img {
	transform: scale(1.1)!important;
	transform: translate(-5%, -5%);
	transition: 0.3s;
}

/* ============================================================
   コラム - media queries
   ============================================================ */

@media print, screen and (max-width: 1400px) {
	.owned_media_colmun li {
		max-width: 280px;
	}
}

@media print, screen and (max-width: 1000px) {
	.top_slider {
	}
}

@media print, screen and (max-width: 900px) {
	.logo_sp {
		display: block;
	}
	.logo {
		display: none;
	}
	.owned_logo {
		background: #3175A7;
	}
	.owned_logo a {
		color: #FFF;
	}
	.media_wrap {
		flex-wrap: wrap;
	}
	.non_if_sp {
		display: none;
	}
	.flex-box-block {
		display: block !important;
		width: 100% !important;
	}
	.flex-box-block figure,
	.flex-box-block dl {
		width: auto !important;
	}
	.column_h2 {
		padding-left: 10px;
	}
	.media_wrap_header {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 64px;
	}
	#media_content_area {
		margin-top: 30px !important;
	}
	#column_right_side {
		width: 80%;
		margin-top: 0px;
	}
	#column_right_side a img {
		width: 100%;
		height: auto;
	}
	#should_check .right_button_area {
		display: flex;
		justify-content: center;
	}
	.btn_mini {
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		position: relative;
		z-index: 1;
		margin: 20px 10px;
		width: 120px;
		padding: 5px 15px;
		border: 1px solid #12347c;
		border-radius: 100px;
		background: #fff;
		color: #12347c;
		text-align: center;
		cursor: pointer;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		transition: all 0.3s ease;
	}
	.btn_mini_or {
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		position: relative;
		z-index: 1;
		margin: 20px 10px;
		width: 120px;
		padding: 5px 15px;
		border: 1px solid #fd9134;
		border-radius: 100px;
		background: #fd9134;
		color: #FFF;
		text-align: center;
		cursor: pointer;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		transition: all 0.3s ease;
	}
	.owned_media_colmun {
		margin: 20px;
	}
	#media_top_ranking,
	#media_top_material {
		padding-right: 0;
		padding-left: 0;
	}
	.owned_media_colmun {
		width: 90vw !important;
		margin: auto;
	}
	.owned_media_colmun li {
		max-width: 100%;
		box-shadow: 0 0 0 0 transparent;
		border-radius: 0;
		margin: 10px 0;
		padding: 0;
		height: auto;
		border: 1px solid #CCC;
		display
	}
	.owned_media_colmun li a {
		display: flex;
		align-items: center !important;
		padding: 0;
		height: 100%;
	}
	.owned_media_colmun li a figure {
		border: 1px solid #DDD;
		border-radius: 0;
		width: 100%;
		height: 115px;
		margin: 10px;
	}
	.owned_media_colmun li a .tags_for_wach_calum {
		display: none;
	}
	.owned_media_colmun li a > div {
		width: 100%;
		padding: 20px;
		text-align: left;
	}
	.owned_media_colmun li a > div time {
		font-weight: bold;
		font-size: 0.8em;
	}
	.owned_media_colmun li a > div em {
		font-size: 0.8em;
		border: 1px solid #317BB1;
		border-radius: 3px;
		margin-left: 10px;
		padding: 3px 8px 5px 8px;
	}
	.owned_media_colmun li a > div strong {
		display: block;
		padding: 10px 0;
	}
	#likeButton {
		font-size: 12px;
	}
	.tour_gallery {
		flex-wrap: wrap;
		justify-content: center;
	}
	.tour_gallery a img {
		width: 100%;
		max-width: 500px;
		margin: 5px;
		border: 1px solid #CCC;
	}
}

@media print, screen and (max-width: 768px) {
	#media_content_area h2:before {
		height: 3px;
		top: -15px;
	}
	#media_content_area h2:after {
		height: 3px;
	}
	#media_top_material {
		margin: 0!important;
		padding: 20px 0!important;
		width: 100%!important;
	}
	#media_top_material .inner {
		width: 100%!important;
		margin: 0!important;
		padding: 0!important;
	}
	#media_top_material li a {
		margin: 0!important;
		margin: 0!important;
		padding: 0!important;
	}
}

@media print, screen and (min-width: 768px) {
	.pagenation_tax_all {
		margin-top: 50px;
		margin-bottom: 20px;
	}
	.pagenation_tax_all li {
		line-height: 40px;
		padding: 0 5px;
		font-size: 1.6rem;
	}
	.pagenation_tax_all li button {
		width: 60px !important;
		height: 40px !important;
		line-height: 37px;
	}

}

@media print, screen and (max-width: 400px) {
	.related {
		padding: 0!important;
	}
	.owned_media_colmun li a,
	.owned_media_colmun_list li a {
		flex-wrap: wrap;
		max-width:
		margin: 0!important;
	}
	#media_content_area {
		padding: 30px 10px;
		border-radius: 0;
		margin-top: 0!important;
	}
	
	
	#cse-search-box {
		width: 100%;
	}
	.owned_media_colmun li a figure {
		height: auto;
	}
	#media_top_material {
		margin: 0!important;
		padding: 20px 0!important;
	}
	#media_top_material .inner {
		width: 100%!important;
		margin: 0!important;
		padding: 0!important;
	}
	#media_top_material li a {
		margin: 0!important;
		margin: 0!important;
		padding: 0!important;
	}
	.popular_columns.material_ranking li a div div.column_titles {
		width: 210px!important;
}
}

/* ============================================================
   タグ検索トグル
   ============================================================ */

#multiple_tags_search + label {
	cursor: pointer;
	position: relative;
	padding-bottom: 1px;
	user-select: none;
}

#multiple_tags_search + label::before,
#multiple_tags_search + label::after {
	position: absolute;
	display: flex;
	align-items: center;
	content: "";
	background-color: #12347C;
	border-radius: 50%;
	transition: 0.2s;
	transform: translateY(-50%);
	top: 50%;
}

#multiple_tags_search + label::before {
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid #12347C;
	height: 20px;
	width: 56px;
	left: calc(100% + 10px);
}

#multiple_tags_search + label::after {
	background-color: #12347C;
	border-radius: 50%;
	opacity: 1;
	height: 22px;
	width: 22px;
	left: calc(100% + 5px);
}

#multiple_tags_search:checked + label::before {
	content: "ON";
	padding-left: 6px;
	vertical-align: bottom;
	color: #FFF;
	font-weight: bold;
	background: #317BB1;
}

#multiple_tags_search:checked + label::after {
	left: calc(100% + 45px);
}

#multiple_tags_search:checked ~ ul li {
	display: none;
}

/* ============================================================
   バナー・カテゴリ一覧
   ============================================================ */

.owned_top_banner {
	display: block;
	border: 1px solid #CCC !important;
	margin-bottom: 30px;
}

.category_list_under {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 30px;
}

.category_list_under li {
	list-style: none;
	margin: 0;
}

.category_list_under li a {
	display: block;
	margin: 10px;
}

.category_list_under li a figure {
	position: relative;
	width: 250px;
	height: auto;
	text-align: center;
}

.category_list_under li a .cat_comingsoon:before {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	content: "Coming Soon...";
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
	color: #FFF;
	background: rgba(0, 0, 0, 0.7);
}

.category_list_under li a figure img {
	object-fit: fill !important;
	width: 250px !important;
	height: auto !important;
	border: 1px solid #DDD;
	box-shadow: 0 5px 10px 2px rgba(50, 0, 0, 0.1);
}

.category_list_under li a div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 250px;
	height: 80px;
}

.category_list_under li a div span {
	display: block;
	font-size: 1.5em;
	font-family: "Noto Serif JP", serif;
	font-weight: 900;
	font-style: normal;
}

/* ============================================================
   ハートボタン
   ============================================================ */

.heart {
	display: block;
	content: "";
	width: 60px;
	height: 60px;
	position: relative;
	cursor: pointer;
}

.heart::before,
.heart::after {
	content: "";
	position: absolute;
	top: 0;
	width: 30px;
	height: 50px;
	border-radius: 50px 50px 0 0;
	transition: background 0.3s ease;
	background: #CCC;
}

.heart::before {
	left: 30px;
	transform: rotate(-45deg);
	transform-origin: 0 100%;
}

.heart::after {
	left: 0;
	transform: rotate(45deg);
	transform-origin: 100% 100%;
}

.heart.clicked::before,
.heart.clicked::after {
	background: #FF3333;
}

#likeForm {
	display: block;
	position: relative;
	padding: 7px 10px 7px 7px;
	color: #555;
	font-size: 16px;
	background: #FFF;
	border: solid 2px #555;
	border-radius: 15px;
	box-sizing: border-box;
	margin-left: 20px;
}

#likeForm:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -10px;
	margin-top: -8px;
	border: 6px solid transparent;
	border-left: 0 solid #FFF;
	border-right: 12px solid #FFF;
	z-index: 2;
}

#likeForm:after {
	content: "";
	position: absolute;
	top: 50%;
	left: -14px;
	margin-top: -10px;
	border: 8px solid transparent;
	border-left: 0 solid #555;
	border-right: 14px solid #555;
	z-index: 1;
}

#like_button_area {
	display: flex;
	padding-left: 40px;
	justify-content: start;
	align-items: center;
	max-width: 420px;
	margin: auto;
	margin-bottom: 30px;
}

#like_counter {
	z-index: 3;
	position: absolute;
	width: 60px;
	height: 30px;
	bottom: 20px;
	left: calc(50% - 30px);
	color: #FFF;
	text-align: center;
}

.like_button_h2 {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 50px;
	margin-bottom: 20px;
	font-weight: bold;
}

.like_button_h2 span {
	position: relative;
	display: inline-block;
	text-align: center;
	padding: 1em;
	margin: auto !important;
}

.like_button_h2 span::before,
.like_button_h2 span::after {
	position: absolute;
	content: '';
	top: calc(50% - 18px);
	height: 45px;
	border-left: #DA5019 solid 3px;
	background: transparent;
}

.like_button_h2 span::before {
	left: 0;
	transform: rotate(-30deg);
}

.like_button_h2 span::after {
	right: 0;
	transform: rotate(30deg);
}

/* ============================================================
   SNSエリア・サイドバー
   ============================================================ */

.media_sns_area_side {
	position: fixed;
	display: flex;
	align-items: center;
	border-radius: 0 10px 10px 0;
	left: 0;
	bottom: 0;
	background: #FFF;
	padding: 0;
	z-index: 100;
	cursor: pointer;
	border: 1px solid #3175A7;
	height: 100px;
}

.media_sns_area_side input {
	display: none;
}

#column_index_open + .mokuzi {
	display: none;
}

#column_index_open:checked + .mokuzi {
	display: block;
	margin: 0;
	background: #FFF !important;
	transform: translateY(-50%);
	box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);
}

.media_sns_area_side p + a {
	background: #000;
}

.media_sns_area_side p {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-weight: bold;
	color: #3175A7;
}

.media_sns_area_side p:before {
	display: block;
	position: absolute;
	content: "▲";
	transform: rotate(90deg);
	top: 70px;
}

.media_sns_area {
	width: 100%;
	max-width: 450px;
	background: #e4eefe;
	margin: auto;
	margin-bottom: 100px;
	border-radius: 15px;
	padding: 20px;
}

.media_sns_area div {
	display: flex;
	justify-content: center;
}

.media_sns_area a {
	border-radius: 30px;
	width: 50px;
	height: 50px;
	margin: 0 10px;
}

.media_sns_area div a:first-child {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
}

.media_sns_area p {
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}

/* ============================================================
   トップページ見出し・スライダー
   ============================================================ */

.column_top_h2,
.media_top_category_list_h2 {
	position: relative;
	font-size: 1.8em !important;
	margin-top: 50px !important;
	margin-bottom: 10px !important;
	color: #000 !important;
	text-align: center;
}

.media_top_category_list_h2 {
	margin: auto !important;
	margin-bottom: 30px;
	padding-bottom: 20px;
	width: 80%;
}

.column_top_h2 i,
.media_top_category_list_h2 i {
	display: block;
	text-align: center;
	width: 300px;
	position: absolute;
	top: -20px;
	left: calc(50% - 150px);
	font-size: 0.5em;
	color: #317BB1;
}

.top_cat_inner {
	max-width: 1000px;
	margin: auto;
	margin-top: 20px;
	background: #FFF;
	border-radius: 15px;
	padding: 50px 0px;
}

.column_top_h2:after,
.media_top_category_list_h2:after {
	display: none !important;
}

.col_slider {
	margin: auto;
	margin-bottom: 20px;
	padding-top: 20px;
}

.col_slider li a {
	display: block;
	overflow: hidden;
	border-radius: 15px;
	background: #FFF;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 150, .2);
	border: 1px solid #CCC;
}

.col_slider li a > div {
	padding: 20px;
	height: 180px;
}

.top_slider {
	margin: 0 !important;
	width: 100%;
	padding: 30px 0;
	background: #EAF0F9;
	overflow: hidden;
}

.main_contents {
	margin: 0 !important;
	padding: 0 !important;
}

.media_slider_dots .slick-dots {
	text-align: center;
}

.media_slider_dots .slick-dots li {
	display: inline-block;
}

.media_slider_dots .slick-dots button {
	display: block;
	width: 12px;
	height: 12px;
	margin: 6px;
	font-size: 0;
	padding: 0;
	border: 0;
	outline: none;
	cursor: pointer;
	background: #FFF;
	border: 1px solid #12347C;
	border-radius: 50%;
}

.media_slider_dots .slick-dots .slick-active button {
	border: 1px solid #12347C;
	background: #12347C;
}

.media_slider_dots {
	position: relative;
}

.media_slider_arrows .slick-arrow {
	position: absolute;
}

.media_slider_arrows .slick-prev {
	left: calc(50% + 120px);
	top: 0;
}

.media_slider_arrows .slick-next {
	right: calc(50% + 120px);
	top: 0;
}

/* ============================================================
   記事リスト
   ============================================================ */

.owned_media_colmun_list {
	margin: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.owned_media_colmun_list li a {
	display: flex;
	align-items: center;
	padding: 20px 10px;
	border-bottom: 1px solid #CCC;
}

.owned_media_colmun_list li a figure img {
	width: 220px !important;
}

.owned_media_colmun_list li a > div {
	width: 100%;
	padding: 20px;
}

.owned_media_colmun_list li a > div time,
.col_slider li a time {
	font-weight: bold;
	font-size: 0.8em;
}

.owned_media_colmun_list li a > div em,
.col_slider li a em {
	font-size: 0.8em;
	border: 1px solid #317BB1;
	border-radius: 3px;
	margin-left: 10px;
	padding: 3px 8px 5px 8px;
}

.owned_media_colmun_list li a > div strong,
.col_slider li a strong {
	display: block;
	padding: 10px 0;
}

#media_top_list,
.background_check {
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	background-color: #ffffff;
	background-image:
		repeating-linear-gradient(to bottom,
			transparent 12px,
			rgba(204, 204, 204, 0.20) 13px, rgba(204, 204, 204, 0.20) 13px,
			transparent 14px, transparent 25px,
			rgba(204, 204, 204, 0.20) 26px, rgba(204, 204, 204, 0.20) 26px,
			transparent 27px, transparent 38px,
			rgba(204, 204, 204, 0.20) 39px, rgba(204, 204, 204, 0.20) 39px,
			transparent 40px, transparent 51px,
			rgba(204, 204, 204, 0.20) 52px, rgba(204, 204, 204, 0.20) 52px,
			transparent 53px, transparent 64px,
			rgba(204, 204, 204, 0.20) 65px, rgba(204, 204, 204, 0.20) 65px),
		repeating-linear-gradient(to right,
			transparent 12px,
			rgba(204, 204, 204, 0.20) 13px, rgba(204, 204, 204, 0.20) 13px,
			transparent 14px, transparent 25px,
			rgba(204, 204, 204, 0.20) 26px, rgba(204, 204, 204, 0.20) 26px,
			transparent 27px, transparent 38px,
			rgba(204, 204, 204, 0.20) 39px, rgba(204, 204, 204, 0.20) 39px,
			transparent 40px, transparent 51px,
			rgba(204, 204, 204, 0.20) 52px, rgba(204, 204, 204, 0.20) 52px,
			transparent 53px, transparent 64px,
			rgba(204, 204, 204, 0.20) 65px, rgba(204, 204, 204, 0.20) 65px);
}

#media_top_list {
	padding: 30px;
}

.media_top_jump {
	position: relative;
	display: flex;
	justify-content: center;
	border: 1px solid #555;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 30px;
	background: #FFF;
	max-width: 350px;
	padding: 5px 10px;
	box-shadow: 3px 3px 0 0 #000 !important;
	border-radius: 10px;
	overflow: hidden;
}

.media_top_jump:active {
	transform: translate(3px, 3px);
}

.media_top_jump div:before {
	z-index: -1;
	background: #000;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translateX(-100%);
}

.media_top_jump:hover div {
	color: #FFF;
	z-index: 2;
	transition: 0.2s;
}

.media_top_jump:hover div span {
	color: #FFF;
	z-index: 2;
	transition: 0.3s ease-out;
}

.media_top_jump:hover div:before {
	transform: translateX(0%);
	transition: 0.3s ease-out;
}

.media_top_jump div span:after {
	font-weight: bold;
	padding-left: 10px;
	content: "→";
}

.media_top_jump:hover {
	text-decoration: none;
}

.each_media_articles {
	background: #FFF;
	padding: 10px;
	max-width: 900px;
	margin: auto;
	margin-bottom: 50px;
	padding-bottom: 50px;
	border: 1px solid #DDD;
}

#media_top_material {
	padding: 30px;
	background: #EAF0F9;
}

#media_top_news {
	padding: 30px 0;
}

#media_top_news li {
	padding: 10px;
	border-bottom: 1px dashed #CCC;
}

#media_top_news li a {
	font-size: 1.1em;
}

#media_top_news li time {
	font-weight: bold;
	padding-right: 20px;
}

/* ============================================================
   ページネーション
   ============================================================ */

.pagenation_tax_all {
	display: flex;
	line-height: 0;
	justify-content: center;
}

.pagenation_tax_all li {
	padding: 0 3px;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 32px;
	white-space: nowrap;
}

.pagenation_tax_all li button {
	display: block;
	width: 32px;
	line-height: 30px;
	border: 1px solid #ebf1ff;
	background: #ebf1ff;
	color: #12347c;
	font-weight: bold;
}

.pagenation_tax_all li button:hover {
	border-color: #12347c;
	background-color: #12347c;
	color: #fff;
	text-decoration: none;
}

.pagenation_tax_all_selected,
.pagenation_tax_all_selected:hover {
	border-color: #12347c !important;
	background: #FFF !important;
	color: #12347c !important;
	cursor: initial !important;
}

.prev_button_tax_all,
.next_button_tax_all {
	display: block;
	content: "";
	width: 32px;
	height: 30px;
	border-color: transparent !important;
	overflow: hidden;
	border: 0;
	background: url(../img/common/arrow.svg) no-repeat center center transparent !important;
	border: 1px solid #ebf1ff;
	background-size: 7px 12px;
	text-indent: 100%;
	text-align: left;
}

.prev_button_tax_all {
	margin-right: 5px;
	transform: scaleX(-1);
}

#should_check {
	margin-bottom: 50px;
	background: #FFF;
}

/* ============================================================
   TOPへ戻るボタン
   ============================================================ */

#jump_up_column {
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
	content: "";
	font-weight: bold;
	width: 50px;
	height: 50px;
	bottom: 10px;
	right: 0vw;
	position: fixed;
	border: 1px solid #3175A7;
	z-index: 99;
	opacity: 0.8;
	text-decoration: none;
	color: #3175A7;
	background: #FFF;
	border-radius: 5px;
}

#jump_up_column:hover {
	opacity: 1;
}

#media_column_background {
	background: #EAF0F9;
}

/* ============================================================
   関連記事・タグ
   ============================================================ */

.related .owned_media_colmun li {
	justify-content: left !important;
}

.cur_selected_tag {
	background: #FFF;
}

.selected_tag_on_top li {
	display: inline-block;
	padding: 2px 10px 2px 5px;
	color: #555;
	font-size: 1.1em;
	border: 1px solid #3175A7;
	border-radius: 5px;
	margin-bottom: 10px;
	user-select: none;
}

#recent_semminers li {
	margin-bottom: 15px;
	border: 1px solid #555;
}

/* ============================================================
   ツアーハイライト
   ============================================================ */

.tour_highlights {
	border: 1px solid #CCC;
	padding: 20px;
	padding-left: 30px;
	box-shadow: 2px 2px #CCC;
	margin: 30px;
}

.tour_highlights1 {
	padding-top: 10px;
	margin-bottom: 15px;
}

.tour_highlights1:before {
	content: "・";
}

.tour_highlights2 {
	font-weight: bold;
	padding: 12px 15px;
	margin-left: 40px;
	position: relative;
}

.tour_highlights2 span {
	background: yellow;
	padding-left: 5px;
	padding-right: 5px;
}

.tour_highlights2:before {
	position: absolute;
	content: "";
	display: block;
	top: 10px;
	left: -15px;
	height: 0;
	width: 0;
	border-left: 15px solid #555;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
}

.tour_highlights2:after {
	position: absolute;
	content: "";
	display: block;
	width: 20px;
	height: 15px;
	background: #555;
	left: -30px;
	top: 18px;
}

.tour_hp_link {
	display: inline-block;
	background: #EAF0F9;
	padding: 20px 30px;
	border-radius: 10px;
}

.tour_gallery {
	display: flex;
}

.tour_gallery a img {
	max-width: 400px;
	flex-wrap: wrap;
}

/* ============================================================
   その他スタイル
   ============================================================ */

.square_h {
	font-size: 1.1em !important;
	color: black !important;
	background: transparent !important;
	border-bottom-width: 0 !important;
	padding: 2px !important;
	margin-bottom: 10px !important;
}

.square_h:before {
	content: "■ ";
}

.tag_category_title {
	width: 100%;
	font-weight: bold;
}

.tag_category_title span {
	border-bottom: 2px solid #555;
	padding-bottom: 3px;
}

#ad_free_trial {
	border: 1px solid #ABAAAA;
	margin: 20px;
	margin-top: 50px;
}

#ad_free_trial a {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#ad_free_trial strong {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #de8d9c;
	color: #fff;
	font-size: 1.2em;
	font-weight: normal;
	height: 60px;
	margin: 0;
}

#ad_free_trial figure {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #ABAAAA;
	padding: 15px;
	margin: 15px;
	margin-right: 10px;
	width: calc(50% - 40px);
}

#ad_free_trial a:hover {
	text-decoration: none;
}

#ad_free_trial dl {
	margin: 20px 15px;
	margin-top: 0;
	width: calc(50% - 20px);
}

#ad_free_trial dt {
	font-weight: bold;
}

#ad_free_trial dt div {
	color: #12347c;
	font-size: 1.4em;
	padding: 10px 0;
}

/* プラグインの目次を非表示 */
#toc_container {
	display: none !important;
}

#select-category-area {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	margin-bottom: 50px;
	max-width: 1000px;
	padding: 0!important;
}
#select-category-area input {
	display: none!important;
}

#select-category-area label {
	display: flex;
	justify-content: center;
	padding: 10px;
	width: 200px;
	font-weight: bold;
	background: #FFF;
	border: 1px solid #CCC;
	border-collapse: collapse;
	margin: 0!important;
	cursor: pointer;
}

#select-category-area input:checked + label {
	background: #12347C;
	color: #FFF;
}

.each_media_articles:not([data-category="column1"]) {
	display: none;
}

#ad_catalog_download a {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 20px 30px 20px;
	border: 1px solid #98BAD3;
	border-radius: 20px;
	margin: auto;
	margin-top: 50px;
	max-width: 600px;
}

#ad_catalog_download a img {
	user-select: none;
}

#ad_catalog_download a div {
	background: #12347C;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	padding: 15px 20px;
	border-radius: 15px;
}