@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//全体のカラー設定（一括）----ここから
$main-color: #000;
$sub-color: #0090d5;
//全体のカラー設定（一括）----ここまで


//調整用
article ul.demo1{
	margin-bottom: 10rem;
	li{
		dl{
			padding: 3rem;
			margin: 2rem;
			border-radius: 2rem;
			background-color: #fff;
			box-shadow:  5px 5px 20px #c8c9cc, 
				-5px -5px 20px #ffffff;
			text-align: center;
			img{
				border-radius: 1rem;
			}
			p{
				margin: 0;
				margin-top: 2rem;
			}
			dd{
				margin: 0;
			}
		}
	}
}
article ul.demo2{
	li{
		 align-items: center;
		div{
			padding: 0;
			img{
				width: 100%;
			}
		}
		dl{
			padding: 4rem;
		}
	}
	li:nth-child(1){
		justify-content: flex-start;
		div{
			margin-left: calc(50% - 50vw);
			order: 1;
			@include sm {
				margin-left: auto;
			}
		}
		dl{
			order: 2;
		}
	}
	li:nth-child(2){
		justify-content: flex-end;
		div{
			margin-right: calc(50% - 50vw);
			order: 2;
			@include sm {
				margin-right: auto;
				order: 1;
			}
		}
		dl{
			order: 1;
			@include sm {
				order: 2;
			}
		}
	}
}
pre{
	height: 56px;
	display: flex;
    align-items: center;
}