@charset "utf-8";
/* CSS Document */

#lower-image {
	background: url(../../../images/main_image.jpg) center -150px;
	background-size: cover;
}

#main-contents #chart {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	
	-webkit-align-items: stretch;
	-moz-align-items: stretch;
	-ms-align-items: stretch;
	align-items: stretch;
		
	margin-top: 40px;
	margin-bottom: 120px !important;
	overflow: visible;
}

#lower-contents #main-contents #acute {
	display: none;
	width: 30px;
	padding: 20px 10px;
	background-color: #555;
	text-align: center;
	vertical-align: top;
	border-radius: 5px;
}

#lower-contents #main-contents #acute span {
	color: #fff;
	font-size: 18px;
	font-size: 1.8rem;
	letter-spacing: 0.5px;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

@media screen and (min-width: 768px) {
	#lower-contents #main-contents #acute {
		display: block;
	}
}


/* ----------------------------------------------------------------- */

.label_description {
	
}

.label_description > * {
	margin-top: 8px;
}

.label_description > *:first-child {
	margin-top: 0;
}

.label_description__item {
	display: flex;
	align-items: flex-start;
	font-size: 1.2rem !important;
	line-height: 1.8 !important;
}

.label_description__icon {
	width: 1.2em;
	height: 1.2em;
	margin-right: 10px;
	margin-top: 0.3em;
	background-color: currentColor;
	border-radius: 50%;
	flex-shrink: 0;
}

.label_description__txt {
	font-size: inherit !important;
	line-height: inherit !important;
}

.icon_A {
	color: #ff5e6d;
}

.icon_B {
	color: #ffab3e;
}

.icon_C {
	color: #8ece40;
}

.icon_D {
	color: #2da7c4;
}

.label_description .note {
	font-size: 1.1rem;
}

@media screen and (min-width: 768px) {
	.label_description {
		display: none;
	}
}

.ward-contents__icons {
	position: absolute;
	left: 0;
	display: flex;
	justify-content: flex-end;
	width: 100%;
	transform: translateY(-50%);
}

@media screen and (min-width: 768px) {
	.ward-contents__icons {
		display: none;
	}
}

.ward-contents__icons [class*=icon_] {
	display: block;
	width: 15px;
	height: 15px;
	margin-right: 8px;
	background-color: currentColor;
	border-radius: 50%;
}

.ward-contents__icons .icon_A {
	
}

.ward-contents__icons .icon_B {
	
}

.ward-contents__icons .icon_C {
	
}

.ward-contents__icons .icon_D {
	
}

/* ----------------------------------------------------------------- */


#main-contents #ward-contents {
	width: 100%;
	margin-left: 0;
}

@media screen and (min-width: 768px) {
	#main-contents #ward-contents {
		width: 60%;
		margin-left: 30px;
	}
}



#main-contents #ward-contents li {
	position: relative;
	width: 100%;
	margin: 0 0 20px 0;
	border: 1px solid #555;
	border-radius: 5px;
	list-style: none;
	line-height: 1.5;
}

#main-contents #ward-contents sup {
	font-size: 1rem;
}

#main-contents #ward-contents small {
	display: block;
	font-size: 1.1rem;
	line-height: 1.5;
}

#main-contents #ward-contents * + small {
	margin-top: 7px;
}

#main-contents #ward-contents li:last-child {
	margin-bottom: 0;
}

#main-contents #ward-contents li a {
	position: relative;
	display: block;
	padding: 20px 20px 20px 45px;
	font-size: 1.5rem;
	text-decoration: none;
	transition: all 0.15s ease-in-out;
}

@media screen and (min-width: 768px) {
	#main-contents #ward-contents li a {
		font-size: 1.8rem;
	}
}

#main-contents #ward-contents li a:before {
	position: absolute;
	left: 15px;
	top: 0;
	bottom: 0;
	content: "";
	width: 1.0em;
	height: 1.0em;
	margin: auto;
	background-color: #555;
	background-image: url("../../../../../common/images/arrow_round.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 80%;
	border-radius: 50%;
	transition: all 0.15s ease-in-out;
}

