@charset "UTF-8";

/**
* FontAwesome アイコン表示
*/
/**
* リストをアイコンで表現
*/
.pankuzu_area {
	padding-top: 13px;
	padding-bottom: 9px;
}

@media screen and (max-width: 768px) {
	.pankuzu_area {
		padding-top: 9px;
	}
}

body#main {
	width: 960px;
}
body#main div.canvas_area {
	width: 100%;
	height: 610px;
	background: #fcc;
	overflow: hidden;
}

.main_contents_area_lower.one_column .lower_contents {
	max-width: 1240px;
}

/*
.one_column.main_contents_area_lower .lower_contents {
	padding-top: 0;
}
*/

.main_contents_area_lower:not(.one_column) .lower_contents #main {
	@media screen and (max-width: 1024px) {
		padding-left: 18px;
	}
}

#hiroba_animation {
	margin-bottom: 30px;
}

.lower_contents {
	padding-bottom: 0 !important;
}
/*
.lower_contents > div.clearfix {
	padding-bottom: 100px;
	background: transparent url(../media/images/hiroba/chars.png) center bottom no-repeat;
}
*/

#main h2.title_wrap {
	margin: 6px 0 23px -40px;
	padding: 39px 40px 27px;
	border-radius: 10px;
	background: linear-gradient(to bottom, #ffffff 0%, #E9F5E5 100%);
	position: relative;
	color: #006934;
	font-size: 30px;
	font-weight: 700;
	
	@media screen and (max-width: 1024px) {
		margin-left: -20px;
	}

	@media screen and (max-width: 768px) {
		margin: 0px -20px 17px -38px;
		padding: 0 20px 79px;
		border-radius: 0;
		font-size: 20px;
	}
	
	&::after {
		content: "";
		position: absolute;
		right: 0;
		top: -30px;
		width: 340px;
		height:134px;

		@media screen and (max-width: 768px) {
			width: 203px;
			height:80px;
			top: 19px;
			right: 10px;
		}
	}
}

#main h2.ranking:after {
	background: url("../media/images/2026/hiroba/hed_02_ranking.png") no-repeat right / 100%;
}
#main h2.gallery:after {
	background: url("../media/images/2026/hiroba/hed_03_gallery.png") no-repeat right / 100%;
}
#main h2.high_school:after {
	background: url("../media/images/2026/hiroba/hed_04_highschool.png") no-repeat right / 100%;
}
#main h2.book:after {
	background: url("../media/images/2026/hiroba/hed_05_book.png") no-repeat right / 100%;
}
#main h2.movie:after {
	background: url("../media/images/2026/hiroba/hed_06_link.png") no-repeat right / 100%;
}
#main h2.salon:after {
	background: url("../media/images/2026/hiroba/hed_07_salon.png") no-repeat right / 100%;
}
#main h2.ather:after {
	background: url("../media/images/2026/hiroba/hed_08_ather.png") no-repeat right / 100%;
}

html .pankuzu_area:has(a[href="hiroba/"]) + .main_contents_area_lower #main h3:not(:has(img)) {
	margin-top: 54px;
	padding-left: 34px;
	border: none;

	@media screen and (max-width: 768px) {
		margin-top: 40px;
		margin-left: 2px;
		padding-left: 18px;
	}		

	&::before {
		width: 6px;
		height: 40px;
		background-color: #42C86E;
		box-shadow: 12px 0 0 0 #A1E672;
		left: 0;

		@media screen and (max-width: 768px) {
			width: 4px;
			height: 30px;
			box-shadow: 8px 0 0 0 #A1E672;
		}
	}
}


html .pankuzu_area:has(a[href="hiroba/"]) + .main_contents_area_lower #main >  h3:first-child:not(:has(img)),
#main > h3:first-child:not(:has(img)) {
   margin-top: -10px;
}

#main h3:first-child {
	border-left: none;
	padding: 0;
	margin-top: -10px;
}

#main h4 {
	margin-top: 40px;
	margin-bottom: 16px;
	width: calc(100% + 40px);

	@media screen and (max-width: 768px) {
		margin-top: 30px;
		margin-left: 2px;
		margin-bottom: 13px;
		width: calc(100% + 18px);
	}
}

#main h5 {
	margin-top: 24px;

	@media screen and (max-width: 768px) {
		margin-top: 14px;
	}
}

#main a[href^="http"]:not([href$=".pdf"]), 
#main a.external {
	&::after {
		display: inline-block;
		content: "";
		width: 18px;
		height: 18px;
		position: relative;
		top: 3px;
		background: url("../media/images/common_v2/icon_external.png") no-repeat center / 18px;
	}

	&.mini {
		&::after {
			width: 16px;
			height: 16px;
			background-size: 16px;
			left: -3px;
		}
	}

	&.nudge_left {
		&::after {
			padding-left: 0;
			left: -6px;
		}
	}
}

body:not(#gallery) #main a[href$=".pdf"]:after, 
body:not(#gallery) #main a[href$=".PDF"]:after {
	width: 20px;
	height: 20px;
	background-size: 20px;
}

#high_school #main a[href$=".pdf"]:after,
#high_school #main a[href$=".PDF"]:after{
	position: relative;
	left: -6px;
}

#gallery #main a[href$=".pdf"]:after, 
#gallery #main a[href$=".PDF"]:after {
	padding-left: 0;
}

#hiroba_top div.canvas_area {
	background: white;
}
#hiroba_top div.canvas_area div.movie {
	position: relative;
	width: 100%;
	max-width: 1600px;
	min-width: 960px;
	height: 610px;
	background: #efefef;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	background: transparent url(../media/images/common/ajax-loader.gif) no-repeat center center;
}
#hiroba_top div.canvas_area div.movie canvas {
	background-color: transparent;
}
#hiroba_top div.canvas_area #hiroba_animation {
	position: absolute;
}
#hiroba_top div.contents_left {
	padding-top: 25px;
}

#ie8flash {
	max-width: 1600px;
	min-width: 960px;
	width: 100%;
}

#main ul.top_index {
	margin: 0 0 0 30px;
	padding: 0;
	list-style-type: none;
}
#main ul.top_index li {
	position: relative;
	width: 435px;
	height: 145px;
	margin: 0;
	padding: 0;
	text-indent: 0;
	float: left;
}
#main ul.top_index li:before {
	display: none;
}
#main ul.top_index li.left {
	margin-right: 35px;
}
#main ul.top_index li div.pic {
	position: absolute;
	top: 0;
	left: 0;
}
#main ul.top_index li h4 {
	margin: 3px 0 8px 135px;
	padding: 0;
	border: none;
}
#main ul.top_index li h4:before {
	font-family: FontAwesome;
	content: "";
	padding-left: 0;
	padding-right: 5px;
	color: #999;
}
#main ul.top_index li h4 a {
	color: #006600;
	font-size: 16px;
}
#main ul.top_index li p {
	margin: 3px 0 8px 135px;
	padding: 0;
}

#main div.green_bg {
	background: #E5F1DE;
	width: 100%;
	margin-bottom: 15px;
	overflow: auto; /* または overflow: hidden; */
}

