@charset "utf-8";
/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:768px) {
}

@media (min-width: 769px) and (max-width:959px) {
}

@media (min-width: 960px) {
}


@media (max-width: 767px) {
}

@media (min-width: 768px) {
}


/* ---------------------------------------- header */

header h1 {
	line-height: 1.2;
}

header h1 img {
	height:60px ;
	width:auto;
}

header .inner { 
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media (max-width: 767px) {

	header { 
		font-size: clamp(0.813rem, 0.678rem + 0.67vw, 1rem);
		padding: 1em; 
	}
	
	header h1 { width: calc( 100% - 60px ); }
	
	header ul { display: none; }

}

@media (min-width: 768px) {

	header { 
		font-size: clamp(0.813rem, 0.537rem + 0.57vw, 1rem);
		padding: 1em; 
	}

	header h1 {
		font-size: clamp(1rem, 0.632rem + 0.77vw, 1.25rem);
	}
	
	header h1 img {
		height:100px ;
		width:auto;
	}

	header ul {
		display: flex;
	}
	header ul li a {
		display: block;
		background: #fff;
		line-height: 1;
		padding: .75em 1em;
		border-radius: 100px;
	}
	header ul li a:hover,
	header ul li a.current {
		color: #fff;
		background: var( --orange-color );
	}

}

@media (min-width: 768px) and (max-width: 1290px) {

	header h1 { padding: 0 80px 0 0; }
	header ul { display: none; }

}

/* ---------------------------------------- visual (home) */

#visual { position: relative; }
#visual img { vertical-align: text-top; }
#visual h2 {
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 100%;
	text-align: right;
	line-height: 1.2;
}
#visual p {
	position: absolute;
	bottom: 5%;
	left: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 100%;
	text-align: right;
}
#visual p a {
	display: inline-block;
	color: #fff;
	background: var( --orange-color );
	border: 1px var( --orange-color ) solid;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#visual p a:hover {
	color:  var( --orange-color );
	background: #fff;
}

@media (max-width: 767px) {

	#visual { 
		font-size: clamp(1.25rem, -0.092rem + 6.71vw, 3.125rem);}
	#visual h2 { 
		top: 40%;
		padding: 0 .5em; 
	}
	#visual p { padding: 0 .5em; }
	#visual p a {
		font-size: clamp(0.813rem, 0.678rem + 0.67vw, 1rem);
		padding: .5em 1em;
	}

}

@media (min-width: 768px) {

	#visual { 
		font-size: clamp(2rem, -0.575rem + 5.36vw, 3.75rem);
		display: flex;
		justify-content: center;
		height: 45vh;
	}
	#visual h2 { padding: 0 1em; }
	#visual p { padding: 0 1em; }
	#visual p a {
		font-size: clamp(0.813rem, 0.537rem + 0.57vw, 1rem);
		padding: .5em 2em;
	}

}

/* ---------------------------------------- mainimg (under) */

#mainimg {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	background: var( --skin-color );
}

#mainimg h2 { 
	display: flex;
	justify-content: center;
	align-items: center;
	color: var( --orange-color ); 
}
#mainimg h2 img {
	margin: 0 .5em 0 0;
}

@media (max-width: 767px) {

	#mainimg { height: 14em; }
	#mainimg h2 { font-size: var( --sp-h3 ); }
	#mainimg h2 img {
		width: 3.5em;
		height: auto;
	}

}

@media (min-width: 768px) {

	#mainimg { height: 20em; }
	#mainimg h2 { font-size: var( --pc-h3 ); }
	#mainimg h2 img {
		width: 3.2em;
		height: auto;
	}

}

/* ---------------------------------------- footer */