@media screen and (min-width: 768px) {
	#main-contents #ward-contents li a {
		font-size: 1.8rem;
	}
}

#main-contents #ward-contents li a:hover {
	color: var(--color-link);
}

#main-contents #ward-contents li a:hover:before {
	background-color: var(--color-link);
}

#main-contents #ward-contents dt a {
	padding: 5px 0px 5px 45px;
}

#main-contents #ward-contents .acute-arrow:before {
	display: none;
	position: absolute;
	top: 15px;
	left: -31px;
	content: "";
	width: 24px;
	height: 23px;
	background: url("../images/arrow_right.png") left center no-repeat;
	background-size: 24px 23px;
}

@media screen and (min-width: 768px) {
	#main-contents #ward-contents .acute-arrow:before {
		display: block;
	}
}



#main-contents #ward-contents li .side {
	display: none;
	position: absolute;
	top: 0;
	right: -48%;
	width: calc(48% - 40px);
	padding: 15px;
	box-sizing: border-box;
	border: 1px dashed rgba(0,0,0,0.3);
	border-radius: 6px;
}

@media screen and (min-width: 768px) {
	#main-contents #ward-contents li .side {
		display: block;
	}
}

#main-contents #ward-contents #local dl,
#main-contents #ward-contents #local2 dl {
	margin: 0 20px 20px;
	padding: 10px;
	border: 1px solid #555;
}

#main-contents #ward-contents li .side dt,
#main-contents #ward-contents #local dt,
#main-contents #ward-contents #local2 dt {
	margin-bottom: 5px;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 20px;
	line-height: 2.0rem;
}

#main-contents #ward-contents li .side dt {
	font-weight: 600;
}

#main-contents #ward-contents li .side dt:last-child,
#main-contents #ward-contents #local dt:last-child,
#main-contents #ward-contents #local2 dt:last-child {
	margin-bottom: 0;
}

#main-contents #ward-contents li .side dd,
#main-contents #ward-contents #local dd,
#main-contents #ward-contents #local2 dd {
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 20px;
	line-height: 2.0rem;
}

#main-contents #ward-contents #local .side dl,
#main-contents #ward-contents #local2 .side dl {
	margin: 0;
	padding: 0;
	border: none;
}

#main-contents #ward-contents #local:after,
#main-contents #ward-contents #care:after {
	display: none;
	position: absolute;
	top: 10px;
	right: -31px;
	content: "";
	width: 20px;
	height: 20px;
	background: url("../images/arrow_left.png") right center no-repeat;
	background-size: contain;
}

@media screen and (min-width: 768px) {
	#main-contents #ward-contents #local:after,
	#main-contents #ward-contents #care:after {
		display: block;
	}
}


#main-contents #ward-contents #local,
#main-contents #ward-contents #local2,
#main-contents #ward-contents #return {
	margin-bottom: 40px;
}

#main-contents #ward-contents .more {
	position: absolute;
	right: 0;
	bottom: -25px;
	margin-right: 40px;
	padding: 5px 30px 0px 0;
	background: url("../images/arrow_down.png") right top no-repeat;
	background-size: contain;
	font-size: 0.9em;
}

@media screen and (min-width: 768px) {
	#main-contents #ward-contents .more {
		bottom: -34px;
	}
}

#main-contents #ward-contents .under {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -85px;
	margin: auto;
	font-size: 13px;
	font-size: 1.3rem;
	text-align: center;
	
	padding: 15px;
	box-sizing: border-box;
	border: 1px dashed rgba(0,0,0,0.3);
	border-radius: 6px;
	
}

@media screen and (min-width: 768px) {
	#main-contents #ward-contents #local:after,
	#main-contents #ward-contents #care:after {
		display: block;
	}
}

#main-contents #ward-contents .under:before {
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	bottom: 100%;
	width: 20px;
	height: 20px;
	margin: auto;
	background: url("../images/arrow_top.png") center center no-repeat;
	background-size: contain;
	content: "";
}




@media only screen and (max-width: 1120px) {
	
	#main-contents #ward-contents li .side {
		right: -40%;
		width: calc(40% - 40px);
	}
	
}

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

}

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

}