@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;
}

//グーグルマップ
.google-map{
	width: 100%;
	iframe{
		width: 100%;
		height: 400px;
		vertical-align: bottom;
	}
}
//グーグルマップ------ここまで
//スマホ用メニュー
.mobilephone{
	position: fixed;
	margin: 0;
	padding: 0;
	width: 100%;
	bottom: -10px;
	z-index: 1;
	ul{
		li:first-child{
			padding: 0;
			a{
				display: block;
				background: #20c92f;
				padding: 1rem 0.5rem 1rem 1.5rem;
				text-align: center;
				color: #fff;
				font-weight: bold;
				font-size: 18px;
				font-size: 1.8rem;
				line-height: 2.5rem;
				height: 100%;
				&:hover{
					background: #189723;
				}
				span{
					color: yellow;
				}
			}
		}
		li:last-child{
			padding: 0;
			a{
				display: block;
				background: #00A0FF;
				padding: 2rem 2rem 2rem 1rem;
				text-align: center;
				color: #fff;
				font-weight: bold;
				font-size: 18px;
				font-size: 1.8rem;
				height: 100%;
				&:hover{
					background: #0078BF;
				}
				span{
					color: yellow;
				}
			}
		}
	}
}
//スマホ用メニュー------ここまで
//下層ページのヘッダー
header.subpage{
	background: $color-sub;
	padding-top: 3rem;
	@include sm{
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	div h1{
		width: 75%;
		@include sm{
			width: 90%;
		}
	}
	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: 3rem;
		ul li a{
			color: #000;
			&:hover{
				color: $color-main;
				img{
					opacity: 0.5;
				}
			}
		}
	}
}
//下層ページのヘッダー------ここまで
//共通タイトル
section.title-img{
	background: url("../01about/img/header-about.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	h2{
		font-size: 35px;
		font-size: 3.5rem;
		color: #fff;
		margin: auto;
		padding: 10rem 5rem;
		@include xs{
			font-size: 30px;
			font-size: 3rem;
			padding: 7rem 3rem;
		}
	}
}
h3{
	font-size: 25px;
	font-size: 2.5rem;
	text-align: center;
	margin: 10rem 0rem 5rem 0;
	@include xs{
		font-size: 20px;
		font-size: 2rem;
		margin: 5rem 0rem 3rem 0;
	}
}
//共通タイトル------ここまで
//症状から見る
.symptoms-link{
	background: $color-sub;
	padding: 1rem 0;
	h3{
		margin: 1.5rem 0 1.5rem 0;
		font-size: 20px;
		font-size: 2rem;
		font-weight: bold;
		color: $color-font;
	}
	ul{
		display: flex;
		justify-content: center;
		li{
			@include md{
				padding-left: 0.5rem;
				padding-right: 0.5rem;
			}
			@include sm{
				font-size: 12px;
				font-size: 1.2rem;
			}
			a{
				cursor: pointer;
				font-weight: bold;
				color: $color-font;
				@include sm{
					width: 50%;
				}
				div{
					background: $color-mainhalf;
					border-radius: 1rem;
				}
				&:hover{
				color: $color-main;
					div{
						background: $color-main;
					}
				}
			}
		}
	}
}
//症状から見る------ここまで
//フッター
footer{
	.white-back{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 3rem 0;
		@include xs{
			padding: 2rem 0;
		}
		div.col-md-4 a{
			@include sm{
				display: block;
				text-align: center;
				margin: auto;
				padding-bottom: 2rem;
			}
			img{
				@include sm{
					width: 60%;
					margin: auto;
				}
			}
		}
		div + div{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			@include sm{
				justify-content: center;
			}
			img{
				width: 80%;
				@include xs{
					width: 100%;
				}
			}
		}
		.line-link{
			text-align: center;
			display: inline-block;
			background: #20c92f;
			color: #fff;
			margin-left: 3rem;
			padding: 0.8rem 1rem;
			border-radius: 0.8rem;
			line-height: 2.3rem;
			@include sm{
				padding: 1rem 2rem;
			}
			@include xs{
				padding: 1rem;
				width: 60%;
			}
			span{
				font-weight: bold;
				font-size: 20px;
				font-size: 2rem;
			}
			&:hover{
				background: #189723;
			}
		}
	}
	.orange-back{
		background: $color-main;
		padding: 3rem 0;
		color: #fff;
			@include xs{
				padding: 2rem 0;
			}
		div.col-md-5{
			@include xs{
				text-align: center;
				margin-bottom: 2rem;
			}
		}
		.row p{
			span{
				font-size: 40px;
				font-size: 4rem;
				font-weight: bold;
			}
			@include sm{
				display: inline-table;
				margin-right: 2rem;
			}
		}
		p + a,p + a + a{
			margin-right: 0.5rem;
			background: #fff;
			color: $color-main;
			padding: 0.2rem 1.5rem 0.5rem 1.5rem;
			border-radius: 0.5rem;
			border: 1px solid #fff;
			font-weight: bold;
			&:hover{
				background: #bf7126;
				color: #fff;
			}
			@include sm{
				display: inline-table;
			}
		}
		table{
			width: 100%;
			border-top: 1px solid #fff;
			font-size: 18px;
			font-size: 1.8rem;
			margin-bottom: 1rem;
			@include xs{
				font-size: 16px;
				font-size: 1.6rem;
			}
			tr{	
				border-bottom: 1px solid #fff;
				th{
					font-weight: normal;
					text-align: center;
					padding: 1rem;
					@include xs{
						padding: 0.5rem;
					}
				}
				td{
					text-align: center;
					border-left: 1px solid #fff;
					padding: 1rem;
					@include xs{
						padding: 0.5rem;
					}
				}
			}
		}
		dl{
			display: flex;
			align-items:baseline;
			vertical-align: middle;
			@include xs{
				display: inherit;
				text-align: left;
			}
			dt{
				background: #fff;
				color: $color-main;
				padding: 0 1rem;
				border-radius: 0.5rem;
				@include xs{
					display: inline-block;
				}
			}
			dd{
				margin: 0 3rem 0 1rem;
				@include xs{
					display: inline-block;
					margin-bottom: 1rem;
				}
			}
		}
		nav{
			margin-top: 2rem;
			@include xs{
				margin-top: 0;
			}
			ul{
				li{
					display: inline-block;
					margin-right: 2rem;
					a{
						color: #fff;
						&:before{
							font-family: "Font Awesome 5 Free";
							content: "\f054";
							padding-right : 5px;
							font-weight: 900;
						}
						&:hover{
							color: #bf7126;
						}
					}
				}
			}
		}
		hr{
			background: #fff;
			margin: 2rem 0;
		}
	}
}
//フッター------ここまで