/*-------------------------------------------------
  ヘッダー header
-------------------------------------------------*/

:root{

	/* PCのヘッダーの高さを指定 */
	--header_height_pc:min(120px, 120vw/1180*100);

	/* スマホのヘッダーの高さを指定 */
	--header_height_smp:calc(150vw / 750 * 100);

}


#header
{
	position: fixed;
	top: 0;
	z-index: 999999;

	width: 100%;
	height: var(--header_height_pc);

	background: #fff url(images/) no-repeat;
	background: rgba(256,256,256,1);

	border-width: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #E0E0E0;

	margin-top: 0;
}

	@media screen and (max-width:750px){ /*スマホサイズ*/

	#header
	{
		height: var(--header_height_smp);

		margin: 0;
	}

	}


.logoandmenu /*ロゴ+メニュー帯*/
{
	width: 100%;
	max-width: 1180px;
	height: 100%;

	margin: auto;

	display: flex;
	align-items: center;

}

.logo /*ロゴエリア*/
{
	width: 25%;
	height: 100%;
	/* float: left; */
	z-index: 9999;
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;
}

.logo img
{
	width: min(200px,200vw/1180*100);
}


.logoandmenu h2{

	display: block;

	width: 55%;

	margin-top: min(40px,40vw/1180*100);

	font-size: min(14px,14vw/1180*100);
	text-align: center;
	margin-block-start: 0;
    margin-block-end: 0;
}

@media screen and (max-width:750px){ 

	.logoandmenu h2{

		display: none;
	}
}

.header_telmail{

	width: 20%;

	font-size: min(16px,16vw/1180*100);
	font-weight: 500;
	text-align: center;
}

.header_text{

	width: 100%;
}

.header_tel{

	display: block;

	width:100%;

	font-size: min(30px,30vw/1180*100);

	padding: min(5px,5vw/1180*100);

}

.header_mail{

	display: block;

	width: 100%;
}

@media screen and (max-width:750px){ 

	.header_telmail{

		display: none;
	}
}


	@media screen and (max-width:750px){ /*スマホサイズ*/

	.logoandmenu /*ロゴ+メニュー帯*/
	{
		display: block;
	}

	.logo /*ロゴエリア*/
	{
		width: 50%;
		float: left;
	}

	.logo img
	{
		width: calc(300vw / 750 * 100);
	}
	}



/*-------------------------------------------------
  ヒーローイメージ
-------------------------------------------------*/

.bg_heroimg /*ヒーローイメージの背景*/
{
	width: 100%;
	
	margin: var(--header_height_pc) auto 0 auto;
}

.heroimg /*ヒーローイメージの枠*/
{
	max-width: 1180px;
	margin: auto;
	padding: 0 0 0 0;
	overflow: hidden;
}

.heroimg img /*ヒーローイメージ*/
{
	width: 100%;

	/* display: none; */
}

	@media screen and (max-width: 750px){ /*スマホサイズ*/

		.bg_heroimg /*ヒーローイメージの背景*/
		{
			width: 100%;
			
			margin: var(--header_height_smp) auto 0 auto;
		}

	}

/*-------------------------------------------------
  キャッチコピーエリア
-------------------------------------------------*/

/*サブページキャッチコピーエリア背景ブラー*/
#bg_blur1
{
	width: 100%;
	/* max-width: 1180px; */

	margin: min(175px,175vw/1180*100) auto 0 auto;

	position: relative;
	overflow: hidden;
}

.bg-blur {
	display: block;
	height: auto;
	left: 0%;
	max-height: none;
	min-height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -2;
}


	@media screen and (max-width:750px){ /*スマホサイズ*/

		#bg_blur1 /*キャッチエリアとヘッダーメニューを被らせない*/
		{
			margin: var(--header_height_smp) auto 0 auto;

		}

	}

.sub_catch /*サブページのキャッチ*/
{
	width:100%;
	margin: auto;
	background-color: #15496B;/* 消すとブラーが出ます */
	color: #fff;

}

