@charset "utf-8";

#catch {
	border-bottom : 2px solid #ffffff;
	background-color : #f4f0f1;
	box-shadow : 0 0 2px rgba(0, 0, 0, 0.3);
}
#catch > .inner {
	max-width : 976px;
	margin : 0 auto;
	padding : 100px 24px;
	background : url(/support/wp-content/themes/wraymer_faq/top/img/home_vi_img.jpg) 95%
	50% no-repeat;
	background-size : 45%;
}
#catch > .inner > * {
	margin-right : 50%;
}

#catch .eng {
	font-family : "Century Gothic", "arial Black", sans-serif;
	font-size : 15px;
	margin-bottom : 4px;
	color : #626061;
}
#catch h2 {
	font-size : 28px;
	font-weight : normal;
	line-height : 1.45;
	margin-bottom : 0.5em;
	color : #000000;
}

.contentList {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr;
	grid-gap : 12px;
	margin-bottom : 40px;
}
.contentList > li {
	padding : 8px;
	border : 1px solid #eeeeee;
	background-color : #fafaf8;
	box-shadow : 0 3px 4px 0 #f6f6f6;
}
.contentList > li a {
	text-decoration : none;
}
.contentList > li .img {
	height : 120px;
	margin-bottom : 12px;
	padding : 16px;
}
.contentList > li .img img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}
.contentList > li .title {
	position : relative;
	font-weight : bold;
	line-height : 1.25;
	padding : 4px;
	padding-left : 1.2em;
	color : #000000;
}
.contentList > li .title::before {
	position : absolute;
	top : 50%;
	left : 0;
	width : 0.8em;
	height : 5px;
	content : "";
	transform : translateY(-50%);
	background-color : #478db0;
}
.contentList > li .discription {
	padding : 4px;
	color : #999999;
}

/* faqtips */
#faqtips.contentList {
	grid-template-columns : 1fr 1fr;
}
#faqtips.contentList > li a {
	display : flex;
	justify-content : center;
	align-items : center;
	padding : 22px;
}
#faqtips.contentList > li .img {
	flex-basis : 50%;
	margin-bottom : 0;
	padding : 0;
}
#faqtips.contentList > li .content {
	display : flex;
	flex-direction : column;
	flex-grow : 1;
	justify-content : center;
	align-items : center;
}
#faqtips.contentList > li .title {
	font-size : 1.25em;
	font-weight : bold;
	line-height : 1.25;
	padding : 0;
	color : #000000;
}
#faqtips.contentList > li .title::before {
	display : none;
}
#faqtips.contentList > li .discription {
	font-family : "Oswald", sans-serif;
	font-size : 3.6em;
	line-height : 1;
	padding : 8px;
	text-align : center;
	color : #478db0;
}

/* software */
#software.contentList,
#howto.contentList {
	grid-template-columns : 1fr 1fr;
}
#software.contentList > li a,
#howto.contentList > li a {
	display : flex;
	justify-content : center;
	align-items : center;
	padding : 22px;
}
#software.contentList > li .img,
#howto.contentList > li .img {
	flex-basis : 30%;
	margin : 0 16px 0 0;
	padding : 0;
}


#software.contentList > li .content,
#howto.contentList > li .content {
	display : flex;
	flex-direction : column;
	flex-grow : 1;
	justify-content : center;
	align-items : flex-start;
}
@media screen and (min-width: 766px) {
#software.contentList > li .ws .img{
	width: 20%;
}
#software.contentList > li .ws .content{
	width: 80%;
}
}

#software.contentList > li .title,
#howto.contentList > li .title {
	font-size : 1.2em;
}

/*  */

