@charset "utf-8";

/*--from severe--*/
.llinkArea h6{
	font-size:2.6rem;
	margin-bottom:0.1em;
}
.llinkArea p{
	margin-bottom:0.8em;
}

.llinkArea li{
	display:flex;
	align-items:flex-end;
	margin-bottom:5%;
}
.llinkArea li:nth-child(1){
	align-items:center;
	padding-top:6%;
}
.llinkArea li:nth-child(2n){
	flex-direction:row-reverse;
}
.llinkArea li img{
	margin-right:6%;
}
.llinkArea li:nth-child(2n) img{
	margin-left:5%;
	margin-right:0;

}
.llinkArea .btn{
	width:70%;
}

@media screen and (max-width:768px){
	.llinkArea h6{
		font-size:2.2rem;
		margin-bottom:0.3em;
	}
	.llinkArea li{
		flex-wrap:wrap;
	}
	.llinkArea li img{
		width:40%;
	}
	.llinkArea li div{
		width:57%;
	}
	.llinkArea li > p{
		width:100%;
		margin-top:5%;
		font-size:1.2rem;
	}
	.llinkArea li img{
		margin-right:3%;
	}
	.llinkArea li:nth-child(2n) img{
		margin-left:3%;
	}
	.llinkArea .btn{
		width:100%;
	}
}

.topArea .btnBox{
	margin-top:2em;
}

.resultBtn{
	background:#1BA0B2;
	border-color:#1BA0B2;
}

main section hr{
	height:1px;
	background-color:#002B49;
	border:0;
	margin-bottom:10px;
}


@media screen and (min-width:769px){
	.resultBtn{
		margin-left:60px;
	}
	.resultBtn:hover{
		color:#1BA0B2;
		background:white;
	}
	.topArea{
		position:relative;
	}
	.topArea .btnBox{
		display:flex;
		justify-content:center;
	}
	.topArea .btn{
		width:320px;
	}
	

	
	.llinkAreaSec{
		padding-bottom:64px;
		margin-bottom:0;
	}
	

	.convLinkArea::before{
		content:none;
	}
}

@media screen and (max-width:768px){
	.topArea .btn{
		width:100%;
		margin-bottom:5%;
	}
	
	.topArea .bgBox2Sp{
		padding-top: 10%;
		padding-bottom: 1%;
	}
}

.drawAnnotation{
	font-size:14px;
	color:#333333;
	display:block;
	text-align:center;
	margin-left:-20%;
	margin-right:-20%;
	margin-top:4em;
}

#questionArea{
	margin-top:2%;
}

#questionArea > section.questionInner{
	padding:0;
	position:relative;
	overflow:hidden;
	margin-bottom:0;
	border-top:1px solid #CFCFCF;
	border-bottom:1px solid #CFCFCF;
}
section.questionAnnotation{
	background:none;
	padding-bottom:0;
	max-width:960px;
	margin-left:auto;
	margin-right:auto;
}


#questionArea .back{
	width:512px;
	height:654px;
	position:relative;
}
#questionArea .back .drawAnnotation{
	position:absolute;
	bottom:44px;
	left:0;
	right:0;
	margin:0;
	color:#F9423A;
}

.attention{
	padding-top:1em;
	margin-bottom:0;
}
.attention p{
	text-indent:-1em;
	padding-left:1em;
}

@media screen and (min-width:769px){
	#questionArea > section.questionInner{
		width:900px;
		position:relative;
	}
}


#SVG_Container{
}

#bg_lungs {
	width: 100%;
	margin-left:0;
	height: 0;
	padding-bottom:100%;
	margin-top:9%;
	position: absolute;
	background-image: url("../images/lungprint/blank_lungs_grey_final.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 40% center;
	z-index: 0;
	opacity: 0;
}
#bg_lungs1{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	font-size:2rem;
	font-weight:600;
	width:95%;
	text-align:center;
	opacity:0;
}

