@charset "utf-8";

.treatment h3{
	font-size:2.8rem;
	color:#F9423A;
	margin-bottom:0.35em;
}

.treatment h6{
	color:#F9423A;
	margin-bottom:0.5em;
}

.treatment h6.sub{
	font-size:1.4rem;
	margin-bottom:0.5em;
	border:1px solid #F9423A;
	background:white;
	padding:4px 8px;
	text-align:center;
	font-weight:300;
}

.treatment ul{
	margin-bottom:29px;
}

.changeLinkArea{
	text-align:center;
}
.changeLinkArea a{
	position:relative;
	color:#F9423A;
	font-size:1.2rem;
	font-weight:600;
	text-decoration:underline;
}

.changeLinkArea img{
	margin-left:20px;
	position:relative;
	top:calc(1em - 32px);
	width:64px;
	position:absolute;
}

.textlink {
	margin-top: -3%;
	margin-bottom: 3%;
}
.textlink a {
	color: #F9423A;
	text-decoration: underline;
	margin-left: 10px;	
	display: block;	
	position: relative;	
}

.textlink a:before {
	content: '';
	width: 5px;
	height: 10px;
	display: block;
	position: absolute;	
	top:30%;
	left: -10px;
	background: url(../images/asthma/arrow_red.png);
	background-size: 100% auto;
	background-position: 0 0;
}

.treatment .icon-list {
	border-radius: 	15px;
	border: 2px	solid #5C9DB0;
	background: #FFF;
	display: flex;
	align-items: stretch;
	margin-bottom: 24px;	
}

.treatment .icon-list.red {
	border: 2px	solid #F9423A;
}

.treatment .icon-list > dt {
	display: flex;	
	align-items: center;
	flex-wrap: wrap;
	background: #5C9DB0;
	width: 20%;	
	text-align: center;	
	color: #FFF;
	font-size: 1.4rem;	
	padding: 25px 0;
	border-radius: 	13px 0 0 13px;			
}

.treatment .icon-list.red > dt {
	background: #F9423A;
		
}

.treatment .icon-list > dt img {
	display: block;	
	width: 70%;	
	margin: 0 auto;	
}

.treatment .icon-list > dt p {
	width: 100%;	
	margin: 0;	
}

.treatment .icon-list > dd {
	display: flex;	
	align-items: center;
	width: 80%;	
	padding: 15px;	
}

.treatment .icon-list > dd dt {
	color: #3EA0B2;
	font-weight: bold;	
}

.treatment .icon-list.red > dd dt {
	color: #F9423A;

}

.treatment .icon-list > dd dd {
	color: #002B49;
	margin-bottom: 10px;	
}

.treatment .icon-list > dd dd:last-child {
	margin-bottom: 0;	
}

.treatment .add-treatment {
	background: #F9423A;
	color: #FFF;
	text-align: center;	
	font-size: 1.4rem;
	padding: 4px 0;	
	border-radius: 15px;	
	margin-top: 4.5%;
}

.treatment .add-treatment span {
	position: relative;	
	display: inline-block;	
}

.treatment .add-treatment span:before {
	content: '';
	width: 10px;
	height: 11px;
	display: block;
	position: absolute;	
	top:20%;
	left: -15px;
	background: url(../images/asthma/arrow_under.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}

.treatment .add-treatment span:after {
	content: '';
	width: 10px;
	height: 11px;
	display: block;
	position: absolute;	
	top:20%;
	right: -15px;
	background: url(../images/asthma/arrow_under.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}

#voice .voice {
	display: flex;	
	margin-bottom: 20px;	
}

#voice .voice .image {
	width: 25%;	
}

#voice .voice .image img {
	display: block;	
	width: 67%;	
	margin: 0 auto;	
}

#voice .voice .image p {
	text-align: center;	
	font-size: 	1.1rem;
	padding-top: 5px;
	line-height:1.35;
}
#voice .voice .image p span{
	font-weight:bold;
}

#voice .voice .bubble {
	width: 75%;	
}

#voice .voice .bubble p {
	background: #EEF8FB;
	border-radius: 10px;
	padding: 20px;	
	position: relative;
}

#voice .voice .bubble p:before {
	content: '';
	width: 9px;
	height: 10px;
	display: block;
	position: absolute;	
	top:40%;
	left: -9px;
	background: url(../images/asthma/bubble_l.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}

#voice .voice.right .bubble p:after {
	content: '';
	width: 9px;
	height: 10px;
	display: block;
	position: absolute;	
	top:40%;
	right: -9px;
	background: url(../images/asthma/bubble_r.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 0 0;
}

#stepup h6 {
    color: #F9423A;
    margin-bottom: 0.5em;
}

@media screen and (min-width:769px){
	.changeLinkArea a:hover{
		color:inherit;
	}
}

@media screen and (max-width:768px){
	.textlink {
		margin-top: -8%;
	}

	.treatment .add-treatment span {
		width: 85%;	
	}

	.treatment .add-treatment span:before {
		top:30%;
	}

	.treatment .add-treatment span:after {
		top:30%;
	}

	#voice .voice .image {
		width: 35%;	
	}

	#voice .voice .bubble {
		width: 65%;	
	}

	.changeLinkArea{
		width:95%;
		border:1px solid #F9423A;
		padding:0;
	}

	.changeLinkArea a{
		display:block;
		width:100%;
		padding:6% 5%;
		text-align:left;
		text-decoration:none;
	}

	.changeLinkArea img{
		position:absolute;
		right:1%;
		top:50%;
		width:15%;
		transform:translateY(-50%);
	}

}

