@charset "utf-8";

/*======================================

	Custom CSS
	Copyright (c) 2021-, PROACTIVE Inc. All rights reserved.

=======================================*/

/*--- Top ---*/
#top-img {
	width: 100%;
	height: auto;
	line-height: 0;
}

.thumbs {
	background-color: #f9f5f5;
	padding: 1rem 0;
}

@media print, screen and (min-width: 769px) {
	#top-img {
		margin-bottom: 1rem;
	}
	
	.slider-thumbnail .swiper-wrapper .swiper-slide {
		width: calc(100% / 5);
	}
}

@media only screen and (max-width: 768px) {
	#top-img {
		margin-bottom: 3rem;
	}
}

.slider-thumbnail .swiper-slide {
	opacity: .4;
}

.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
	opacity: 1;
}

.bnr li  {
	display: table;
	margin-bottom: 2rem;
}

.bnr li a {
	display: table-cell;;
	width: 100%;
	height: 6rem;
	background-color: #f7f7e3;
	border: 1px solid #ccc;
	/*font-size: 1.25rem;*/
	color: #600;
	text-decoration: none;
	padding: 0 2rem;
	vertical-align: middle;
	position: relative;
}
.bnr li:nth-child(even) a {
    background-color: #ece0e0;
}

.contents .bnr a .bk {
    text-decoration: none;
}

.bnr li a.bnr__icon-adm {
	background: #f7f7e3 url("/lib/img/medical/icon_admission.svg") .5rem center no-repeat;
}
.bnr li a.bnr__icon-sp {
	background: #ece0e0 url("/lib/img/medical/icon_specialist.svg") .5rem center no-repeat;
}
.bnr li a.bnr__icon-e {
	background: #eaf4ff url("/lib/img/medical/icon_e-learning.png") .5rem center no-repeat;
}
.bnr li a.bnr__icon-tr {
	background: #f7f7e3 url("/lib/img/medical/icon_transplant.svg") .5rem center no-repeat;
}
.bnr li a.bnr__icon-hyo {
    background-color: #dbebc4;
}

.bnr li a.bnr__icon-adm,
.bnr li a.bnr__icon-sp {
	background-size: 4rem;
	padding: 0 5rem;
	text-align: center;
}
.bnr li a.bnr__icon-tr {
    background-size: 3rem;
    padding: 0 4rem;
	text-align: center;
}
.bnr li a.bnr__icon-e {
    background-size: 4rem;
	padding: 0 4rem 0 6rem;
	text-align: center;
}

.bnr li a::after {
	position: absolute;
	content: '';
	top: 0;
	right: 0;
	width: 1.5rem;
	height: 3rem;
	background-color: #600;
}

.bnr li a:hover {
	box-shadow: 0 4px 8px #999;
}

@media print, screen and (min-width: 769px) {
	.bnr li {
		width: 20%;
	}
    .bnr::after {
        display: block;
		content: '';
		width: 32%;
		max-width: 340px;
    }
	.bnr li a {
		height: 4.875rem;
	}
	.bnr li a.bnr__icon-adm,
	.bnr li a.bnr__icon-sp {
		background-size: 3rem;
		padding: 0 4rem;
	}
	.bnr li a.bnr__icon-tr {
	    background-size: 2.5rem;
	    padding: 0 2rem 0 3rem;
	}
	.bnr li a.bnr__icon-e {
	    background-size: 3rem;
		background-position: 1rem;
		padding: 0 3rem 0 4rem;
	}
	.bnr li a:hover {
		box-shadow: 0 0  8px #999;
	}
	.bnr li a::after {
		width: 1.25rem;
		height: 2.5rem;
	}
}
@media only screen and (max-width: 768px) {
	.bnr li {
		width: 100%;
	}
    .bnr li:nth-child(4) {
        text-align: center;
    }
    .bnr li a.bnr__icon-e {
        padding: 0 5rem;
    }
	.bnr li a {
		font-size: 1.25rem;
	}
}

/* 機関紙 */
#bulletin h2 {
	border-top: 1px solid #aaa;
	border-right: 1px solid #aaa;
	color: #334270;
	font-size: 1.5rem;
	padding: 2rem 1.5rem;
}

.bulletin-item {
	position: relative;
}

.bulletin-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 10rem;
	background-color: #334270;
	z-index: -1;
}

.bulletin-item dl dt,
.bulletin-item dl dd {
	margin: 0;
}

.bulletin-item dl dt {
	color: #fff;
	padding: 1.25rem 0;
}

.bulletin-item dl dd {
	padding: 0 .5rem;
}

