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

/*-----------------------------------------------------------------------------
	PC SP 共通
-----------------------------------------------------------------------------*/
html{
  font-size:62.5%;/*16px × 62.5% = 10px*/
}

body{
	font-size: 1.5rem;
	color: #707070;
	letter-spacing: 0.2em;
	position: relative;
}

a{
	color: #707070;
}










/*-----------------------------------------------------------------------------
	PC
-----------------------------------------------------------------------------*/
@media screen and (min-width:768px){
	
	
	body{
		min-width: 1340px;
	}
	
	#wrap{
		min-width: 1340px;
		overflow: hidden;
	}
	
	.inner{
		position: relative;
		width: 1340px;
		margin: auto;
	}
	
	.inner2{
		width: 1240px;
		margin: auto;
	}
	
	.inner3{
		width: 1140px;
		margin: auto;
	}
	
	.pc_none{
		display: none;
	}
	
	.pc{
		display: block;
	}
	.sp{
		display: none;
	}
	
/*----------------------------------
	header
----------------------------------*/		
	header{
		/* background-color: #fff; */
		width: 100%;
		height: 100px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		transition: all 0.3s 0s ease;
	}
	
	/*js*/
	header.scroll{
		background-color: #FFFFFF;
	}
	header.menu_open{
		background-color: rgba(255,255,255,0);
	}
	
	header .inner{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 93%;
		height: 100px;
	}
	
	header .logo .img_wrap{
		width: 140px;
		height: auto;
	}
	
	header .logo .img_wrap img{
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	header .logo .img_wrap .logo_w{
		width: 133%;
	}
	header .logo .img_wrap .logo_b{
		margin-left: 20px;
		margin-bottom: 5px;
	}

	header.scroll .-before {
		display : none;
	}
	header .-after {
		display : none;
	}
	header.scroll .-after {
		display : block;
	}


/*----------------------------------
	メニューボタン
----------------------------------*/
	.menu_btn{
		border-radius: 50%;
		width: 50px;
		height: 50px;
		--bar_width: 36px;
		--bar_height: 1px;
		position: fixed;
		top: 30px;
		right: 4%;
		z-index: 995;
	}
	.scroll .menu_btn{
		background-color: #707070;
		border: 1px solid #707070;
		border-radius: 50%;
		width: 50px;
		height: 50px;
		--bar_width: 20px;
		--bar_height: 1px;
		position: fixed;
		top: 30px;
		right: 4%;
		z-index: 995;
	}

	.menu_btn span.bar_box{
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: var(--bar_width);
		height: 16px;
	}

	.menu_btn span.bar_box::before,
	.menu_btn span.bar_box::after{
		display: block;
		background-color: #fff;
		width: var(--bar_width);
		height: var(--bar_height);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.4s ease 0s;
	}

	.menu_btn span.bar_box::before{
		content: "";
		top: 0%;
	}

	.menu_btn span.bar_box::after{
		content: "";
		bottom: 0%;
	}

	/*js*/
	.menu_btn.menu_click{
		background-color: rgba(255,255,255,0);
		border: 1px solid #fff;
	}

	.menu_btn.menu_click span.bar_box::before{
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(225deg);
	}

	.menu_btn.menu_click span.bar_box::after{
		bottom: 50%;
		left: 50%;
		transform: translate(-50%,50%) rotate(-225deg);
	}
	
	
	
/*----------------------------------
	メニュー
----------------------------------*/	
	header nav{
		background-color: #7FC7CA;
		position: fixed;
		top: 0;
		right: -100%;
		width: 30%;
		height: 100vh;
		padding: 160px 0 120px;
	}
	
	header nav *{
		color: #fff;
	}
	
	header nav ul.nav_menu{
		margin-bottom: 70px;
	}
	
	header nav ul.nav_menu li .company_name{
		font-size: 2.5rem;
		font-weight: 700;
		font-family: 'Roboto', sans-serif;
		text-transform: uppercase;
	}
	
	header nav ul.nav_menu li:first-of-type{
		margin-bottom: 20px;
	}
	
	header nav ul li{
		text-align: center;
		margin-bottom: 50px;
	}
	header nav ul li img{
		width: 60%;
	}
	
	nav ul li a{
		display: block;
		font-size: 2.2rem;
		font-weight: 600;
		font-family: '游明朝体', YuMincho, '游明朝 Medium', 'Yu Mincho Medium', '游明朝', 'Yu Mincho', 'Noto Serif JP', serif;
		line-height: 1.2;
	}
	
	nav ul li a .en{
		font-size: 1.1rem;
		font-weight: 500;
		font-family: 'Raleway',  'Noto Sans JP', sans-serif;
	}
	
	header nav ul.nav_contact{
		display: flex;
		justify-content: center;
	}
	
	header nav ul.nav_contact li{
		margin: 0 15px;
	}
	
	header nav ul.nav_contact li.tel{
		width: 18px;
		height: auto;
	}
	
	header nav ul.nav_contact li.mail{
		width: 23px;
		height: auto;
	}
	
	header nav ul.nav_contact li a,
	header nav ul.nav_contact li a img{
		width: 100%;
		height: auto;
	}
	
	.menu_bg{
		display: none;
		background-color: rgba(0,0,0,0.5);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
	}
	
	
	

/*----------------------------------
	メイン画像
----------------------------------*/
	.main_img .img_wrap,
	.main_img .img_wrap img{
		width: 100%;
		height: 100vh;
	}
	
	
	
	
/*----------------------------------
	採用情報 お問い合わせ link
----------------------------------*/
	.link_box{
		display: flex;
	}
	
	.link_box .link_box2{
		background: url("../images/common/contact.jpg") no-repeat center/cover;
		width: 50%;
		height: 360px;
	}
	
	.link_box .link_box2:nth-of-type(2){
		background-image: none;
	}
	
	.link_box .link_box2 a{
		background-color: rgba(112,112,112,0.9);
		display: block;
		width: 100%;
		height: 100%;
		transition: all 0.3s 0s ease;
	}
	
	.link_box .link_box2 a:hover{
		background-color: rgba(112,112,112,0.7);
	}
	
	.link_box .link_box2:nth-of-type(2) a{
		background-color: rgba(168,168,168,1);
	}
	
	.link_box .link_box2:nth-of-type(2) a:hover{
		background-color: rgba(168,168,168,0.7);
	}
	
	.link_box .link_box2:nth-of-type(2) .link_content{
		margin-left: 40px;
	}
	
	.link_box .link_box2 .link_content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 670px;
		height: 100%;
		position: relative;
	}
	
	.link_box .link_box2:nth-of-type(1) .link_content{
		margin-left: auto;
	}
	
	p.vertical{
		font-size: 2.5rem;
		font-weight: 700;
		font-family: 'Raleway', sans-serif;
		color: #000;
		text-transform: uppercase;
		writing-mode:vertical-rl;
		mix-blend-mode: overlay;
	}
	
	.link_box p.vertical{
		color: #fff;
		mix-blend-mode: normal;
		position: absolute;
		top: 25px;
		left: 0;
	}
	
	.link_box h2{
		font-size: 4rem;
		font-weight: 600;
		font-family: '游明朝体', YuMincho, '游明朝 Medium', 'Yu Mincho Medium', '游明朝', 'Yu Mincho', 'Noto Serif JP', serif;
		color: #fff;
		letter-spacing: 0.4em;
		text-align: center;
	}
	
	
	
	