/*#main div.green_bg img {
	display: inline-table;
	float: left;
}*/

#main div.green_bg img {
  float: left;
  display: block;
  max-width: 100%;
  height: auto;
}

#main div.green_bg > div {
	/*display: inline-table;*/
	display: block;
	margin-left: 10px;
	padding-top: 10px;
}
#main div.green_bg > div h6, #main div.green_bg > div p {
	margin: 0 0 10px;
	padding: 0;
}

#main .column2 {
	margin: 17px 0px 0;
	padding-left: 21px;
	gap: 2px 108px;
	display: flex;
	flex-wrap: wrap;
	list-style: none;

	@media screen and (max-width: 1200px) {
		gap: 6px 20px;
	}

	@media screen and (max-width: 768px) {
		margin-top: 13px;
		padding-left: 10px;
		gap: 4px;
	}

	&::after {
		margin-top: 35px;
		margin-left: -40px;
		content: "";
		display: block;
		width: 106%;
		height: 4px;
		background: #F2F3F2;

		@media screen and (max-width: 1024px) {
			margin-top: 33px;
			margin-left: -18px;
		}
	}
}

#main .column2 .arrow {
	max-width: 320px;
	margin: 0;
	padding-left: 18px;

	@media screen and (max-width: 768px) {
		padding-left: 13px;
	}

	&::before {
		content: "\f138";
		font-size: 18px;
		top: 3px;
	}
}

#high_school #main .column2 .arrow a {
	padding: 0;
	font-size: 16px;
	line-height: calc(28 / 16);	
}

#high_school #main ul.column3pics {
	margin-top: 15px;
	max-width: 796px;
	width: 100%;
	display: flex;
	gap: 20px;

	@media screen and (max-width: 1024px) {
		margin-top: -1px;
		margin-bottom: -4px !important;
		gap: 1px 11px;
	}
	
	li {
		@media screen and (max-width: 768px) {
			margin-bottom: 10px;
		}
	}

	li:has(> a):not(.no_icon) {
		width: 252px;
		height: auto !important;
		text-indent: 0;

		@media screen and (max-width: 1024px) {
			width: 153px !important;
			height: 102px !important;
		}

		&:has(> a):not(.no_icon) a {
			padding: 0;
		}
	}

	li img {
		display: block;
		width: 100% !important;
	}
}

#main ul.column3pics + div.green_bg,
#main ul.column3pics + h5 {
	margin-top: 10px; //-20px;
}

#main ul.essay {
	@media screen and (max-width: 768px) {
		padding: 0;
	}
}

#main ul.essay li {
	height: 90px;
	margin: 0;
	padding: 5px 0 0 100px;
	text-indent: 0;
	list-style-type: none;
	
	@media screen and (max-width: 768px) {
		overflow: hidden;
        padding: 0;
        margin: 0 0 20px;
        height: auto;
        font-size: 11px;
	}
}
#main ul.essay li:before {
	display: none;
}
#main ul.essay:has(> li.arrow) > li:not(.arrow) {
	padding-left: 100px;
	display: block;
}
body #main ul.essay li a {
	font-size: 16px;
	
	@media screen and (max-width: 768px) {
		display: block;
        font-size: 14px;
        margin-bottom: 5px;
	}
}
#main ul.essay li a:before {
	font-family: FontAwesome;
	content: "";
	padding-left: 0;
	padding-right: 5px;
	color: #999;
}
#main ul.essay li img {
	position: absolute;
	top: 0;
	left: 0;
	
	@media screen and (max-width: 768px) {
		position: static;
        width: 60px !important;
        height: auto !important;
        margin: 0 10px 10px 0;
        float: left;
	}
}

body #main ul.essay li br {
	@media screen and (max-width: 768px) {
		display: none;
	}
}

#qa .main_contents_area_lower .lower_contents {
	padding-top: 0;
}

#qa .main_contents_area_lower.one_column div.clearfix div.contents_left {
	padding: 0;
}

#qa #main h3 {
	margin-top: 0;
	margin-bottom: 5px;
}
#qa #main div.left {
	max-width: 856px;
	
	@media screen and (max-width: 1200px) {
		float: none;
		max-width: unset;
	}
}

#qa #main div.left.flex {
	display: flex;
    flex-direction: column;
}

#qa #main div.left .title_qa_top {
	@media screen and (min-width: 1201px) {
		width: 856px;
		margin-top: 28px;
	}
	@media screen and (max-width: 1200px) {
		margin: 0 -20px;
	}
}


#qa #main div.left div.description:after {
	content: "";
    position: absolute;
	left: 0;
    bottom: 9px;
    width: 100%;
    height: 1px;
    background-color: #D3D6D5; 	
	
	@media screen and (max-width: 768px) {
		width: auto;
		left: -20px;
		right: -20px;
	}
}
#qa #main div.left div.description > p:first-of-type {
	margin-top: 24px;
	
	@media screen and (max-width: 768px) {
		margin-top: 9px;
	}
}
#qa #main div.left div.description p {
	margin: 0;
	padding: 0 40px 0;
	line-height: calc(28/16);
	
	@media screen and (max-width: 768px) {
		padding: 0 7px;
		line-height: calc(27/16);
	}
}
#qa #main div.left div.description p + div {
	margin-top: 7px;
	padding-right: 40px;
	line-height: calc(28/16);
	
	@media screen and (max-width: 768px) {
		margin-top: 12px;
		padding-right: 7px;
	}
}
#qa #main div.left div.description ul.menu {
	text-align: center;
	margin: 63px 0 0;
	padding: 0;
	top: -9px;
	position: relative;
	z-index: 1;
	
	@media screen and (max-width: 768px) {
		display: flex;
		justify-content: center;
		margin-top: 55px;
	}
}
#qa #main div.left div.description ul.menu li {
	display: inline-block;
	margin: 0 5px;
	padding: 0;
}
#qa #main div.left div.description ul.menu li:before {
	display: none;
}
#qa #main div.left div.description ul.menu li a {
	padding: 17px;
	display: block;
	background: #F2F3F2;
	height: 60px;
	width: 300px;
	border: 1px solid #D3D6D5;
	border-radius: 5px 5px 0 0;
	font-size: 16px;
	color: #333;
	
	@media screen and (max-width: 768px) {
		padding: 12px;
		width: 157px;
		height: 45px;
		font-size: 15px;
	}
}
#qa #main div.left div.description ul.menu li a.active {
	background: white;
	border-bottom: none;
	font-weight: 700;
}
#qa #main div.left div.description ul.menu li a.active:after {
	content: "";
    position: absolute;
	left: 0;
    top: 0px;
    width: 100%;
    height: 6px;
    background-color: #A1E672; 
	border-radius: 4px 4px 0 0;
	
	@media screen and (max-width: 768px) {
		height: 4px;
	}
}
#qa #main div.left div.results {
	margin-top: 10px;
	padding-right: 40px;
	text-align: right;
	font-size: 24px;
	
	@media screen and (max-width: 768px) {
		padding-right: 7px;
	}
}
#qa #main div.left div.results .count_num {
	font-family: "Manrope", sans-serif;
	font-weight: bold;
}
#qa #main div.left div.results .count_unit {
	font-size: 16px;
}