.bulletin-item a:hover img {
	opacity: 1;
	box-shadow: 0 2px 16px #334270;
}

@media print, screen and (min-width: 769px) {
	#bulletin h2 {
		width: 23%;
	}
	
	#bulletin > div {
		width: 65%;
	}
	
	.bulletin-item {
		width: 40%;
	}
}

@media only screen and (max-width: 768px) {
	#bulletin h2 {
		width: 100%;
	}
	
	#bulletin > div {
		width: 100%;
	}
	
	.bulletin-item {
		margin: .5rem auto 3rem;
		width: 70%;
	}
	
	.bulletin-item img {
		width: auto;
		height: 14rem;
	}
}

/*--- 定款・規則・施行細則 ---*/
.articles-sec dt {
	margin-bottom: .5rem;
}

.articles-sec dd .list--num > li,
.articles-sec dd .list--notes > li {
	margin-bottom: 0;
}

.articles-sec dd .list--num {
	margin-left: 2em;
}

.articles-sec dd .list--num > li {
	text-indent: 0;
}

/*--- 学会概要：名簿 ---*/
.name-list li {
	padding: 0 3rem .5rem 1rem;
}

/*--- 委員会活動 ---*/
.name-list--10 li {
	min-width: 10em;
}
.name-list--12 li {
	min-width: 12em;
}

/*--- ガイドライン・診療情報：モバイル用アプリ ---*/
/*--- COI：Q＆A ---*/
.qa dt,
.qa dd {
	margin-left: 2.5em;
	text-indent: -1.5em;
}

.qa__list dt {
	padding: .5rem;
	cursor: pointer;
	border-bottom: 1px dotted #334270;
}

.qa__list dd {
	display: none;
	padding: .5rem;
	margin-left: 0;
}

.qa__list dt > div,
.qa__list dd > div {
	margin-left: 2.5em;
	text-indent: -2.5em;
}

.qa__q,
.qa__a {
	font-size: 1.25rem;
}
.qa__q {
	color: #334270;
}
.qa__a {
	color: #600;
}

.qa dd .list--num li,
.qa__list dd .list--num li {
	text-indent: 0;
}

/*--- お知らせ ---*/
.news_info{
    margin-bottom: 2.5rem;
}
.news_date{
    margin-right: 2em;
    float: left;
}
.news_conference, .news_request, .news_disaster{
    color: #600;
}

/*--- 機関誌：欧文誌 ---*/
.name-list--25 li {
	float: left;
	width: 25em;
}

/*--- 肝臓専門医制度 ---*/
.menu--specialists ul li {
	margin-bottom: 2.5rem;
}

.menu--specialists ul li a {
	display: block;
	color: #333;
	font-size: 1.25rem;
	padding: 1rem;
	text-align: center;
	text-decoration: none;
}

.menu--specialists ul li:last-child a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 13rem;
}

.menu--specialists ul li a div {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	height: 6rem;
}

.menu--specialists ul li a div:nth-of-type(1) {
	margin-bottom: 1rem;
}

.menu--specialists ul li a img:not(.img-responsive) {
	width: auto;
	height: 5rem;
}

.menu--specialists ul li:nth-of-type(2n+1) a {
	background-color: #ece0e0;
}

.menu--specialists ul li:nth-of-type(2n) a {
	background-color: #f7f7e3;
}

.menu--specialists ul li a:hover {
	box-shadow: 0 .5rem 1rem #c29999;
}

/*--- サイトマップ ---*/
.sitemap dl {
    margin-bottom: 1rem;
}
.sitemap dl dt{
    background-color: #cfe5e8;
    border: 2px solid  #cfe5e8;
    position: relative;
    padding-right: 1.5rem;
}

.sitemap dl dt::after{
    position: absolute;
    content: "＞";
    right: .5rem;
    top: 1rem;
    font-size: 1rem;
}

.sitemap dl dt a{
    color: #333;
    padding: .8rem 1rem;
    display: block;
}

.sitemap dl dt:hover{
    border: 2px solid  #cfe5e8;
    background-color: #fff;
}

.sitemap dl dd ul.list--sq ul{
    margin-left: 0;
}

.sitemap dl dd ul.list--sq ul li{
    list-style: none;
    text-indent: -1rem;
    margin-left: 1rem;
}

.sitemap dl dd ul.list--sq ul li:before{
    content: "-";
    margin-right: .5rem;
    width: 1rem;
}

.key-icon::after{
    background: url(../img/icon_key.png) no-repeat ;
    content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-size: contain;
	vertical-align: middle;
	margin-left: .5rem;
}

