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

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

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

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

.col p {
	line-height: 1.6;
	margin: 0 auto 5px auto;
	padding: 5px;
}


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

.col {
	margin-left: 4%;
}

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

.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 {
	display: block;
	flex: 1 1 auto;
	max-width: 100%;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}

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

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

.flow.row {
	margin-bottom: 1.2rem;
}
}


/*
 2カラム イメージ（スマートフォンでは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: 0 auto 60px auto;
	padding: 10px;
}

.box_cont .box_c_in {
	width: 48%;
	min-height: 200px;
}

.box_cont .box_c_in img {
	max-width: 100%;
	padding: 0 10px;
}

.box_cont .box_c_in h2 {
	font-size: 24px;
	border-bottom: 1px solid #ccc;
	padding: 10px;
}

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

.box_cont .box_c_in {
	width: 100%;
	text-align: center;
}

.box_cont .box_c_in img {
	max-width: 100%;
	padding: 0 10px;
}

.box_cont .box_c_in h2 {
	padding: 10px 0 5px 0;
}
}

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

.box_cont .box_c_in h2 {
	font-size: 22px;
	padding-top: 20px;
}
}


/* 3カラム（スマホでは1カラム) */
.threeCol {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	-webkit-justify-content: censpace-betweenter;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
	margin: 20px 20px 30px 20px;
}

.threeCol .inner {
	position: relative;
	overflow: hidden;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	-webkit-justify-content: censpace-betweenter;
	justify-content: space-between;
	-ms-flex-direction: column-reverse;
	-webkit-box-direction: reverse;
	-webkit-flex-direction: column-reverse;
	flex-direction: column;
	width: calc((385 / 1200) *100%);
	width: 32.14%;
}

.threeCol .inner:nth-child(3n+1) {
	clear: both;
}

.threeCol .inner h6 {
	width: 100%;
	text-align: center;
	margin-top: 0.2em;
	margin-bottom: 1.2em;
}

.threeCol .inner > a {
	width: 100%;
	height: 100%;
}

.threeCol .inner .image {
	width: 100%;
	min-height: 0%;
}

.threeCol .inner img {
	width: 100%;
}

@media screen and (max-width:640px) {
.threeCol {
	display: block;
	margin: 20px 20px 30px 20px;
}

.threeCol .inner {
	width : 100%;
	margin-bottom: 15px;
}
}


/*
 リンクボタン
-------------------------------------------*/
.linkbtn {
	text-align: center;
}

.linkbtn a {
	position: relative;
	display: inline-block;
	padding: 8px 30px;
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
	z-index: 1;
	background: #000;
	margin: 10px 0;
}

.linkbtn a:hover {
	color: #fff;
	background: #666;
}