/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap');

//今回のヘッダーフッター配下にのみ反映するリセットCSS
@mixin reset {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: initial;

	*, *::before, *::after {
		box-sizing: border-box;
	}
	*{
		font-family: 'Noto Sans JP', sans-serif !important;
		min-height: auto;
	}
	body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, li, a, span{
		margin: 0;
		padding: 0;
		border: none;
		font-size: 15px;
		letter-spacing: .05em;
		line-height: 1.5;
		font-feature-settings: "palt";
		text-align: justify;
	}
	ul[role="list"], ol[role="list"] {
		list-style: none;
	}
	li {
		list-style: none;
	}
	a{
		&:not([class]) {
			text-decoration-skip-ink: auto;
		}
		&:hover{
			text-decoration: none;
		}
	}
	img, picture {
		max-width: 100%;
		display: block;
	}
	input, button, textarea, select {
		font: inherit;
	}
	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
//			animation-duration: 0.01ms !important;
//			animation-iteration-count: 1 !important;
//			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

//レスポンシブmixin
$breakpoint: (
  sp: 'screen and (max-width: 1024px)',
);

@mixin mq($bp) {
  @media #{map-get($breakpoint, $bp)} {
   @content;
  }
}

$color-bg: #f1f1f1;
$color-main: #21366E;
$color-font: #222;
$menu-btn-height: 48px;

@mixin font($w: 300){
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: $w;
}

@mixin linkIcon(){
	display: inline-block;
	text-indent: -1.2em;
	margin-left: 1.2em;
	&:before{
		content: '＞';
		display: inline-block;
		transform: scale(.6, 1);
		width: 1.2em;
		margin-left: 0;
		text-indent: 0;
		@include mq(sp){
			width: 1.2em;
		}
	}
	&:hover{
		text-decoration: underline;
	}
}
@mixin linkBtnIcon($c: #fff){
	position: relative;
	&:after{
		content: '＞＞';
		display: inline-block;
		position: absolute;
		right: 8px;
		top: 50%;
		transform: translateY(-50%) scale(.6, 1);
		color: $c;
		letter-spacing: -.25rem;
	}
}

$categories: "g-bs", "g-bb", "g-bch", "g-bn", "g-br", "g-bre", "g-sc";

@each $cate in $categories {
	html.#{$cate} {
		.phg-header-#{$cate}{
			span{
				color: $color-main;
				font-weight: 500;
			}
		}
	}
}