@media print, screen and (min-width: 900px) {
    .sitemap:nth-of-type(3n+1),
    .sitemap:nth-of-type(3n+2){
        width: 30%;
        margin-right: 5%;
    }
    
    .sitemap:nth-of-type(3n){
        width: 30%;
    }
}

@media only screen and (max-width: 899px){
    .sitemap{
        width: 100%;
    }
}

/*--- リンク ---*/
.link--bnr{
    max-height: 45px;
    max-width: 100%;
}


/*--- 肝臓専門医専攻研修登録のご案内 ---*/
.training_reg table{
    width: 100%;
}
.training_reg table th{
    width: 2rem;
    text-align: center;
}
.training_link > .btn{
    background-color: #cfe5e8;
    color: #333;
    border: 1px solid #ccc;
}
.training_link > .btn:hover{
    background-color: #fff;
    border: 1px solid #cfe5e8;
}

/*--- わかりやすい肝移植 ---*/
.trans-box section {
    margin: 1.5rem auto;
}
.trans-1st > div {
    display: none;
}
.trans-1st .btn {
    background-color: #f7f7e3;
    color: #600;
    border: 1px solid #ccc;
    cursor: pointer;
}
.trans-bfr {
    margin-bottom: 1.5rem;
}
.trans-1st .btn,
.trans-bfr .btn {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.trans-bfr ul li:not(:last-child) {
    margin-right: 4rem;
}
.trans-box .title--sec3 {
    font-size: 1.3rem;
}
.trans-box .title--sec3 a:not(:hover) {
    color: #334270;
}
.trans-disease figure figcaption {
    margin-bottom: .5rem;
}
.trans-abbr {
    margin-bottom: 2rem;
}
.trans-abbr dd li span {
    display: inline-block;
    width: 4.5rem;
}

@media print, screen and (min-width: 900px) {
    .trans-bfr ul {
        flex-wrap: wrap;
        display: flex;
    }
    .diag-recipient {
        display: flex;
        flex-wrap: wrap;
    }
    .diag-recipient > ul {
        margin-right: 8rem;
    }
    .trans-disease figure {
        margin-bottom: 3rem;
    }
}
@media only screen and (max-width: 899px) {
    .diag-recipient > ul {
        margin-bottom: 2rem;
    }
    .trans-disease figure {
        margin-bottom: 3rem;
    }
}

/*移植実施施設の一覧と責任者・相談連絡先*/
.facility_name input {
    margin-bottom: .5rem;
}
.facility_list > table {
    margin-bottom: 4rem;
}
.facility_list > .tbl-bdr thead tr th {
    white-space:normal;
}
.facility_list > table td {
    text-align: center;
}
.facility_list > div ul {
    display: flex;
    flex-wrap: wrap;
}
.facility_list > div ul.facility_type li {
    text-align: center;
    width: 3rem;
    padding: .5rem;
    margin-right: 1rem;
}
.facility_person01,
.facility_person02 {
    background-color: #eee;
    padding: 0 .5rem;
    margin-right: 1rem;
    border-radius: .1rem;
    border: 1px solid #e8e8e8;
    display: inline-block;
    margin-bottom: .25rem;
}
.facility_person02 {
    margin-left: 2rem;
}
ul li.facility_type01,
ul li.facility_type02,
ul li.facility_type03,
ul li.facility_type04,
ul li.facility_type05 {
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #ccc;
}
.facility_type01 {
    background-color: #EDE6FF;
}
.facility_type02 {
    background-color: #E2F4FF;
}
.facility_type03 {
    background-color: #FFE2DC;
}
.facility_type04 {
    background-color: #FFF4CA;
}
.facility_type05 {
    background-color: #E8FFDB;
}
.facility_etc {
    background-color: #eee;
    padding: .1rem .5rem;
    border-radius: .1rem;
    border: 1px solid #e8e8e8;
}
.facility_etc li {
    display: inline-block;
}
.facility_etc li:first-of-type {
    margin-right: 1rem;
}

@media print, screen and (min-width: 900px) {
    .facility_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /*align-items: center;*/
    }
    .facility_list > table {
        width: calc(100% - 28rem);
    }
    .facility_list > div {
        width: 26rem;
    }
    .facility_list > div ul {
        margin-top: 1.5rem;
    }
}
@media only screen and (max-width: 899px) {
    .facility_list > table {
        margin-bottom: 1rem;
        width: 100%;
    }
    .facility_list > div {
        margin-bottom: 3rem;
    }
    .facility_list > div ul.facility_type {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 1rem;
    }
    .facility_list > div ul li:last-child {
        margin-left: 0;
    }
}

