@charset "utf-8";

/* グリッド
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
	position: relative;
	max-width: 1200px;
	margin: 40px auto 0 auto;
	padding: 0 1.5rem;
}

/* ブロックを縦に表示 */
.row {
	display: flex;
	width: 100%;
	flex-direction: column;
	padding: 0;
}

.col {
	display: block;
	flex: 1 1 auto;
	max-width: 100%;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
}

.col img {
	margin: 0.5rem 0.5rem 1.0rem 0.5rem;
	padding: 0 10px;
}

.col p {
	line-height: 1.8;
	margin: 5px 10px 5px 10px;
	padding: 5px 10px;
}

@media screen and (max-width:960px) {

.col p {
	padding: 5px 15px;
}
}


@media screen and (min-width:768px) {
.row {
	display: flex;
	flex-direction: row;
	padding: 0;
}

.col:first-child { 
	margin-left: 0; 
}

.row .col.span-1 {
	flex: 0 0 4.66666666667%;
	max-width: 4.66666666667%;
}

.row .col.span-2 {
	flex: 0 0 13.3333333333%;
	max-width: 13.3333333333%;
}

.row .col.span-3 {
	flex: 0 0 22%;
	max-width: 22%;
}

.row .col.span-4 {
	flex: 0 0 30.6666666667%;
	max-width: 30.6666666667%;
}

.row .col.span-5 {
	flex: 0 0 39.3333333333%;
	max-width: 39.3333333333%;
}

.row .col.span-6 {
	flex: 0 0 48%;
	max-width: 48%;
}

.row .col.span-7 {
	flex: 0 0 56.6666666667%;
	max-width: 56.6666666667%;	
}

.row .col.span-8 {
	flex: 0 0 65.3333333333%;
	max-width: 65.3333333333%;
}

.row .col.span-9 {
	flex: 0 0 74.0%;
	max-width: 74.0%;
}

.row .col.span-10 {
	flex: 0 0 82.6666666667%;
	max-width: 82.6666666667%;
}

.row .col.span-11 {
	flex: 0 0 91.3333333333%;
	max-width: 91.3333333333%;
}

.row .col.span-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

/* オフセット */
.row .col.offset-1 {
	margin-left: 8.66666666667%;
}

.row .col.offset-2 {
	margin-left: 17.3333333333%;
}

.row .col.offset-3 {
	margin-left: 26%;
}

.row .col.offset-4 {
	margin-left: 34.6666666667%;
}

.row .col.offset-5 {
	margin-left: 43.333333333%;
}

.row .col.offset-6 {
	margin-left: 52%;
}

.row .col.offset-7 {
	margin-left: 60.6666666667%;
}

.row .col.offset-8 {
	margin-left: 69.3333333333%;
}

.row .col.offset-9 {
	margin-left: 78.0%;
}

.row .col.offset-10 {
	margin-left: 86.6666666667%;
}

.row .col.offset-11 {
	margin-left: 95.3333333333%;
}    
}

/*作業の流れ
-------------------------------------*/
.flow.row {
	margin-bottom: 1rem;
}


@media screen and (max-width:640px) {

.col {
	margin-bottom: 20px;
}


.col img {
	margin: 0.5rem auto 1.0rem auto;
	padding: 0;
}

.col p {
	margin: 5px 0;
	padding: 5px 0;
}
}

@media screen and (max-width:460px) {

.col p {
	font-size: 16px;
	line-height: 1.6;
}
}


/*
見出し
-------------------------------------------------*/

/* 2カラム1（スマートフォンでは1カラム) */

.box_cont {
	width: 100%;
	max-width: 1200px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin: 30px auto 40px auto;
	padding: 10px 20px;
}

.box_cont .box_c_in {
	width: 49%;
}

.box_cont .box_c_in img {
	max-width: 100%;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	margin-bottom: 25px;
}

.box_cont .box_c_in a:hover img {
	outline: 5px solid #005eae;
}

@media screen and (max-width:768px){
	
.box_cont {
	padding: 0 20px;
}

.box_cont .box_c_in {
	width: 100%;
}

.box_cont .box_c_in img {
	max-width: 100%;
	margin-bottom: 40px;
}
}

@media screen and (max-width:460px){

.box_cont .box_c_in img {
	margin-bottom: 20px;
}
}