@charset "utf-8";
/*	◆ CSS Document ◆
ベースになるコード、:rootで変数にしたもの、よく使う項目の設定はbase.cssにあります。
こちらは各項目に対するCSS設定用のCSSです。 */

/*--------------------------------------------------
	Header
--------------------------------------------------*/
header{
	position: fixed;
	inset-inline: 0;
	z-index: 10;
	background: #ffffffCC;
}
.header_first {
	align-items: center;
	padding-block: .2rem;
}
	.header_first nav ul li {
		font-size: .16rem;
		margin-right: .3rem;
		position: relative;
	}
		.header_first nav ul li:last-of-type {
			margin-right: 0;
		}
		.header_first nav ul li a {
			color: var(--color01);
		}
.head_logo{
	flex-grow: 1;
}		
.head_txt{
	font-size: .16rem;
	text-align: right;
}
.header_nav{
	margin-right: .35rem;
}
.head_btn{
	background: var(--color01);
	color: var(--white);
	font-size: .18rem;
	padding: .2rem .5rem;
	border-radius: .15rem;
}

@media (max-width:768px) {
	.head_logo img{ width: 35vw;}
	.head_btn{
		padding: .15rem;
		margin-right: .5rem;
		border-radius: .108rem;
	}
}

/*--------------------------------------------------
	HBM
--------------------------------------------------*/
@media (max-width:768px) {
	.hbmenu_rl {
		position: absolute;
		top: .25rem;
		right: .2rem;
		display: flex;
		justify-content: flex-end;
	}
		/* menu */
		.hbmenu_rl .menu {
			position: fixed;
			top: 0;
			right: -100vw;
			width: 300px;
			height: 100%;
			padding-top: 10dvh;
			padding-inline: .5rem;
			cursor: pointer;
			-webkit-transition: 0.2s transform;
			transition: 0.2s transform;
			-webkit-transition-timing-function: cubic-bezier(.38, .52, .23, .99);
			transition-timing-function: cubic-bezier(.38, .52, .23, .99);
			background: var(--color01);
			opacity: 0.99;
			box-sizing: border-box;
			z-index: 10;
			border-radius: 1rem 0 0 0;
		}
			.hbmenu_rl .menu ul {
				margin: 0;
				margin-top: .2rem;
				padding: 0;
			}
				.hbmenu_rl .menu li {
					list-style: none;
					font-size: .2rem;
					font-weight: 900;
					position: relative;
				}
					.hbmenu_rl .menu li a {
						display: block;
						padding: 20px;
						text-decoration: none;
						color: var(--white);
						border-bottom: 1px solid var(--white);
					}
						.hbmenu_rl .menu li a:hover {
							color: var(--color03);
						}
	/* menu toggle */
	.hbmenu_rl #toggle {
		position: absolute;
		display: none;
		opacity: 0;
	}
		.hbmenu_rl #toggle:checked~.menu {
			-webkit-transform: translateX(-100vw);
			transform: translateX(-100vw);
		}
		.hbmenu_rl #toggle~label {
			display: block;
			cursor: pointer;
			-webkit-transition: 0.2s transform;
			transition: 0.2s transform;
			text-align: center;
			color: var(--color01);
			z-index: calc(infinity);
		}
			.hbmenu_rl #toggle~label::before {
				font-family: 'Material Icons';
				content: '\e5d2';
				font-size: .5rem;
				color: var(--color01);
				-webkit-transition: all .2s transform;
				transition: all .2s linear;
			}
			.hbmenu_rl #toggle:checked~label::before {
				content: '\e5cd';
				-webkit-transition: all .2s transform;
				transition: all .2s linear;
				color: var(--white);
			}
	.hbm_sns{
		display: flex;
		gap: .25rem;
		margin-top: .8rem !important;
	}
	.hbm_sns li a{
		padding: .08rem !important;
		border-bottom: 0 !important;
	}

}




/*--------------------------------------------------
	MV
--------------------------------------------------*/
/* テスト */
#mv{
	width: -webkit-fill-available;
	margin-top: 1.3rem;
}
	#mv .container_big{
		background: url(../images/mv_bg.png) no-repeat;
		background-size: contain;
		background-position: center;
		height: clamp(3.5rem, 35vw, 6.72rem);
	}
	#mv h2{
		padding-block: 1rem;
		padding-inline: 1rem;
	}
		#mv h2 img{ width: 4.98rem; height: .74rem; }



@media (max-width:768px) {
	.stack_S>*+*,
	.stack_SS>*+* {
			margin-top: .4rem;
	}


	#mv .container_big {
			background: url(../images/mv_bg_sp.png) no-repeat;
			background-size: contain;
			height: clamp(3.5rem, 126.18vw, 6.76rem);
		}
}



