@charset "utf-8";
/* CSS Document */
/*=====================
00.ベース周り
======================*/
@font-face {
	font-family: 'notobla';
 	src: url('/assets/fonts/NotoSansJP-Black.ttf') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'notobo';
 	src: url('/assets/fonts/NotoSansJP-Bold.ttf') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'notome';
 	src: url('/assets/fonts/NotoSansJP-Medium.ttf') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'notore';
 	src: url('/assets/fonts/NotoSansJP-Regular.ttf') format('truetype');
	font-display: swap;
}
body{
	position: relative;
	background-color: #F7FCFF;
}
body::before{
	content: "";
	display: block;
	position: fixed;
	background-image: url("/assets/img/top/top_bgi_sp.webp");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: contain;
	width: 100%;
	height: 100%;
	/* 既存の設定に以下を追加 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
body.products_page::before{display: none;}
img{width:100%;height: auto;vertical-align: bottom;}
.tab_block,.tab-pc_block,.pc_block1280,.pc_block{display: none;}
main{padding-top: 58px;font-family: 'notome';position: relative;}
main.lower{padding-top: 0;}
/*========================
01.モジュール・ボタン周り
==========================*/
.button{
	display: block;
	color: white;
	text-align: center;
	letter-spacing: 0.05em;
	font-size: min(2.93vw,18px);
	padding: calc(3% + 1.5px) 0;
	width: min(calc(55% - 1px),335px);
	border-radius: 100px;
	margin-top: min(9%,50px);
	position: relative;
	overflow: hidden;
	transition-duration: 0.2s;
}
.button:hover{
	opacity: 0.7;
}
.button span.outer{
	display: block;
	width: 83%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
.button span.outer::before,.button span.outer::after{
	content: "";
	display: block;
	background-color: white;
	position: absolute;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
}
.button span.outer::before{
	height: 1px;
	width: 13px;
	left: calc(100% - 15px);
	top: 0.2px;
	transition-duration: 0.2s;
}
.button:hover span.outer::before{
	width: 100%;
}
.button span.outer::after{
	width: 5px;
	height: 6px;
	right: 0;
	left: 0;
	margin-left: auto;
	border-radius: 100px;
}
.button:hover span.outer::after{
	display: none;
}
.button span.outer span{
	transition-duration: 0.2s;
}
.button:hover span.outer span{
	transform: scale(0.8);
	display: block;
}
@media screen and (min-width: 768px) {
	body::before{
		background-image: url("/assets/img/top/top_bgi_tab.webp");
		background-size: cover;
	}
.sp_block{display: none;}
.tab_block,.tab_block,.tab-pc_block{display: block;}
.button span.outer::before{
	height: 2px;
	width: 22px;
	right: 8px;
}
.button span.outer::after{
	width: 9px;
	height: 9px;
	}
	main{
		padding-top: 74px;
	}
.button span.outer::before{
	width: 27px;
	left: calc(100% - 30px);
}
}
@media screen and (min-width: 1280px) {
	body::before{
		background-image: url("/assets/img/top/top_bgi_pc.webp");
        width: 53%;
        height: 100vh;
        background-size: cover; 
        background-position: left top;
        background-attachment: scroll; 
	}
	.sp-tab_block,.tab_block{display: none;}
	.pc_block1280{display: block;}
	main{padding-top: 96px;}
	.button span.outer::before{
		width: 27px;
		left: calc(100% - 36px);
	}
}
/*========================
02.ヘッダー周り
==========================*/
header{
	position: fixed;
	z-index: 6;
	width: 100%;
	top: 0!important;
}
header .front{
	position: relative;
	padding-top: 17px;
	padding-bottom: 17px;
}
header .front::before,header .front::after{
	content: "";
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;

}
header .front::before{
	/*background-color: #56CBE8;*/
	/*background-color: rgba(86, 203, 232, 0.5);*/
	backdrop-filter: blur(28px) brightness(0.88);
}
header .front::after{
	background-color: #FFFFFF;
	opacity: 0.75;
}

header .front .inner{
	position: relative;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 2;
}
header .front .inner .logo{
	width: min(calc(48% - 1px),192px);
}
.menu_button {
  position: relative;
  width: 30px;
  height: 12px;
  background: none;
  border: none;
  cursor: pointer;
}
.menu_button span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 30px;
  height: 1px; /* 線の太さ */
  background-color: #333;
  transition: all 0.3s; /* アニメーション用 */
}
.menu_button span:nth-child(1) {
  top: 9px;
}
.menu_button span:nth-child(2) {
  bottom: 10px;
}
.menu_button.active span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.menu_button.active span:nth-child(2) {
  bottom: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
header .menu_container.sp-tab_menu{
	background-color: rgba(216, 216, 216, 0.95);
	padding-top: 17px;
	padding-bottom: 19px;
	display: none;
}
header .menu_container.sp-tab_menu.active{
	display: block;
}
header .menu_container nav{
	width: 96%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	font-size: 13px;/*11px*/
}
header .menu_container nav a{
	letter-spacing: 0.05em;
	display: block;
}
header .menu_container nav .menu{
	width: 310px;/*132px*/
	margin-left: 20px;
	font-family: "notome";
	/*一時設定*/
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
/*一時設定*/
header .menu_container nav .menu li{
	width: 132px;
}
/*一時設定ここまで*/
header .menu_container nav .menu li:nth-of-type(n+2){
	margin-top: 14px;
}
/*一時設定*/
header .menu_container nav .menu li:nth-of-type(2){
	margin-top: 0;
}
/*一時設定ここまで*/
header .menu_container nav .menu li a{
	position: relative;
}
.circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	background-color: white;
	border-radius: 50%;
	flex-shrink: 0;
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
}
.circle::after {
  content: '';
  width: 4px;
  height: 4px;
  border-top: 1px solid #7E7E7E;
  border-right: 1px solid #7E7E7E;
  transform: rotate(45deg);
  margin-left: -2px; /* 視覚的な中央調整 */
  transition: transform 0.3s; /* ホバー時用 */
}
header .menu_container nav .order_menu{
	width: min(53%,334px);/*min(45%,334px);*/
}
header .menu_container nav .order_menu li:last-of-type{
	margin-top: 10px;
}
header .menu_container nav .order_menu a{
	line-height: 1.63;
	color: white;
	background-color: #E37A43;
	border-radius: 4px;
	font-family: "notome";
	padding-top: 8px;
	padding-bottom: 7px;
	display: block;
}
header .menu_container  nav .order_menu li:last-of-type a{
	background-color: #105C79;
}
header .menu_container  nav .order_menu a span{
	display: block;
	width: 83%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	transition-duration: 0.3s;
}
header .menu_container nav .order_menu a span::after{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 8px;
	height: 8px;
	border-top: 2px solid white;
	border-right: 2px solid white;
	transform: translateY(-50%) rotate(45deg);
}
header .menu_container nav .order_menu a span:hover{
	transform: scale(0.7);
	opacity: 0.4;
}
@media screen and (min-width: 768px) {
	header .front{
		padding-top: 23px;
		padding-bottom: 23px;
	}
	header .front .inner .logo{
		width: calc(28% - 1px);
		max-width: 287px;
	}
	header .menu_container.sp-tab_menu{
		padding-top: 26px;
		padding-bottom: 26px;
	}
	header .menu_container.sp-tab_menu nav .menu{
		width: 528px;/*256px*/
		display: flex;
		flex-wrap: wrap;
	}
	header .menu_container.sp-tab_menu nav .menu li{
		width: 40%;
		width: 103px;/*一時設定*/
	}
	header .menu_container.sp-tab_menu nav .menu li:nth-of-type(2){
		margin-top: 0;
		width: 124px;
	}
	/*一時設定*/
	header .menu_container.sp-tab_menu nav .menu li:nth-of-type(n+3){
		margin-top: 0;
	}
	/*一時設定ここまで*/
	/*header .menu_container.sp-tab_menu nav .menu li:nth-of-type(even){
		margin-left: 24px;
	}*/
	header .menu_container.sp-tab_menu nav .order_menu{
		display: flex;
		justify-content: space-between;
		width: min(53%,400px);
	}
	header .menu_container.sp-tab_menu nav .order_menu li{
		width: 48%;
	}
	header .menu_container.sp-tab_menu nav .order_menu li:last-of-type{
		margin-top: 0;
	}
}
@media screen and (min-width: 1280px) {
	header .front{
		padding-top: 35px;
		padding-bottom: 35px;
	}
	.menu_container.pc_block{
		display: block;
		width: 80%;
		/*一時設定
		margin-right: 47px;*/
	}
	.menu_container.pc_block nav{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-right: 0;
	}
	header .menu_container nav .menu li{
		width: 154px;
	}
	header .menu_container nav .menu li:nth-of-type(n+3){
		margin-top: 0;
	}
	header .menu_container nav .menu li.to_contact{
		margin-left: 30px;
	}
	header .menu_container nav .menu li a{
		font-size: 18px;
		font-family: "notome";
	}
	.circle{
		width: 17px;
		height: 17px;
	}
	.circle::after {
		width: 5px;
  		height: 5px;
	}
	.menu_container.pc_block .menu{
		width: auto;
		margin-left: 100px;
		display: flex;
		flex-wrap: wrap;
	}
	.menu_container.pc_block .order_menu{
		width: 70%;
	}
	.menu_container.pc_block .order_menu li{
		max-width: 339px;
	}
	header .menu_container nav .menu li:nth-of-type(2){
		margin-top: 0;
	}
	header .menu_container nav .menu li:nth-of-type(even){
		margin-left: 30px;
	}
	.menu_container.pc_block .menu,.menu_container.pc_block .order_menu li a{
		font-size: 15px;
	}
	.menu_container.pc_block .order_menu li a span br{
		display: none;
	}
	header .menu_container.sp-tab_menu.active{
		display: none;
	}
}
@media screen and (min-width: 1600px) {
	header .front .inner{
		width: 98%;
		max-width: 1817px;
	}
	.menu_container.pc_block nav{
		justify-content: right;
	}
	.menu_container.pc_block .menu{
		flex-wrap: inherit;
		margin-left: 10px;
	}
	header .menu_container nav .menu li{
		width: 160px;
	}
	header .menu_container nav .menu li.to_about,header .menu_container nav .menu li.to_recruit{
		width: 127px;
	}
	header .menu_container nav .menu li.to_contact{
		width: 137px;
		margin-left: 30px;
	}
	header .menu_container nav .menu li:nth-of-type(n+3){
		margin-top: 0;
	}
	.menu_container.pc_block .order_menu{
		display: flex;
		justify-content: space-between;
		width: 57%;
    	max-width: 640px;
		margin-left: 17px;
	}
	.menu_container.pc_block .order_menu li{
		width: calc(49% - 3px);
	}
	header .menu_container nav .order_menu li:last-of-type{
		margin-top: 0;
	}
	header .menu_container nav .order_menu a{
		padding-top: 13px;
		padding-bottom: 13px;
	}
	.circle{
		margin-top: 2px;
	}
	header .menu_container nav .order_menu a span{
		width: 92%;
		margin-left: 17px;
	}
	header .menu_container nav .order_menu a span::after {
		width: 12px;
  		height: 12px;
		border-top-width: 1px;
		border-right-width: 1px;
		right: 10px;
	}
	header .menu_container nav .order_menu li:first-of-type a span::after{
		right: 4px;
    	margin-top: 2px;
	}
}
/*========================
03.下層ページ共通設定
==========================*/
main.lower hgroup{
	color: white;
	position: relative;
	z-index: 5;
}
main.lower hgroup h1{
	font-size: 31px;
	letter-spacing: 0.1em;
}
main.lower hgroup p{
	font-family: "notore";
	font-size: 15px;
	letter-spacing: 0.15em;
	margin-top: 11px;
}
/*ページタイトル周り*/
main.lower .mv{
	/*padding-top: min(35%,190px);
	padding-bottom: min(calc(21% + 2px),165px);
	position: relative;*/
}
main.lower .mv .outer{
	padding-top: min(35%,190px);
	padding-bottom: min(calc(21% + 2px),140px);
}
main.lower .mv .inner{
	margin-left: 23px;
}
@media screen and (min-width: 768px) {
	main.lower .mv .outer{
		padding-top: min(calc(25% - 2px),240px);
		padding-bottom: min(calc(19% + 1px),178px);
		position: relative;
	}
	main.lower .mv .outer::before{
		content: "";
		display: block;
		position: absolute;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: right;
		top: 0;
		right: 0;
		width: 82%;
		height: 100%;
		/*opacity: 0.5;*/
		mix-blend-mode: multiply;
	}
	main.lower .mv .inner{
		margin-left: min(calc(6% + 2px),320px);
	}
	main.lower hgroup h1{
		font-size: min(4.04vw,50px);
	}
	main.lower hgroup p{
		font-size: min(1.95vw,30px);
	}
}
@media screen and (min-width: 1280px) {
	main.lower .mv{
		overflow: clip;
	}
	main.lower .mv .outer::before{
		margin-top: 0;
		background-size: cover;
		width: 89%;
		margin-right: -22%;
	}
	main.lower hgroup p{
		margin-top: 20px;
	}
}
@media screen and (min-width: 1680px) {
	main.lower .mv .outer{
		/*padding-top: 240px;*/
		margin-left: auto;
		margin-right: auto;
	}
	main.lower .mv .outer::before{
		margin-top: min(4%,48.4px);
    	margin-right: min(-30%,-326.4px);
	}
	main.lower .mv .inner{
		margin-left: 320px;
	}
}

/*========================
04.フッター周り
==========================*/
footer{
	margin-top: min(calc(17% + 1px),150px);
	position: relative;
}
footer .contact{
	background: transparent linear-gradient(114deg, #4FC2DF 0%, #4293D8 100%) 0% 0% no-repeat padding-box;
	border-radius: 10px 10px 0px 0px;
	color: white;
	text-align: center;
	font-family: "notobo";
	padding-top: 30px;
	padding-bottom: 36px;
	z-index: 3;
	position: relative;
}
footer .contact p{
	font-size: 18px;
	letter-spacing: 0.05em;
	line-height: 1.66;
	color: white;
}
footer .footer_button{
	display: block;
	background-color: rgba(16, 92, 121, 0.05); 
	backdrop-filter: blur(25px) brightness(1.1);
	-webkit-backdrop-filter: blur(25px) brightness(1.1);
	width: 54%;
	max-width: 335px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	font-size: min(2.93vw,16px);
	padding-top: min(calc(3% - 1.25px),18px);
	padding-bottom: min(calc(2% + 4.5px),18px);
	border-radius: 38px;
	letter-spacing: 0.05em;
}

footer .logo_box{
	max-width: 192px;
	margin-top: min(calc(7% + 2px),45px);
	margin-right: auto;
	margin-left: auto;
}
footer .white_area{
	padding-top: 26px;
	background-color: #F7FCFF;
}
footer ul{
	display: flex;
	width: 89%;
	max-width: 527px;
	margin-left: auto;
	margin-right: auto;
	justify-content: space-between;
}
footer ul li {
	width: 32%;
	max-width: 150px;
	position: relative;
}
footer ul li a{
	display: block;
	color: #416FC7;
	font-family: "notobo";
	font-size: min(2.67vw,15px);
	letter-spacing: 0.05em;
}
footer ul li a .circle{
	background-color: transparent;
	border: solid 1px #416FC7;
}
footer ul li a .circle::after {
	border-color: #416FC7;
}
footer p.information{
	font-size: min(2.4vw,11px);
	font-family: "notore";
	color: #555555;
	text-align: center;
	line-height: 1.8;
	margin-top: 15px;
}
footer .page_top,footer small{
	display: block;
	font-size: 10px;
	color: white;
	background-color: #919191;
}
footer .page_top{
	font-family: "notore";
	width: 56px;
	height: 55px;
	display: flex;
	justify-content: center;
	border-radius: 100%;
	padding-top: 18px;
	margin-right: 3px;
	margin-bottom: -25px;
	margin-left: auto;
	position: relative;
}
footer .page_top::after{
	content: '';
	position: absolute;
	top: 13px;
	right: 0;
	bottom: auto;
	left: 0;
	margin-top: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: -17px;
	width: 8px;
	height: 8px;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	transform: translateY(-50%) rotate(-45deg);
}
footer small{
	text-align: center;
	height: 25px;
	line-height: 25px;
}
@media screen and (min-width: 768px) {
	footer{margin-top: 150px;}
	footer .contact{
		padding-top: min(calc(4% - 4px),60px);
		padding-bottom: min(calc(5% - 8px),64px);
		background: transparent linear-gradient(101deg, #4FC2DF 0%, #4293D8 100%) 0% 0% no-repeat padding-box;
	}
	footer .contact p{
		font-size: min(2.34vw,25px);
	}
	footer .white_area{
		padding-top: min(3%,44px);
	}
	footer .logo_box{
		margin-top: min(calc(5% + 7px),57px);
	}
	footer p.information{
		margin-top: min(2%,24px);
	}
}
@media screen and (min-width: 1280px) {
	footer{
		margin-top: 250px;
	}
	footer .contact{
		border-radius: 50px 50px 0px 0px;
		background: transparent linear-gradient(96deg, #56CBE8 0%, #167AB9 100%) 0% 0% no-repeat padding-box;
	}
	footer .footer_button{
		margin-top: 40px;
		height: 74px;
		line-height: 70px;
		padding: 0;
		font-size: 18px;
	}
	footer ul{
		max-width: 708px;
	}
	footer ul li{
		width: 100%;
		max-width: 196px;
	}
	footer ul li a{
		font-size: 20px;
	}
	footer ul li a .circle{
		top: 4px;
	}
	footer .page_top{
		width: 74px;
		height: 75px;
		top: 10px;
		padding-top: 24px;
		margin-right: 55px;
	}
	footer .page_top::after{
		top: 19px;
	}
	footer p.information{
		font-size: 13px;
	}
	footer p.information span{
		display: inline-block;
		margin-left: 20px;
	}
	footer small{
		height: 40px;
		line-height: 40px;
		font-size: 13px;
	}
}
/*=====================
05.アクセス時のメッセージウィンドウ
======================*/
.modal_window{
	display: none;
	opacity: 0;
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	background-color: white;
	z-index: 100;
	color: #7E7E7E;
	text-align: center;
}
.modal_window .outer{
	width: min(80%,522px);
	margin-top: min(31%,282px);
	margin-left: auto;
	margin-right: auto;
}
.modal_window h2{
	font-family: "notobo";
	color: #7E7E7E;
	font-size: min(4.27vw,20px);
	letter-spacing: 0.05em;
}
.modal_window p{
	font-family: "notome";
	font-size: min(2.93vw,13px);
	line-height: 1.81;
	letter-spacing: 0.05em;
	margin-top: min(calc(3% - 1px),20px);
}
.modal_window .button_container{
	background-color: #EDF2F7;
	margin-top: min(10%,50px);
	padding-top: min(14%,72px);
	padding-bottom: min(14%,67px);
}
.modal_window .button_container .inner{
	font-family: "notome";
	width: 68%;
	margin-left: auto;
	margin-right: auto;
}
.modal_window .button_container .inner h3{
	color:#416FC7;
	font-size: min(3.73vw,20px);
	letter-spacing: 0.1em;
}
.modal_window .button_container .inner .button_box{
	margin-top: min(calc(7% - 1px),30px);
}
.modal_window .button_container .inner .button_box li{
	background-color: white;
	border:solid 1px #56CBE8;
	letter-spacing: 0.05em;
	color: #56CBE8;
	font-size: min(2.93vw,18px);
	padding: min(calc(6% - 1px),24px);
	cursor: pointer;
}
.modal_window .button_container .inner .button_box .no{
	margin-top: min(5%,20px);
}
@media screen and (min-width: 768px) {
	.modal_window .wrapper{
		height: 100%;
		display: flex;
		align-items: center;
	}
	.modal_window .outer{
		margin-top: 0;
		width: min(68%,741px);
	}
	.modal_window .outer h2{
		font-size: min(2.6vw,23px);
	}
	.modal_window p{font-size: min(1.69vw,15px);}
	.modal_window .button_container{
		margin-top: min(calc(10% - 2px),50px);
	}
}
@media screen and (min-width: 1280px) {
	.modal_window .button_container{
		padding-bottom: 63px;
	}
}