/*----------------------------------
	footer
----------------------------------*/
	footer{
		background-color: #7FC7CA;
		padding-top: 60px;
	}
	
	footer *{
		color: #fff;
	}
	
	footer .flex{
		display: flex;
		justify-content: space-between;
		margin-bottom: 50px;
	}
	
	footer .f_box:nth-of-type(2){
		width: 50%;
		margin-top: 85px;
	}
	
	footer .f_box .f_box2{
		border-right: 1px solid #fff;
		padding-right: 120px;
	}
	
	footer .f_box .f_box2 p{
		font-size: 1.7rem;
		font-weight: 500;
		font-family: 'Noto Sans JP', sans-serif;
		margin-bottom: 35px;
	}
	
	footer .f_box .f_box2 address{
		font-size: 1.3rem;
		font-family: 'Noto Sans JP', sans-serif;
		font-style: normal;
		line-height: 2;
		margin-bottom: 50px;
	}
	
	footer .f_box .f_box2  ul.nav_contact{
		display: flex;
	}
	
	footer .f_box .f_box2   ul.nav_contact li.tel{
		width: 18px;
		height: auto;
		margin-right: 30px;
	}
	
	footer .f_box .f_box2   ul.nav_contact li.mail{
		width: 23px;
		height: auto;
	}
	
	footer .f_box .f_box2   ul.nav_contact li a,
	footer .f_box .f_box2   ul.nav_contact li a img{
		width: 100%;
		height: auto;
	}
	
	footer .f_box nav ul{
		display: flex;
		justify-content: flex-end;
	}
	
	footer .f_box nav ul li{
		margin-right: 70px;
	}
	
	footer .f_box nav ul li:last-of-type{
		margin-right: 0;
	}
	
	footer .f_box nav ul li a{
		font-size: 1.4rem;
		font-weight: 900;
		font-family: '游明朝体', YuMincho, '游明朝 Medium', 'Yu Mincho Medium', '游明朝', 'Yu Mincho', 'Noto Serif JP', serif;
		transition: all 0.3s 0s ease;
	}
	
	footer .f_box nav ul li a:hover{
		opacity: 0.7;
	}
	
	footer small{
		display: block;
		font-size: 0.9rem;
		font-family: 'Roboto', sans-serif;
		text-align: center;
		line-height: 2;
	}
	
	
	
	
	
	
	