#qa #main div.left div.results + table {
	margin: 22px auto 0;
	max-width: 777px;
	
	@media screen and (max-width: 768px) {
		margin-top: 28px;
	}
}
#qa #main div.left table {
	width: 100%;
}
#qa #main div.left table tr {
	@media screen and (max-width: 768px) {
		display: flex;
		margin-bottom: 3px;
	}
}
#qa #main div.left table tbody td {
	text-wrap: wrap;
}
#qa #main div.left table tr:first-child td {
	@media screen and (min-width: 769px) {
		border: none;
	}
}
#qa #main div.left table tr:hover td:not(.q) {
	background: #F6FDF0;
	cursor: default;
}
#qa #main div.left table td {
	vertical-align: middle;
	padding: 0;
	border-left: none;
	border-right: none;
	
	@media screen and (max-width: 768px) {
		border-top: none;
	}
}
#qa #main div.left table td.q {
	width: 46px;
	padding-right: 12px;
	border: none;
	pointer-events: none;
	
	@media screen and (max-width: 768px) {
		flex-shrink: 0;
		width: 40px;
		padding-right: 6px;
	}
}
#qa #main div.left table td.q img {
	display: block;
}
#qa #main div.left table td.num {
	width: 94px;
	padding: 13px 0 14px 20px;
	font-size: 18px;
	font-weight: 500;
	color: #808080;
	
	@media screen and (max-width: 768px) {
		display: block;
		padding: 0;
		position: absolute;
		top: 4px;
		left: 50px;
		border: none;
		z-index: 1;
	}
}
#qa #main div.left table td.num + td {
	@media screen and (max-width: 768px) {
		display: block;
		width: 100%;
	}
}
#qa #main div.left table td a {
	display: block;
	color: #292929;
	font-size: 16px;
	
	@media screen and (max-width: 768px) {
		padding:30px 0 10px 10px;
	}
}

#qa #main ul.pagination {
	padding-top: 40px;
	
	@media screen and (max-width: 768px) {
		max-width: 278px;
		padding: 40px 0 5px;
		margin: 5px auto;
	}
}

#qa #main ul.pagination:has(> li.arrow) > li:not(.arrow),
#qa #main ul.pagination li:has(> a):not(.no_icon) a {
	font-size: 14px;
}

#qa #main ul.pagination .prev,
#qa #main ul.pagination .next {
	white-space: nowrap;
}

#qa #main ul.pagination li + li {
	text-indent: 0;
}

#qa #main ul.pagination li a,
#qa #main ul.pagination li span {
	@media screen and (max-width: 768px) {
		padding: 0 4px;
		margin-bottom: 12px;
	}
}
#qa #main div.left div.check {
	max-width: 272px;
	margin-left: auto;
	
	@media screen and (max-width: 768px) {
		margin: 0 auto;
	}
}
#qa #main div.left div.check a {
	display: inline-block;
	margin-top: 3px;
    padding: 5px 32px 9px;
	border: 2px solid #D3D6D5;
	border-radius: 24px;
	background-color: #D3D6D5;
	color: #292929;
	font-size: 18px;
	
	@media screen and (max-width: 768px) {
		margin-top: 10px;
	}
}
#qa #main div.left div.check a:before {
    content: "";
    position: relative;
    display: inline-block;
    left: 0;
    top: 5px;
    width: 24px;
    height: 24px;
    background: url(../media/images/2026/hiroba/icon_check.png) no-repeat center / 24px;
}
#qa #main div.left div.check a:hover {
	background: #FFFFFF;
}
#qa #main div.left div.check a.checked {
	background: #ccc;
	color: white;
}
#qa #main div.left div.check a.checked:before {
	filter: invert(1) brightness(2);
}

#qa #main div.left section {
	margin: 0 0 0 20px;
}
#qa #main div.left section .post {
	text-align: right;
	margin: 22px 0 23px;
	
	@media screen and (max-width: 768px) {
		margin: 23px 0 21px;
		line-height: calc(27 / 16);
	}
}
#qa #main div.left section.q h4 {
	left: -20px;
	
	@media screen and (max-width: 768px) {
		left: -22px;
	}
}
#qa #main div.left section.a {
	margin-top: 36px;
	margin-left: 40px;
	padding: 40px;
	background: #F5F6F5;
	
	@media screen and (min-width: 1201px) {
		max-width: 776px;
	}
	
	@media screen and (max-width: 1200px) {
		margin-left: 0;
	}
	
	@media screen and (max-width: 768px) {
		margin: 30px -20px 0;
		padding: 32px 27px 30px 38px;
	}
}
/* 2015.8.25 追加 */
#qa .main_contents_area_lower #main section.q div.contents,
#qa .main_contents_area_lower #main section.a div.contents {
	//font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; 
	line-height: calc(28 / 16);
	
	@media screen and (max-width: 768px) {
		line-height: calc(27 / 16);
	}
}
/* ここまで */
#qa .main_contents_area_lower #main section.q div.contents {	
	@media screen and (min-width: 1201px) {
		max-width: 776px;
		margin-left: 20px;
	}
	
	@media screen and (max-width: 768px) {
		margin-right: 7px;
		margin-left: -2px;
	}
}
#qa #main section.a div.contents a:after {
	display: none;
}
#qa #main div.left section.a table {
	margin: 0 auto;
}
#qa #main div.left section.a table td {
	border: none;
	vertical-align: top;
	width: 50%;
}
#qa #main div.left section.a table td.facebook {
	text-align: right;
}
#qa #main div.left section.a table td.twitter {
	text-align: left;
	padding-top: 5px;
}
#qa #main div.left section.a hr {
	background: #ddd;
	margin-bottom: 15px;
}
#qa #main div.left section div.pics {
    margin-top: 20px;
    margin-bottom: 20px;
}
@media screen and (min-width: 700px) {
	#qa #main div.left section div.pics {
		display: flex;
		flex-wrap: wrap;
	}
	#qa #main div.left section div.pics .pic {
		flex: 0 0 50%;
		padding: 5px;
	}
}
#qa #main div.left section div.pics:not(:has(*)) {
    display: none;
}
#qa #main div.left section div.person {
	margin-top: 22px;
    padding-top: 24px;
    padding-left: 32px;
	border-top: 1px solid #D3D6D5;
	
	@media screen and (max-width: 768px) {
		padding-top: 16px;
		padding-left: 24px;
	}
}
#qa #main div.left section div.person:before {
	content: "";
	display: inline-block;
	margin-right: 4px;
	position: absolute;
    left: 0;
    top: 25px;
	width: 24px;
	height: 24px;
	background: url("../media/images/2026/hiroba/person.png") no-repeat center / 24px;
	filter: brightness(0);
	
	@media screen and (max-width: 768px) {
		top: 16px;
		margin-right: -4px;
	}
}
#qa #main div.left section.a div.post {
	margin: 10px 0 0;
	font-size: 14px;
	
	@media screen and (max-width: 768px) {
		margin-top: 4px;
	}
}
#qa #main div.left nav {
	margin-top: 20px;
	text-align: center;
}
#qa #main div.left.flex nav {
	order: 1;
}
#qa #main div.left nav hr,
#qa #main div.left nav a[href*="maint/qa/add/"]{
	display: none;
}
#qa #main div.left nav a {
	display: inline-block;
	margin: 35px 10px 28px;
    padding: 6px 15px 7px;
	width: 272px;
	border: 2px solid #D3D6D5;
	border-radius: 24px;
	color: #333;
	font-size: 18px;
	
	@media screen and (max-width: 768px) {
		margin: 28px 10px 17px;
	}
}
#qa #main div.left nav a:hover {
	background: #F2F3F2;
}
#qa #main div.left nav a.list:before {
	content: "";
    display: inline-block;
    margin-right: 6px;
    position: relative;
    left: 0;
    top: 6px;
    width: 24px;
    height: 24px;
    background: url(../media/images/2026/hiroba/icon_list.png) no-repeat center / 18px;
}
#qa #main div.left nav a.prev:before {
	font-family: FontAwesome;
	content: "";
	padding-left: 0;
	padding-right: 5px;
}
#qa #main div.left nav a.next:after {
	font-family: FontAwesome;
	content: "";
	padding-left: 5px;
	padding-right: 0;
}

