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

#designguide {
	padding: 0 5% 0;
	max-width: 500px;
	margin: 0 auto;
	text-align: left;
}
.title_01 {
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.5em 0;
    margin: 2em 0 0;
    color: #4A636F;
    text-align: center;
    border-top: 4px solid #4A636F;
    border-bottom: 4px solid #4A636F;
}
.guide_title_02 {
	text-align: left;
	font-size: 1.3em;
	font-weight: bold;
    color: #4A636F;
	border-bottom: 2px solid #4A636F;
	padding-bottom: 0.5em;
}
.guide_title_03 {
    font-size: 1.2em;
	font-weight: bold;
    color: #4A636F;
	margin: 0 0 10px 0;
}
.howto_make_box {
	border: 2px solid #4A626F;
	background-color: #fff;
	border-radius: 0.3em;
	padding: 5% 5% 0;
	margin-bottom: 25px;
    box-shadow: 2px 2px #4A636F;
}
.howto_write_box {
	border: 2px solid #4A626F;
	background-color: #fff;
	border-radius: 0.3em;
	padding: 5% 5% 0;
	margin-bottom: 25px;
    box-shadow: 2px 2px #4A636F;
}
.howto_make_box ul {
	list-style-type: none;
	padding-left: 0;
}
.howto_write h3 {
    font-size: 1.2em;
	font-weight: bold;
    color: #4A636F;
	margin: 0 0 5px 0;
}
.shot {
	width: 80%;
	margin: 0 auto;
	max-width: 400px;
}
.howto_write_line {
	font-size: 1.2em;
	font-weight: bold;
}
.line_txt {
	font-size: 1.4em;
	color: #17B005;
}
.send {
	font-size: 1.4em;
	color: #DD4B4F;
}
.line_btn {
	width: 80%;
	margin: 0 auto;
}
.line_cmt a {
	color: #036EA9;
}
.line_cmt:before {
	color: #036EA9;
	content: "\f105";
    font-family: FontAwesome;
	margin-right: 1em;
}
.arrange_box {
	border: 2px solid #4A626F;
	padding: 5% 5% 0;
	margin-bottom: 20px;
}
.arrange_box h3 {
	font-size: 1.2em;
	font-weight: bold;
	padding: 0.2em 0 0.2em 0.5em;
	color: #fff;
	background-color: #5C7580;
}
.disign_template h3 {
    font-size: 1.2em;
	font-weight: bold;
    color: #fff;
	background-color: #5C7580;
	padding: 0.3em 0.5em;
}
.design_box_1 {
	width: calc(92% * 1 / 2.001);
	margin-left: 2%;
	margin-right: 2%;
	float: left;
}
.design_box_1 p {
	text-align: center;
	margin: 0;
}
.font_box p , .font_box_last p {
	width: calc(96% * 1 / 2.001);
	margin: 0 1% 10px;
	float: left;
}
.and_more {
	clear: both;
	padding-top: 1.5em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid #5C7580;
}
.and_more li a {
	font-size: 1em;
	color: #5C7580;
	margin: 0 1%;
}
.uk-accordion-title::before {
    background-image: url(../../img/common/acordion_plus_blue.svg);
	width: 0.9em;
}
.uk-open>.uk-accordion-title::before {
    background-image: url(../../img/common/acordion_minus_blue.svg);
	width: 0.9em;
}
.uk-accordion-content p {
	padding: 0 !important;
	border: none !important;
}
@media all and (min-width: 640px) , print {
	#designguide {
		max-width: 100%;
	}
	.howto_make_boxs , .howto_write_boxs , .arrange_boxs , .design_boxs , .font_box {
		display:flex;
	}
	.howto_make_box , .howto_write_box {
		float: left;
		width: 32%;
		margin-right: 2%;
	    padding: 20px 20px 0;
	}
	.howto_make_box:nth-child(3) , .howto_write_box:nth-child(3) {
		margin-right: 0;
	}
	.order_download {
		float: left;
	}
	.order_download a {
		color: #036EA9;
	}
	.arrange_box {
		width: 49%;
		margin-right: 2%;
	    padding: 20px 20px 0;
	}
	.arrange_box:nth-child(even){
		margin-right: 0;
	}
	.design_box_1 , .font_box p {
		width: 20%;
		margin-left: 0;
		margin-right: 1.5%;
	}
	.design_box_1 {
		width: 18.79%;
		margin-left: 0;
		margin-right: 1.5%;
	}
	.design_box_1:nth-child(5) , .font_box p:nth-child(6) {
		margin-right: 0;
	}
	.font_box p:nth-child(5) {
		margin-right: 0;
	}
	/* add wordpress CMSデザイン調整 */
	.design_boxs  {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.uk-accordion-content .font_box p {
		width: 18.79%;
		margin-right: 1.5%;
	}
	.design_box_1:nth-child(5n), 
	.font_box p:nth-child(5n)   {
		margin-right: 0 !important;
	}
	.uk-accordion-content .font_box {
		flex-wrap: wrap;
	}

}