@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;
  }
}
//ブレイクポイントを指定------ここまで

//メインカラー指定
$color-main: #ff9632;
$color-mainhalf: #ffca98;
$color-sub: #f1f2ed;
$color-font: #42210b;


#wrapper{
	overflow: hidden;
}
//TOPページのヘッダー
header .toppage{
	background: url("../img/top-img.png"),$color-sub;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	padding-top: 3rem;
	@include xl{
		background-size: cover;
	}
	@include lg{
		background-position: center center;
	}
	@include sm{
		padding-top: 2rem;
	}
	@include xs{
		background: url("../img/top-img-s.png"),$color-sub;
		background-repeat: no-repeat;
		background-position: right bottom;
		background-size: contain;
		padding-bottom: 2rem;
	}
	div h1{
		width: 45%;
		filter: drop-shadow(1px 1px 10px $color-sub);
		@include sm{
			width: 90%;
		}
		@include xs{
			margin-top: 2rem;
		}
	}
	div h1 + p{
		filter: drop-shadow(1px 1px 5px $color-sub);
		text-shadow:1px 1px 0 $color-sub, -1px -1px 0 $color-sub,
			-1px 1px 0 $color-sub, 1px -1px 0 $color-sub,
			0px 1px 0 $color-sub,  0-1px 0 $color-sub,
			-1px 0 0 $color-sub, 1px 0 0 $color-sub;
		display: inline-block;
		font-size: 30px;
		font-size: 3rem;
		font-weight:900;
		line-height: 4.5rem;
		color: $color-font;
		margin: 2rem 0 3rem 0;
		border-bottom: 7px solid $color-main;
		@include xs{
			margin-top: 1rem;
			margin-bottom: 5.5rem;
			font-size: 28px;
			line-height: 4.2rem;
		}
	}
	div h1 + p + ul{
		li{
			display: inline;
			img{
				width: 27%;
				@include xs{
					width: 50%;
					margin-bottom: 0.5rem;
				}
			}
		}
	}
	div dl{
		display: flex;
		align-items:baseline;
		vertical-align: middle;
		margin-bottom: 3rem;
		@include sm{
			margin-bottom: 1rem;
		}
		@include xs{
			display: inline-block;
		}
		dt{
			display: inline-block;
			p{
				display: inline-block;
				background: $color-main;
				padding: 0.3rem 1rem 0.5rem 1rem;
				margin-right: 1rem;
				border-radius:1rem;
				font-size: 18px;
				font-size: 1.8rem;
				color: #fff;
				@include sm{
					margin-right: 0.5rem;
					font-size: 15px;
					font-size: 1.5rem;
				}
				@include xs{
					font-size: 14px;
					font-size: 1.4rem;
					padding: 0.5rem 0.7rem;
				}
			}
		}
		dd{
			display: inline-block;
			color: $color-font;
			margin-right: 3rem;
			font-size: 18px;
			font-size: 1.8rem;
			@include md{
				margin-right: 2rem;
			}
			@include sm{
				margin-right: 1rem;
				font-size: 15px;
				font-size: 1.5rem;
			}
			@include xs{
					font-size: 14px;
					font-size: 1.4rem;
			}
		}
		p{
			margin-left:auto;
			font-size: 28px;
			font-size: 2.8rem;
			font-weight: bold;
			color: $color-font;
			@include sm{
				font-size: 20px;
				font-size: 2rem;
				text-align: right;
			}
			i{
				color: $color-main;
			}
			span{
				font-weight: normal;
				font-weight: bold;
				font-size: 18px;
				font-size: 1.8rem;
				background: $color-main;
				color: #fff;
				padding: 0.3rem 1rem 0.5rem 1rem;
				margin-left: 1rem;
				border-radius:1rem;
				@include sm{
					margin-left: 0.5rem;
					font-size: 15px;
					font-size: 1.5rem;
				}
			}
		}
	}
	div dl + p{
		@include xs{
		font-size: 28px;
		font-size: 2.8rem;
		font-weight: bold;
		color: $color-font;
		i{
			color: $color-main;
		}
		span{
			font-weight: normal;
			font-weight: bold;
			font-size: 18px;
			font-size: 1.8rem;
			background: $color-main;
			color: #fff;
			padding: 0.3rem 1rem 0.5rem 1rem;
			margin-left: 1rem;
			border-radius:1rem;
			}
		}
	}
	nav{
		margin-top: 3rem;
		padding-bottom: 1rem;
		ul li a{
			color: #000;
			&:hover{
				color: $color-main;
				img{
					filter: drop-shadow(0px 0px 10px #fff);
				}
			}
		}
	}
}
.traffic-appeal{
	background: #ff9632;
	padding-top: 3rem;
	ul{
		li{	
			@include xs{
					margin-bottom: 1rem;
				}
			a{
				display: block;
				border: 1px solid #fff;
				width: 100%;
				height: 100%;
				transition-duration: .4s;
				&:hover{
					transform: scale(1.1);
				}
				img{
					width: 100%;
				}
			}
		}
	}
}

//TOPページのヘッダー------ここまで

//ブログ
section#blog{
  background: $color-main;
	padding: 2.5rem 2.5rem 1.5rem 2.5rem;
	#blogitembox{
		background: #fff;
		padding: 1.5rem;
		border-radius: 1rem;
		dl{
			display: flex;
			align-items: center;
			margin-bottom: 0;
			dt{
				color: $color-font;
				text-align: center;
				font-size: 20px;
				font-size: 2rem;
				font-weight: normal;
				@include xs{
					margin-top: 0.5rem;
					margin-bottom: 1rem;
				}
			}
			dd{
				border-left: 1px solid $color-font;
				padding-left: 4rem;
				@include xs{
					border-left: none;
					padding-left: 0rem 1.5rem;
					margin: auto;
					text-align: center;
					line-height: 2rem;
					margin-bottom: 1rem;
				}
				.floatright{
					@include xs{
						text-align: left;
					}
					.blogdate {
						color: $color-font;
						font-size: 20px;
						font-size: 2rem;
						display: inline-block;
						margin-right: 2rem;
						@include xs{
							margin-bottom: 0.5rem;
							font-size: 18px;
							font-size: 1.8rem;
						}
					}
					.blogtitle {
						display: inline-block;
						margin-top: 10px;
						color: $color-font;
						font-size: 20px;
						font-size: 2rem;
						text-align: justify;
						@include xs{
							margin-top: 0.5rem;
							font-size: 18px;
							font-size: 1.8rem;
						}
					}
				}
			}
		}
	}
	#blogitembox + p{
		a{
			display: inline-block;
			margin: auto;
			margin-top: 2rem;
			background: #e58100;
			border-radius: 0.5rem;
			padding: 0.5rem 1.5rem;
			color: #fff;
			font-size: 17px;
			font-size: 1.7rem;
			&:hover{
				background: #fff;
				color: $color-main;
			}
		}
	}
}
//ブログ------ここまで