#qa #main #qa_tab {
	display: block !important;
	margin: 0 0 0 40px;
	max-width: 796px;
	
	@media screen and (max-width: 1200px) {
		margin: 0 auto;
	}
}

#qa #main #qa_tab .rule_lead {
	margin-top: 33px;
	
	@media screen and (max-width: 768px) {
		margin-top: 13px;
		padding: 0 7px;
	}
}

#qa #main #qa_tab .open_close {
	margin: 10px 0 0;
	
	@media screen and (max-width: 768px) {
		margin-top: 28px;
	}
}

#qa #main #qa_tab .qa_rules h4 {
	margin-top: 32px;
	margin-bottom: 20px;
	
	@media screen and (max-width: 1200px) {
		left: -2px;
	}
	@media screen and (max-width: 768px) {
		margin-bottom: 14px;
	}
}
#qa #main #qa_tab .qa_rules div.detail + h4 {
	margin-top: 38px;
	
	@media screen and (max-width: 768px) {
		margin-top: 32px;
	}
}
#qa #main div.left .qa_rules h6.detail {
	margin-top: 12px;
	margin-bottom: 0;
	padding-left: 0;
	font-weight: normal;
	position: relative;
}
#qa #main div.left .qa_rules h6.detail a {
	display: block;
	padding: 12px 20px;
	background: #F5F6F5;
	color: #292929;
	
	@media screen and (max-width: 768px) {
		padding: 12px 42px 12px 18px;
	}
}
#qa #main div.left .qa_rules h6.detail a:after {
	font-family: FontAwesome;
	content: "\f055";
	padding-left: 0;
	padding-right: 0;
	position: absolute;
	font-size: 22px;
    top: 7px;
    right: 18px;
	
	@media screen and (max-width: 768px) {
		right: 15px;
	}
}
#qa #main div.left .qa_rules h6.detail a.opened {
	background: #EBFAE1;
}
#qa #main div.left .qa_rules h6.detail a.opened:after {
	font-family: FontAwesome;
	content: "\f056";
	padding-left: 0;
	padding-right: 0;
	position: absolute;
	font-size: 22px;
    top: 7px;
    right: 18px;
	
	@media screen and (max-width: 768px) {
		right: 15px;
	}
}
#qa #main div.left .qa_rules div.detail {
	display: none;
	margin: 0 15px 18px 20px;
	padding: 15px 0 0 0px;
	
	@media screen and (max-width: 768px) {
		margin: 0 12px 14px 18px;
	}
}
#qa #main div.left .qa_rules div.detail.flex {
	padding: 0;
	
	@media screen and (max-width: 1200px) {
		margin-top: 15px;
	}
}
#qa #main div.left .qa_rules div.detail p {
	margin-bottom: 0;
	font-size: 15px;
}
#qa #main div.left .qa_rules div.detail.flex p {
	@media screen and (min-width: 1201px) {
		display: inline-block;
		max-width: 332px;
	}
}
#qa #main div.left .qa_rules div.detail.flex .search {
	@media screen and (min-width: 1201px) {
		display: inline-block;
	}
}
#qa #main div.left .qa_rules div.detail div.search form {
	//display: table;
	
	@media screen and (min-width: 1201px) {
		margin: 20px -10px 0 30px;
	}
	
	@media screen and (max-width: 1200px) {
		margin: 15px 0 0;
		max-width: 299px;
	}
}
#qa #main div.left .qa_rules div.detail div.search form fieldset {
	//display: table-row;
}
#qa #main div.left .qa_rules div.detail div.search form fieldset > div {
	//display: table-cell;
}
#qa #main div.left .qa_rules div.detail div.search form fieldset div.input input {
	box-sizing: border-box;
	padding: 0 5px;
	width: 400px;
	height: 36px;
	line-height: 25px;
	background: white;
	border: 1px solid #D3D6D5;
	border-radius: 18px;
	font-size: 14px;
	-webkit-appearance: none;
	
	@media screen and (max-width: 1200px) {
		width: 100%;
	}
}
#qa #main div.left .qa_rules div.detail div.search form fieldset div.submit button {
	font-size: 0;
	display: block;
    position: absolute;
    width: 36px;
    height: 36px;
    top: -36px;
    right: 0;
    background: #333333;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
#qa #main div.left .qa_rules div.detail div.search form fieldset div.submit button:after {
	display: block;
    content: "";
    width: 20px;
    height: 20px;
    background: url(../media/images/common_v2/icon_search.png) no-repeat center / 100%;
    position: relative;
    top: 0px;
    right: -3px;
}
#qa #main div.left .qa_rules div.detail div.search form fieldset .radios {
	margin-top: 7px;
}
#qa #main div.left .qa_rules div.credit {
	padding: 15px 0 0 0;
}
#qa #main #form_container {
	margin: 0 0 0 40px;
	padding-bottom: 20px;
	max-width: 796px;
	
	@media screen and (max-width: 1200px) {
		margin: 0 auto;
	}
	@media screen and (max-width: 768px) {
		padding-bottom: 0;
	}
}
#qa #main #form_container h4 {
	@media screen and (max-width: 1200px) {
		left: -2px;
		margin-bottom: 16px;
	}	
}
#qa #main #form_container blockquote p a {
	color: #292929;
}
#qa #main #form_container .preset {
	margin: 35px 0px 0px 0px;
	
	@media screen and (max-width: 768px) {
		margin-left: 18px;
		line-height: calc(27 / 16);
	}
}
#qa #main #form_container span.required {
	color: #E63E3E;
	font-size: 16px;
}
#qa #main #form_container .mailform table {
	margin-top: 15px;
	margin-bottom: 2px;
	
	@media screen and (max-width: 768px) {
		margin-top: 23px;
	}
}
#qa #main #form_container .mailform table tr {
	@media screen and (max-width: 768px) {
		display: block;
		margin-bottom: 0;
		padding: 16px 7px 24px 18px;
		border-bottom: 1px solid #D3D6D5;
	}
}
#qa #main #form_container .mailform table tr:first-of-type {
	@media screen and (max-width: 768px) {
		border-top: 1px solid #D3D6D5;
	}	
}
#qa #main #form_container .mailform table tr:hover td {
	background: none;
}
#qa #main #form_container .mailform table th {
	padding: 26px 0;
	width: 23%;
	background: none;
    border-right: none;
    font-size: 18px;
}
#qa #main #form_container .mailform table th span.required {
	margin-right: 6px;
}