//新ヘッダー
#phg-header {
	@include reset;
	background-color: $color-bg;
	@include mq(sp){
		background-color: transparent;
		height: 48px;
	}
	.phg-dispSp{
		display: none;
		@include mq(sp){
			display: inherit;
		}
	}
	.phg-header {
		&-inner {
			position: relative;
			max-width: 1100px;
			width: calc(100% - 40px);
			margin: auto;
			padding: 48px 0 24px;
			@include mq(sp){
				padding: 16px;
				width: 100%;
				height: 48px;
				background-color: $color-bg;
				position: fixed;
				z-index: 1;
			}
		}
		&-logo {
			display: block;
			width: 280px;
			height: auto;
			margin: auto;
			@include mq(sp){
				width: 163px;
			}
		}
		&-right{
			position: absolute;
			right: 14px;
			top: 14px;
			display: flex;
			@include mq(sp){
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		&-mypage{
			display: flex;
			cursor: pointer;
			&-text{
				@include font(300);
				font-size: 13px;
				line-height: 1.6;
				color: $color-font;
			}
			&-icon{
				width: 15px;
				height: auto;
				margin-left: 4px;
				&-img{
					fill:none;
					stroke:$color-font;
					stroke-miterlimit:10;
				}
			}
			@include mq(sp){
				width: 48px;
				height: 48px;
				align-items: center;
				justify-content: center;
				&-text{
					display: none;
				}
				&-icon{
					width: 13px;
					margin-left: 0;
				}
			}
		}
		&-menu{
			&-list{
				max-width: 1100px;
				width: calc(100% - 40px);
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				margin: auto;
				@include mq(sp){
					position: absolute;
					width: auto;
					height: 100%;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					background-color: #fff;
					z-index: auto;
					left: -100%;
					transition: .6s all ease;
				}
				&-btn{
					@include font(300);
					display: flex;
					min-height: $menu-btn-height;
					align-items: center;
					justify-content: center;
					padding: 0 1em;
					cursor: pointer;
					strong{
						@include font(300);
						font-size: 15px;
						line-height: 1;
						color: $color-font;
//						letter-spacing: .05em;
						padding: 4px 0;
					}
					&:hover{
						strong{
							color: $color-main;
						}
					}
					&.phg-current{
						strong{
							@include font(500);
							color: $color-main;
							border-bottom: 1px solid $color-main;
							@include mq(sp){
								border-bottom: none;
							}
						}
					}
					@include mq(sp){
						justify-content: flex-start;
						padding: 12px 15px;
						border-bottom: 1px solid #efefef;
					}
				}
				&-content{
					@include mq(sp){
						width: 100%;
					}
				}
			}
		}
		&-pulldown{
			&-area{
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				width: 100%;
				-webkit-backdrop-filter: blur(10px);
				backdrop-filter: blur(10px);
				will-change: filter;
				background-color: rgba(255, 255, 255, .85);
				border-bottom: 1px solid #eee;
				overflow: hidden;
				@include mq(sp){
					display: block;
					z-index: -1;
					top: 0;
					left: -100vw;
					width: calc(100vw - 100%);
					max-width: 320px;
					height: 100%;
					transition: .6s all ease;
					&.phg-active{
						left: 100%;
					}
				}
			}
			&-content{
				display: none;
				&-inner{
					position: relative;
					max-width: 1100px;
					margin: auto;
					display: grid;
					grid-template-columns: 1fr 4fr 1fr;
					gap: 0 20px;
					@include mq(sp){
						display: flex;
						flex-direction: column;
						padding: 0;
						gap: 0;
						height: 100%;
						overflow-y: scroll;
					}
				}
				&-title{
					display: flex;
					align-items: flex-end;
					line-height: 1;
					&-text{
						@include font(300);
						font-size: 22px;
						color: $color-main !important;
						margin-right: 14px;
						cursor: pointer;
						line-height: 1;
						&:hover{
							text-decoration: underline;
						}
						@include mq(sp){
							display: none;
						}
					}
					&-btn{
						@include font(500);
						font-size: 16px;
						color: $color-main !important;
						margin-left: 14px;
						line-height: 1;
						@include linkIcon();
						@include mq(sp){
							min-height: 48px;
							width: 100%;
							display: flex;
							align-items: center;
							margin-left: 0;
							text-indent: 0;
							padding: 10px 14px;
							border-top: 1px solid #fff;
							border-bottom: 1px solid rgba(0,0,0,.1);
							&-sp{
								width: 100%;
							}
						}
					}
				}
				&-img{
					width: 236px;
					margin-top: 42px;
					@include mq(sp){
						display: none;
					}
				}
				&-main{
					margin-top: 42px;
					padding-bottom: 24px;
					@include mq(sp){
						margin-top: 0;
						padding-bottom: 0;
					}
					&-nav{
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						margin-top: 24px;
						gap: 12px 8px;
						@include mq(sp){
							display: flex;
							flex-direction: column;
							gap: 0;
							margin-top: 0;
						}
						&-btn{
							@include font(500);
							font-size: 14px;
							color: $color-main !important;
							@include linkIcon();
							@include mq(sp){
								min-height: 48px;
								width: 100%;
								display: flex;
								align-items: flex-start;
								margin-left: 0;
								text-indent: 0;
								padding: 12px 14px;
								border-top: 1px solid #fff;
								border-bottom: 1px solid rgba(0,0,0,.1);
							}
						}
					}
				}
				&-cv{
					grid-column: 3;
					grid-row: 1/4;
//					margin-left: 10px;
					padding: 42px 0 16px;
					width: 200px;
					height: 100%;
					background-color: rgba(255,255,255,.3);
					box-shadow: 0 0 6px rgba(0,0,0,.15);
					@include mq(sp){
						height: auto;
						margin: 0;
						padding: 15px;
						width: 100%;
//						backdrop-filter: blur(10px);
					}
//					&-2{
//						position: absolute;
//						right: 0;
//						top: 0;
//						padding: 48px 0 48px;
//						width: 184px;
//						height: 100%;
//						background-color: rgba(255,255,255,.3);
//						&:before{
//							content: '';
//							width: 1px;
//							height: 100%;
//							position: absolute;
//							left: -2px;
//							top: 0;
//							border-left: 1px solid rgba(0,0,0,.25);
//							border-right: 1px solid rgba(255,255,255,1);
//						}
//						&:after{
//							content: '';
//							width: 1px;
//							height: 100%;
//							position: absolute;
//							right: -2px;
//							top: 0;
//							border-left: 1px solid rgba(0,0,0,.25);
//							border-right: 1px solid rgba(255,255,255,1);
//						}
//					}
					&-nav{
						&-btn{
							@include font(300);
							@include linkBtnIcon();
							display: flex;
							align-items: center;
							justify-content: flex-start;
							min-height: 44px;
							width: 100%;
							background-color: $color-main;
							color: #fff !important;
							padding: 10px 28px 10px 12px;
							font-size: 13px;
							margin-top: 1px;
							line-height: 1.2;
							@include mq(sp){
								min-height: 48px;
							}
							&[target="_blank"]{
								&:after{
									content: '';
									display: inline-block;
									width: 10px;
									height: 10px;
									position: absolute;
									right: 10px;
									top: 50%;
									transform: translateY(-50%);
									background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2010%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22m0%200h10v10h-10z%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23a)%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22m5.5%200v1h2.79l-4.15%204.15.71.71%204.15-4.15v2.79h1v-4.5z%22%2F%3E%3Cpath%20d%3D%22m8%209h-7v-7h3.5v-1h-4.5v9h9v-4.5h-1z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
									background-position: center;
									background-size: cover;
									@include mq(sp){
										right: 12px;
									}
								}
							}
						}
					}
				}
				&-sub{
					position: relative;
					padding-top: 24px;
					margin-bottom: 36px;
					grid-column: 2;
					grid-row: 2/3;
					&:before{
						content: '';
						width: 100%;
						position: absolute;
						top: 0;
						left: 0;
						border-top: 1px solid rgba(0,0,0,.1);
						border-bottom: 1px solid rgba(255,255,255,1);
					}
					@include mq(sp){
						margin-top: 0;
						padding: 24px 0;
						margin-bottom: 0;
						&:before{
							border-top: none;
						}
					}
					&-nav{
						width: 100%;
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						gap: 14px 4px;
						@include mq(sp){
							display: flex;
							flex-direction: column;
							gap: 0;
						}
						&-btn{
							@include font(300);
							font-size: 14px;
							color: $color-main !important;
							@include linkIcon();
							@include mq(sp){
								min-height: 48px;
								width: 100%;
								display: flex;
								align-items: flex-start;
								margin-left: 0;
								text-indent: 0;
								padding: 12px 14px;
								font-size: 14px;
							}
							&[target="_blank"]{
								&:after{
									content: '';
									display: inline-block;
									width: 10px;
									height: 10px;
									background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2010%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22m0%200h10v10h-10z%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23a)%22%20fill%3D%22%2321366e%22%3E%3Cpath%20d%3D%22m5.5%200v1h2.79l-4.15%204.15.71.71%204.15-4.15v2.79h1v-4.5z%22%2F%3E%3Cpath%20d%3D%22m8%209h-7v-7h3.5v-1h-4.5v9h9v-4.5h-1z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
									background-position: center;
									background-size: cover;
									margin-left: 6px;
									@include mq(sp){
										position: absolute;
										right: 20px;
										top: 50%;
										transform: translateY(-50%);
									}
								}
							}
						}
					}
				}
				&-close{
					grid-row: 3;
					grid-column: 2/3;
					display: flex;
					align-items: center;
					justify-content: center;
					padding-bottom: 10px;
					@include mq(sp){
						display: none;
					}
					&-btn{
						@include font(300);
						color: $color-main;
						display: flex;
						width: 100%;
						height: 100%;
						justify-content: center;
						align-content: center;
						padding: 10px;
						cursor: pointer;
						transition: .2s all ease;
						&:hover{
							background-color: rgba(0,0,0,.05);
						}
					}
				}
			}
		}
		&-modal{
			&-bg{
				background-color: rgba(0,0,0,.4);
				-webkit-backdrop-filter: blur(10px);
				backdrop-filter: blur(10px);
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				@include mq(sp){
					display: none;
				}
			}
			&-btn{
				&-close{
					width: 24px;
					height: 24px;
					position: absolute;
					right: -36px;
					top: 0;
					cursor: pointer;
					&:before, &:after{
						content: '';
						width: 28px;
						height: 1px;
						background-color: #fff;
						position: absolute;
						top: 50%;
						left: 50%;
					}
					&:before{
						transform: translate(-50%, -50%) rotate(45deg);
					}
					&:after{
						transform: translate(-50%, -50%) rotate(-45deg);
					}
					@include mq(sp){
						width: 48px;
						height: 48px;
						right: 0;
						top: -48px;
						background-color: $color-bg;
						&:before, &:after{
							width: 16px;
							background-color: #333;
						}
					}
				}
			}
			&-mypage{
				&-inner{
					max-width: 630px;
					width: 100%;
					background-color: rgba(255, 255, 255, .8);
					padding: 40px;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					@include mq(sp){
						left: 0;
						top: 48px;
						transform: none;
						max-width: none;
						height: calc(100% - 48px);
						-webkit-backdrop-filter: blur(10px);
						backdrop-filter: blur(10px);
						display: flex;
						justify-content: center;
						flex-direction: column;
					}
				}
				&-title{
					@include font(300);
					color: $color-main;
					font-size: 15px;
				}
				&-content{
					+ .phg-header-modal-mypage-content{
						margin-top: 32px;
					}
					@include mq(sp){
						max-width: 480px;
						width: 100%;
						margin-left: auto;
						margin-right: auto;
					}
				}
				&-list{
					margin-top: 8px;
				}
				&-btn{
					&-01{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 64px;
						border: 1px solid $color-main;
						@include font(500);
						color: $color-main !important;
						font-size: 15px;
						@include linkBtnIcon($color-main);
					}
					&-02{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 48px;
						background-color: $color-main;
						@include font(300);
						color: #fff !important;
						font-size: 15px;
						@include linkBtnIcon();
						.phg-header-mypage-icon{
							margin-right: 8px;
							width: 10px;
							&-img{
								stroke: #fff;
								stroke-width: 2px;
							}
						}
					}
				}
			}
		}
	}
}

