/*
====>> サイトの共通パーツに関するデフォルトスタイリング <<====

・このファイルはベースのスタイルに加え、サイト(案件)毎にスタイルを記述していく
・ヘッダー、ナビゲーション、フッター、パンくずなどの各ページに対して1つのパーツをスタイルするファイル

*/

/*		基本設定
-----------------------------------------------------*/

a {
	color: inherit;
	text-decoration: none;
	transition: 0.3s linear;
}
@media (max-width: 600px){
	.pc{
		display: none!important;
	}
}
@media (min-width: 601px){
	.sp{
		display:none!important;
	}	
}
input{
	font-size:1.6rem;/*iOSズームアップ対策サイズ*/
}
textarea {
	font-size:1.6rem;/*iOSズームアップ対策サイズ*/
	resize: vertical; /* 縦方向のリサイズを許可 */
}
/* フォーカスが当たった時の青枠を表示しない */
*:focus {
	outline: none;
}
::-moz-selection {/*ハイライトカラー指定*/
    color:#fff;
    background:var( --color-base );
}
::selection{/*ハイライトカラー指定*/
    color:#fff;
    background:var( --color-base );
}
@media (min-width: 601px){
	a[href^="tel:"] {pointer-events: none;}
}
/*		ヘッダー
-----------------------------------------------------*/

#header{
	background: #000;
	padding: 25px 15px 15px 30px;

	&.l-header{
		width: var(--w-liquid);
		position: relative;

		.l-header_logo a {
			display: flex;
			align-items: center;
			gap: 16px;
		}
	
		.l-header_contact-btn{
			background: var(--color-gold);
			padding: 10px 40px;
			border-radius: 40px;
		}

	}/* END &.l-header */

}/* END #header */
@media (max-width: 1200px){
	#header{	
		&.l-header{
			.l-header_logo {
				max-width:calc(100% - 55px);
		}

	}/* END &.l-header */

}/* END #header */

}

/*		グローバルナビゲーション
-----------------------------------------------------*/
#global-nav{

	&.l-nav{
		overflow-y: auto;
		gap:30px;
		.l-nav_logo{
			display: none;
			color:#fff;
		}	
		& ul{
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			align-items: center;
			gap: 43px;

			& li{
				text-align: center;
				color: var(--color-white);
				font-size: 1.4rem;
				letter-spacing: 0.05em;
				& span{
					display:block;
				}
			}

			& li a{
				display: block;
				color: var(--color-white);
				line-height: 1.3;
				&:hover{
					color:var(--color-gold);
				}
			}

		}/* END & ul */
		.l-nav_contact_tel{
			display: none;
			color:#fff;
			margin-bottom:15px;

			& span{
				display:block;
				font-size:4.4rem;
				font-size: clamp(3rem, -0.266rem + 11.667vw, 4.4rem);
				letter-spacing: 0.05em;
				line-height: 1;
				&::before{
					content:"";
					display:inline-block;
					width:25px;
					width: clamp(16px, -7.333px + 8.333vw, 26px);
					aspect-ratio: 100 / 138;
					margin-right:0.3em;
					background-color: currentColor;
					-webkit-mask-image: url('../img/common/icon_tel.svg');
					mask-image: url('../img/common/icon_tel.svg');
					-webkit-mask-repeat: no-repeat;
					mask-repeat: no-repeat;
					-webkit-mask-position: center;
					mask-position: center;
					-webkit-mask-size: 100% auto;
					mask-size: 100% auto;
				}
			}
			& small{
				display:block;
				font-size:1.2rem;
				letter-spacing: 0.05em;
				text-align: center;
				padding-top:7px;
				margin-top:15px;
				border-top:1px solid #fff;
			}
		}	

		.l-nav_contact_btn{
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap:10px;
			padding: 10px 20px;
			background: var(--color-gold);
			border:2px solid transparent;
			border-radius: 100px;
			transition: all 0.2s ease-in-out;
			&::after{
				content:"";
				display: inline-block;
				width: 21px;
				aspect-ratio: 1 / 1;
				-webkit-mask-image:url(../img/common/icon_arrow_under.svg) ;
				mask-image:url(../img/common/icon_arrow_under.svg) ;
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				-webkit-mask-position: center center;
				mask-position: center center;
				-webkit-mask-size: 100% auto;
				mask-size:  100% auto;
				background-color: currentColor;
				transition: all 0.2s ease-in-out;
			}
			&:hover{
				background-color: #E0D080;
				&::after{
					transform: translateY(3px);
				}
			}
		}

	}/* END .l-nav */

}/* END #global-nav */

