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


//メニュー①------------------------------------------------------------------ここから
nav.nav-1{
	background-color:#000!important;
	padding: 0;
	div.container-fluid{
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		@include sm {
			flex-wrap: wrap;
		}
		a.navbar-brand{
			margin-left: 1%;
			@include xs {
				margin-left: 2%;
			}
			img{
				width: 250px;
				padding: 2rem;
				@include sm {
					width: 200px;
				}
				@include xs {
					width: 180px;
				}
			}
			+ div{
				display: grid;
				grid-auto-flow: column;
				width: fit-content;
				@include md {
					width: 100%;
					display: flex;
					justify-content: end;
				}
				ul.gnavi-lists{
					margin: 0;
					display: flex;
					align-items: center;
					padding-right: 2rem;
					@include md {
						justify-content: start;
					}
					@include sm {
						display: none;
					}
					li.gnavi-list{
						height: 100%;
						display: flex;
						align-items: center;
						a:not(.dropdown-list){
							padding: 0 0.7em;
							border-right: 1px solid #fff;
							color: #fff;
							transition: .15s;
							line-height: 1.5;
							@include xl {
								font-size: 16px;
								font-size: 1.6rem;
							}
							@include lg {
								font-size: 15px;
								font-size: 1.5rem;
								padding: 0 0.5em;
							}
//							@include md {
//								font-size: 18px;
//								font-size: 1.8rem;
//								padding: 0 0.7em;
//							}
						}
						&:nth-child(4) ul{
							@include lg {
								padding: 0 10%;
							}
							@include md {
								padding: 0 8%;
							}
						}
						&:hover a{
							color:$sub-color!important;
						}
						&:nth-child(3):hover .dropdown-lists,
						&:nth-child(1):hover .dropdown-lists{
							display: flex;
						}
						&:nth-child(4):hover .dropdown-lists,
						&:nth-child(2):hover .dropdown-lists{
							display: flex;
						}
						&:nth-child(5):hover .dropdown-lists,
						&:nth-child(3):hover .dropdown-lists{
							display: flex;
						}
						&:nth-child(5) a{
							border: none;
						}
						&:nth-child(6):hover{
							background-color: inherit;
						}
						&:nth-child(8):hover,
						&:nth-child(7):hover,
						&:nth-child(6):hover{
							background-color: inherit;
						}
						&:nth-child(8) a,
						&:nth-child(7) a,
						&:nth-child(6) a{
							border: none;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 0.5em 1em;
							@include xl {
								padding: 0.5em;
							}
							img{
								width: 25px;
								@include lg {
									width: 20px;
								}
							}
							&:hover img{
								opacity: 0.5;
							}
						}

						ul.dropdown-lists{
							display: none;
							width: 100%;
							position: absolute;
							top: 235px;
							left: 0;
							background-color: $main-color;
							justify-content: center;
							@include lg {
								top: 225px;
							}
							@include md {
								top: 200px;
							}
							li {
								a{
									figure{
										margin: 3rem 1rem;
										img{
											width: 100%;
										}
										figcaption{
											text-align: center;
											color: #fff;
											margin-top: 1rem;
											line-height: 1.1;
											@include xl {
												font-size: 16px;
												font-size: 1.6rem;
											}
										}
									}
									&:hover{
										img{
											opacity: 0.5;
										}
									}
								}
							}
						}
					}
				}
			}		
		}
	}
}

