/*-------------------- css --------------------*/
html, body{
    margin:0;
    padding:0;
    height:100%;
}

.mv_area{
    display: flex;
    justify-content: center;
    align-items: center;
    height:100%;

    img{
        width:150px;
    }
}

/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71; 
    --text-color: #000000;
    --text-blue: #000B46;
    --hp-bg-color: #D2A260;
    --white-color: #ffffff;
    --gray-border: #B3B3B3;
  }

/*----------------------------------------------*/
/*-------------------- font --------------------*/
/*----------------------------------------------*/
@font-face {
    font-family: 'Noto Sans';
    src: url('/wp-content/themes/en_cafe/fonts/NotoSans-VariableFont_wdth,wght.woff2') format('woff2'),
         url('/wp-content/themes/en_cafe/fonts/NotoSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Noto Sans';
    src: url('/wp-content/themes/en_cafe/fonts/NotoSans-Italic-VariableFont_wdth,wght.woff2') format('woff2'),
         url('/wp-content/themes/en_cafe/fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/wp-content/themes/en_cafe/fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
html, body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-family: 'Noto Sans', 'Poppins';
	font-size:14px;
	color:@black;
	letter-spacing:0.5px;
	box-sizing:border-box;
}
h1, h2, h3, h4, h5, h6, p{
	margin:0;
}
a{
	color:@black;
	text-decoration:none;

	&:hover{
		text-decoration:none;
	}
}
img{
	max-width:100%;
	vertical-align:bottom;
}
ul, ol{
	margin:0;
	padding:0;
	
	li{
		list-style:none
	}
}
dl{
	margin:0;

	dd{
		margin:0;
	}
}

/*---------- デフォルトスタイルのリセット ----------*/
input[type="text"], input[type="email"], input[type="password"], textarea{
	box-sizing:border-box;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
select{
	border:none;
	border-radius:0;
	cursor:pointer;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	padding:10px 20px 10px 10px;
	background-image:url('./images/common/select_cursor.png');
	background-position:center right 10px;
	background-repeat:no-repeat;
	background-size:10px;
}
button{
	position:relative;
	border:none;
	border-radius:0;
	cursor:pointer;
	overflow:hidden;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;

	@media(min-width:769px){
		&:before{
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:@black;
			opacity:0;
			transition:0.3s;
		}
		&:hover:before{
			opacity:0.3;
		}
		&:disabled:before{
			content:none;
		}
	}
}

/*---------- disabled ----------*/
input:disabled, textarea:disabled, select:disabled{
	background-color:@gray;
}

/*---------- placeholder ----------*/
::placeholder{
	color:@d_gray;
}

/*---------- scrollbar ----------*/
::-webkit-scrollbar{
	width:10px;
	height:10px;
}
::-webkit-scrollbar-track{
	background:@gray;
}
::-webkit-scrollbar-thumb{
	background:@dd_gray;
	box-shadow:inset 0 0 0 1px @gray;
}

/*---------- error ----------*/
.error{
	background-color:@pink !important;
}

/*---------- loading ----------*/
.loading{
	display:none;

	&.active{
		display:block;
		position:fixed;
		width:100%;
		height:100%;
		top:0;
		left:0;
		background:rgba(0, 0, 0, 0.5);
		z-index:8000;
		
		span{
			position:absolute;
			top:50%;
			transform:translateY(-50%);
			width:100%;
			text-align:center;
	
			i{
				font-size:50px;
				color:@white;
			}
		}
	}
}
/*---------- loading時の注意事項 ----------*/
.loading_alert{
	display:none;
	position:fixed;
	top:40px;
	width:100%;
	padding:0 10px;
	box-sizing:border-box;
	z-index:9000;
	
	p{
		display:flex;
		justify-content:center;
		align-items:center;
		max-width:700px;
		margin:0 auto;
		padding:20px;
		font-size:16px;
		font-weight:bold;
		line-height:1.6;
		background-color:@white;
		border-radius:5px;
		box-shadow:3px 3px 6px rgba(0, 0, 0, 0.7);
	}
}
/*---------- テキストのハイライト ----------*/
.highlight{
	background:linear-gradient(to left, rgb(251, 195, 195) 100%, transparent 0%);
	background-position:0 100%;
	background-repeat:no-repeat;
	background-size:0% 8px;
	transition:1s;

	&.active{
		background-size:100% 8px;
	}
}

/*---------- responsive ----------*/
@media(max-width:768px){
	.pc{
		display:none !important;
	}
}
@media(min-width:769px){
	.mobile{
		display:none !important;
	}	
}

body {
    font-family: 'Noto Sans', sans-serif;
}

/*-------------------- header --------------------*/
.site-header {
    background: var(--white-color);
    font-family: 'Poppins';

    .container {
		display: flex;
		justify-content: space-between;
        align-items: center;
		padding: 20px 0;

		.logo{
			display: flex;
			align-items: center;
            gap: 15px;
			margin-left: 31px;

			.logo_img_1 {
				width: 111px;
			}
			.logo_img_2 {
				width: 370px;
			}
		}
		.main_nav{

			ul {
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
				align-items: center;
                margin-right: 90px;
			}
			li{
				padding: 0 17px;
				border-right: 2px solid var(--gray-border);
			}
			li:last-child{
				border-right: none;
			}
				
			a {
				text-decoration: none;
				font-size: 25px;
				color: var(--text-blue);
				text-align: center;
			}
				
			a:hover {
				color: var(--text-color);
			}
		}
	}
}

/*-------------------- footer --------------------*/
.site-footer{
	background-color: var(--hp-bg-color);
	font-family: 'Noto Sans';
	font-size: 14px;

	.footer_container{
		max-width: 1000px;
        margin: 0 auto;
        padding: 200px 0 49px;
        display: flex;
		justify-content: space-between;

		.footer_contents{

			.title{
				font-size: 22px;
                font-weight: 400;
			}
			.content{
				margin-top: 23px;
				a{
					display: block;
					margin-top: 7px;
					line-height: 22px;
					color: var(--text-color);
					text-decoration: underline;

					img{
						height: 21px;
						margin-right: 16px;
					}
				}
			}
		}
	}
	.copy_right_text{
		margin: 0 auto;
		padding: 10px 0;
		border-top: 1px solid;
		text-align: center;
	}
}