@media (max-width: 1200px){
	
	#global-nav{
		flex-flow: column nowrap;
		position:absolute;
		top:0;
		left:100%;
		z-index:900;
		width: 100%;
		width: 100%;
		width: 100dvw;
		height: 100vh;
		height: 100dvh;
		padding:85px 20px;
		background-color: rgba(0,0,0,0.9);
		opacity:0;
		transition: all 0.3s linear;
		&.is-show{
			left:0;	
			opacity:1;
		}
		&.l-nav.is-flex{
			flex-direction: column;
			.l-nav_logo{
				display:initial;
				p{
					font-size:1.7rem;
					text-align:center;
					letter-spacing: 0.05em;
				}
			}		
			& ul{
				width: 100%;
				margin:auto;
				flex-direction: column;
				gap:0;
				& li{
					text-align: left;
					max-width: 600px;
					width: 90%;
					padding:30px 0;
					border-bottom:1px solid #fff;
				}
				& li a{
					position: relative;
					padding:0 20px;
					transition: all 0.2s linear;
					&::after{
						content:"";
						display:inline-block;
						width: 8px;
						height: 16.5px;
						position: absolute;
						top:calc(50% - 8.25px);
						right:3%;
						background: url(../img/common/global-nav_arrow.svg) no-repeat center center / 100% auto;
						transition: all 0.2s linear;
					}
				}
				& li a:hover{
					color:var(--color-gold);
					&::after{
						right:2%;
					}
				}
				& li span{
					display:inline-block;
				}
			}
			.l-nav_contact_tel{
				display:initial;
			}
			.l-nav_contact_btn{
				width:100%;
				max-width: 245px;
			}
		}
	}
}/*  END Break Point  */


/*		メニューボタン
-----------------------------------------------------*/
.l-header_toggle{
	display:none;
	width: 22px;
	height: 21px;
	position: absolute;
	top:25px;
	right:25px;
	z-index:999;
	box-sizing: border-box;
	transition: all 0.3s linear;
	cursor: pointer;
	& > span{
		display: inline-block;
		position: absolute;
		left:0;
		width: 100%;
		height: 1px;
		background-color: #fff;
		border-radius: 100px;
		transition: all 0.3s linear;
		&:first-child{
			top:50%;
		}
		&:nth-child(2){
			top:0%;
		}
		&:nth-child(3){
			top:99%;
		}
	}
	&.is-active{
		& > span{
			&:first-child{
				opacity:0;
			}
			&:nth-child(2){
				top:2.5px;
				left:2.5px;
				transform: rotate(45deg);
				transform-origin:left bottom;
			}
			&:nth-child(3){
				top:calc(99% - 2.5px);
				left:2.5px;
				transform: rotate(-45deg);
				transform-origin:left top;
			}
		}
	}
}

@media (max-width: 1200px){
	
	.l-header_toggle{
		display: block;
	}
	
}/*  END Break Point  */


/*		ページタイトル
-----------------------------------------------------*/

#page-title{
	margin-top: 10px;
	padding: 60px 0 0;
	box-sizing: border-box;
	
	& > section h2{
		font-size: 8rem;
		font-weight: normal;
		color: var(--color-font-base);
	}
	
}/*  END #page-title  */


@media (max-width: 600px){
	
	#page-title{
		padding: 30px 10px;

		& > section h2{
			font-size: 4rem;
		}

	}/*  END #page-title  */
	
}/*  END Break Point  */




/*		パンくず
-----------------------------------------------------*/

#breadcrumb{
	width: var(--w-liquid);
	padding: 5px 0;
	box-sizing: border-box;
	
	& > ul{
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: center;
		
		& > li{
			color: var(--color-font-base);
			font-size: 1.3rem;
			
			&:first-child:before{
				content: "";
				position: absolute;
				top: auto;
				height: 10px;
				padding-left: 36px;
				flex-grow: 1;
				border-bottom: 1px solid var(--color-border-pale);
				display: inline;
			}
			
			&:after{
				content: ">";
				margin: 0 5px;
			}
			
			& > a{
				color: var(--color-font-base);
				display: inline-block;
				font-size: 1.3rem;
			}
			
			& > a:first-child{
				margin-left: 50px;
			}
			
			& > a:hover{
				opacity: 1;
			}
			
			&:last-child:after{
				content: "";				
			}
		}
		
		& > li:nth-child(2) a{
			margin-left: 0;
		}
		
	}/* END & > ul */
	
}/* END #breadcrumb */

@media (max-width: 600px){
	
	#breadcrumb ul li,
	#breadcrumb ul li a{
		font-size: 1.2rem;
	}
	
}/*  END Break Point  */



/*		ページトップ
-----------------------------------------------------*/

#page_top{
	position: fixed;
	bottom: 2%;
	right: 3%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	z-index: 10;
	
	& > a{
		background: #000;
		width: auto;
		height: auto;
		padding: 12px 20px;
		color: var(--color-theme-base);
		font-weight: bold;
		
		&:hover{
			text-decoration: none;
		}

	}/*  END & > a  */

}/*  END #page_top  */



/*		フッター
-----------------------------------------------------*/

#footer {
	padding:35px 0;
	color: #fff;
	background-color: var(--color-navy);
	&.l-footer{
		width: var(--w-liquid);
		& .is-flex{
			gap:50px;
			justify-content: center;

		}
		.c-copyright{
			.c-copyright__txt{
				font-size:1.4rem;
			}
		}
	}/*  END &.l-footer  */

}/*  END #footer  */

@media (max-width: 600px){
	
	#footer.l-footer {
		padding:20px 0;
		.c-copyright{
			.c-copyright__txt{
				font-size:1.2rem;
			}
		}
	
	}/*  END #footer  */
		
}/*  END Break Point  */