@charset 'utf-8';
/*

.layout_parts

*/
	.layout_parts {
		font-size: 16px;
		line-height: 30px;
		margin-bottom: 4rem;
	}
	.layout_parts * {
		box-sizing: border-box;
	}
	.layout_parts > h3 {
	    border-left: 3px solid #00A0EA;
	    color: #0A4DA4;
	    font-size: 18px;
	    padding-left: .75rem;
	}
	.layout_parts img {
		max-width: 100%;
	}
	.layout_parts .img_cap {
		font-size: 12px;
		display: block;
		margin-top: .5rem;
	}
	@media ( min-width: 640px ) {
		.layout_parts {
			margin-bottom: 2rem;
		}
		.layout_parts.box,
		.layout_parts.point {
			background-color: unset!important;
			font-size: 16px;
			line-height: 30px;
			width: 680px;
		}
		.layout_parts > h3 {
			margin-bottom: 1.25rem!important;
			border-left-width: 4px;
		    font-size: 20px;
		    margin-bottom: 1rem;
		    padding-left: 12px;
		}
		.layout_parts .img_cap {
			font-size: 14px;
			margin-bottom: 1.25rem;
		}


		.layout_parts .flex_ptn_1 {
			display: flex;
			flex-direction: row-reverse;
		}
		.layout_parts .flex_ptn_1 > div:first-child {
			width: 310px;
			margin-left: 30px;
		}
		.layout_parts .flex_ptn_1 > div:first-child > img {
			width: 100%;
		}
		.layout_parts .flex_ptn_1 > div:last-child {
			width: 340px;
		}
		.layout_parts .flex_ptn_1 .img_cap {
			font-size: 14px;
		}
	}

	@media (min-width: 640px) {
		.layout_parts .flex_ptn_2 {
			display: flex;
			/*flex-direction: row-reverse;*/
		}
		.layout_parts .flex_ptn_2 > div:first-child {
			padding-right: 30px;
			width: 310px;
		}
		.layout_parts .flex_ptn_2 > div:first-child > img {
			width: 100%;
		}
		.layout_parts .flex_ptn_2 > div:last-child {
			width: 340px;
		}
		.layout_parts .flex_ptn_2 .img_cap {
			font-size: 14px;
		}
	}

	.layout_a_1 .img_cap,
	.layout_a_3 .img_cap,
	.layout_a_5 .img_cap {
		text-align: right;
	}

	.layout_parts .img_wide {
		margin-bottom: 15px;
	}

	@media (min-width: 640px) {
		.layout_parts .img_wide {
			margin-bottom: 30px;
		}
	}

	.layout_parts .img_wide > img {
		width: 100%;
	}

