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

/*===========================================
	howto LinkBuds Fit app.css
=============================================*/

#contents > .flex{
	align-items: flex-start;
	padding: 0 1em;
}
#contents > .flex > .pct{
	padding-right: 1em;
	text-align: center;
}

#contents .container{
	margin-right: 1em;
}

#contents .container .s5-list{
	margin-left: 1.5em;
}
#contents .container .s5-list > li{
	margin-bottom: 0;
}

#contents .container p{
	margin: 1em 0 0 0;
}
#contents .container dl{
	margin-top: 30px;
}

#contents .container dl dt ~ dt{
	margin-top: 2em;
}

#contents .linkBtn{
	display: block;
	margin: 0.5em 0 2.5em;
	padding: 0.5em 0.8em;
	background: url(/support/share/images/bg_mod-linkButton.jpg);
	background-size: contain;
	border: solid 1px #CCCCCC;
	box-sizing: border-box;
	border-radius: 5px;
	color: #2f353d;
}

#contents .textarea .btnlist{
	margin-left: 0;
}

#contents button.linkBtn{
	width: 25em;
}

#contents a.linkBtn{
	width: 16.5em;
}
#contents a.linkBtn:hover{
	text-decoration: none;
	opacity: 0.7;
}

#contents .border_box .capArea .textarea{
	margin-left: 2em;
}
#contents .border_box .capArea .textarea p{
	margin: 1em 0;
}

#contents .border_box .capArea .textarea ul.s5-list{
	margin-left: 2.5em;
}
span{
	display: inline-block;
}


@media (min-width: 801px){
	#contents .capArea{
		display: flex;
		width: 88%;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 0;
	}
	#contents .capArea > .pct{
		margin-top: 1em;
	}
	
	#contents .pconly{
		display: block;
	}
	#contents .mqonly{
		display: none;
	}
	
}

@media (max-width: 820px){
	#contents > .flex{
		align-items: center;
		margin-top: 0;
	}
	
	#contents .capArea{
		flex-direction: column;
		align-items: center;
		margin: 2em 0;
	}
	
	#contents > .flex > .pct.top{
		padding-right: 0;
		margin: 0 0 1em 0;
	}
	
	#contents .container{
		margin-right: 0;
	}
	#contents .accordion.type_4 button{
		font-size: 1rem;
	}
	#contents .mqonly{
		display: block;
		margin-bottom: 1em;
	}
	#contents .pconly{
		display: none;
	}
	
	#contents > div.flex.imageArea > div.container > dl > dd > img.mqonly{
		width: 100%;
		max-width: 340px !important;
		height: auto;
	}
	#contents .capArea > .pct{
		text-align: center;
	}
	#contents .capArea > .pct img{
		width: auto;
		max-width: 340px;
		height: auto;
	}
}

@media (max-width: 414px){
	#contents button.linkBtn,
	#contents a.linkBtn{
		width: 100%;
	}
	
	#contents button.linkBtn{
		padding: 0.5em 5px;
	}
	
	#contents .container img.mqonly{
		margin: 1em auto 1.5em;
	}
	
	#contents .modalArea button img{
		width: 60% !important;
		height: auto;
	}
	#contents .modalArea .capArea.flex{
		margin: 10px 0 0 0;
	}
	#contents .modalArea .capArea.flex img{
		width: 56% !important;
		height: auto;
	}
	
	#contents .modalArea .capArea .textarea{
		margin-top: 10px;
		font-size: 0.875rem;
	}
	#contents > div.capArea.flex > div.pct > img{
		width: 100% !important;
	}
	
	#contents .capArea > .pct img{
		max-width: 280px;
		width: 100%;
		height: auto;
	}
	
}

@media (max-width: 320px){
	#contents .modalArea .capArea .textarea{
		font-size: 0.813rem;
	}
}

/* 2025/04/14 追記 */
#contents span.inline {
	display: inline;
	color: #3865e0;
}

#contents span.inline::after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D'%233865e0'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20width%3D'32px'%20height%3D'32px'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20d%3D'M25.6%2C16l-16%2C16l-3.2-3.2L19.1%2C16L6.4%2C3.2L9.6%2C0L25.6%2C16z'%2F%3E%3C%2Fsvg%3E");
}

/* 2025/04/18 追記 */
#contents span.annotation {
    margin-left: 0;
    font-size: 1rem;
}