//メニュー②------------------------------------------------------------------ここから
nav.nav-2{
	.menu {
	  display: block;
	  position: relative;
	  cursor: pointer;
		.menu-title {
		  display: block;
		  padding: 12px 0 0;
		  background: $sub-color;
		  text-align: center;
		  color: #ffffff;
		  font-weight: bold;
		  text-transform: uppercase;
		  transition: 0.3s background-color;
			font-size: 20px;
			padding: 2rem;
			&::before {
				content: "";
				display: block;
				height: 0;
				border-top: 5px solid $sub-color;
				border-left: 75px solid transparent;
				border-right: 75px solid transparent;
				border-bottom: 0 solid #dddddd;
				position: absolute;
				top: 100%;
				left: 0;
				z-index: 101;
				transition:
				0.2s 0.2s border-top ease-out,
				0.3s border-top-color;
				}
				&:hover {
					background: $sub-color;
					}
		}
	}

	.menu-title:hover:before { border-top-color: $sub-color; }

	.menu:hover > .menu-title:before {
	  border-top-width: 0;
	  transition:
		0.2s border-top-width ease-in,
		0.3s border-top-color;
	}

	.menu-title:after {
	  content: "";
	  display: block;
	  height: 0;
	  border-left: 75px solid transparent;
	  border-right: 75px solid transparent;
	  border-bottom: 0 solid #ebebeb;
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  z-index: 101;
	  transition: 0.2s border-bottom ease-in;
	}

	.menu:hover > .menu-title:after {
	  border-bottom-width: 5px;
	  transition: 0.2s 0.2s border-bottom-width ease-out;
	}

	.menu-title_2nd { background: #4e96b3; }
	.menu-title_2nd:hover { background: #3e86a3; }
	.menu-title_2nd:before { border-top-color: #4e96b3; }
	.menu-title_2nd:hover:before { border-top-color: #3e86a3; }

	.menu-title_3rd { background: #c97676; }
	.menu-title_3rd:hover { background: #b96666; }
	.menu-title_3rd:before { border-top-color: #c97676; }
	.menu-title_3rd:hover:before { border-top-color: #b96666; }

	.menu-title_4th { background: #dbab58; }
	.menu-title_4th:hover { background: #cb9b48; }
	.menu-title_4th:before { border-top-color: #dbab58; }
	.menu-title_4th:hover:before { border-top-color: #cb9b48; }

	.menu-dropdown {
	  min-width: 100%;
	  padding: 15px 0;
	  position: absolute;
	  background: #ebebeb;
	  z-index: 100;
	  transition:
		0.5s padding,
		0.5s background;
	}

	.menu-dropdown:after {
	  content: "";
	  display: block;
	  height: 0;
	  border-top: 5px solid #ebebeb;
	  border-left: 75px solid transparent;
	  border-right: 75px solid transparent;
	  position: absolute;
	  top: 100%;
	  left: 0;
	  z-index: 101;
	  transition: 0.5s border-top;
	}

	.menu:not(:hover) > .menu-dropdown {
	  padding: 4px 0;
	  background: #dddddd;
	  z-index: 99;
	}

	.menu:not(:hover) > .menu-dropdown:after {
	  border-top-color: #dddddd;
	}

	.menu:not(:hover) > .menu-title:after {
	  border-bottom-color: #dddddd;
	}

	.menu-dropdown > * {
	  overflow: hidden;
	  height: 30px;
	  padding: 5px 10px;
	  background: rgba(0,0,0,0);
	  white-space: nowrap;
	  transition: 
		0.5s height cubic-bezier(.73,.32,.34,1.5),
		0.5s padding cubic-bezier(.73,.32,.34,1.5),
		0.5s margin cubic-bezier(.73,.32,.34,1.5),
		0.5s 0.2s color,
		0.2s background-color;
	}

	.menu-dropdown > *:hover {
	  background: rgba(0,0,0,0.1);
	}

	.menu:not(:hover) > .menu-dropdown > * {
	  visibility: hidden;
	  height: 0;
	  padding-top: 0;
	  padding-bottom: 0;
	  margin: 0;
	  color: rgba(25,25,25,0);
	  transition: 
		0.5s 0.1s height,
		0.5s 0.1s padding,
		0.5s 0.1s margin,
		0.3s color,
		0.6s visibility;
	  z-index: 99;
	}

	.hList {
		display: flex;
		padding: 0;
		li{
			width: 25%;
		}
	}

	.hList > * + * {
	  margin-left: 0;
	}
}

//調整用------------------------------------------------------------------ここから
article ul.demo3{
	margin-top: 10rem;
}