#qa #main #form_container .mailform table td {
	padding: 16px 0px 16px 15px;
	
	@media screen and (max-width: 768px) {
		padding: 17px 11px 0 0 !important;
		margin-bottom: 0 !important;
		border: none;
	}
}
#qa #main #form_container .mailform table td input {
	height: 48px;
	border-color: #989898;
	border-radius: 4px;
}
#qa #main #form_container .mailform table td p {
	font-size: 15px;
	margin-top: 8px;
	
	@media screen and (max-width: 768px) {
		margin: 15px -11px 0 0;
	}
}
#qa #main #form_container .mailform .submit .confirm.btn  {
	padding: 9px;
	
	@media screen and (max-width: 768px) {
		width: 272px;
	}
}

#qa #main #form_container .mailform td label:has([type="radio"]),
#qa #main .question_search_box .mailform td label {
	display: inline-block;
	
	@media screen and (max-width: 768px) {
		display: block;
	}
	
	input {
		margin: 0 3px 0 0;
		height: auto;
	}
	
	+ label {
		margin-left: 15px;
		
		@media screen and (max-width: 768px) {
			margin: 5px 0 0;
		}
	}
}

#qa #main div.left div.blank {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #ffcccc;
	background-color: #ffefef;
	padding: 100px 0;
	text-align: center;
	margin: 30px 0 20px;
	color: #f66;
}
#qa #main div.left div#sns_wrapper {
	margin: 5px 0 0;
	//padding: 0 0 0 25px;
	
	@media screen and (max-width: 768px) {
		margin-top: 15px;
	}
}
#qa #main div.left.flex div#sns_wrapper {
	order: 2;
}
#qa #main div.left div#sns_wrapper table {
	width: auto;
	margin: 0 auto;
}
#qa #main div.left div#sns_wrapper table td {
	border: none;
}
#qa #main div.right {
	max-width: 280px;
	padding-top: 48px;
	
	@media screen and (max-width: 1200px) {
		max-width: 335px;
		float: none;
		margin: 100px auto 10px;
		padding-top: 18px;
		z-index: 1;
	}
}
#qa #main div.right:before {
	@media screen and (max-width: 1200px) {
		display: block;
		content: "";
		position: absolute;
		left: -20px;
		right: -20px;
		top: -32px;
		width: auto;
		height: 8px;
		background-color: #F2F3F2;
	}
}
#qa #main div.right section {
	margin: 0 0 40px;
}
#qa #main div.right section:has(+ .entry_banner) {
	margin-bottom: 24px;
}
#qa #main div.right section h5 {
	border: none;
	font-size: 18px;
	margin: 0;
	padding-bottom: 7px;
    border-bottom: 3px solid #A1E672;
}
#qa #main div.right section form {
	background: #F1F1F0;
	padding: 24px 22px;
}
#qa #main div.right section form div.input {
	position: relative;
	height: 36px;
	width: 236px;
	
	@media screen and (max-width: 768px) {
		width: 291px;
		height: 36px;
	}
}
#qa #main div.right section form div.input input {
	position: absolute;
	box-sizing: border-box;
	padding: 0 5px;
	width: 236px;
	height: 36px;
	line-height: 25px;
	background: white;
	border-top : solid 1px #dfdfdf;
	border-right : none;
	border-bottom : solid 1px #dfdfdf;
	border-left : solid 1px #dfdfdf;
	border-radius: 20px;
	font-size: 14px;
	-webkit-appearance: none;
	
	@media screen and (max-width: 768px) {
		width: 291px;
		height: 36px;
	}
}
#qa #main div.right section form div.input button {
	display: block;
	position: absolute;
    width: 36px;
    height: 36px;
	top: 0;
	right: 0;
	background: #333333;
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
}
#qa #main div.right section form div.input button .fa-search:before {
	display: block;
	content: "";
	width: 20px;
	height: 20px;
	background: url("../media/images/common_v2/icon_search.png") no-repeat center / 100%;
	position: relative;
    top: 2px;
}
#qa #main div.right section form div.radios {
	margin-top: 7px;
}
#qa #main div.right section ul {
	margin: 12px 0 0;
	padding: 0;
}
#qa #main div.right section ul li {
	margin: 0;
}
#qa #main div.right section ul li a {
	display: block;
	padding: 0;
	text-indent: -20px;
	font-size: 15px;
	line-height: 1.2;
}
#qa #main div.right section ul li a:before {
	font-family: FontAwesome;
	content: "";
	padding-left: 0;
	padding-right: 6px;
	font-size: 18px;
	font-weight: bold;
}
#qa #main div.right section ul li.arrow {
	text-indent: 0;
	margin-bottom: 10px;
	padding-left: 22px;
	
	@media screen and (max-width: 768px) {
		padding: 0 5px 0 30px;
	}
}
#qa #main div.right section ul li.arrow:before {
	display: none;
}
#qa #main div.right section div.more {
	text-align: right;
	
	@media screen and (max-width: 768px) {
		padding-right: 7px;
	}
}
#qa #main div.right section div.more a {
	color: #292929;
	font-size: 13px;
}
#qa #main div.right section div.more a:before {
	font-family: FontAwesome;
	content: "\f105";
	padding-left: 0;
	padding-right: 6px;
}

#qa #main div.right section ol.ranking_list {
	background-color: #fff;
	margin: 6px 0 4px;
	padding-left: 0;
}

#qa #main div.right section ol.ranking_list li {
	list-style: none;
	margin: 0;
	padding: 3px 0 3px 8px;
	border-bottom: 1px solid #D3D6D5;
	
	@media screen and (max-width: 768px) {
		padding-top: 2px;
		padding-left: 13px;
	}
}

#qa #main div.right section ol.ranking_list li a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	height: 47px;
	padding-left: 38px;
	padding-right: 8px;
	position: relative;
}

#qa #main div.right section ol.ranking_list li a:before {
	content: "";
    display: inline-block !important;
    width: 45px;
    height: 45px;
    background-image: url(../media/images/top_v2/medal_1.png);
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 2px;
    left: -13px;
}
#qa #main div.right section ol.ranking_list li:nth-child(2) a::before {
	background-image: url(../media/images/top_v2/medal_2.png);
}
#qa #main div.right section ol.ranking_list li:nth-child(3) a::before {
	background-image: url(../media/images/top_v2/medal_3.png);
}

#qa #main div.right section ol.ranking_list li a img {
	display: none;
}