svg{
	margin: 0px auto;
	position: absolute;
	width: 100%;
	height: 75%;
	top: 10%;
	left: 0;
	z-index: 1;
	isolation: isolate;
}

#questionArea #question_holder {
	background:white;
	border-right:none;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	padding:0;
	z-index:10;
	width:320px;
	transition:right 1s ease;
}


#questionArea #question_holder > .questionBorder{
	display:none;
}


#questionArea .questionBox{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:white;
	display:none;
}
#questionArea .questionBox .questionNo{
	margin-top:60px;
}
#questionArea .questionBox .question_container{
	margin-top:8px;
	margin-bottom:11px;
}

#questionArea .questionBox .button_holder{
	width:100%;
}

.answer_button {
	width: 100%;
	text-align:center;
	padding:22px 0;
	background:white;
	border:none;
	border-bottom:1px solid #CFCFCF;
	cursor:pointer;
	font-family:inherit;
	font-size:100%;
	color:inherit;
	position:relative;
	height:70px;
}
.answer_button:first-child{
	border-top:1px solid #CFCFCF;
}
.answer_button:hover{
	background-color:#EBF5F6;
}
.answer_button.answer_2l{
	height:88px
}


#questionArea .questionBox .backBtn{
	border-bottom:1px solid #CFCFCF;
	width:100%;
	padding:22px 0;
	text-align:center;
	cursor:pointer;
	display:block;
	padding-right:20px;
}

#questionArea .questionBox .backBtn::before{
	content:"";
	display:inline-block;
	background:url(../images/lungprint/icon_back.png) no-repeat;
	width:24px;
	height:24px;
	margin-right:1em;
	margin-bottom:-6px;
	margin-top:calc(1em - 24px);
}

#questionArea .questionBox .backBtn:hover{
	background-color:#EBF5F6;
}

#question_holder.stepping .answer_button, #questionArea #question_holder.stepping .backBtn{
	cursor:default;
	background:none;
	position:relative;
}
#question_holder.stepping .answer_button::after, #questionArea #question_holder.stepping .backBtn::after{
	content:"";
	display:block;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.5);
	position:absolute;
	left:0;
	top:0;
}
#question_holder.stepping .answer_button.selected::after{
	content:none;
}
#question_holder.stepping .answer_button.selected{
	background-color:#EBF5F6;
}





#progress_holder{
	position:absolute;
	bottom:20%;
	width:100%;
	height:64px;
	opacity:0;
}


#progress_indicator{
	width:64px;
	height:64px;
	margin-left: auto;
	margin-right:auto;
	position:relative;
}
#progress_indicator .progress_on, #progress_indicator .progress_off{
	display:block;
	width:100%;
	height:100%;
	background-image: url("../images/lungprint/progress1.png");
	background-size:100%;
	background-repeat: no-repeat;
	background-position: center;
	position:absolute;
	left:0;
	top:0;
}
#progress_indicator .progress_off{
	background-image: url("../images/lungprint/progress2.png");
}

.questionBorder{
	display:none;
}

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

	#questionArea .questionBox .question_container{
		opacity:1 !important;
		font-weight:600;
	}
	#questionArea .questionBox .questionNo{
		opacity:1 !important;
	}
	#questionArea .questionBox .button_holder {
	}

}