//スライド
#slideshow{
	padding: 4rem 0;
	h2{
		font-size: 20px;
		font-size: 2rem;
		color: $color-font;
		padding-bottom: 3rem;
		line-height: 4rem;
		@include xs{
			line-height: 3rem;
		}
	}
	.slide-items {
	  width: 100%;
	  height: 100%;
	}

	.slide-items img {
	  width: 100%;
	  object-fit: cover;
	}
	.slick-slide{
		padding: 0 1rem;
	}
}
//スライド------ここまで

//コロナ
#corona{
	background: url("../img/top-coronaback.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 4rem 0;
	@include xs{
		padding-bottom: 6rem;
	}
	h2{
		font-size: 20px;
		font-size: 2rem;
		color: $color-font;
		line-height: 4rem;
		padding-bottom: 2rem;
		@include xs{
			line-height: 3rem;
		}
	}
	ul{
		display: flex;
		justify-content: center;
		position: relative;
		@include xs{
			display: inline-table;
		}
		&:after{
			content: '';
			display: inline-block;
			position: absolute;
			bottom: -105px;
			left: -40px;
			width: 200px;
			height: 100px;
			background-image: url("../img/top-coronaimg.png");
			background-repeat: no-repeat;
			background-size: contain;
			vertical-align: middle;
			@include lg{
					left: 0px;
			}
		}
		li{
			color: $color-font;
			font-weight: bold;
			@include xs{
				display: inline-table;
				margin-bottom: 2rem;
			}
		}
	}
}
//コロナ------ここまで

//症状お悩み
#symptoms-link{
	background: url("../img/top-symptomsback.png"),$color-sub;
	background-position: right center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 4rem 0;
	@include xs{
		padding: 7rem 0 2rem 0;
	}
	h2{
		font-size: 20px;
		font-size: 2rem;
		color: $color-font;
		padding-bottom: 1rem;
	}
	p{
		display: inline-block;
		padding-bottom: 3rem;
		border-bottom: 1px solid #000;
		margin-bottom: 4rem;
	}
	ul{
		@include xs{
			padding: 0;
			}
		li{
		@include xs{
			padding: 0.5rem;
			margin-bottom: 2rem;
			}
			a{
				color: $color-font;
				font-weight: bold;
				padding: 3rem;
				font-size: 25px;
				font-size: 2.5rem;
				@include xs{
					font-size: 20px;
					font-size: 2rem;
					padding: 0;
				}
				div{
					background: $color-mainhalf;
					border-radius: 1rem;
					margin-bottom: 1.5rem;
					img{
						margin: auto;
						width: 100%;
					}
				}
				&:hover{
					color: $color-main;
				}
				&:hover div{
					background: $color-main;
				}
			}
		}
	}
}
//症状お悩み------ここまで