#qa #main div.right section ol.ranking_list li a span {
	flex: 1 1 auto;
	color: #333;
	font-size: 15px;
	line-height: calc(20/15);
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

#qa #main table.like {
	margin: 5px 0;
}
#qa #main table.like td {
	padding: 5px 6px;
	border-left: none;
	border-right: none;
}
#qa #main table.like td.rank {
	white-space: nowrap;
	text-align: center;
}
#qa #main table.like td.count {
	padding-left: 6px;
	padding-right: 6px;
	text-align: center;
}
#qa #main table.like td.count span {
	display: inline-block;
	border-radius: 8px;
	background: #aaa;
	color: white;
	padding: 0 6px;
	font-size: 11px;
	font-family: sans-serif;
	font-weight: bold;
}
#qa #main div.left table.like {
	margin-top: 20px;
}
#qa #main div.left table.like thead th {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
#qa #main div.left table.like td {
	padding-top: 10px;
	padding-bottom: 10px;
}

#qa #main div.pics div.pic {
	margin-bottom: 30px;
}

#qa #main div.pics div.pic > p {
	margin: 0;
}

#gallery #main table.gallery {
	margin: 20px;
}
#gallery #main table.gallery td {
	border-bottom: none;
	vertical-align: middle;
}
#gallery #main table.gallery td.thumb {
	width: 90px;
	padding: 2px 15px;
}
#gallery #main table.gallery td.thumb img {
	max-width: 60px;
	border: 4px solid #E6E3E3;
	border-radius: 5px;
}
#gallery #main table.gallery td a {
	font-size: 15px;
}
#gallery #main table.gallery td a:before {
	font-family: FontAwesome;
	content: "";
	padding-left: 0;
	padding-right: 5px;
	color: #999;
}

#gallery #main article section.pic {
	text-align: center;
}
#gallery #main article section.pic p {
	text-align: left;
	margin-left: 20px;
	margin-right: 20px;
}
#gallery #main article section.pic img {
	max-width: 100%;
}
#gallery #main article section.contents p {
	margin: 15px 0;
}
#gallery #main article ul.sub {
	display: table;
	margin: 20px 0 0;
	padding: 0;
}
#gallery #main article ul.sub li {
	display: table-row;
	text-indent: 0;
	padding: 0;
	margin: 0;
}
#gallery #main article ul.sub li div.pic, #gallery #main article ul.sub li p.caption {
	display: table-cell;
	width: 50%;
	vertical-align: top;
	box-sizing: border-box;
}
#gallery #main article ul.sub li div.pic {
	padding: 0 5px 10px 0;
	text-align: center;
}
#gallery #main article ul.sub li div.pic img {
	max-width: 300px;
}
#gallery #main article ul.sub li p.caption {
	padding: 0 0 10px 5px;
	margin: 0;
}
#gallery #main article div.presented_by {
	margin-top: 25px;
	text-align: right;
}

#main .contents_section .content_card:not(:last-of-type) {		
	&::after {
		margin-top: 40px;
		margin-left: -40px;
		content: "";
		display: block;
		max-width: 856px;
		height: 4px;
		background: #F2F3F2;

		@media screen and (max-width: 1024px) {
			max-width: calc(100% + 40px);
		}

		@media screen and (max-width: 768px) {
			margin-left: -20px;
		}

	}
}

#gallery #main .contents_section .content_card:not(:first-of-type) .card_title {
	margin-top: 48px;
	
	@media screen and (max-width: 768px) {
		margin-top: 38px;
	}
}

#main .contents_section .card_inner {
	max-width: 796px;
	display: flex;
	gap: 43px;

	@media screen and (max-width: 1024px) {
		max-width: 100%;
	}

	@media screen and (max-width: 768px) {
		display: block;
	}
}

#main .contents_section .card_body {
	flex: 1;
}

#main .contents_section .card_text {
	margin: 0;
	line-height: calc(28 / 16);

	@media screen and (max-width: 768px) {
		padding-right: 6px;
		line-height: calc(27 / 16);
	}	
}

#main .contents_section .card_footer {
	margin-top: 21px;
	display: flex;
	align-items: center;
	gap: 22px;

	@media screen and (max-width: 768px) {
		margin-top: 13px;
		gap: 18px;
	}	
}

#main .contents_section .card_footer.is_block {
	margin-top: 23px;
	display: block;

	@media screen and (max-width: 768px) {
		margin-top: 12px;
	}	
}

#main .contents_section .button {
	margin-left: 0;
	padding-left: 15px;
	color: #292929;
}

#main .contents_section .update_date {
	font-size: 15px; 
	color: #808080;

	@media screen and (max-width: 768px) {
		font-size: 14px; 
	}	
}

#main .contents_section .update_date.new_label::before {
	position: relative;
	margin-right: 10px;
	content: "New!!";
	font-family: "Manrope", sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #E63E3E;

	@media screen and (max-width: 768px) {
		margin-right: 6px;
		left: -2px;
		font-size: 18px;
	}	
}

#main .contents_section .update_date.pdf {
	display: block;
	margin-left: 26px;

	@media screen and (max-width: 768px) {
		margin-top: 3px;
		margin-left: 24px;
	}	
}

#main .contents_section .pdf_link {
	display: flex;
	gap: 1px;
	font-size: 18px;
	font-weight: 500;
	color: inherit;

	@media screen and (max-width: 768px) {
		font-size: 16px;
	}

	&::before {
		content: "";
		width: 24px;
		height: 24px;
		background: url(../media/images/common_v2/icon_chevron_right_black.png) no-repeat center top 2px / 24px;

		@media screen and (max-width: 768px) {
			background-position: center top;
		}
	}
}

#main .contents_section .card_image {
	flex: 0 0 288px;
	height: 162px;
	border: 1px solid #D3D6D5;

	@media screen and (max-width: 768px) {
		margin-top: 24px;
		max-width: 299px;
		height: 168px;

	}	
}

#main .contents_section .card_image img {
	display: block;
	width: 100%;
}

#main .contents_section .card_image img.oyako {
	margin: 7px 38px 6px 26px;
	width: 78%;	
}

#main div.note_right {
	margin: 22px 0 0;
	text-align: right;
}
@media screen and (max-width: 768px) {
	#main div.note_right {
		margin-top: 18px;
	}
}
#main div.note_right img {
	vertical-align: -7px;
}
#main div.note_right span {
	font-size: 15px;
}
#main div.open_close {
	margin: 15px 0 0;
}
@media screen and (max-width: 768px) {
	#main div.open_close {
		margin: 32px 0 0 -18px;
	}
}