/*----------------------------------
	ページトップ
----------------------------------*/
	.page_top{
		background-color: #A8A8A8;
		border: 1px solid #fff;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		position: fixed;
		bottom: 10px;
		right: 10px;
		z-index: 990;
		opacity: 0.7;
	}
	
	.page_top::after{
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(-45deg) translate(-25%,-50%);
		position: absolute;
		top: 50%;
		left: 50%;
		transition: all 0.3s 0s ease;
	}
	
	.page_top:hover::after{
		top: 45%;
	}
	
	
	
	
	
	
}











/*-----------------------------------------------------------------------------
	SP
-----------------------------------------------------------------------------*/
@media screen and (max-width:767px){
	
	
	
	
	#wrap{
		width: 100%;
		overflow: hidden;
	}
	
	.inner{
		position: relative;
		width: 90%;
		margin: auto;
	}
	
	.sp_none{
		display: none;
	}
	
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	
	
/*----------------------------------
	header(SP)
----------------------------------*/		
	header{
		/* background-color: #fff; */
		width: 100%;
		height: 70px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		transition: all 0.3s 0s ease;
	}
	
	/*js*/
	header.scroll{
		background-color: #FFFFFF;
	}
	header.menu_open{
		background-color: rgba(255,255,255,0);
	}
	header.menu_open .logo{
		opacity: 0;
	}
	
	header .inner{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 70px;
		width: 95%;
	}
	
	header .logo{
		transition: all 0.3s 0s ease;
	}
	
	header .logo .img_wrap{
		width: auto;
		height: 40px;
	}
	
	header .logo .img_wrap img{
		width: auto;
		height: 100%;
		object-fit: contain;
	}
	header .logo .img_wrap .logo_w{
		/* width: 100%; */
    	height: 132%;
	}
	header .logo .img_wrap .logo_b{
		margin-left: 15px;
	}


	header.scroll .-before {
		display : none;
	}
	header .-after {
		display : none;
	}
	header.scroll .-after {
		display : block;
	}

