@charset "utf-8";
/* CSS Document */

/*--------------------------------------------------------------
	CSSカスタムプロパティ
--------------------------------------------------------------*/
:root{
/* 文字サイズ */
	--text_size_big: 24px;
	--text_size_middle: 18px;
	--text_size_small: 16px;
	--note_size: 14px;

/* 色 */
	--color01: #00b9ef; 
	--color02: #24b7c0;
	--white: #fff;
	--black: #000;

/* コンテナーサイズ */
	--container_big_size: 1140px;
	--container_small_size: 1000px;
}

@media (max-width:768px) {
	:root{
		/* 文字サイズ */
		--text_size_big: 4.5vw;
		--text_size_middle: 4vw;
		--text_size_small: 3.5vw;
		--note_size: 3vw;
	}
}

/*--------------------------------------------------------------
	Base
--------------------------------------------------------------*/
html, body{
	font-family: 'Noto Sans JP', sans-serif;
	position: relative;
	width: 100vw;	
	height: 100vh;
	line-height: 2rem;
}
html{
	scroll-behavior: smooth;
	overflow-x: hidden;
}
.container_big{
	width: var(--container_big_size);
	margin: 0 auto;
}
.container_small{
	width: var(--container_small_size);
	margin: 0 auto;
}

@media (max-width:1140px) {
	.container_big{
		width: calc(100% - 3rem);
	}
}
@media (max-width:1000px) {
	.container_small{
		width: calc(100% - 3rem);
	}
}
@media (min-width:769px) {
	.sp{
		display:none !important;
	}
}
@media (max-width:768px) {
	html, body{
		width: calc(100% + 8px);
	}	
	.pc{
		display:none !important;
	}
	img{
		width: 100%;
	}
}


/*--------------------------------------------------------------
	Link
--------------------------------------------------------------*/
a{
	color: var(--color02);
	text-decoration: none;
	transition: .3s;
}
	a:hover{
		opacity: .7;
	}


/*--------------------------------------------------------------
	Header
--------------------------------------------------------------*/
header{
	width: 100vw;
	position: absolute;
	margin-block: 5vh;
	z-index: 10;
}

@media (max-width:768px) {
	header{
		position: relative;
		margin-block: 2vh;
		padding-inline: 0.5rem;
	}
	header h1 img{
		width: 20vw;
	}
	
}



/*--------------------------------------------------------------
	MV
--------------------------------------------------------------*/
.mv{
	background: url(../images/test/mv_bg.png) no-repeat;
	background-position: right;
	height: 720px;
	position: relative;
}
	.catch_wrap{
		background: var(--white);
		width: fit-content;
		padding: 2rem;
		padding-left: 0;
		position: relative;
		top: 260px;
	}
	.catch_wrap p{
		font-size: var(--text_size_small);
		margin-block: 1.5rem;
	}
