@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Rubik+80s+Fade&display=swap');
.bg_color1 {background-color: #1e4c39;}
.bg_color2 {background-color: #232623;}
.bg_color3 {background-color: #0f100f;}
.bg_color5 {background-color: #c6af7b;}
.txt_color1 {color: #508d68;}
.border_color4 {border-color: #232623;}
.hvr_bg_color1:hover {background-color: #1e4c39;}
.hvr_bg_color3:hover {background-color: #1e4c39;}
.hvr_border_color1:hover {border-color: #1e4c39;}
/* ----------　all　---------- */
.linkStyle{
	color:#c6af7b;
}
.linkStyle:hover{
	color:#c6af7b;
	opacity: 0.7;
	transition: all 0.5s;
}
.font_serif, .more,.font_jp, .con_title, #page_title p, .cate_title, .box_title1, .box_title, a[href^="tel:"],#pc_nav,#pc_nav .contact_bt, #sp_nav , #page_title h2, .pager,#header .contact_bt a,.sp_contact_bt a,#top_banner a p, #top_info .con_title, .date{ 
    font-family: 'Noto Sans JP', sans-serif;
}

.font_en, #contents1 .con_box .con_sub_title, #contents1-h .con_box .con_sub_title, #top_cms .cms_title h2, .cate_list::before{
        font-family: 'Rubik 80s Fade', cursive;
}
#contents1 .con_title, #contents1-h .con_title,#contents2 .con2_title2,#top_cms .cms_title p{
    font-style: italic;
    font-weight: bold;
}
#wrap,#top_cms{
    position: relative;
}
.wrap_anime{
    position: absolute;
    width: 100%;
    height: 100%;
	background: url(Dup/img/noise.png);
	animation: noise_anima 1s steps(10) infinite;
	top: 0;
}
#top_cms .wrap_anime{
    opacity: 0.5;
}
@keyframes noise_anima {
	from { background-position: 0 0; }
	to { background-position: 123px 456px; }
}
#wrap{
	background:linear-gradient(to right, #185054, #1c3a19);/*グラデーションを定義*/
	background-size: 200% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 5s ease infinite;
}

@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
#header{
    padding-top: 20px;
}
#header::before {
    background: linear-gradient(to bottom, #1c3a19, rgba(0,0,0,0));
}
#header h1 img {
    width: 350px!important;
}
#header .contact_bt a{
    font-weight: bold;
}
footer .con_img figure{
    opacity: 0.15;
}
.footer_logo{
    max-width: 350px;
}
#sp_nav nav{
    background: linear-gradient(to right, #185054, #1c3a19);
    font-weight: bold;
    font-style: italic;
}
 /*    background: linear-gradient(to right, #1c3a19, #215c47); */
/* ----------　TOP　---------- */
header,#main_img{
    height: auto;
    max-height: 100vh;
}
#pc_nav,#pc_nav .contact_bt{
    font-weight: bold;
}
#main_img .bg_box {
    opacity: 0.15;
}
#main_img .catch_wrap{
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    max-width: 700px;
}
#main_img .catch_box{
    margin-bottom: 50px;
}
.catch1-2,.catch1-3{
    top: 0;
    position: absolute;
}
.catch1-2{
    transform: translateX(-10%);
    transition:0.5s;
    opacity: 0;
}
.catch1-2.in{
    opacity: 1;
    transform: translateX(0%);    
}
.catch1-3{
    transform: translateX(10%);
    transition:0.5s;
    opacity: 0;
}
.catch1-3.in{
    opacity: 1;
    transform: translateX(0%);    
}
.catch2{
    transform: translateY(-15%);
    transition:0.5s;
    opacity: 0;
    width: 60%;
    margin-bottom: 30px;
}
.catch2.in{
    opacity: 1;
    transform: translateY(0%);    
}
.catch3{
    transform: translateY(-15%);
    transition:0.8s;
    opacity: 0;
}
.catch3.in{
    opacity: 1;
    transform: translateY(0%);    
}
#contents1{
    position: relative;
    padding-top: 200px;
}
#contents1:before {
    content: "";
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    width: 130%;
    height: 150px;
    top: 0px;
    left: 0;
    background: url(Dup/img/intro_anime.png) repeat-x;
    background-position: 0 50%;
    background-size: 110%;
    animation: bgroop 35s linear infinite;
    opacity: 0.06;
}
@keyframes bgroop{
    0% { background-position: 0 50%;}
  100% { background-position: 1100% 50%;}
}
#contents1 .con_box,#contents1-h .con_box {
    background-color: rgba(15 ,16 ,15 ,0.95);
}
#contents2 .con2_img::before {
    background-image: linear-gradient(to bottom, rgba(28 ,58 ,25 ,0), #395044 calc(100% - 50px), rgba(28 ,58 ,25 ,0));
}