.item_wrap {
	display : flex;
	clear : both;
	flex-wrap : wrap;
	width : 100%;
	margin-bottom : 30px;
	padding : 0;
}
#content img {
	display : block;
	border-top-width : 0;
	border-right-width : 0;
	border-bottom-width : 0;
	border-left-width : 0;
}
.item_wrap:after {
	display : block;
	clear : both;
	content : "";
}
.item_wrap a {
	display : block;
	font-weight : bold;
	float : left;
	box-sizing : border-box;
	width : 23%;
	margin : 1%;
	padding : 1px;
	text-decoration : none;
	color : #333333;
	border : 1px solid #eeeeee;
	background-color : #fafaf8;
	box-shadow : 0 3px 4px 0 #f6f6f6;
}
.item_wrap .it_left {
	float : left;
}
.item_wrap .it_box {
	width : 100%;
}
.item_wrap .it_box .it_img {
	display : block;
	top : -60px;
	left : 50%;
	width : 100%;
	margin : 0 auto;
	padding : 0 0 10px 0;
	text-align : center;
}
.item_wrap .it_box .pickups {
	margin : 0;
	padding : 3px;
	text-align : center;
	background-color : #fafaf8;
}
.item_wrap .it_box .pickups .title {
	margin-top : 0;
	margin-right : 0;
	margin-bottom : 5px;
	margin-left : 0;
	padding : 0 0 10px 0;
	letter-spacing : normal;
}
.item_wrap .it_box .it_txt {
	margin : 0;
	padding-top : 2px;
	padding-right : 8px;
	padding-bottom : 5px;
	padding-left : 8px;
	background-color : #fafaf8;
}
.item_wrap .it_box .pickups p {
	font-size : x-small;
	line-height : 170%;
	margin : 0;
	padding : 10px 10px 20px;
	color : #999999;
}
.item_wrap .it_box .it_img {
	display : block;
	top : -60px;
	left : 50%;
	width : 100%;
	margin : 0 auto;
	padding : 0 0 10px 0;
	text-align : center;
}
.item_wrap .it_box .it_txt .title {
	font-weight : bold;
	margin : 0;
	padding : 5px 0 5px 0;
	padding-left : 16px;
	background-image : url(/support/wp-content/themes/wraymer_faq/top/img/icon_bar_blue.jpeg);
	background-repeat : no-repeat;
	background-position : -7px center;
}
.item_wrap .it_box .it_txt p {
	font-size : small;
	line-height : 160%;
	margin : 0;
	padding : 0;
	text-align : justify;
	color : #888888;
}

.box4 {
	clear : both;
	margin-top : 0;
	margin-right : 0;
	margin-bottom : 10px;
	margin-left : 0;
	padding : 0;
	background-color : #f7f7f7;
	background-image : url(/support/wp-content/themes/wraymer_faq/top/img/header_sdw2.gif);
	background-repeat : repeat-x;
	background-position : center top;
}

/* point */
#point {
	display : grid;
	grid-template-columns : 25% 1fr;
	grid-gap : 12px;
	margin-bottom : 40px;
	padding : 30px 0;
	background : url(/support/wp-content/themes/wraymer_faq/top/img/line_sdw.gif) 0 0
	no-repeat,
	url(/support/wp-content/themes/wraymer_faq/top/img/line_sdw.gif) 0 100% no-repeat;
	background-size : contain;
}
#point > * {
	display : flex;
	justify-content : center;
	align-items : center;
}

/* info */
/* 
#info {
	display : grid;
	grid-template-columns : 30% 1fr;
	grid-gap : 24px;
}

#news {
	grid-column : 2/3;
	grid-row : 1/2;
} */
#news h3 {
	font-size : 1.2em;
	margin-bottom : 12px;
}

#news dl {
	overflow-y : auto;
	max-height : 27em;
	padding-top : 24px;
}
#news dl > dt {
	font-weight : bold;
	margin-bottom : 0.8em;
	color : #327494;
}
#news dl > dt a {
	color : #327494;
}

#news dl > dd {
	margin-bottom : 24px;
	padding-bottom : 24px;
	border-bottom : 1px dotted #000000;
}