.topics{
	margin-block: 10vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
	.topics p{
		margin-right: 2rem;
	}
	.topics li{
		font-size: var(--text_size_small);
	}
		.topics li span{
			margin-right: 3rem;
		}



@media screen and (min-width:769px) and ( max-width:1700px){
	.mv{
		margin-bottom: 20vh;
		background-size: 85%;
	}
	.catch_wrap{
		top: 55vh;
		padding-left: 2rem;
	}

}
@media (max-width:768px) {
	.mv{
		background: url(../images/test/mv_bg_sp.png) no-repeat;
		background-position: right;
		background-size: 85%;
		height: 40vh;
		margin-bottom: 20vh;
	}
	.catch_wrap{
		width: 70vw;
		padding: 1rem;
		padding-left: 0;
		position: relative;
		top: 28vh;
	}
		.catch_wrap p{
			margin-block: 1rem;
		}
		.catch_wrap img{
			width: 50vw;
		}
	.topics {
		margin-block: 5vh 10vh;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
	}
		.topics img{
			width: 30vw;
			margin-bottom: 1rem;
		}
		.topics li span {
			display: block;
		}



}



/*--------------------------------------------------------------
	philosophy
--------------------------------------------------------------*/
.philosophy{
	background: url(../images/test/philosophy_bg.png) no-repeat;
	background-position: left;
	height: 480px;
	position: relative;
	margin-bottom: 15vh;
}
	.philosophy .container_small{
		display: flex;
		align-items: center;
		position: relative;
		top: 120px;
	}
	.philosophy_txt{
		width: 640px;
		background: var(--white);
		padding: 2rem;
		margin-left: 5vw;
	}
		.philosophy_txt h3{
			font-size: var(--text_size_big);
			font-weight: bold;
			border-bottom: 2px solid var(--color02);
			padding-bottom: 0.5rem;
			margin-bottom: 0.5rem;
		}
		.philosophy_txt p{
			font-size: var(--text_size_small);
		}

@media screen and (min-width:769px) and ( max-width:1680px){
	.philosophy{
		background-size: 80%;
	}
		.philosophy .container_small {
			display: flex;
			align-items: center;
			position: relative;
			top: 30vh;
		}
}

@media (max-width:768px) {
	.philosophy{
		background: url(../images/test/philosophy_bg_sp.png) no-repeat;
		background-size: 100%;
		height: 50vh;
		margin-bottom: 10vh;
	}
		.philosophy .container_small{
			align-items: flex-end;
			flex-direction: column;
		}
		.philosophy h2 img{
			width: 35vw;
			margin-bottom: 2rem;
		}
		.philosophy_txt{
			width: 80vw;
			padding: 1rem;
			margin-left: 5vw;
		}
	
}


/*--------------------------------------------------------------
	company
--------------------------------------------------------------*/
.company{
	background: url(../images/webp/company_bg.webp) no-repeat;
	background-position: right;
	height: 480px;
	position: relative;
	margin-bottom: 15vh;
}
	.company .container_small{
		display: flex;
		align-items: center;
		position: relative;
		top: 120px;
		flex-direction: row-reverse;
	}
	.company_txt{
		width: 640px;
		background: var(--white);
		padding: 2rem;
		margin-right: 5vw;
	}
	.company_txt table{
		font-size: var(--text_size_small);
	}
		.company_txt tr{
			border-bottom: 1px solid var(--color01);
		}
			.company_txt tr:last-of-type{
				border-bottom: none;
			}
		.company_txt th,
		.company_txt td{
			padding-block: 0.5rem;
		}
		.company_txt th{
			width: 20%;
		}
.profile{
	margin-bottom: 10vh;
}
	.profile .company_flex{
			display: flex;
			justify-content: center;
			align-items: center;
			align-items: flex-start;
			margin-top: 1rem;
		}
		.profile .company_flex .txt{
			margin-left: 2rem;
			font-size: var(--text_size_small);
		}
		.profile .company_flex .name{
			font-size: var(--text_size_middle);
			font-weight: bold;
			margin-bottom: 1.5rem;
		}
			.profile .company_flex .name span{
				font-size: var(--note_size);
				margin-right: 1rem;
			}
		.profile .company_flex .txt p{
			margin-bottom: 1.5rem;
		}

@media screen and (min-width:769px) and ( max-width:1680px){
	.company{
		background-size: 80%;
		margin-bottom: 10vh;
	}
		.company .container_small {
			display: flex;
			align-items: center;
			position: relative;
			top: 20vh;
		}
}

@media (max-width:768px) {
	.company{
		background: url(../images/webp/company_bg_sp.webp) no-repeat;
		background-size: 100%;
		margin-bottom: 10vh;
	}
		.company .container_small {
			align-items: flex-start;
			flex-direction: column;
		}
		.company h2 img{
			width: 35vw;
			margin-bottom: 2rem;
		}
		.company_txt{
			width: 80vw;
			padding: 1rem;
			margin-right: 5vw;
		}

	.profile .company_flex{
		flex-direction: column;
		align-items: center;
	}
		.profile .company_flex img{
			width: 70vw;
			margin-bottom: 1.5rem;
		}
		.profile .company_flex .name{
			font-size: var(--text_size_big);
		}

}



/*--------------------------------------------------------------
	contact
--------------------------------------------------------------*/
.contact{
	text-align: center;
	margin-bottom: 15vh;
}
	.contact .txt{
		color: var(--color02);
		font-size: var(--text_size_middle);
		font-weight: bold;
		margin-bottom: 2rem;
	}
	.contact .txt::before{
		content: '';
		display: inline-block;
		width: 13px;
		height: 40px;
		background-image: url(../images/webp/line_left.webp);
		background-size: contain;
		vertical-align: middle;
	}
	.contact .txt::after{
		content: '';
		display: inline-block;
		width: 13px;
		height: 40px;
		background-image: url(../images/webp/line_right.webp);
		background-size: contain;
		vertical-align: middle;
	}
	.contact button{
		color: var(--white);
		font-size: var(--text_size_big);
		margin-bottom: 1rem; 
		padding: 1rem;
		width: 400px;
		display: inline-block;
		background: var(--color02);
		border: none;
		border-radius: 5rem;
		position: relative;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	.contact button::before{
		content: '';
		display: inline-block;
		width: 35px;
		height: 24px;
		background-image: url(../images/webp/icon_mail.webp);
		background-size: contain;
		vertical-align: middle;
	}
	.contact button:hover{
		cursor: pointer;
	}
	
	

@media (max-width:768px) {
	.contact{
		margin-bottom: 10vh;
	}
		.contact button{
			width: 80vw;
		}
}


/*--------------------------------------------------------------
	Footer
--------------------------------------------------------------*/
footer{
	color: var(--white);
	font-size: var(--note_size);
	background: var(--color01);
	padding-block: 5vh;
}
	footer .container_small{
		text-align: center;
	}
	footer p:first-of-type{
		margin-bottom: 5vh;
	}

@media (max-width:768px) {
	footer img{
		width: 25vw;
	}
}