//交通事故施術
#traffic{
	background: url("../img/top-traffic-bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	@include md {
		background-position: left 10% center;
	}
	@include xs{
		background: url("../img/top-traffic-bg-s.png");
		background-position: left center;
	}
	a{
		display: block;
		width: 100%;
		height: 100%;
		text-align: center;
		padding: 8rem 0 6rem;
		@include xs {
			padding: 5rem 0 3rem 0;
		}
		img {
			width: 850px;
			margin-bottom: 1rem;
			@include lg {
				width: 700px;
			}
			@include md {
				width: 600px;
			}
			@include sm {
				width: 500px;
			}
		}
		p {
			color: #fff;
			margin-bottom: 0;
		}
	}
}
//交通事故施術------ここまで
//お客様の声
#voice{
	background: $color-main;
	padding: 7rem 0 6rem 0;
	@include xs{
		padding: 5rem 0 4rem 0;
	}
	h2{
		font-size: 20px;
		font-size: 2rem;
		color: #fff;
		padding-bottom: 1rem;
	}
	ul.slide-items2{
		background: $color-sub;
		border-radius: 1rem;
		padding: 0;
		margin: 1.5rem 0 1rem 0;
		li{
			display: flex;
			align-items: center;
			text-align: justify;
			padding: 2rem 4rem;
			height: 200px;
			@include xs{
				height: 300px;
			}
			p{
			}
		}
		.slick-prev{
			&:before{
				content: '＜';
				display: block;
				font-size: 60px;
				font-size: 6rem;
				position: absolute;
				top: -20px;
				left: -50px;
				font-weight: 100;
			}
		}
		.slick-next{
			&:before{
				content: '＞';
				display: block;
				font-size: 60px;
				font-size: 6rem;
				position: absolute;
				top: -20px;
				right: -50px;
				font-weight: 100;
			}
		}
	}
	.dots1 .slick-dots {
		text-align: center;
		bottom: 0;
		position: relative;
		li {
			display: inline-block;
		}
		button {
			display: block;
			width: 10px;
			height: 10px;
			margin: 6px;
			font-size: 0;
			padding: 0;
			border: 0;
			outline: none;
			cursor: pointer;
			background: #e58100;
			border-radius: 50%;
			&:before{
				color: inherit;
			}
		}
		.slick-active button {
			background: #fff;
		}
	}
	.dots1 + a{
		display: inline-block;
		margin: auto;
		margin-top: 3rem;
		background: #e58100;
		border-radius: 0.5rem;
		padding: 0.5rem 1.5rem;
		color: #fff;
		font-size: 17px;
		font-size: 1.7rem;
		&:hover{
			background: #fff;
			color: $color-main;
		}
	}
}
//交通事故施術------ここまで
//アプリリンク
#applink{
	background: url("../img/top-iconback.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 8rem 0;
	@include xs{
		padding: 5rem 0;
	}
	li{
		margin-bottom: 3rem;
		a{
			color: #000;
			dl{
				background: $color-sub;
				display: flex;
				align-items: center;
				padding: 2rem 3rem;
				border-radius: 1rem;
				&:hover{
					background: $color-mainhalf;
				}
				dt{
					img{
						width: 60px;
					}
				}
				dd{
					padding-left: 2rem;
				}
			}
		}
	}
	li:nth-child(2){
		position: relative;
		dl{
			@include xs{
				display: block;
			}
			dt{
				font-weight: normal;
				border-right: 1px solid #000;
				padding-right: 3rem;
				@include xs{
					border-right: none;
					border-bottom: 1px solid #000;
					padding-bottom: 1rem;
				}
			}
			dd{
				padding-left: 3rem;
				@include xs{
					padding-top: 1rem;
					padding-left: 0;
					font-size: 14px;
					font-size: 1.4rem;
					line-height: 2.5rem;
				}
			}
			&:after{
				content: '';
				display: inline-block;
				position: absolute;
				bottom: 0;
				right: 20px;
				width: 90px;
				height: 90px;
				background-image: url("../img/nikomaru.svg");
				background-repeat: no-repeat;
				background-size: contain;
				vertical-align: middle;
				@include md{
					width: 80px;
					height: 80px;
				}
				@include xs{
					top: 5px;
					right: 5px;
				}
			}
		}
	}
	li:last-child{
		dt img{
			padding-top: 1rem;
			width: 200px;
		}
	}
}
//アプリリンク------ここまで