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


//header------------------------------------------------------------------ここから
header{
	nav.bg-body-tertiary{
		background-color:#fff!important;
		padding: 0;
		div.container-fluid{
			padding: 0;
			a.navbar-brand{
				margin-left: 8%;
				@include md {
					margin-left: 2%;
				}
				img{
					width: 180px;
					@include md {
						width: 120px;
					}
					@include sm {
						width: 100px;
					}
				}
				+ div{
					display: grid;
					grid-auto-flow: column;
					width: fit-content;
					ul:not(.dropdown-menu){
						margin: 0;
						display: flex;
						align-items: center;
						@include sm {
							display: none;
						}
						li{
							display: inline-block;
							a:not(.dropdown-toggle,.dropdown-item){
								padding: 0 1em;
								border-right: 1px solid #000;
								color: inherit;
								transition: .15s;
								@include md {
									padding: 0 1.5rem;
									font-size: 1.4rem;
									font-size: 14px;
								}
								&:hover{
									color: $sub-color;
								}
							}
							//ドロップダウンメニュー----ここから
							a.dropdown-toggle{
								background: lighten( $main-color, 50% );
								font-size: 16px;
								font-size: 1.6rem;
								&:hover{
									background: $main-color;
								}
							}
							a.dropdown-toggle + ul{
								padding: 0;
								li{
									display: block;
									a.dropdown-item{
										font-size: 16px;
										font-size: 1.6rem;
										&:hover{
											background: lighten( $sub-color, 50% );
										}
										&:focus{
											background: $sub-color;
										}
									}
								}
							}
							//ドロップダウンメニュー----ここまで
							&:nth-child(6) a{
								border: none;
							}
							//お問合せボタン----ここから
							&:nth-child(7) a{
								display: block;
								padding: 2.5rem;
								background: lighten( $main-color, 50% );
								color: #fff;
								border: none;
								@include md {
									padding: 2rem;
								}
								&:hover{
									background: $sub-color;
									color: #fff;
								}
								svg{
									margin-right: 0.2em;
								}
							}
							//お問合せボタン----ここまで
						}
					}
				}
			}
			button.navbar-toggler{
				background: $main-color;
				border-radius: inherit;
				padding: 4rem;
				border: none;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				overflow: hidden;
				@include md {
					padding: 3.5rem;
				}
				&:focus {
					outline: none!important;
					box-shadow: none!important;
				}
				&:hover{
					background: $sub-color;
				}
				span.navbar-toggler-icon{
					position: absolute;
					display: block;
					content: "";
					width: 50%;
					height: 2px;
					background-color: #fff;
					transition: all 0.5s;
					background-image: none;
					&::before{
						position: absolute;
						display: block;
						content: "";
						width: 100%;
						height: 2px;
						background-color: #fff;
						transition: all 0.5s;
						background-image: none;
						top: -10px;
					}
					&::after{
						position: absolute;
						display: block;
						content: "";
						width: 100%;
						height: 2px;
						background-color: #fff;
						transition: all 0.5s;
						background-image: none;
						bottom: -10px;
					}
				}
			}
			div.offcanvas{
				background:$main-color;
				@include xs {
					width: 65%;
				}
				div.offcanvas-header{
					justify-content: flex-end;
					button{
						position: relative;
						background-image: none;
						width: 50px;
						height: 50px;
						display: flex;
						justify-content: center;
						align-items: center;
						&:focus {
							outline: none!important;
							box-shadow: none!important;
						}
						span.offcanvas-icon{
							position: absolute;
							display: block;
							content: "";
							width: 70%;
							height: 2px;
							background-color: transparent;
							&::before{
								position: absolute;
								display: block;
								content: "";
								width: 100%;
								height: 2px;
								background-color: #fff;
								background-image: none;
								top: 0;
								transform: rotate(45deg);
							}
							&::after{
								position: absolute;
								display: block;
								content: "";
								width: 100%;
								height: 2px;
								background-color: #fff;
								background-image: none;
								bottom: 0;
								transform: rotate(-45deg);
							}
						}
					}
				}
				div.offcanvas-body{
					padding: 0 5rem;
					ul{
						li{
							a{
								color: #fff;
								&:hover{
									color: $sub-color;
								}
							}
							&:first-child{
								margin-bottom: 1em;
								img{
									width: 200px;
								}
							}
							//お問合せボタン----ここから
							&:nth-child(8) a{
								display: inline-block;
								width: 50%;
								text-align: center;
								padding: 0.5rem;
								margin-top: 1.5rem;
								background: lighten( $main-color, 50% );
								color: #fff;
								@include xs {
									width: 100%;
								}
								&:hover{
									background: $sub-color;
								}
								svg{
									margin-right: 0.2em;
								}
							}
							//お問合せボタン----ここまで
						}
					}
				}
			}
		}
	}
}

