@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: #8C2126;
$sub-color: #C79E82;
//全体のカラー設定（一括）----ここまで

//message---------------------------------------------ここから
#message{
	background-image: url("../img/about-tile-right.png"),url("../img/about-tile-left.png");
	background-repeat: no-repeat;
	background-size: auto;
	background-position: right -50px top 0px,left -150px bottom 90px;
	position: relative;
	margin-top: 4rem;
	@include xs {
		background-size: 40%;
		background-position: right -50px top 0px, left -75px bottom 20px;
	}
	div.container{
		margin-bottom: 2rem;
		div.d-flex{
			margin-top: 4rem;
			@include lg {
				justify-content: space-between;
			}
			@include xs {
				flex-wrap: wrap;
			}
			div{
				position: relative;
				width: 36%;
				@include lg {
					width: 27%;
				}
				@include xs {
					width: 100%;
				}
				img{
					min-width: 430px;
					position: absolute;
					@include lg {
						min-width: 300px;
					}
					@include md {
						min-width: 230px;
					}
					@include xs {
						position: relative;
					}
				}
			}
			dl{
				background-color: #fff;
				padding: 7rem 8rem 7rem 12rem;
				width: 64%;
				margin-top: 5rem;
				@include lg {
					width: 80%;
					padding:5rem 5rem 5rem 14rem;
				}
				@include md {
					width: 80%;
					padding:4rem 3rem 4rem 12rem;
				}
				@include sm {
					padding:4rem 3rem 4rem 14rem;
				}
				@include xs {
					width: 100%;
					padding:3rem;
					margin-top: 0rem;
				}
				dt{
					font-family: "Noto Serif JP", serif;
					font-size: 26.5px;
					font-size: 2.65rem;
					font-weight: normal;
					line-height: 4rem;
					margin-bottom: 3rem;
					letter-spacing: 1px;
					font-weight: 300;
					text-align: justify;
					@include md {
						font-size: 25px;
						font-size: 2.5rem;
					}
					@include xs {
						font-size: 22px;
						font-size: 2.2rem;
						letter-spacing: 0;
						line-height: normal;
						margin-bottom: 2rem;
					}
				}
				dd{
					p{
						text-align: justify;
						line-height: 3.5rem;
						@include xs {
							line-height: 1.8;
						}
						& + p{
							text-align: right;
							span{
								font-family: "Noto Serif JP", serif;
								font-size: 26.5px;
								font-size: 2.65rem;
								@include md {
									font-size: 25px;
									font-size: 2.5rem;
								}
								@include xs {
									font-size: 22px;
									font-size: 2.2rem;
								}
							}
						}
					}
				}
			}
		}
	}
}


//policye---------------------------------------------ここから
#policy{
	padding-bottom: 8rem;
	@include md {
		padding-bottom: 4rem;
	}
	p.mintyou{
		font-family: "Noto Serif JP", serif;
		font-size: 29px;
		font-size: 2.9rem;
		letter-spacing: 1px;
		padding: 2rem;
		font-weight: 300;
		@include md {
			font-size: 25px;
			font-size: 2.5rem;
		}
		@include sm {
			font-size: 22px;
			font-size: 2.2rem;
		}
		@include xs {
			line-height: 1.6;
		}
	}
}


//advantage-------------------------------------------ここから
#advantage{
	background-color: #fff;
	text-align: center;
	padding: 8rem 0;
	margin-bottom: 8rem;
	@include md {
		padding: 6rem 0;
		margin-bottom: 6rem;
	}
	@include sm {
		padding: 4rem 0;
		margin-bottom: 4rem;
	}
	@include xs {
		margin-bottom: 1rem;
	}
	h3{
		border: none;
		padding: 0;
		& + div{
			p.mintyou{
				font-family: "Noto Serif JP", serif;
				font-size: 50px;
				font-size: 5rem;
				letter-spacing: 5px;
				padding: 2rem;
				font-weight: 300;
				margin: 5rem 0 2rem 0;
				@include sm {
					font-size: 40px;
					font-size: 4rem;
					padding: 1rem;
				}
				@include xs {
					font-size: 30px;
					font-size: 3rem;
					margin: 3rem 0 1rem 0;
				}
			}
			ul{
				margin: 0 6rem;
				@include lg {
					margin: 0;
				}
				li{
					padding: 0.5rem 0.75rem 0 0.75rem;
					@include sm {
						padding: 0 0.5rem 0 0.5rem;
					}
					p{
						color: $main-color;
						border: 1px solid $main-color;
						padding: 1rem;
						display: block;
						@include md {
							padding: 1rem 0.5rem;
						}
						@include sm {
							padding: 1rem 0em;
							font-size: 12.5px;
							font-size: 1.25rem;
						}
						@include xs {
							padding: 1rem 0em;
							font-size: 15px;
							font-size: 1.5rem;
						}
					}
				}
			}
			& + div{
				ul{
					margin-top: 8rem;
					@include md {
						margin-top: 6rem;
					}
					@include sm {
						margin-top: 4rem;
					}
					li{
						border-right: 1px solid $main-color;
						@include xs {
							border-right: none;
							margin-bottom: 2rem;
						}
						dl{
							padding:0 3.5rem;
							@include md {
								padding:0 2rem;
							}
							@include sm {
								padding:0 1rem;
							}
							dt{
								p{
									font-family: "Josefin Sans", sans-serif;
									font-size: 60px;
									font-size: 6rem;
									color: $main-color;
									font-weight: 300;
									line-height: normal;
									@include sm {
										font-size: 50px;
										font-size: 5rem;
									}
								}
								img{
									padding: 2rem 3rem 3rem 3rem;
									@include xs {
										padding: 0rem 3rem 2rem 3rem;
									}
								}
							}
							dd{
								h4{
									font-size: 20px;
									font-size: 2rem;
									color: $main-color;
									font-weight: bold;
									margin-bottom: 1em;
									@include sm {
										font-size: 18px;
										font-size: 1.8rem;
									}
									@include xs {
										font-size: 20px;
										font-size: 2rem;
									}
								}
								p{
									text-align: justify;
								}
							}
						}
						&:last-child{
							border: none;
						}
					}
				}
			}
		}
	}
}