@media screen and (max-width:768px){
	#part_2{
	}
	#questionArea svg{
		width:40%;
		height:60%;
		margin-left:30%;
		top:0;
	}
	
	.questionInner::before{
		content:"";
		display:block;
		width:1px;
		height:0;
		padding-bottom:75%;
	}
	
	#bg_lungs{
		width: 40%;
		padding-bottom: 40%;
		margin-left: 30%;
		margin-top: 2%;
	}
	#bg_lungs1{
		top:0;
		margin-top:23%;
		
	}
	#progress_indicator{
		width:5%;
		height:0;
		padding-bottom:5%;
	}
	
	#questionArea .back{
		width:100%;
		height:0;
		padding-bottom:75%;
		position:absolute;
		left:0;
		top:0;
	}
	#questionArea .back .drawAnnotation{
		bottom:auto;
		top:0;
		margin-top:42%;
		margin-left:5%;
		margin-right:5%;
	}
	#questionArea #question_holder{
		width:100%;
		position:relative;
		left:0;
		top:0;
		right:0;
		height:100%;
		border:none;
		background:none;
	}
	#questionArea .questionBox{
		background:none;
		position:relative;
	}
	#questionArea .questionBox .questionNo{
		margin-left:5%;
		margin-top:-20%;
		font-size:1rem;
	}
	#questionArea .questionBox .question_container{
		margin-left:5%;
		margin-right:5%;
		font-size:1.2rem;
		margin-top:3px;
		margin-bottom:3px;
	}
	
	#questionArea .questionBox .button_holder{
		position:relative;
		top:auto;
		bottom:0;
		width:100%;
		font-size:1.2rem;
	}
	.answer_button, #questionArea .questionBox .backBtn{
		padding:1em 0;
	}
	.answer_button, .answer_button.answer_2l{
		height:auto;
	}
	
	
	#progress_holder {
		top:0;
		bottom:auto;
		margin-top:42%;
		width:100%;
		left:0;
		transform:translate(0,-50%);
	}

	#progress_indicator	{
		margin-left: auto;
		margin-right:auto;
	}
	
	#questionArea > section.questionAnnotation, #terminationScreen > section.questionAnnotation{
		padding-bottom:3em;
	}
}


#summaryScreen{
	width:100%;
	position:relative;
	margin-top:2%;
}

#summaryScreen > section.resultSection{
	position:relative;
	padding-bottom:64px;
	margin-bottom:0;
}

#resultSave{
	margin:auto;
	width:320px;
}
#resultPrint{
	margin:auto;
	width:320px;
}
.resultLayout{
}
.resultLayout::after{
	content:"";
	display:block;
	clear:both;
}
.resultLayout > li{
}
.resultLayout > li:last-child{
}

.resultLayout #pictureBox{
	position:relative;
	width:100%;
	height:0;
	padding-bottom:75%;
	height:425px;
	padding-bottom:0;
}

.resultLayout svg{
	position:static;
	height: auto;
}

.resultLayout .lpTitleArea{
	width:512px;
	margin: auto;
	padding-top:64px;
}
.resultLayout .lpTitleArea h3{
	margin-bottom:1em;
}

.resultLayout .answerArea{
	margin-top:64px;
}

.resultLayout .answerArea h2{
	margin-top:64px;
}
.resultLayout .answerArea > ul > li{
	margin-bottom:48px;
}



.resultLayout .answerArea ul dt{
	margin-bottom:0.5em;
	color:#F9423A;
	padding:24px 0;
	border-top:1px solid #F9423A;
	border-bottom:1px solid #F9423A;
	font-weight:600;
}

.resultLayout .answerArea ul dd{
	margin:24px 0;
}

.resultLayout .answerArea .btnBox{
	display:flex;
	justify-content:space-between;
	margin-bottom:32px;
}


#summaryScreen > section.resultArea{
	background:none;
	text-align:center;
}
.resultArea{
	width:960px;
	margin-left:auto;
	margin-right:auto;
}
.resultArea h3{
	font-size:180%;
	margin-bottom:1em;
	color:#333333;
}
.resultArea .btnBox{
	margin-bottom:3em;
}
.resultArea .annotation{
	text-align:left;
	margin-left:auto;
	margin-right:auto;
}
.resultArea .big{
	margin-bottom:0.7em;
}

.saved{
	color:#F9423A;
	background:white;
	width:320px;
}

@media screen and (min-width:769px){
	.saved:hover{
		color:#F9423A;
		background:white;
		width:320px;
	}
}



#terminationScreen{
	position:relative;
	margin-top:2%;
}

#terminationScreen .lpTitleArea{
}