/*--- 会員専用ページ ---*/
.f--login dt {
    width: 6.5em;
    padding: .5rem 0;
}
.f--login dd {
    margin: 0 0 1rem;
}

.f--login input {
    padding: .5rem;
}
.f--login input:focus {
    background-color: #ffefef;
}

::-ms-reveal {
    display: none;
}

.f--login__pwd {
    position: relative;
}
.f--login__pwd .toggle-pass {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
}

.btn-logout {
    margin-top: -2rem;
}
.btn-logout .btn {
    margin: 0 0 .5rem auto;
    line-height: 1;
    padding: 1rem 1.5rem;
}

@media only screen and (max-width: 899px) {
    .memberonly > div {
        width: 100%;
    }
    
    .btn-logout {
        margin: 0;
    }
}

/*--- 委員会活動 ---*/
.com--tbl td .month {
    width: 2.3rem;
    text-align: right;
    display: inline-block;
}

/*--- J-OSLER-H ---*/
.j-osler-info {
    border: 1px solid #600;
	margin: 3rem 0 4rem;
}
.j-osler-info__title {
    background-color: #600;
    color: #fff;
    padding: 1rem 1.5rem;
    font-size: 1.25rem;
	line-height: 1;
}
.j-osler-info dl {
    padding: 1.5rem 2rem;
    height: 21rem;
    overflow-y: scroll;
}

.j-osler-kiyaku {
	justify-content: flex-end;
	column-gap: 1rem;
}

@media only screen and (max-width: 899px) {
    .j-osler-info dl {
        height: 18rem;
    }
}

/*--- 肝臓リハビリテーション指針 ---*/
@media print, screen and (min-width: 900px) {
    .shaho-img img {
        width: 60%;
    }
}
@media only screen and (max-width: 899px) {
    .about--att th {
        width: 3em;
    }
}


/*--- 教育講演会 ---*/
.kouenkai--henko td {
    width: 120px;
    text-align: center;
}
.kouenkai--arrow {
    font-size: 2.5rem;
    margin-left: 3rem;
}
.kouenkai--e-learn td:nth-child(odd) {
    background-color: #F3E3E3;
}
.kouenkai--e-learn td:nth-child(even) {
    background-color: #E4EDF0;
}


/*--- 奈良宣言 ---*/
.nara-inner {
	font-size: calc(16px * .9);
	line-height: 1.7;
}
.nara--sec1 {
  position: relative;
  width: calc(100% - 50px);
  margin-bottom: 1em;
  padding-left: 50px;
  font-weight: bold;
  color: #AF1414;
  border-top: 2px solid #A59641;
  border-bottom: 2px solid #A59641;
}
.nara--sec1::before {
  position: absolute;
  top: 8px;
  left: 19px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #AF1414;
  content: '';
}
.nara-inner h2 {
    margin: 1.5em 0;
    padding: 0.4em 1em;
    font-size: 110%;
    background: #DDD2A8;
}
.nara-inner h2.nara--sec2 {
  margin: 2em 0 1em;
  padding: 5px 10px;
  font-size: 120%;
  font-weight: bold;
  background: #fff;
  border: 2px solid #A59641;
}
div.nara_waku {
  border:1px solid #999999;
  border-radius: 10px;
  background-color: #F9F3DB;
  padding: 0.5em 1em;
  margin: 1em 0 2em;
}
.num_maru1 dt{
  float:left;
	margin: 0;
}
.num_maru1 dd{
  margin: 0 0 .25em 1.5em;
}

@media print, screen and (min-width: 900px) {
	.nara-inner {
		width: 45.8em;
		margin: 0 auto;
	}
	.nara--sec1 {
		height: 44px;
		font-size: 30px;
		line-height: 44px;
	}
	.nara-shiryo {
		gap: 2rem 0;
	}
	div.nara_waku ul.list--disc {
		margin-left: 1.5em;
	}
}
@media only screen and (max-width: 899px) {
	.nara--sec1 {
		font-size: 22px;
		padding-left: 30px;
	}
	.nara--sec1::before {
		top: 7px;
		left: 7px;
		width: 20px;
		height: 20px;
	}
	.nara-shiryo {
		gap: 2rem;
		text-align: center;
	}
}


/*--- お問合わせ ---*/
@media print, screen and (min-width: 900px) {
	.inquiry-size {
		margin-left: 1.5rem;
	}
	.inquiry-size table {
		width: 72%;
	}
}
@media only screen and (max-width: 899px) {
	.inquiry-size table {
		width: 100%;
	}
}