#phg-header{
	position: relative;
	z-index: 9999;
	&-menu{
		position: relative;
		height: $menu-btn-height;
		&-inner{
			position: absolute;
			background-color: $color-bg;
			width: 100%;
			height: $menu-btn-height;
			border-bottom: 1px solid #ddd;
			z-index: 1;
			left: 0;
			top: 0;
		}
		@include mq(sp){
			position: fixed;
			width: 100%;
			height: calc(100% - 48px);
			top: 48px;
			left: -100%;
			transition: .3s all ease;
			&-sp{
				&-btn{
					position: fixed;
					top: 0;
					left: 0;
					width: 48px;
					height: 48px;
					z-index: 10001;
					span{
						position: absolute;
						width: 18px;
						height: 2px;
						background-color: #666;
						border-radius: 1px;
						top: 50%;
						left: 50%;
						transition: .3s all ease;
						&:nth-child(1){
							transform: translate(-50%, -50%);
						}
						&:nth-child(2){
							transform: translate(-50%, calc(-50% + 5px));
						}
						&:nth-child(3){
							transform: translate(-50%, calc(-50% - 5px));
						}
					}
					&.phg-active{
						span{
							&:nth-child(1){
								width: 0;
							}
							&:nth-child(2){
								transform: translate(-50%, -50%) rotate(45deg);
							}
							&:nth-child(3){
								transform: translate(-50%, -50%) rotate(-45deg);
							}
						}
					}
				}
			}
			&-inner{
				height: 100%;
				background-color: transparent;
				border-bottom: none;
				&:before{
					content: '';
					background-color: rgba(0,0,0,.4);
					-webkit-backdrop-filter: blur(10px);
					backdrop-filter: blur(10px);
					position: absolute;
					top: 0;
					left: 0;
					width: 0;
					height: 100%;
					z-index: -2;
					transition: .15s width ease;
				}
			}
			&.phg-active{
				left: 0;
				.phg-header-menu-list{
					left: 0;
				}
				#phg-header-menu-inner{
					&:before{
						width: 100%;
					}
				}
			}
		}
	}
	&-pulldown{
		&-area{
			display: none;
			width: 100%;
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);
			background-color: rgba(255, 255, 255, .85);
			border-bottom: 1px solid #eee;
			overflow: hidden;
		}
	}
	&.phg-fixed{
		#phg-header-menu-inner{
			position: fixed;
		}
	}
	&-modal{
		&-mypage{
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 10000;
		}
	}
}