@charset "utf-8";
/*===========================================
	word.css 
=============================================*/
#contents figure {
    margin: 2em 0;
}

#contents span.textLink {
    background: url(/support/share/images/arrow_black.gif) no-repeat;
    background-position: 0 6px;
    padding-left: 1em;
    display: inline-block;
}

#contents figure img {
    width: 100%;
}

#contents figure a:focus, #contents figure a:hover, #contents figure a:active {
    opacity: 0.5;
	outline: none;

}

#contents figure.selectBtn {
    border: 4px solid #CCC;
	padding: 0.4em 0.4em 0;
}

#contents figure a {
    color: #333333;
}


#sp #selectArea article a:focus, #sp #selectArea article a:hover, #sp #selectArea article a:active {
    opacity: 0.5;
}

/* 2023/09 accessibility */

html {
	font-size: 0.813rem;
}

.mod-mainContentContainer {
	font-size: 1rem;
}

#contents .titleWrap {
	display: block;
	width: 100%;
	margin-bottom: 2em;
	border-left: 14px #999 solid;
}

#contents .titleWrap h1 {
	padding-left: 10px;
	font-size: 1.846rem;
	font-weight: normal;
	border-bottom: 1px solid #999;
}

#contents .titleWrap .titleWrap_link {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: 1em;
	margin-top: 10px;
}

#contents .titleWrap .titleWrap_link a.textLink {
	margin-right: 0;
	padding: 0 10px;
	margin-left: 10px;
	background-position: 0 6px;
}

#contentsArea {
	width: 910px;
    margin: 30px auto 0px auto;
}

#contents ul.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 2em 0;
	list-style: none;
}

#contents ul.flex li {
    width: 200px;
}

#contents ul.flex li a {
    border: 4px solid #CCC;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1em 0.5em 0;
}

#contents ul.flex li a:hover {
	opacity: 0.6;
	text-decoration: none;
}

#contents ul.flex li .Button_text {
	min-height: 3.7em;
    padding: 0 0 0 0.8em;
    background: url(/share/images/arrow_black.gif) no-repeat left 0.4em;
	color: #333333;
}

#contents ul.flex li .Button_image img {
    width: 180px;
}

#contents section {
	margin-top: 4em;
}

#contents h2.title {
	font-size: 1.29151rem;
}

#contents .knowledge {
	margin-left: 1em;
}

#contents .linkBtn {
	margin: 1em 0 2em;
}

#contents .linkBtn a {
	border: 4px solid #CCC;
    padding: 0.4em 0.4em 0;
	display: block;
	color: #333333;
}

#contents .linkBtn a:hover {
	opacity: 0.6;
	text-decoration: none;
	color: #333333;
}

#contents .linkBtn img {
	width: 100%
}


@media(max-width:640px){
	#contentsArea {
		width: 100%;
		margin: 0;
	}
	
	#contents .titleWrap .titleWrap_link {
		flex-wrap: wrap;
		margin-left: 0;
	}
	
	#contents ul.flex li {
		max-width: 200px;
		width: 100%;
	}
	
	#contents ul.flex li .Button_image img {
    	max-width: 180px;
		width: 100%;
	}
	
	#contents .knowledge {
		margin-left: 0;
	}
}

@media(max-width: 470px){
	
	#contents ul.flex {
		justify-content: space-around;
		gap: 1em 0;
	}
	
	#contents ul.flex li {
		width: 46%;
	}
	
	#contents ul.flex li .Button_text {
		min-height: 4.5em;
	}
}