footer { background: var( --skin-color ); }
footer h4 { line-height: 1.4; }
footer h4 small { display: block; }
footer .inside ul { 
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em 1.5em;
}
footer .inside ul li a {
	display: block;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
footer .inside ul li a:hover { opacity: .5; }
footer .cregit { 
	font-weight: 400; 
	text-align: center;
}

@media (max-width: 767px) {

	footer { 
		font-size: clamp(0.813rem, 0.678rem + 0.67vw, 1rem);
		padding: 3em 1em 1em; 
	}
	footer .inside { margin: 0 0 3em; }
	footer h4 {
		text-align: center;
		font-size: clamp(1rem, 0.642rem + 1.79vw, 1.5rem);
		margin: 0 0 1em;
	}
	footer h4 small { font-size: clamp(0.813rem, 0.589rem + 1.12vw, 1.125rem); }
	footer .inside ul { justify-content: center; }
	footer .cregit { font-size: clamp(0.625rem, 0.58rem + 0.22vw, 0.688rem); }
}

@media (min-width: 768px) {

	footer { 
		font-size: clamp(0.813rem, 0.537rem + 0.57vw, 1rem);
		padding: 3em 1em 1em; 
	}
	footer .inside { 
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: start;
		margin: 0 0 4em;
	}
	footer h4 { font-size: clamp(1.125rem, 0.022rem + 2.3vw, 1.875rem); }
	footer h4 small { font-size: clamp(1rem, 0.264rem + 1.53vw, 1.5rem); }

	footer .cregit { font-size: clamp(0.625rem, 0.533rem + 0.19vw, 0.688rem); }
}

@media (min-width: 768px) and (max-width:1100px) {

	footer .inside { 
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	footer h4 {
		text-align: center;
		margin: 0 0 1em;
	}
}

/* ---------------------------------------- pageTop */

#pageTop {
	position: fixed;
	bottom: 1em;
	right: 1em;
	font-size: 14px;
	background: transparent;
	border: none;
	text-align: center;
	font-size: clamp(0.625rem, 0.501rem + 0.62vw, 1rem);
	cursor: pointer;
	/* 初期状態（非表示） */
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
#pageTop img {
	width: 5em;
	height: auto;
}
#pageTop span { display: block; }

/* 表示状態 */
#pageTop.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ホバーで少し浮く */
#pageTop:hover {
	transform: translateY(-3px);
}

/* ---------------------------------------- snsbar */

#snsbar {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 1000;
	background: var( --skin-color );
	border-radius: 8px 0 0 8px;
}

#snsbar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	padding: 1em .5em;
}

#snsbar li {
	text-align: center;
	margin-bottom: 10px;
}

#snsbar a {
	display: block;
	text-decoration: none;
	transition: all 0.3s;
}

#snsbar a:hover {
	transform: translateX(-5px);
}

#snsbar a img {
	width: 4.5em;
	aspect-ratio: 1;
	vertical-align: text-top;
}

@media (max-width: 767px) {

	#snsbar { display: none; }
	/* #snsbar a { font-size: clamp(0.625rem, 0.58rem + 0.22vw, 0.688rem); } */

}

@media (min-width: 768px) {

	#snsbar a { font-size: clamp(0.625rem, 0.533rem + 0.19vw, 0.688rem); }

}

/* ---------------------------------------- hamburger */

@media (min-width: 1290px) {

	#hamburger { display: none !important; }

}

@media (max-width: 1289px) {

	#hamburger {
		width: 30px;
		height: 22px;
		cursor: pointer;
		position: relative;
		z-index: 3000;
	}

	#hamburger span {
		position: absolute;
		width: 100%;
		height: 3px;
		background: #505050;
		left: 0;
		transition: 0.3s;
	}

	#hamburger span:nth-child(1) { top: 0; }
	#hamburger span:nth-child(2) { top: 9px; }
	#hamburger span:nth-child(3) { top: 18px; }

	/* ×に変形 */
	#hamburger.active span:nth-child(1) {
		transform: rotate(45deg);
		top: 9px;
		background: #fff;
	}

	#hamburger.active span:nth-child(2) {
		opacity: 0;
	}

	#hamburger.active span:nth-child(3) {
		transform: rotate(-45deg);
		top: 9px;
		background: #fff;
	}

}

/* ---------------------------------------- menu */

@media (min-width: 1290px) {

	#menu { display: none !important; }

}

@media (max-width: 1289px) {

	#menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.9);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transform: translateY(-100%);
		transition: 0.4s ease;
		z-index: 2000;
	}

	#menu.active {
		transform: translateY(0);
	}

	#menu ul { 
		font-size: clamp(0.938rem, 0.793rem + 0.72vw, 1.375rem); 
		text-align: center;
	}
	#menu ul li { margin: 0 0 1em; }

	#menu a {
		display: block;
		color: #fff;
		margin: 10px 0;
		text-decoration: none;
		opacity: 0;
		transform: translateY(20px);
	}
	#menu a i { margin: 0 .5em 0 0; }

	#menu.active a {
		opacity: 1;
		transform: translateY(0);
		transition: 0.4s;
	}

	/* 遅延 */
	#menu.active li:nth-child(1) { transition-delay: 0.1s; }
	#menu.active li:nth-child(2) { transition-delay: 0.2s; }
	#menu.active li:nth-child(3) { transition-delay: 0.3s; }

}