/*
	layout_heading
 */

	h2.layout_heading {
		background-color: #00A0EA;
		color: #fff;
		font-size: 18px;
		font-weight: normal;
		line-height: 40px;
		min-height: 40px;
		padding-left: 46px;
		padding-right: .5rem;	    
		margin-bottom: 1.25rem;
		position: relative;
	}
	h2.layout_heading::before {
		box-sizing: border-box;
		content: "";
		display: block;
		font-weight: bold;
		background-color: #0A4DA4;
		position: absolute;
		top: 0;
		left: 0;
		border-right: 2px solid #fff;
		width: 40px;
		min-height: 40px;
		text-align: center;
	}

	@media ( min-width: 640px ) {

		h2.layout_heading {
			font-size: 24px;	
			line-height: 40px;		
			min-height: 40px;
		}

		h2.layout_heading::before {
			width: 40px;
			min-height: 40px;
		}

	}

	.layout_heading.color_1::before {

	}

	.layout_heading.color_2::before {
		background-color: #00BDEA!important;
	}

	.layout_heading.color_3::before {
		background-color: #37BE99!important;
	}

	.layout_heading.color_4::before {
		background-color: #F09400!important;
	}

	.layout_heading.color_5::before {
		background-color: #E24D7A!important;
	}

	.layout_heading.num_1::before {
		content: "1"!important;
	}

	.layout_heading.num_2::before {
		content: "2"!important;
	}

	.layout_heading.num_3::before {
		content: "3"!important;
	}

	.layout_heading.num_4::before {
		content: "4"!important;
	}

	.layout_heading.num_5::before {
		content: "5"!important;
	}


	h3.layout_heading {
	    border-left: 3px solid #00A0EA;
	    color: #0A4DA4;
	    font-size: 18px;
	    padding-left: .75rem;
	    line-height: 30px;
	}

	@media ( min-width: 640px ) {
		h3.layout_heading {
			border-left-width: 4px;
		    font-size: 20px;
		    margin-bottom: 1rem;
		    padding-left: 12px;	
		}
	}

	h3.layout_heading.num_1,
	h3.layout_heading.num_2,
	h3.layout_heading.num_3,
	h3.layout_heading.num_4, 
	h3.layout_heading.num_5 {
		border-left: 0;
		padding-left: 0;
	}

	h3.layout_heading.num_1::before,
	h3.layout_heading.num_2::before,
	h3.layout_heading.num_3::before,
	h3.layout_heading.num_4::before,
	h3.layout_heading.num_5::before {
		border-right: 3px solid #00A0EA;
		color: #00A0EA;
		margin-right: 8px;
	    padding-right: 8px;
	}

	ul.layout_list,
	dl.layout_list,
	ol.layout_list {
		color: #0A4DA4;
		font-size: 16px;
		line-height: 30px;
		font-weight: bold;
		margin-left: 1rem;
	}

	ul.layout_list.disc {
		list-style-type: disc;
		margin-left: 2rem;
	}

	dl.layout_list:last-of-type {
		margin-bottom: 1rem;
	}

	ul.layout_list.small,
	dl.layout_list.small {
		color: #333;
		font-weight: normal;
	}

	:not(dl).layout_list {
		margin-bottom: 1rem;
	}

	ul.layout_list li::before {
		color: #00A0EA;
		margin-right: .25rem;
	}
	
	ul.layout_list.square li::before {
		content: "■";
	}

	ul.layout_list.round li::before {
		content: "●";
	}

	ol.layout_list.num {
		padding-left: 0;
		list-style-type: none;
		counter-reset: li;
	}

	ol.layout_list.num.small {
		font-weight: normal;
	}

	ol.layout_list.num.small li {
		color: #333;
	}

	ol.layout_list.num li::before {
		counter-increment: li;
		content: counter(li)".";
		color: #00A0EA;
		font-weight: bold;
		margin-right: .5rem;
	}

	dl.layout_list dt::after {
		content: ":";
		margin-left: .5rem;
		margin-right: .25rem;
	}

	dl.layout_list dt,
	dl.layout_list dd {
		display: inline;
	}

	dl.layout_list dt {
		color: #00A0EA;
	}

	.layout_strong_1 {
		background: #fcf405!important;
	}

	.layout_strong_2 {
		background: unset!important;
		color: #34B1BB!important;
	}


	.layout_parts.point {
		background-color: #F0FAFF!important;
		padding: 2rem 1rem;
	}

	.layout_parts.point h3 {
		border-left-width: 0!important;
		font-weight: normal;
		padding-left: 0;
	}

	.layout_parts.point h3::before {
		background-color: #34B1BB;
		color: #fff;
		font-weight: bold;
		content: "POINT";
		padding: .5rem 1rem;
	    margin-right: 1rem;
	}

	.layout_parts.point h3 span {
		display: block;
		margin-top: .5rem;
	}

	.layout_parts.point_1 .flex_ptn_2 > div:first-child {
	}

	@media (min-width: 640px) {

		.layout_parts.point {
			background-color: #F0FAFF;
			padding: 1.5rem 1rem;
		}

		.layout_parts.point h3 span {
			display: inline;
		}

		.layout_parts.point_1 .flex_ptn_2,
		.layout_parts.point_2 .flex_ptn_1 {
			justify-content: space-around;
		}

		.layout_parts.point_1 .flex_ptn_2 > div:first-child,
		.layout_parts.point_2 .flex_ptn_1 > div:first-child	{
			padding-right: 0;
			margin-right: 20px;
			width: 340px;
		}

		.layout_parts.point_2 .flex_ptn_1 > div:first-child {
			margin-right: 0;
		}

		.layout_parts.point_1 .flex_ptn_2 > div:last-child,
		.layout_parts.point_2 .flex_ptn_1 > div:last-child {
			width: 280px;
		}

	}

textarea.code_layout {
	margin-bottom: 3rem;
	width: 100%;
}

article.col_useful_detail .content h1 {
	font-size: 2rem;
	margin-bottom: 2rem;
}

/**
 * table 2020-04-01 13:25:14
 */
.layout_table {
	border-collapse: collapse;
	margin-bottom: 2rem;
	width: 100%;
}

.layout_table th,
.layout_table td {
    border: 1px solid #ccc;
    font-size: .95rem;
	padding: .25rem;
	line-height: 1.5;
	vertical-align: middle;
}

.layout_table td {
	background-color: #F5F5F5;
}

.layout_table th {
	text-align: center;
	background-color: #0a4ca4;
	color: #fff;
}

@media ( max-width: 640px ) {
	.layout_table th,
	.layout_table td {
		font-size: 1.3rem;
	}
}