/*--------------------------------------------------
	Main
--------------------------------------------------*/
.txtarea{
	font-size: .16rem;
	width: var(--container_size_small);
}
.flex_center{
	gap: .25rem .5rem;
}
h3 {
	margin-bottom: 1rem;
}
h4 {
	font-family: "Zen Old Mincho", serif;
	font-size: .4rem;
	letter-spacing: .02rem;
}

@media (max-width:768px) {
	h3 {
		margin-bottom: .5rem;
	}	
	h3 img{
		width: auto !important;
		height: 1rem;
	}
	h4 {
		font-size: clamp(.25rem, 6vw, .32rem);
		letter-spacing: .02rem;
	}
	
	
}

	/*----------------------------------------------
		Main - concept
	----------------------------------------------*/
	#concept{
		background: linear-gradient(#ffffff, #f7eee4);
		padding-bottom: 1rem;
	}
	#concept h3 {
		margin-bottom: 0;
	}
		#concept h3 img{ width: 4.62rem; }
		#concept .flex_img img{ width: 2.55rem; }
	#concept .flex{
		margin-top: 1rem;
		justify-content: space-around;
	}
		#concept .flex .flex_img img { width:3.97rem; }

	@media (max-width:768px) {
		#concept .flex{
			flex-direction: column-reverse;
		}
		#concept .flex_img{
			text-align: center;
			margin-top: .5rem;
		}
		#concept .flex_img img{ width: 30vw; }
	}
	
		
	

	/*----------------------------------------------
		Main - features
	----------------------------------------------*/
	#features{
		padding-bottom: 1rem;
	}
		#features h3 img{ width: 5.03rem; }
	#features .flex_between{
		align-items: center;
	}
	#features .flex_txt{
		background: url(../images/features_txtbg.png) no-repeat;
		background-size: 100%;
		background-position: center;
		padding-block: 1.8rem;
		position: relative;
		width: 50%;
	}
		#features .flex_txt p:last-of-type{
			max-width: 7rem;
		}
		.features_img1 {
			position: absolute;
			top: 0;
			right: 0;
		}
	#features h4 span {
		font-size: .5rem;
	}

	#features .flex_between:nth-of-type(odd) .flex_img{
		margin-left: calc(50% - 50vw);
	}
	.flex_between:nth-of-type(odd) .flex_txt{
		margin-left: .5rem;
	}
		#features .flex_between:nth-of-type(1) .flex_img img{ width: 9.6rem;}
		#features .flex_between:nth-of-type(2) .flex_img img{ width: 9.57rem;}
		#features .flex_between:nth-of-type(3) .flex_img img{ width: 9.6rem;}
		#features .flex_between:nth-of-type(4) .flex_img img{ width: 4.3rem;}

		#features .flex_between:nth-of-type(1) .features_img1 img{ width: 2.82rem;}
		#features .flex_between:nth-of-type(2) .features_img1 img{ width: 2.24rem;}
		#features .flex_between:nth-of-type(3) .features_img1 img{ width: 2.55rem;}


	#features .flex_between:nth-of-type(even) {
		flex-direction: row-reverse;
	}
	#features .flex_between:nth-of-type(even) .flex_img{
		margin-right: calc(50% - 50vw);
	}
	.flex_between:nth-of-type(even) .flex_txt{
		margin-right: .5rem;
	}


	@media (max-width:768px) {
		#features .flex_between,
		#features .flex_between:nth-of-type(even){
			flex-direction: column-reverse;
		}
		#features .flex_txt {
			width: 100%;
			padding-block: .8rem;
		}
			#features .flex_txt p:last-of-type{
				width: auto;
			}
		.flex_between:nth-of-type(odd) .flex_txt { margin-left: 0; }
		.flex_between:nth-of-type(even) .flex_txt {	margin-right: 0; }
		#features .flex_between:nth-of-type(even) .flex_img { 
			margin-right: 0;
			margin-left: 1.5rem;
			margin-top: .5rem;
		}

		#features h4{ font-size: clamp(.22rem, 5.5vw, .29rem); }
		#features .flex_between:nth-of-type(1) .flex_img img,
		#features .flex_between:nth-of-type(2) .flex_img img,
		#features .flex_between:nth-of-type(3) .flex_img img{ width: 100%;}
		#features .flex_between:nth-of-type(4) .flex_img img{ width: 50vw;}


		#features .flex_between:nth-of-type(1) .features_img1 img,
		#features .flex_between:nth-of-type(2) .features_img1 img,
		#features .flex_between:nth-of-type(3) .features_img1 img{ width: 35vw;}

	}
	
		
	
	/*----------------------------------------------
		Main - menu
	----------------------------------------------*/
	#menu h3 img{ width: 3.11rem;}
	#menu .menu_wrap{
		background: url(../images/menu_bg.png);
		padding-block: 1rem;
	}
	#menu .container_small{
		background: var(--white);
		padding: 1rem;
		border: 1px solid var(--color01);
	}
	.menu_contents h4{
		font-size: .36rem;
		text-align: center;
	}
	.menu_contents li{
		font-size: .18rem;
		border-bottom: 1px solid var(--color03);
		padding-block: .15rem;
	}
	.menu_contents dl{
		display: flex;
		justify-content: space-between;
	}
	.txt_small{
		font-size: .12rem;
	}

	@media (max-width:768px) {
		#menu .container_small {
			padding: .25rem .5rem;
		}
	}
	
		
		
	
	/*----------------------------------------------
		Main - products
	----------------------------------------------*/
	#products{
		background: url(../images/products_bg.png) no-repeat;
		background-position: left bottom;
		background-size: 35%;
		margin-top: 2.5rem;
	}
		#products h3 img{ width: 5.24rem;}
		#products h4{
			font-size: .36rem;
		}
		#products .flex_between{
			align-items: flex-start;
		}
		#products .flex_txt{
			position: relative;
		}
		#products .flex_txt p.products_img{
			position: absolute;
			right: 0;
			top: -1.2rem;
		}
			#products .flex_txt p.products_img img{ width: 2.02rem;}
		#products .products_content {
			box-sizing: border-box;
			padding: .5rem;
			background: var(--color02);
			color: var(--white);
			margin-right: calc(50% - 50vw);
			width: 100vw;
			align-items: center;
			margin-bottom: .5rem;
		}
				#products .flex_txt .products_content img { width: clamp(2rem, 24.79vw, 4.76rem); }
				.products_txt {
					max-width: 5rem;
					margin-left: .5rem;
				}
	@media (max-width:1800px) {
		#products .products_content {
			margin-right: 0;
			width: auto;
		}
	}

	@media (max-width:768px) {
		#products { margin-top: 1rem;}
			#products h3 { margin-bottom: 1rem; }
			#products h4 {
				font-size: clamp(.2rem, 4.7vw, .30rem);
				margin-block: .1rem;
			}	
		#products .flex_txt p.products_img{	top: -1rem; }
		#products .flex_txt p.products_img img{ width: 35vw;}
		#products .flex_txt .products_content img { width: 100%; }
			#products .flex_between,
			#products .products_content.flex {
				flex-direction: column;
			}
		
			#products .products_content {
				margin-right: calc(50% - 50vw);
				width: auto;
			}
		
			.products_txt {
				width: 100%;
				margin-left: 0;
			}

	}

		
	
		
	
	/*----------------------------------------------
		Main - access
	----------------------------------------------*/
	#access iframe{
		width: 100vw;
		height: 5.5rem;
	}
		#access h3 img{ width: 4.11rem;}

	@media (max-width:768px) {
	}
	
		
		
	
	/*----------------------------------------------
		Main - section03
	----------------------------------------------*/
	#contact{
		text-align: center;
		margin-bottom: 1.5rem;
		position: relative;
	}
		#contact h3 img{ width: 4.43rem;}

		.contact_tel {
			border: 1px solid var(--color01);
			border-radius: .2rem;
			padding: .25rem 1rem;
			box-sizing: border-box;
		}
	
		.contact_tel .tel_txt {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: .53rem;
			font-weight: 700;
			font-family: "Inter", sans-serif;
			letter-spacing: .02rem;
		}
		.contact_tel .tel_txt img{
			margin-right: .15rem;
		}
		.contact_img{
			position: absolute;
			bottom: -1rem;
			right: 1rem;
		}
			.contact_img img{ width: 1.38rem;}


	@media (max-width:768px) {
		.contact_tel {
			width: 90%;
			padding: .25rem;
		}		
		.contact_tel .tel_txt {
			font-size: .3rem;
		}
		.contact_img{
			position: relative;
			right: auto;
			display: flex;
			justify-content: center;
		}

	}
	
		

/*--------------------------------------------------
	Footer
--------------------------------------------------*/
footer{
	background: var(--color01);
	color: var(--white);
	text-align: center;
	padding-block: .5rem .15rem;
}
footer p:nth-of-type(2){
	margin-top: .5rem;
}
.foot_sns{
	display: flex;
	gap: .2rem;
	margin-bottom: .5rem;
}
.copy{
	font-size: .11rem;
}

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