.hpserchPopupBack{
	background:black;
	opacity:0.5;
	position:fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	z-index:21;
	display:none;
}
.hpserchPopupClose{
	background:url(../images/understandingthecause/popup_close.png) no-repeat;
	background-size:cover;
	position:absolute;
	right:-16px;
	top:-16px;
	width:32px;
	height:32px;
	cursor:pointer;
	z-index:23;
}
.hpserchPopup{
	position:fixed;
	width:700px;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:22;
	display:none;
}
.hpsearchLinkArea h6{
	padding-right:1em;
}
.bnrLine.popupHide{
	transition:opacity 0.5s;
	opacity:0 !important;
}

@media screen and (max-width:768px){
	.hpserchPopupClose{
		right:0;
		top:0;
		width:10%;
		height:0;
		padding-bottom:10%;
		margin-top:-10%;
	}
	.hpserchPopup{
		width:calc(98%);
		background:#eef8fb;
	}
	.hpserchPopup .hpsearchLinkArea{
		margin-bottom:0;
	}
	.hpserchPopup .hpsearchLinkArea::before{
		content:none;
	}
	.hpserchPopup .hpsearchLinkArea::after{
		left:58%;
	}
}

.exacerbation dl{
	display:flex;
	flex-wrap:wrap;
	font-size:1.2rem;
	margin-bottom: 10px;
}
.exacerbation dl > dt{
	width:9em;
}
.exacerbation dl > dd{
	width:calc(100% - 9em);
}

#wrapper{
	overflow:visible;
}
footer{
	overflow:hidden;
}
.convLinkArea::before{
	width:100vw;
	right:auto;
	left:50%;
	transform:translate(-50%,0);
}

.sub_ttl{
  color: #1BA0B2;
  font-size: 1.8rem;
  padding: 0 10px;
  border-left: #1BA0B2 solid 4px;
  font-weight: 500;
  margin-top:1em;
}

.mb05{
	margin-bottom:0.5em;
}

.annotation{
	font-size:1.2rem;
}

@media screen and (max-width:768px){
	section{
		overflow:hidden;
	}
	.about{
		margin-top:4em;
	}
}

.p-toc__list li{
  position: relative;
}
.p-toc__list li a:before{
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid #1BA0B2;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -5px;
}


.p-toc aside{
display: none;
}


.indent-source{
	display: block;
  text-indent: -3em;
  padding-left: 3em;
}




@media screen and (max-width:768px){
  
  /* 目次 */
  .p-toc{
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 3em;
    overflow: hidden;
    font-size: 1.4rem;
    -webkit-box-shadow: 0px 3px 7px rgba(0,0,0,0.16);
    box-shadow: 0px 3px 7px rgba(0,0,0,0.16);
    background: #fff;
    position: relative;
    border-radius: 10px;
  }
  .p-toc aside{
    content:attr(title);
    background: #1BA0B2;
    color: #fff;
    height: 100%;
    width: 100%;
    display: block;
    text-align: center;
    padding: 8px 0;
    font-size: 16px;
    cursor: pointer;
  }
  
  .p-toc__list{
    padding: 0 8px;/*8px*/
    height: 0;
  }
  
  .p-toc li{
   padding: 8px 10px 8px 20px;
  }
  .p-toc li br{
    display: none;
  }
}

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

	.p-toc{
		position: relative;
	}
	.p-toc::after{
		content:"";
		position: absolute;
		top: 11px;
		right:28px;
		width: 8px;
		height: 8px;
		border: 2px solid;
		border-color:  transparent transparent #fff #fff;
		transform: rotate(-45deg);
	}
	  
	p-toc__list{
		height: 0;
	}

	.page-nav{
		max-width: 768px;
		margin: auto;
		position: -webkit-sticky;
		position: sticky;
		top: 16px;
		z-index: 2;
		height: 0;
	}
}

@media screen and (min-width:769px){
	
	.page-nav{
		max-width: 1200px;
		margin: auto;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 2;
		height: 0;
	}
	.p-toc{
		width: 196px;
	}
	
	.p-toc__list li{
		-webkit-box-shadow: 0px 3px 7px rgba(0,0,0,0.16);
		box-shadow: 0px 3px 7px rgba(0,0,0,0.16);
		font-size: 1.4rem;
		height: 60px;
		letter-spacing: 0;
		background: #fff;
		margin-bottom: 5px;
	}
	.p-toc__list li a{
		color: #42B3BF;
		padding: 5px 10px 5px 20px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		height: 100%;
		transition: all 0.2s;
	}
	
	.p-toc__list li a:hover{
		background: #F9423A;
		color: #fff;
	}
	.p-toc__list li.current a{
		background: #1BA0B2;
		color: #fff;
	}
	.p-toc__list li a:hover:before,
	.p-toc__list li.current a:before{
		border-left-color: #fff;
	}
}

@media screen and (max-width:768px){
	html {
	  scroll-padding-top: 7em;
	}
}

main sup{
	position:relative;
	top:-0.1em;
}