#contents2 .con2_title1{
    font-size: 80px;
    line-height: 1.5;
    
}
#contents2 .con2_title2{
    width: 100%;
    margin-bottom: 20px;
}
#contents2 .con2_txt{
    width: 100%!important;
}
#top_cms .cms_box{
    position: relative;
    z-index: 1;
}
#top_info a{
    background: linear-gradient(to right, #185054, #1c3a19);
    border: none;
}
#top_info a:hover {
        color: rgba(255 ,255 ,255,0.7);
}
/* ----------　下層ページ　---------- */
#page_title .page_title_box {
    top: 125px;
}
#page_title h2{
    font-weight: bold;
}
#page_title p{
    font-size: 40px;
    font-family: 'Rubik 80s Fade', cursive;
    font-weight: normal;
    line-height: 1.5;
}
.cate_list::before {
    font-size: 25px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
}
/* 社員紹介 */
#cms_6-a .cate_box {
    border-bottom: 1px solid #c6af7b;
}
#cms_6-a .box_txt1{
    font-size: -webkit-calc(1rem + 4px);
    font-size: calc(1rem + 4px);
}
/* 求人情報 */
.cms_6-b .cate_box:first-of-type,#cms_6-b .cate_box:first-of-type {
    border-top: 1px solid #3e5a50;
}
.cms_6-b .cate_box, .cms_6-b .cate_box .box_txt1, .cms_6-b .cate_box .box_txt2,#cms_6-b .cate_box, #cms_6-b .cate_box .box_txt1, #cms_6-b .cate_box .box_txt2 {
    border-color: #3e5a50;
}
/* 会社情報 */
/* お問い合わせ */
.page8 #tel_txt h3{
    color: #508d68
}
/* プライバシーポリシー */
/* サイトマップ */
.sitemap_box li a .site_sab_title {
    color: #508d68;
}


/*-------------------------------------------------------
			          1200px
-------------------------------------------------------*/
@media screen and (max-width: 1200px){
/* ----------　TOP　---------- */    
#main_img .catch_wrap {
    max-width: 500px;
}    
}
/*-------------------------------------------------------
			          タブレット
-------------------------------------------------------*/
@media screen and (max-width: 768px){

/* ----------　TOP　---------- */  
#main_img .main_img2{
    height: 60vh;
}
#main_img .main_img2 img{
    width: auto!important;
    height: 100%!important;
}
#main_img .catch_wrap {
    max-width: 450px;
    top: 55%;
}    
#contents1:before {
    width: 160%;
    height: 140px;
}   
#contents1 {
    padding-top: 170px;
}
#contents1 .con_box .con_sub_title, #contents1-h .con_box .con_sub_title {
    font-size: 40px;
}
#contents2 .con2_title1 {
    font-size: 50px;
}
#top_banner a p {
    font-weight: bold;
}
/* ----------　下層ページ　---------- */
#page_title {
    height: 330px;
}
#page_title h2 {
    font-size: 40px;
}
#page_title p {
    font-size: 30px;
}
.cate_list::before {
    font-size: 20px;
}
/* 求人情報 */
#cms_6-b .cate_box {
    width: 100%!important;
}
}

/*-------------------------------------------------------
		            	スマホ
-------------------------------------------------------*/
@media screen and (max-width: 667px){
/* ----------　all　---------- */  
#loading img{
    max-width: 250px;
}
#header h1 img {
    width: 250px!important;
}
.footer_logo {
    max-width: 250px;
}
.sp_contact_bt a{
    font-weight: 800;
    color: #333;
}

/* ----------　TOP　---------- */     
#main_img .main_img2 img{
    margin-left: -50px;
}
#main_img .catch_wrap {
    width: 70%;
}    
#main_img .catch_box {
    margin-bottom: 20px;
}
.catch2 {
    width: 60%;
    margin-bottom: 15px;
}
#contents1 {
    padding-top: 120px;
}
#contents1:before {
    width: 190%;
    height: 120px;
}
#contents1 .con_box .con_sub_title, #contents1-h .con_box .con_sub_title {
    font-size: 35px;
    top: 35px;
}
#contents2 .con2_title1 {
    font-size: 40px;
}
#contents2 .con2_title1 span {
    background-size: 60px 1px;
}
#top_cms .cms_title h2 {
    font-size: 55px;
    letter-spacing: 3px;
}
#top_cms .cms_title p {
    font-size: 18px;
}
#top_info .con_title{
    letter-spacing: 1px;
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
    margin-bottom: 10px;
}
/* ----------　下層ページ　---------- */
#page_title {
    height: 280px;
}
#page_title .page_title_box {
    top: 110px;
}
#page_title h2 {
    font-size: 25px;
}
#page_title p {
    font-size: 30px;
}

}