@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------------------------------------------------------------------ここから
.demo01{
	margin:2rem 0 10rem;
	@include sm {
		margin:2rem 0 4rem;
	}
	.swiper-slide{
		padding: 1rem;
		a{
			display: block;
			background-color: #fff;
			padding: 2rem;
			border-radius: 1rem;
			transition: all .3s;
			dl{
				margin: 0;
				dt{
					img{
						border-radius: 1rem;
					}
				}
				dd{
					p{
						color: $main-color;
						margin: 0;
						padding-top: 1rem;
					}
				}
			}
			&:hover{
				box-shadow:  5px 5px 20px #c8c9cc, 
					-5px -5px 20px #ffffff;
				transform: translateY(-10px);
				
			}
		}
	}
}

//demo2------------------------------------------------------------------ここから
.demo02{
	margin:2rem 0 15rem;
	@include sm {
		margin:0 0 8rem;
	}
	.swiper-area{
		position: relative;
		.swiper-container{
			overflow: hidden;
			padding: 0 2rem;
			@include xl {
				margin: 0 4rem;
				padding: 1rem 2rem;
						}
			@include xs {
				margin: 0 2rem;
				padding: 1rem;
						}
			.swiper-slide{
				padding: 2rem 0;
				margin: 0;
				@include xl {
					padding: 1rem 0;
							}
				a{
					display: block;
					background-color: #fff;
					padding: 2rem;
					border-radius: 1rem;
					transition: all .3s;
					@include xs {
						box-shadow:  3px 3px 10px #c8c9cc, 
							-3px -3px 10px #ffffff;
								}
					dl{
						margin: 0;
						dt{
							img{
								border-radius: 1rem;
							}
						}
						dd{
							p{
								color: $main-color;
								margin: 0;
								padding-top: 1rem;
							}
						}
					}
					&:hover{
						box-shadow:  5px 5px 20px #c8c9cc, 
							-5px -5px 20px #ffffff;
						transform: translateY(-10px);
						@include xl {
						box-shadow:  5px 5px 10px #c8c9cc, 
							-5px -5px 10px #ffffff;
						}
					}
				}
			}
		}
		.swiper-button-next{
			background: #fff;
			box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			right: -60px;
			@include xl {
				right: -20px;
						}
			@include lg {
				right: 0;
				width: 50px;
				height: 50px;
						}
			@include md {
				right: -10px;
						}
			@include xs {
				display: none;
						}
			&::after{
				content: "";
				display: block;
				width: 15px;
				height: 15px;
				border: 1px solid #c8c9cc;
				border-width: 3px 3px 0 0;
				transform: rotate(45deg);
				position: absolute;
				left: -5px;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}
		.swiper-button-prev{
			background: #fff;
			box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			left: -60px;
			@include xl {
				left: -20px;
						}
			@include lg {
				left: 0;
				width: 50px;
				height: 50px;
						}
			@include md {
				left: -10px;
						}
			@include xs {
				display: none;
						}
			&::after{
				content: "";
				display: block;
				width: 15px;
				height: 15px;
				border: 1px solid #c8c9cc;
				border-width: 0 0 3px 3px;
				transform: rotate(45deg);
				position: absolute;
				left: 0;
				right: -5px;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}
	.swiper-pagination-bullet:not(.swiper-pagination-bullet-active){
		background-color: #c8c9cc;
	}
}

//demo3------------------------------------------------------------------ここから
.demo03{
	margin:2rem 0 10rem;
	@include sm {
		margin:2rem 0 6rem;
	}
	.swiper-area{
		position: relative;
		padding: 0 4rem;
		@include xl {
			margin: 0 4rem;
			padding: 1rem 2rem;
		}
		@include xs {
			margin: 0;
		}
		.swiper-container {
			overflow: hidden;
			width: 100%;
			//スライダー
			&.main-sldier {
				margin-bottom: 2rem;
				a{
					display: block;
					overflow: hidden;
					border-radius: 1rem;
					img{
						border-radius: 1rem;
						transition: all .5s;
					}
					&:hover{
						img{
							transform: scale(1.05);
						}
					}
				}
			}
			//サムネイル
			&.thumbnail-sldier {
				.swiper-wrapper {
					.swiper-slide {
						width: 25%;
						height: 100%;
						opacity: .5;
						overflow: hidden;
						&.swiper-slide-thumb-active {
							opacity: 1;
						}
						dl{
							margin: 0;
							dt{
								img{
									border-radius: 1rem;
								}
							}
							dd{
								p{
									color: $main-color;
									margin: 0;
								}
							}
						}
					}
				}
			}
		}
		.swiper-button-next{
			background: #fff;
			box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			right: -60px;
			@include lg {
				width: 50px;
				height: 50px;
				right: -40px;
						}
			@include md {
				right: -50px;
						}
			@include xs {
				display: none;
						}
			&::after{
				content: "";
				display: block;
				width: 15px;
				height: 15px;
				border: 1px solid #c8c9cc;
				border-width: 3px 3px 0 0;
				transform: rotate(45deg);
				position: absolute;
				left: -5px;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}
		.swiper-button-prev{
			background: #fff;
			box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			left: -60px;
			@include lg {
				width: 50px;
				height: 50px;
				left: -40px;
						}
			@include md {
				left: -50px;
						}
			@include xs {
				display: none;
						}
			&::after{
				content: "";
				display: block;
				width: 15px;
				height: 15px;
				border: 1px solid #c8c9cc;
				border-width: 0 0 3px 3px;
				transform: rotate(45deg);
				position: absolute;
				left: 0;
				right: -5px;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}
}