.sub_catch h1{

	max-width: 1180px;
	margin: auto;
	font-size: 16px;
	/* font-family: 'Kozuka Mincho Pro',serif; */
	margin-block-start: 0;
	margin-block-end: 0;
	padding: 40px;
	box-sizing: border-box;
	font-weight: 200;
}


.catcharea /*ヒーローイメージ下のキャッチなどの配置エリア*/
{
	width:100%;
	max-width: 1180px;
	display: table;
	height: ;
	margin: -2.5% auto 0 auto;
	position: relative;
	z-index: 8888;
}



.catcharea_l /*キャッチエリア分割左*/
{
	width: 25%;
	display: table-cell;
	height: ;
	padding: 5%;
	box-sizing: border-box;
	background: rgba(31,153,62,0.9);
	color: #fff;
	border-width: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #1F993E;
}

.catcharea_r /*キャッチエリア分割右*/
{
	width: 75%;
	display: table-cell;
	height: ;
	padding: 3% 3% 4.5% 3%;
	box-sizing: border-box;
	background: rgba(31,153,62,0.7);
	color: #fff;
	border-width: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #1F993E;
}

.catcharea h1
{
	font-size: 1em;
	padding: 0;
	font-weight: 200;
}

	@media screen and (min-width:1180px){ /*PCサイズ*/

		.catcharea h1
		{
			font-size: 1em;
			padding: 4% 0 0 0;
			font-weight: 200;
		}

	}

	@media screen and (max-width:750px){ /*スマホサイズ*/

		.catcharea h1
		{
			font-size: 1em;
			padding: 3% 0 0 0;
			font-weight: 200;
		}

	}

.catcharea h2
{
	padding: 0;
	/*さわらび明朝*/
	font-family: "Sawarabi Mincho";
	font-weight: normal;
}

	@media screen and (max-width: 750px){ /*スマホサイズ*/
	.catcharea h2
	{
		font-size: 4vw;
	}
	}

/*-------------------------------------------------
  フェードとズーム
https://www.esz.co.jp/blog/185.html
-------------------------------------------------*/
.bg_hi{

	width: 100%;

	background:url(images/bg_works.png) center no-repeat;
	background-size: cover;
}

.main_imgBox {

	width: 100%;
	max-width: 1180px;
	height: calc(590vw / 1180 * 100);
	max-height: 590px;

    overflow: hidden;
	position: relative;
	
	margin:min(175px,175vw/1180*100) auto 0 auto;
 }

  .main_logo {

	width:calc(497vw / 2000 * 100);
	max-width: 497px;
	height:calc(91vw / 2000 * 100);
	max-height: 91px;

    z-index:11;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    height:auto;
}

  .main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 30s 0s infinite;
    animation: anime 30s 0s infinite; }

	/* スライドの枚数に応じて増減する */
    .main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
	  animation-delay: 12s; }
	  
	.main_img:nth-of-type(4) {
		-webkit-animation-delay: 18s;
		animation-delay: 18s; }

	.main_img:nth-of-type(5) {
		-webkit-animation-delay: 24s;
		animation-delay: 24s; }


@keyframes anime {
    0% {
        opacity: 0;
	}

	/* 3÷スライド全体の秒数×100 */
    10% {
        opacity: 1;
	}
	
	/* 6÷スライド全体の秒数×100 */
    20% {
        opacity: 1;
	}
	
	/* 9÷スライド全体の秒数×100 */
    30% {
        opacity: 0;
         transform: scale(1.0);
                    z-index:9;
    }
    100% { opacity: 0 }
}


@media screen and (max-width:750px){ 

	.main_imgBox {
		width: 100%;
		max-width: 2000px;
		height: calc(610vw / 750 * 100);

		margin-top:var(--header_height_smp);
	 }
	
	  .main_logo {
	
		width:calc(520vw / 750 * 100);
		max-width: 520px;
		height:calc(94vw / 750 * 100);
		max-height: 94px;
	
		z-index:11;
		position: absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);

	}

}