//drone-----------------------------------------------ここから
#drone{
	@include xs {
		padding: 2rem 2rem 5rem 2rem;
	}
	div.container{
		background-color: #fff;
		padding: 0;
		margin-bottom: 14rem;
		@include md {
			margin-bottom: 12rem;
		}
		@include sm {
			margin-bottom: 10rem;
		}
		@include xs {
			margin-bottom: 4rem;
		}
		div{
			@include md {
				padding: 1rem 2rem 2rem 2rem;
			}
			@include xs {
				padding: 0;
				padding-bottom: 1rem;
			}
			div.d-flex{
				@include md {
					flex-wrap: wrap;
				}
				div{
					padding: 5rem 5rem 5rem 10rem;
					@include lg {
						padding: 3rem 1.5rem 3rem 3.5rem;
					}
					@include sm {
						padding: 3rem 0;
					}
					@include xs {
						padding: 3rem 0 2rem;
					}
					p{
						margin: 3rem 0 0 0;
						line-height: 3rem;
						text-align: justify;
					}
					& + div{
						padding: 0;
						width: 90%;
						@include md {
							width: 100%;
						}
						img{
							width: 100%;
						}
					}
				}
			}
		}
	}
}


//profile----------------------------------------------ここから
#profile{
	padding-bottom: 10rem;
	@include md {
		padding-bottom: 8rem;
	}
	@include sm {
		padding-bottom: 6rem;
	}
	div.row{
		margin-bottom: 14rem;
		@include lg {
			margin-bottom: 10rem;
		}
		@include xs {
			margin-bottom: 6rem;
		}
		div{
			position: relative;
			&::before{
				content: '';
				position: absolute;
				bottom: -35px;
				left: -210px;
				display: inline-block;
				width: 460px;
				height: 380px;
				background-image: url("../img/about-profile-img.png");
				background-size: contain;
				background-repeat: no-repeat;
				vertical-align: middle;
				@include xl {
					left: -150px;
				}
				@include xs {
					display: none;
				}
			}
		}
		table{
			position: relative;
			@include xs {
				margin-top: 2rem;
			}
			tr{
				th{
					letter-spacing: 2px;
					border-bottom: 1px solid $main-color;
					padding: 1rem;
					@include xs {
						font-size: 15px;
						font-size: 1.5rem;
					}
				}
				td{
					letter-spacing: 2px;
					border-bottom: 1px solid #C8C8C8;
					padding: 1rem 2rem;
					@include xs {
						font-size: 15px;
						font-size: 1.5rem;
						text-align: justify;
						padding: 1rem;
					}
				}
			}
		}
		& + div{
			h3{
				text-align: center;
				border: none;
			}
			ul{
				li{
					padding: 0rem 2.5rem 2.5rem 2.5rem;
					@include lg{
						padding: 0rem 1.5em 2rem 1.5rem
					}
					dl{
						dt{
							font-weight: 400;
							margin: 4rem 0;
							img{
								width: 100%;
							}
						}
						dd{
							h4{
								font-size: 23px;
								font-size: 2.3rem;
								letter-spacing: 2px;
								font-weight: bold;
							}
							p{
								text-align: justify;
								letter-spacing: 1px;
								border-bottom: 1px solid #C8C8C8; 
								padding: 1.5rem 0;
								margin-bottom: 1.5rem;
								& + p{
									border: none;
									padding: 0;
									margin: 0;
								}
							}
						}
					}
				}
			}
		}
	}
}