#main ul#movie {
	list-style: none;
	margin: 1px 0 0;
	padding: 0;
}
@media screen and (max-width: 768px) {
	#main ul#movie {
		margin-top: 32px;
		margin-left: -18px;
	}
}
#main ul#movie li.depth1 {
	margin: 0;
	padding: 0 0 14px 40px;
	border-bottom: 4px solid #f2f3f2;
}
@media screen and (max-width: 768px) {
	#main ul#movie li.depth1 {
		padding-left: 18px;
		padding-bottom: 20px;
	}
}
#main ul#movie li.depth1 + li.depth1 {
	margin-top: 48px;
}
@media screen and (max-width: 768px) {
	#main ul#movie li.depth1 + li.depth1 {
		margin-top: 40px;
	}
}
#main ul#movie li.depth1:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
#main ul#movie h3 {
	margin: 0;
	line-height: 38px;
}
@media screen and (max-width: 768px) {
	#main ul#movie h3 {
		left: -18px;
		line-height: 30px;
		padding-bottom: 0;
	}
}

ul#movie h4 {
	margin-bottom: 20px;
}
ul#movie h5 {
	font-size: 18px;
	border: none;
	//padding: 0 0 5px;
	margin: 0;
}

#main ul#movie h5 a {
	display: block;
	font-size: 18px !important;
	color: #292929;
	padding: 0 0 2px 28px;
	line-height: 22px;
	background: url(../media/images/2026/hiroba/remove_circle.png) no-repeat left top/24px;
}
@media screen and (max-width: 768px) {
	#main ul#movie h5 a {
		padding: 1px 0 1px 30px;
		font-size: 16px !important;
	}
}

/*
ul#movie h5 a:before {
	font-family: FontAwesome;
	content: "";
	padding-left: 0;
	padding-right: 5px;
	color: #999;
}
ul#movie h5 a.close:before {
	font-family: FontAwesome;
	content: "";
	padding-left: 0;
	padding-right: 5px;
}
*/

#main ul#movie h5 a:hover {
	color: #666;
}
#main ul#movie h5 a.close {
	background-image: url(../media/images/2026/hiroba/add_circle.png);
}
#main ul#movie ul.depth2 {
	list-style: none;
	margin: 26px 0;
	padding: 0;
}
@media screen and (max-width: 768px) {
	#main ul#movie ul.depth2 {
		margin: 20px 0;
	}
}
#main ul#movie li.depth2 {
	margin: 14px 0;
}
@media screen and (max-width: 768px) {
	#main ul#movie li.depth2 {
		margin: 12px 0;
	}
}
#main ul#movie ul.depth3 {
	display: none;
	list-style: none;
	margin: 12px 19px 0 28px;
	padding: 0;
}
@media screen and (max-width: 768px) {
	#main ul#movie ul.depth3 {
		margin: 10px 0 12px !important;
	}
}
#main ul#movie li.depth3 {
	margin: 10px 0;
	padding: 0 !important;
}
@media screen and (max-width: 768px) {
	#main ul#movie li.depth3 {
		margin: 7px 0;
	}
}
#main ul#movie li.depth3 div.title a {
	display: block;
	font-size: 15px;
	color: #292929;
	background: url(../media/images/2026/hiroba/movie.png) no-repeat left 24px top/24px;
	padding: 0 0 2px 53px;
	line-height: 22px;
}
@media screen and (max-width: 768px) {
	#main ul#movie li.depth3 div.title a {
		padding-left: 52px;
	}
}
#main ul#movie li.depth3 div.title a:hover {
	color: #666;
}
#main ul#movie li.depth3 div.title a::after {
	content: none;
}
#main ul#movie li.depth3 div.title.academic_member a {
	position: relative;
}
#main ul#movie li.depth3 div.title.academic_member a::before {
	content: "";
	background: url(../media/images/2026/hiroba/person.png) no-repeat center/contain;
	width: 24px;
	aspect-ratio: 1;
	position: absolute;
	left: 0;
	top: 0;
}

ul#movie ul.depth2 ul.depth3 li.depth3 div.title {
	position: relative;
}

/*
ul#movie ul.depth2 ul.depth3 li.depth3 div.title a:before {
	position: absolute;
	font-family: FontAwesome;
	content: "";
	padding-left: 0;
	padding-right: 0;
	top: 0;
	left: -25px;
}
*/

ul#movie ul.depth2 ul.depth3 li.depth3 div.title a:after {
	display: none;
}
ul#movie ul.depth2 ul.depth3 li.depth3 div.title a span {
	display: block;
}
ul#movie ul.depth2 ul.depth3 li.depth3 div.description {
	border-top: 1px solid #ccc;
	margin-top: 3px;
	padding-top: 3px;
}
ul#movie ul.depth2 ul.depth3 li.depth3 div.description span.language {
	display: inline-block;
	background: #999;
	color: white;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 2px 3px 1px 4px;
	font-size: 12px;
}
ul#movie ul.depth2 ul.depth3 li.depth3 div.description span.label {
	display: inline-block;
	margin-left: 3px;
	margin-right: 3px;
	border: 1px solid #ccc;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	padding: 2px 3px 1px 4px;
	font-size: 12px;
}
ul#movie ul.depth2 ul.depth3 li.depth3 div.description p {
	display: inline;
	margin: 0 0 0 0;
}

/*# sourceMappingURL=hiroba.css.map */


#main div.banners {
	width: 900px;
	height: 130px;
	margin: 20px auto 0;
	overflow: hidden;
}

#main div.banners ul {
	width: 935px;
	margin: 0;
	padding: 0;
}

#main div.banners ul li {
	list-style: none;
	width: 290px;
	height: 80px;
	margin-right: 20px;
	float: left;
}

#main div.banners ul li.blank {
	background: #f1f1f0;
}

#main div.banners ul li:before {
	display: none;
}

#main div.sign,
#main p.sign {
	text-align: right;	
}


@media screen and (max-width: 768px) {
	#main div.sign,
	#main p.sign {
		text-align: left;	
	}
	
	#gallery #main article div.presented_by {
		text-align: left;
	}
}

#qa #main ul.ranking_tabs {
	margin: 20px 0 0;
	padding: 0;
	background-color: #ccc;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 1px;
}

#qa #main ul.ranking_tabs li {
	flex: 1 1 33%;
	list-style: none;
	margin: 0;
	background-color: #f1f1f0;
	border-bottom: 1px solid #016801;
	text-indent: 0;
}

#qa #main ul.ranking_tabs li::before {
	content: none;
}

#qa #main ul.ranking_tabs li a {
	display: block;
	padding: 10px 0;
	text-align: center;
	color: #333;
	font-weight: bold;
	font-size: 13px;
	line-height: 20px;
}

#qa #main ul.ranking_tabs li.active {
	background-color: #fff;
	border-top: 1px solid #390;
	border-bottom: none;
}

#qa #main ul.ranking_tabs li.active a {
}

#qa #main p.ranking_period {
	margin: 22px 22px 0;
}

#qa #main ol.ranking_body {
	margin: 26px 0 0;
	padding-left: 3px;
	border-bottom: 1px solid #ececec;
	background: url(../media/images/hiroba/qa/ranking_bg.png) no-repeat bottom right;
}

#qa #main ol.ranking_body li {
	list-style: none;
	margin: 0;
	border-top: 1px solid #ececec;
	padding: 5px 0;
}

#qa #main ol.ranking_body li a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
}

#qa #main ol.ranking_body li a span.rank {
	flex: 0 0 24px;
	background-color: #ececec;
	color: #000;
	text-align: center;
	font-weight: bold;
	font-size: 13px;
	line-height: 24px;
}