/*----------------------------------
	メニューボタン(SP)
----------------------------------*/
	.menu_btn{
		border-radius: 50%;
		width: 40px;
		height: 40px;
		--bar_width: 20px;
		--bar_height: 1px;
		position: fixed;
		top: 15px;
		right: 4%;
		z-index: 995;
	}
	.scroll .menu_btn{
		background-color: #707070;
		border: 1px solid #707070;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		--bar_width: 20px;
		--bar_height: 1px;
		position: fixed;
		top: 15px;
		right: 4%;
		z-index: 995;
	}

	.menu_btn span.bar_box{
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: var(--bar_width);
		height: 10px;
	}

	.menu_btn span.bar_box::before,
	.menu_btn span.bar_box::after{
		display: block;
		background-color: #fff;
		width: var(--bar_width);
		height: var(--bar_height);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.4s ease 0s;
	}

	.menu_btn span.bar_box::before{
		content: "";
		top: 0%;
	}

	.menu_btn span.bar_box::after{
		content: "";
		bottom: 0%;
	}

	/*js*/
	.menu_btn.menu_click{
		background-color: rgba(255,255,255,0);
		border: 1px solid #fff;
	}

	.menu_btn.menu_click span.bar_box::before{
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(225deg);
	}

	.menu_btn.menu_click span.bar_box::after{
		bottom: 50%;
		left: 50%;
		transform: translate(-50%,50%) rotate(-225deg);
	}
	
	
	
/*----------------------------------
	メニュー(SP)
----------------------------------*/	
	header nav{
		overflow-y: scroll;
		background-color: #7FC7CA;
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		height: 100vh;
		padding: 80px 0 60px;
	}
	
	header nav *{
		color: #fff;
	}
	
	header nav ul.nav_menu{
		margin-bottom: 35px;
	}
	
	header nav ul.nav_menu li .company_name{
		font-size: 2.1rem;
		font-weight: 700;
		font-family: 'Roboto', sans-serif;
		text-transform: uppercase;
	}
	
	header nav ul.nav_menu li:first-of-type{
		margin-bottom: 35px;
	}
	
	header nav ul li{
		text-align: center;
		margin-bottom: 50px;
	}
	
	nav ul li a{
		display: block;
		font-size: 1.8rem;
		font-weight: 600;
		font-family: '游明朝体', YuMincho, '游明朝 Medium', 'Yu Mincho Medium', '游明朝', 'Yu Mincho', 'Noto Serif JP', serif;
		line-height: 1.2;
	}
	
	nav ul li a .en{
		font-size: 1.1rem;
		font-weight: 500;
		font-family: 'Raleway',  'Noto Sans JP', sans-serif;
	}
	
	header nav ul.nav_contact{
		display: flex;
		justify-content: center;
	}
	
	header nav ul.nav_contact li{
		margin: 0 15px;
	}
	
	header nav ul.nav_contact li.tel{
		width: 18px;
		height: auto;
	}
	
	header nav ul.nav_contact li.mail{
		width: 23px;
		height: auto;
	}
	
	header nav ul.nav_contact li a,
	header nav ul.nav_contact li a img{
		width: 100%;
		height: auto;
	}
	
	.menu_bg{
		display: none;
		background-color: rgba(0,0,0,0.5);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
	}
		
	
/*----------------------------------
	メイン画像(SP)
----------------------------------*/
	/* .main_img{
		margin-top: 50px;
	} */
	
	.main_img .img_wrap{
    width: 100%;
		height: 100vh;
    overflow: hidden;
	}
	
	.main_img .img_wrap img{
    width: 100%;
		height: 100%;
    object-fit: cover;
		object-position: center;
	}
	
	
	
	