.terminationArea{
	padding-bottom: 632px;
	margin-bottom: 0;
}
#terminationScreen topImg img{
	width:512px;
}

@media screen and (max-width:768px){
	.resultLayout #pictureBox{
		height:0;
		padding-bottom:100%;
	}
	.terminationArea{
		padding-bottom: 0;
	}
	.terminationArea .lpTitleArea{
		padding:0 3%;
	}
	
	.terminationArea .lpTitleArea .topImg{
		width:80%;
		margin:auto;
	}
	.resultLayout .lpTitleArea{
		width:80%;
		margin-top:3%;
		padding-top:0;
	}
	.resultLayout .answerArea{
		margin-top:3%;
	}
	.resultLayout .answerArea > p, .resultLayout .answerArea > hr, .resultLayout .answerArea .btnBox{
		position:relative;
		z-index:1;
	}
	#pictureBox{
		
	}
	#resultSave{
		width:100%;
	}
	.saved{
		width:100%;
	}
	#resultPrint{
		display:none;
	}
}




#terminationScreen{
	width:auto;
	position:relative;
}

.terminationArea .lpTitleArea{
}

.terminationArea .lpTitleArea .note{
	font-weight:bold;
	padding-top:50px;
	font-size:140%;
}

.terminationArea .lpTitleArea .topImg{
	width:550px;
	margin:auto;
	padding-bottom:1em;
}
@media screen and (min-width:769px){
	#summaryScreen::before, #terminationScreen::before{
		content:"";
		display:block;
		width:900px;
		position:absolute;
		left:50%;
		top:0;
		margin-left:-450px;
		height:1px;
		background:#CFCFCF;
	}
}
@media screen and (max-width:768px){
	.terminationArea .lpTitleArea{
		margin-left:-3.5%;
		margin-right:-3.5%;
		padding-left:3%;
		padding-right:3%;
	}
	.terminationArea .lpTitleArea .note{
		margin:auto;
		font-size:120%;
		line-height:1.3;
	}
	.terminationArea .lpTitleArea .topImg{
		width:90%;
	}
}

#frame_template{
	display:none;
}

.llinkArea{
}

.llinkArea h2{
	font-weight:600;
}
.llinkArea li{
	position:relative;
}
.llinkArea li:nth-child(2n){
	flex-direction:initial;
}
.llinkArea li img{
	margin-right:14%;
	width:230px;
}
.llinkArea li:nth-child(2n) img{
	margin-left:0;
	margin-right:14%;
}
.llinkArea li > div{
	width:100%;
}
.llinkArea .btn{
	width:100%;
}
.llinkArea li:nth-child(2){
	padding-top:6%;
}
.llinkArea li:nth-child(2)::before{
	content:"";
	display:block;
	height:1px;
	width:900px;
	background:#1BA0B2;
	left:-100px;
	position:absolute;
	left:-100px;
	top:0;
}

.llinkArea li:nth-child(1)::before{
	content:"";
	display:block;
	height:1px;
	width:900px;
	background:#1BA0B2;
	left:-100px;
	position:absolute;
	left:-100px;
	top:1px;
}

@media screen and (max-width:768px){
	.llinkArea li{
		display:block;
		text-align:center;
		margin-bottom:15%;
	}
	.llinkArea li img{
		margin-left:0;
		margin-right:0;
		width:50%;
		margin-bottom:5%;
	}
	.llinkArea li:nth-child(2n) img{
		margin-left:0;
		margin-right:0;
	}
	.llinkArea li div{
		width:auto;
	}
	.llinkArea li div p{
		text-align:left;
		margin-bottom:10%;
		font-size:1.2rem;
	}
	
	.bgLungLinkSp{
		position:relative;
	}
	.bgLungLinkSp::before{
		content:"";
		display:block;
		position:absolute;
		width:100%;
		height:0;
		padding-bottom:139.375%;
		background:url(../images/lungprint/link_bg.png) no-repeat;
		background-size: 100%;
		margin-top:12%;
	
}