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




@media screen and (min-width: 350px) { /*　画面サイズ 350pxから適用　*/
.col-item{
display:         flex;
flex-direction:  column; /*　子要素を上から下に配置　*/
justify-content: center;
align-items:     center;
}

/*　1つ配置　*/
.row-1 .col-item.item-1{
width: 100%;
}

/*　2つ配置　*/
.row-2 .col-item.item-1{
width: 100%;
}
.row-2 .col-item.item-2{
width: 100%;
}

/*　3つ配置　*/
.row-3 .col-item.item-1{
width: 100%;
}
.row-3 .col-item.item-2{
width: 100%;
}
.row-3 .col-item.item-3{
width: 100%;
}

/*　4つ配置　*/
.row-4 .col-item.item-1{
width: 100%;
}
.row-4 .col-item.item-2{
width: 100%;
}
.row-4 .col-item.item-3{
width: 100%;
}
.row-4 .col-item.item-4{
width: 100%;
}
}
@media screen and (min-width: 768px) {/*　画面サイズ 500pxから適用　*/
#col-box{
display:         flex;
justify-content: center;
align-items:     center;
}

.col-item{
height: 100%;
}
.row-1 .col-item{ /*　1つ配置　*/
width: 100%;
}
.row-2 .col-item{ /*　2つ配置　*/
width: 50%;
}
.row-3 .col-item{ /*　3つ配置　*/
width: 33.3%;
}
.row-4 .col-item{ /*　4つ配置　*/
width: 25%;
}
}





/*　1:2レイアウト　*/
@media screen and (min-width: 350px) { /*　画面サイズ 350pxから適用　*/
.flex-0 {
display:        flex;
flex-direction: column;    /* PCはrow */
align-items:    center; /* 子要素の垂直センター */
}
.flex-1 { flex: 1; align-items: center;}
.flex-2 { flex: 2; align-items: center;}
}
@media screen and (min-width: 768px) {/*　画面サイズ 500pxから適用　*/
.flex-0 {
display:        flex;
flex-direction: row;    /* SPはcolumn */
align-items:    center; /* 子要素の垂直センター */
}
.flex-1 { flex: 1;}
.flex-2 { flex: 2;}
}





/*　会社案内で使用した1:2レイアウト　*/
@media screen and (min-width: 350px) { /*　画面サイズ 350pxから適用　*/
.col-box-left {
display:         flex;
flex-direction:  column; /* SPはcolumn */
justify-content: start;  /* 子要素の水平左　 centerで中央 */
align-items:     center; /* 子要素の垂直センター */
}
.flex-left-1 { flex: 1;}
.flex-left-2 { flex: 2;}
}

@media screen and (min-width: 768px) {/*　画面サイズ 500pxから適用　*/
.col-box-left {
display:         flex;
flex-direction:  row;    /* SPはcolumn */
justify-content: start;  /* 子要素の水平左　 centerで中央 */
align-items:     center; /* 子要素の垂直センター */
}
.flex-left-1 { flex: 1;}
.flex-left-2 { flex: 2;}
}





/*　事業案内の画像レイアウト　*/
#col-box-fig {
display:         flex;
flex-direction:  column; /* 垂直 */
justify-content: start;  /* 子要素の水平左　 centerで中央 */
align-items:     center; /* 子要素の垂直センター */
}




/*　事例紹介のスマホ用横並びレイアウト　*/
@media screen and (min-width: 350px) { /*　画面サイズ 350pxから適用　*/
#col-box-sc{
display:         flex;
justify-content: center;
align-items:     center;
}
.col-item-sc{
display:         flex;
flex-direction:  row; /*　子要素を上から下に配置　*/
justify-content: center;
align-items:     center;
}
/*　2つ配置　*/
.row-2-sc .col-item-sc.item-1{
width: 50%;
}
.row-2-sc .col-item-sc.item-2{
width: 50%;
}
}





@media screen and (min-width: 350px) { /*　画面サイズ 350pxから適用　*/
.sol-bg {
background-image:    none;
}
.com-bg {
background-image:    url(/re/assets/images/top/company-bg-pc.png);
background-repeat:   no-repeat;
}
}
@media screen and (min-width: 768px) {/*　画面サイズ 500pxから適用　*/
.sol-bg {
background-image:    url(/re/assets/images/top/solution-line-pc.png); 
background-repeat:   repeat-y;
background-position: right top;
}
.com-bg {
background-image:    url(/re/assets/images/top/company-bg-pc.png);
background-repeat:   no-repeat;
}
}





@media screen and (min-width: 350px) { /*　画面サイズ 350pxから適用　*/
.col-space-1 { margin:30px;}
.col-space-2 { margin:50px;}
.col-space-3 { margin:150px;}
.col-space-4 { margin:100px;}
}
@media screen and (min-width: 700px) {/*　画面サイズ 500pxから適用　*/
.col-space-1 { margin:50px;}
.col-space-2 { margin:100px;}
.col-space-3 { margin:150px;}
.col-space-4 { margin:200px;}
}





.col-color-blue{
background-color:#181b39;
}
.col-color-gray{
background-color:#1f1f20;
}
.col-color-white{
background-color:#FFF;
}