#calendar {
	grid-column : 1/2;
	grid-row : 1/2;
}
#calendar h4 {
	font-size : 1.2em;
	font-weight : bold;
	margin-bottom : 12px;
}
#calendar #day_info {
	clear : both;
	margin-top : 0;
	margin-right : 0;
	margin-bottom : 15px;
	margin-left : 0;
	padding : 10px;
	background-color : #fafaf8;
}
#calendar #day_info table {
	width : 100%;
	margin-bottom : 10px;
	border-top-width : 1px;
	border-top-style : dotted;
	border-top-color : #333333;
}
#calendar #day_info table tr td {
	padding-top : 1px;
	padding-right : 0;
	padding-bottom : 1px;
	padding-left : 0;
	border-bottom-width : 1px;
	border-bottom-style : dotted;
	border-bottom-color : #333333;
}
#calendar #day_info p {
	font-size : 0.9em;
	margin : 0;
	padding : 0;
	color : #333333;
}
#calendar #day_info p em {
	color : #dae8f3;
}

/* --- for 2K or more pc --- */
@media screen and (min-width: 1980px) {
}

/* --- for HD pc --- */
@media screen and (min-width: 1440px) and (max-width: 1979px) {
}

/* --- for normal pc --- */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
}

/* --- for tablet --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
}

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	main > section#catch {
		margin-bottom : 24px;
	}
	#catch > .inner {
		padding-top : 40px;
		padding-right : 38%;
		padding-bottom : 40px;
		padding-left : 24px;
		background-position : 98% 50%;
		background-size : 38% auto;
	}
	#catch > .inner > * {
		margin-right : 0;
	}
	#catch .eng {
		font-size : 1.5vw;
	}
	#catch h2 {
		font-size : 3.7vw;
	}
	#catch p {
		display : none;
	}

	/* ======================= */

	.contentList {
		grid-template-columns : 1fr;
		grid-gap : 0;
		margin : 0 -24px 32px;
	}
	.contentList > li {
		padding : 12px;
		border : none;
		border-top : 1px solid #dddddd;
		background : rgb(255, 255, 255);
		background : linear-gradient(
		180deg,
		rgba(255, 255, 255, 1) 0%,
		rgba(238, 238, 238, 1) 100%
		);
	}
	.contentList > li a,
	#faqtips.contentList > li a,
	#software.contentList > li a,
	#howto.contentList > li a {
		display : grid;
		grid-template-columns : 80px 1fr;
		grid-gap : 12px;
		position : relative;
		padding : 0;
	}
	.contentList > li a::after {
		display : inline-block;
		position : absolute;
		top : 50%;
		right : 1em;
		width : 4px;
		height : 4px;
		content : "";
		        transform : translateY(-50%);
		        transform : rotate(45deg);
		border-top : 1px solid #555555;
		border-right : 1px solid #555555;

		-webkit-transform : rotate(45deg);
	}
	.contentList > li .img {
		display : flex;
		justify-content : center;
		align-items : center;
		height : 80px;
		margin-bottom : 0;
		padding : 0;
	}
	.contentList > li .title {
		display : flex;
		align-items : center;
	}
	.contentList > li .discription {
		font-size : 0.7em;
		color : #666666;
	}
	.contentList > li .content {
		display : flex;
		align-items : center;
		margin-right : 32px;
	}

	#faqtips.contentList,
	#software.contentList,
	#howto.contentList {
		grid-template-columns : 1fr;
	}
	#faqtips.contentList > li .content {
		flex-direction : row;
		flex-wrap : wrap;
		justify-content : space-around;
		align-items : center;
	}
	#faqtips.contentList > li .title {
		display : block;
		font-size : 1em;
		flex-basis : 8em;
	}
	#faqtips.contentList > li .discription {
		font-size : 2em;
		flex-basis : 2em;
		text-align : center;
	}
	#software.contentList > li .title,
	#howto.contentList > li .title {
		font-size : 1em;
	}
	#software.contentList > li .discription,
	#howto.contentList > li .discription {
		font-size : 0.8em;
	}

	#faqtips.contentList > li .img,
	#software.contentList > li .img,
	#howto.contentList > li .img {
		width : 80px;
		height : 80px;
	}

	#point {
		grid-template-columns : 1fr;
	}
	#info {
		grid-template-columns : 1fr;
	}
	#news {
		grid-column : 1/2;
		grid-row : 1/2;
	}
	#calendar {
		grid-column : 1/2;
		grid-row : 2/3;
	}
}