//footer------------------------------------------------------------------ここから
footer{
	background: $main-color;
	color: #fff;
	padding: 8rem 0 4rem 0;
	@include xs {
		padding: 4rem 0;
				}
	div.container{
		div{
			margin-bottom: 2rem;
			display: flex;
			align-items: flex-end;
			@include xs {
				flex-wrap: wrap;
			}
			a{
				margin-right: 3rem;
				@include xs {
					margin-right: 0;
					margin-bottom: 1rem;
				}
				img{
					width: 180px;
				}
			}
			p{
				font-size: 2rem;
				font-size: 20px;
				font-weight: 600;
				margin: 0;
			}
			&+ p{
				svg{
					margin-right: 0.5rem;
				}
			}
		}
		.sns{
			width: 20px;
			margin-right: 1rem;
			&:hover{
				opacity: 0.5
			}
		}
		p + ul{
			margin-top: 3rem;
			margin-bottom: 0;
			display: flex;
			flex-wrap: wrap;
			@include xs {
				font-size: 1.3rem;
				font-size: 13px;
			}
			li{
				&:first-child a{
					border-left:none;
					padding-left:0
				}				
				a{
					border-left: 1px solid #fff;
					padding:0 1rem;
					color: #fff;
					transition: 0.3s;
					&:hover{
						color: $sub-color;
					}
				}
			}
		}
		ul + ul{
			display: flex;
			@include xs {
				font-size: 1.3rem;
				font-size: 13px;
			}
			li{
				&:first-child a{
					padding-left:0
				}				
				a{
					padding:0 1rem;
					color: #fff;
					transition: 0.3s;
					&:hover{
						color: $sub-color;
					}
					svg{
						margin-left: 0.5rem;
					}
				}
			}
		}
		.copyright{
			text-align: center;
			font-size: 1.2rem;
			font-size: 12px;
			margin: 0;
			margin-top: 8rem;
			@include xs {
				margin-top: 4rem;
			}
		}
	}
}


//共通parts----------------------------------------------------------------ここから
//隙間
section{
	padding-bottom: 5rem;
}
//ページ内移動
.anchor{
	margin-top: -7.5rem;
    padding-top: 7.5rem;
}
//本文
#ul-header{
	margin-top: 75px;
	@include md {
		margin-top: 60px;
	}
}
//見出し
h2{
	font-size: 5.5rem;
	font-size: 55px;
	font-weight: bold;
	margin-bottom: 2rem;
	@include lg {
		font-size: 5rem;
		font-size: 50px;
	}
	@include sm {
		font-size: 4.5rem;
		font-size: 45px;
	}
	@include xs {
		font-size: 4rem;
		font-size: 40px;
	}
	span{
		padding-left: 1rem;
		font-size: 24px;
		font-size: 2.4rem;
		@include lg {
			font-size: 20px;
			font-size: 2rem;
		}
		@include sm {
			font-size: 16px;
			font-size: 1.6rem;
			font-weight: normal;
			}
		@include xs {
			font-size: 14px;
			font-size: 1.4rem;
		}
	}
}

//リンクボタン
.link-button{
	div.row{
		div{
			a{
				overflow: hidden;
				height: 320px;
				display: flex;
				justify-content: center;
				align-items: center;
				width:100%;
				line-height:50px;
				position:relative;
				text-align:center;
				font-size: 5.5rem;
				font-size: 55px;
				font-weight: 600;
				color: inherit;
				@include lg {
					height: 250px;
					font-size: 5rem;
					font-size: 50px;
				}
				@include md {
					height: 200px;
					font-size: 4rem;
					font-size: 40px;
				}
				@include xs {
					height: 150px;
					font-size: 3.5rem;
					font-size: 35px;
				}
				//hover前の見た目----ここから
				&::after{
					content:"";
					width:100%;
					height:100%;
					position:absolute;
					z-index:0;
					left:0;
					top: 0;
					transition:0.5s;
					background: url("../img/top-link-back-1.webp");
					background-color:rgba(0,0,0,0.6);
					background-repeat: no-repeat;
					background-size: cover;
					background-blend-mode: multiply;
				}
				//hover前の見た目----ここまで
				//hover後の見た目----ここから
				&::before{
					content:"";
					width:100%;
					height:100%;
					position:absolute;
					z-index:0;
					left:0;
					top: 0;
					transition:0.5s;
					background: url("../img/top-link-back-1.webp");
					background-color:rgba(0,0,0,0.2);
					background-repeat: no-repeat;
					background-size: cover;
					background-blend-mode: multiply;
				}
				//hover後の見た目----ここまで
				&:hover::before{
					-moz-transform: scale(1.1);
					-webkit-transform: scale(1.1);
					-ms-transform: scale(1.1);
					transform: scale(1.1);
				}
				&:hover::after{
					opacity: 0;
					-moz-transform: scale(1.1);
					-webkit-transform: scale(1.1);
					-ms-transform: scale(1.1);
					transform: scale(1.1);
				}
				//文字の見た目----ここから
				p{
					position: relative;
					z-index: 2;
					line-height: normal;
					color: #fff;
					span{
						width: 250px;
						padding: 0.5rem;
						display: block;
						margin: auto;
						margin-top: 1rem;
						background: $main-color; 
						color: #fff;
						font-size: 2rem;
						font-size: 20px;
						font-weight: normal;
						border-radius: 3rem;
						transition: 0.3s;
						@include md {
							width: 220px;
							font-size: 1.6rem;
							font-size: 16px;
						}
						@include sm {
							width: 180px;
						}
						@include xs {
							margin-top: 0.5rem;
						}
					}
				}
				&:hover p {
					span{
						background: $sub-color;
					}
				}
				//文字の見た目----ここまで
			}
			a.button-b{
				&::before{
					background:url("../img/top-link-back-2.webp");
					background-color:rgba(0,0,0,0.3);
					background-repeat: no-repeat;
					background-size: cover;
					background-blend-mode: multiply;
				}
				&::after{
					background:url("../img/top-link-back-2.webp");
					background-color:rgba(0,0,0,0.6);
					background-repeat: no-repeat;
					background-size: cover;
					background-blend-mode: multiply;
				}
			}
		}
	}
}

