@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;
//全体のカラー設定（一括）----ここまで

//demo1------------------------------------------------------------------ここから
.demo1 {
	margin-bottom: 10rem;
	.contents{
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		&:nth-of-type(1){
			background-image: url("../../img/top-slide-img-1.webp");
		}
		&:nth-of-type(2){
			background-image: url("../../img/top-slide-img-2.webp");
		}
		&:nth-of-type(3){
			background-image: url("../../img/top-slide-img-3.webp");
		}
	}
	.js-rellax div{
		background-color: #fff;
		padding: 4rem;
		h3{
			font-size: 30px;
			font-weight: bold;
			text-align: center;
			letter-spacing: 2px;
			margin-bottom: 10px;
			line-height: normal;
			@include sm {
				font-size: 50px;
				margin-bottom: 20px;
			}
			& + p{
				font-size: 14px;
				text-align: center;
				padding: 0 20px;
				margin-bottom: 20px;
				@include sm {
					font-size: 18px;
				}
				& + a{
					background-color: #000;
					border: 1px solid #000;
					display: block;
					font-size: 18px;
					font-weight: bold;
					text-align: center;
					padding: 3px 0;
					margin: 0 auto;
					color: #fff;
					transition: 0.3s;
					@include sm {
						padding: 6px 0;
					}
					&:hover{
						background-color: #fff;
						color: #000;
					}
				}
			}
		}
	}
}
.attention pre{
	height: auto;
	margin-bottom: 0!important;
}


//demo2------------------------------------------------------------------ここから
.demo2{
	margin-bottom: 20rem;
	img{
		border-radius: 1rem;
		box-shadow:  5px 5px 20px #c8c9cc, 
			-5px -5px 20px #ffffff;
		margin: 4rem;
	}
	pre{
		height: 56px;
		display: flex;
		align-items: center;
		margin-bottom: 0!important;
	}
}