/*----------------------------------
	採用情報 お問い合わせ link(SP)
----------------------------------*/
	.link_box .link_box2{
		background: url("../images/common/contact_sp.jpg") no-repeat center/cover;
		width: 100%;
		height: 430px;
	}
	
	.link_box .link_box2:nth-of-type(2){
		background-image: none;
	}
	
	.link_box .link_box2 a{
		background-color: rgba(112,112,112,0.9);
		display: block;
		width: 100%;
		height: 100%;
		transition: all 0.3s 0s ease;
	}
	
	.link_box .link_box2 a:hover{
		background-color: rgba(112,112,112,0.7);
	}
	
	.link_box .link_box2:nth-of-type(2) a{
		background-color: rgba(168,168,168,1);
	}
	
	.link_box .link_box2:nth-of-type(2) a:hover{
		background-color: rgba(168,168,168,0.7);
	}
	
	.link_box .link_box2 .link_content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		width: 90%;
		height: 100%;
		margin: auto;
	}
	
	.link_box .link_box2:nth-of-type(1) .link_content{
		margin-left: auto;
	}
	
	p.vertical{
		font-size: 1.8rem;
		font-weight: 700;
		font-family: 'Raleway', sans-serif;
		color: #000;
		line-height: 1;
		text-transform: uppercase;
		writing-mode:vertical-rl;
		mix-blend-mode: overlay;
	}
	
	.link_box p.vertical{
		color: #fff;
		mix-blend-mode: normal;
		position: absolute;
		top: 25px;
		left: -10px;
	}
	
	.link_box h2{
		font-size: 2.5rem;
		font-weight: 600;
		font-family: '游明朝体', YuMincho, '游明朝 Medium', 'Yu Mincho Medium', '游明朝', 'Yu Mincho', 'Noto Serif JP', serif;
		color: #fff;
		letter-spacing: 0.25em;
		text-align: center;
	}
	
	
	
	
/*----------------------------------
	footer(SP)
----------------------------------*/
	footer{
		background-color: #7FC7CA;
		padding-top: 60px;
	}
	
	footer .inner3{
		width: 90%;
		margin: auto;
	}
	
	footer *{
		color: #fff;
	}
	
	footer .flex{
		margin-bottom: 50px;
	}
	
	footer .f_box:nth-of-type(1){
		margin-bottom: 40px;
	}
	
	footer .f_box .f_box2{
		padding-bottom: 30px;
	}
	
	footer .f_box .f_box2 p{
		font-size: 1.7rem;
		font-weight: 500;
		font-family: 'Noto Sans JP', sans-serif;
		margin-bottom: 20px;
	}
	
	footer .f_box .f_box2 address{
		font-size: 1.3rem;
		font-family: 'Noto Sans JP', sans-serif;
		font-style: normal;
		line-height: 2;
		margin-bottom: 40px;
	}
	
	footer .f_box .f_box2  ul.nav_contact{
		display: flex;
	}
	
	footer .f_box .f_box2   ul.nav_contact li.tel{
		width: 18px;
		height: auto;
		margin-right: 30px;
	}
	
	footer .f_box .f_box2   ul.nav_contact li.mail{
		width: 23px;
		height: auto;
	}
	
	footer .f_box .f_box2   ul.nav_contact li a,
	footer .f_box .f_box2   ul.nav_contact li a img{
		width: 100%;
		height: auto;
	}
	
	footer .f_box nav ul li{
		margin-bottom: 20px;
	}
	
	footer .f_box nav ul li:last-of-type{
		margin-right: 0;
	}
	
	footer .f_box nav ul li a{
		font-size: 1.4rem;
		font-weight: 900;
		font-family: '游明朝体', YuMincho, '游明朝 Medium', 'Yu Mincho Medium', '游明朝', 'Yu Mincho', 'Noto Serif JP', serif;
		transition: all 0.3s 0s ease;
	}
	
	footer .f_box nav ul li a:hover{
		opacity: 0.7;
	}
	
	footer small{
		display: block;
		font-size: 0.9rem;
		font-family: 'Roboto', sans-serif;
		text-align: center;
		line-height: 2;
	}
	
	
	
	
	
	
	
/*----------------------------------
	ページトップ(SP)
----------------------------------*/
	.page_top{
		background-color: #A8A8A8;
		border: 1px solid #fff;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 990;
		opacity: 0.7;
	}
	
	.page_top::after{
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(-45deg) translate(-25%,-50%);
		position: absolute;
		top: 50%;
		left: 50%;
		transition: all 0.3s 0s ease;
	}
	
	.page_top:hover::after{
		top: 45%;
	}
	
}