//下層ヘッダー
.header-title{
	position: relative;
	display: flex;
	justify-content: flex-end;
	div{
		background-image: url("../01aboutus/img/aboutus-header-back.jpg"),
			linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%);
		background-blend-mode:overlay;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: left center;
		width: 95%;
		height: 400px;
		display: flex;
		align-items: flex-end;
		@include sm {
			width: 100%;
			height: 250px;
		}
		@include xs {
			background-image: url("../01aboutus/img/aboutus-header-backmini.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: bottom center;
			justify-content: center;
			text-align: center;
			height: 450px;
		}
		h1{
			font-size: 7rem;
			font-size: 70px;
			font-weight: 700;
			line-height: 4.5rem;
			margin: 3rem 0 3rem 6rem;
			@include sm {
				font-size: 6rem;
				font-size: 60px;
			}
			@include xs {
				margin: 3rem 0;
			}
			span{
				font-size: 2.5rem;
				font-size: 25px;
				color: $sub-color;
				font-weight: 500;
				@include sm {
					font-size: 2rem;
					font-size: 20px;
				}
			}
		}
	}
}

//パンくずリスト
nav.breadcrumb-container{
	position: relative;
    display: flex;
    justify-content: flex-end;
	.breadcrumb{
		width: 95%;
		padding: 3rem 0 8rem 6rem;
		margin: 0;
		list-style: none;
		.breadcrumb-item{
			font-size: 20px;
			font-size: 2rem;
			a{
				color: $sub-color;
			}
		}
	}
}


//アニメーション
.js-text-effect span{
    display: inline-block;//必須
    opacity: 0;
    visibility: visible;
    transform: rotateY(90deg);
}


//ページトップ
p#page-top {
	position: fixed;
	right: 0;
    bottom: 5rem;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 90%;
    line-height: 1.5rem;
    color: #737373;
    padding: 0.5rem 0.5rem 0 3.5rem;
    border-top: solid 1px;
	transition: 0.3s;
	z-index: 10;
	a{
		color: #737373;
	}
	&::before {
		content: "";
		display: block;
		position: absolute;
		top: -1px;
		left: 0px;
		width: 15px;
		border-top: solid 1px;
		transform: rotate(35deg);
		transform-origin: left top;
		transition: 0.3s;
	}
	&:hover{
		bottom: 7rem;
	}
}

//コード
pre {
    position: relative;
    white-space: pre-wrap;
    word-wrap: break-word;
	padding: 0 1em;
	border-radius: 5px;
	background: #25292f;
	color: #fff;
	font-size: 14px;
    font-size: 1.4rem;
    height: 200px;
    overflow: scroll;
    margin: 2rem 0;
}
//コードコピー
.code-copy{
	position: relative;
	.code-copy-btn{
		padding: 0rem 1rem 0.3rem;
		border-radius: 0.5rem;
		background: $sub-color;
		color: #fff;
		border: 2px solid $sub-color;
		position: absolute;
		top: 1rem;
		right: 1rem;
		&:hover{
			color: $sub-color;
			background: #fff;
		}
	}
}
//導入前に
.attention{
	background: #E3E3E3;
	border-radius: 1rem;
	padding: 3rem;
	margin: 3rem 0;
	h3{
		padding-bottom: 1rem;
	}
}