#qa #main ol.ranking_body li a span.rank.rank1 {
	background-color: #ffd700;
}

#qa #main ol.ranking_body li a span.rank.rank2 {
	background-color: #c0c0c0;
}

#qa #main ol.ranking_body li a span.rank.rank3 {
	background-color: #c67c33;
}

#qa #main ol.ranking_body li a span.title {
	flex: 1 1 auto;
	padding-top: 1px;
	color: #333;
	font-weight: bold;
	font-size: 13px;
}

#qa #main ol.ranking_body li a:hover span.title {
	color: #390;
}

#qa #main div.right section .text_banner {
	margin-top: 55px;
	
	@media screen and (max-width: 768px) {
		margin-top: 72px;
	}
}
#qa #main div.right section .text_banner a{
	display:block;
	border:2px #D3D6D5 solid;
	text-align:center;
	padding: 7px 0 7px 20px;
	color: #292929;
	background-color:#FFFFFF;
	border-radius: 28px;
	font-weight: 500;
	
	@media screen and (max-width: 768px) {
		width: 280px;
		margin: 0 auto;
	}
}
.text_banner a:before{
	font-family: FontAwesome;
    content: "\f105";
    padding-left: 0;
	font-size: 20px;
	position: relative;
    left: -15px;
}
.text_banner a:hover{
	background: #F2F3F2;
}

#main .thumbnail_small_frame {
   	float: right;
	width: 40%;
	max-width: 200px;
	margin: 5px;
	position: relative;
	z-index: 10;
}

#main .thumbnail_small_frame a {
    display: block;
    width: 100%;
    height: 100%;
}

#main .thumbnail_small_frame div {
	margin: 0; 
	text-align: center;
}

/* インデックスページ用追加 **/
#main .thumbnail_small_frame.small {
    float: right;
	width: 32%;
	max-width: 221px; //160px;
	margin: 0px 20px 0 30px; //0 0 15px 20px;
	border: 1px solid #D3D6D5;
	
	@media screen and (max-width: 768px) {
		width: 130px;
		margin: 3px 0px 0 20px;
	}
}

#main .thumbnail_small_frame.small div {
	margin: 0; 
	text-align: center;
}

#main .thumbnail_small_frame.small img {
	display: block;
	width: 100%;	
}

#main .latest h6 {
    font-size: 1.153em;
    font-weight: normal;
    border-left: 3px solid #E5F1DE;
    padding: 3px 0 0 16px;
    margin-top: 27px;
    margin-bottom: 10px;
    clear: both;
}

#main .latest .winner {
	max-width: 796px;
	margin: 14px 0 30px; //0 0 30px;
	padding: 0; //0 0 0 15px;
	
	@media screen and (max-width: 768px) {
		margin-top: 10px;
	}
}
#main .latest .winner li{
	background: #F5F6F5; //#E5F1DE;
	width: 100%;
	margin-bottom: 12px; //15px;
	padding:0;
	// overflow: auto;
	display: flex;
	justify-content:space-between;
}

#main .latest .winner li div{
	padding: 20px; //1em;
}

#main .latest .winner li div.pic{
	width: 20%;
	margin-right: 15px;
	margin-bottom: 15px;
	padding:0;
}
#main .latest .winner li div.pic img{
	width: 100%;
}

#main .latest .winner li div .title{
	margin: 0 0 6px; // 0 0 1em;
	font-weight: bold;
	line-height: 1.5;
}

#main .latest .winner li div .title span{
	display: block;
}
#main .latest .winner li div .school{
	margin: 0;
	font-size: 14px;
	line-height: calc(20/14);
	color: #808080;
}

#high_school #main p:not([class]) {
	margin: 0;
	max-width: 796px;
	line-height: 1.75;

	@media screen and (max-width: 768px) {
		line-height: calc(27 / 16);
	}
}

#main .highschool_menu {
	margin-top: 56px;

	@media screen and (max-width: 768px) {
		margin-top: 40px;
		margin-left: -20px;
	}

	ul {
		.arrow {
			margin-top: 20px;

			@media screen and (max-width: 768px) {
				margin-top: 11px;
			}

			&::before {
				content: "\f107";

				@media screen and (max-width: 768px) {
					top: 0;
					left: -10px;
				}
			}
		}
	}
}

#main .chevron {
	padding-left: 24px;
	display: block;
	color: inherit;

	&::before {				
		font-family: FontAwesome;
		content: "\f138";
		color: #292929;
		font-size: 18px;
		font-weight: bold;
		position: absolute;
		top: 0px;
		left: 2px;
	}
}

#main p + p:has(+ p) .chevron {
	margin: 20px 0;

	@media screen and (max-width: 768px) {
		margin: 17px 0 19px;
		line-height: 1.5;
	}
}

#main .report_text {
	margin-top: 18px;
	margin-bottom: 86px;
	line-height: 1.75;

	@media screen and (max-width: 768px) {
		margin-bottom: 0;
		line-height: calc(27 / 16);
	}
}

#main #highschool2 {
	margin-top: 48px;

	@media screen and (max-width: 768px) {
		margin-top: 40px;
	}
}
 
#main .pic_frame {
	margin: 18px 0 0;
	max-width: 796px;
	border: 1px solid #D3D6D5;
	line-height: 0;

	@media screen and (max-width: 768px) {
		margin: 14px 0 0;
		max-width: 317px;
	}

	a {
		display: block;

		img {
			display: block;
			width: 100%;
		}
	}
}

#high_school #main .award {
	margin-top: 23px;

	@media screen and (max-width: 768px) {
		margin-top: 18px;
	}

	p {
		margin-top: 15px;
	}

	p:has(> .chevron) {
		margin-top: 23px;

		@media screen and (max-width: 768px) {
			margin-top: 18px;
		}

		span {
			display: block;
			margin-top: 17px;
		}
	}
}

body:not(#high_school,#qa) #main ul:not(.essay) li.arrow {
	padding-left: 5px;
}

#main ul li:has(> a):not(.no_icon)::before {
	content: "\f138";
	font-size: 18px;
	top: 1px
}

#main blockquote {
	background: #F5F6F5;
}

#main blockquote.unset_blockquote {
	margin: 0;
	padding: 0;
    border: none;
	background: none;
}
#main blockquote.unset_blockquote p {
	@media screen and (max-width: 768px) {
		margin: 0 7px 0 18px;
		line-height: calc(27 / 16);
	}
}

.entry_banner {
	margin: 48px auto 0;
	padding: 0;
	max-width: 280px;

	@media screen and (max-width: 768px) {
		margin: 18px auto 0;		
	}

	a {
		display: block;

		img {
			display: block;
			width: 100%;
		}
	}
}
#qa #main div.right .entry_banner {
	margin-top: 24px;
}

#qa .main_contents_area_lower:after{
	@media screen and (max-width: 768px) {
		display: block;
		content: "";
		position: absolute;
		left: 0;
		bottom: 505px;
		width: 100%;
		height: 260px;
		background-color: #F2F3F2;
	}
}