@charset "utf-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
/*@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
/*@import url('https://fonts.googleapis.com/css2?family=Murecho:wght@100..900&display=swap');

/*全体の設定
---------------------------------------------------------------------------*/
html,body {
font-size:100%;
}

body {
	margin: 0;padding:0;
	font-family: "Murecho", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	/*フォント種類（ゴシック）*/
	font-optical-sizing: auto;
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #555;		/*文字色*/
	line-height: 1;		/*行間*/
	overflow-x: hidden;
}

a {
}

/*マウスオン時*/
a:hover {
	text-decoration: none;	/*下線を消す*/
}


/*main
---------------------------------------------------------------------------*/
/*mainブロック*/
main { width:100%; background:#CCC;
}

#container { width:100%;}

#contents {

}
.main_test{
    background:#00F;
    max-width: 1200px;
    margin: 0 auto;       /* 中央寄せ */
    padding: 0 0px;      /* スマホ時の余白 */
    width:90vw;
}

/*フッター
---------------------------------------------------------------------------*/
footer {
}







/* ---------- ヘッダー＆ナビゲーション部分 ------------------------------- */

/*==ナビゲーション全体の設定*/

#header {
	border-top:#333 5px solid;
}

nav.nav_sp {
	border-top:#333 5px solid;
    position:fixed;
    top: 0;
	height:80px;
	width:100%;
	padding:5px 0 0 5px;
	margin:0;
    box-shadow: 0 3px 4px rgba(0,0,0,0.2);
	background:url(../images/sp_head_bg.png) no-repeat right top;
	background-color:#fff;
}

h1 { margin:0; padding:0;}

/*ナビゲーションを横並びに*/
nav.nav_sp ul {
  list-style: none;
  display: flex;
  justify-content: center;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background:#333;
  margin: 0;
}

/*2階層目以降は横並びにしない*/
nav.nav_sp ul ul {
  display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav.nav_sp ul li {
  position: relative;
}

/*ナビゲーションのリンク設定*/
nav.nav_sp ul li a {
  display: block;
  text-decoration: none;
  color: #999;
  padding: 20px 35px;
  transition: all .3s;
}

nav.nav_sp ul li li a {
  padding: 10px 35px;
}

nav.nav_sp ul li a:hover {
  color: #fff;
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav.nav_sp ul li.has-child::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 25px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(135deg);
}


/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav.nav_sp li.has-child ul {
  position: absolute;
  left: 0;
  top: 68px;
  z-index: 4;
  /*background: #28BFE7;*/
  background: #999;
  width: 180px;
  visibility: hidden;
  opacity: 0;
  transition: all .3s;
  margin: 0;
}

/*hoverしたら表示*/
nav.nav_sp li.has-child:hover>ul,
nav.nav_sp li.has-child ul li:hover>ul,
nav.nav_sp li.has-child:active>ul,
nav.nav_sp li.has-child ul li:active>ul {
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav.nav_sp li.has-child ul li a {
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
}

nav.nav_sp li.has-child ul li:last-child a {
  border-bottom: none;
}

nav.nav_sp li.has-child ul li a:hover,
nav.nav_sp li.has-child ul li a:active {
  background:#DFDFDF;
}

/* スマホ　指定値以下の時適応 */

  ul#g-navi {
    display: none;
    width: 100%;
  }

  .openbtn1 span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    left: calc(50% + -13px);
    height: 3px;
    border-radius: 2px;
    background-color: #fff;
    width: 40px;
  }

  /* バーガーメニューボタン */
  .openbtn1 span:nth-of-type(1) {
    top: calc(31% - 1px)
  }

  .openbtn1 span:nth-of-type(2) {
    top: calc(55% - 1px)
  }

  .openbtn1 span:nth-of-type(3) {
    top: calc(83% - 1px)
  }

  .openbtn1.active span:nth-of-type(1) {
    top: 15px;
    left: 9px;
    transform: translateY(6px) rotate(-45deg);
    width: 100%
  }

  .openbtn1.active span:nth-of-type(2) {
    opacity: 0
  }

  .openbtn1.active span:nth-of-type(3) {
    top: 27px;
    left: 9px;
    transform: translateY(-6px) rotate(45deg);
    width: 100%
  }

  .openbtn1 {
    position: fixed;
    z-index: 9999;
    top: 18px;
    right: 20px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    /*background: #fecb6e;
    border-radius: 0 0 0 7px*/
  }

  header#header>a {
    display: none
  }

  nav {
    padding: 0;
  }

  nav.nav_sp li.has-child ul,
  nav.nav_sp li.has-child ul ul {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    visibility: visible;
    /*JSで制御するため一旦表示*/
    opacity: 1;
    /*JSで制御するため一旦表示*/
    display: none;
    /*JSのslidetoggleで表示させるため非表示に*/
    transition: none;
    /*JSで制御するためCSSのアニメーションを切る*/
  }

  nav.nav_sp ul li a {
    border-bottom: 1px solid #ccc;
  }

  /*矢印の位置と向き*/

  nav.nav_sp ul li.has-child::before {
    left: 20px;
  }

  nav.nav_sp ul ul li.has-child::before {
    transform: rotate(135deg);
    left: 20px;
  }

  nav.nav_sp ul li.has-child.active::before {
    transform: rotate(-45deg);
  }

.main_img {
    border-top:none;
	background:url(../images/bg_main.jpg) no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 800px;
	}

nav.nav_pc {display:none;}


/*=================  PC用　画面幅768px以上の追加指定   ===================*/

@media screen and (min-width:1024px) {
	html, body {
		font-size:110%;
		line-height: 1;		/*行間*/
	}

    nav.nav_sp{
		display:none;
	}

    .openbtn1{
		display:none;
	}

    #header {
    	border-top:#E50012 solid 8px;
    }

    /* PC用メニュー */
	nav.nav_pc{
		display:block;
		width: 100%;
		position: sticky;
		top: 0;
		height:80px;
		background:#fff;
		/*opacity: 0.8;*/
		box-shadow: 0 3px 4px rgba(0,0,0,0.2);
	}

	.nav-inner {
	  max-width: 1200px;
	  margin: 0 auto;
	  display: flex;
	  justify-content: space-between; /* ←左右に広げる */
	  /*justify-content: center;*/
	  position: relative;
	  height:80px;
	
	}

	.nav-left,
	.nav-right {
	  width:40%;
	  display: flex;
	  justify-content: space-around; /* ←左右に広げる */
	  list-style: none;
	  padding:0;
	  margin:0;
	  /*background:#300;
	  padding:3px 0;
	  margin:10px 0;*/
	}

	.nav-left li.li_pc,
	.nav-right li.li_pc {
	  line-height:1.5;
	  color: #555;
	  width:50%;
	  padding:0px 0px 0 0;
	  background:url(../images/bg_menu.jpg) no-repeat left center;
	  text-align:center;
	  margin:0;
	  height:80px;
	}

	.nav-left li.li_pc:last-child,
	.nav-right li.li_pc:last-child {
	 /*background:url(../images/bg_menu.jpg) no-repeat right center;*/
	  background-image: url('../images/bg_menu.jpg'), url('../images/bg_menu.jpg'); /* 画像を2つ指定 */
	  background-position: left center, right center; /* 左と右に配置 */
	  background-repeat: no-repeat, no-repeat; /* 繰り返しなし */
	}

	.nav-left li.li_pc span,
	.nav-right li.li_pc span{
		display:block;
	}
	.nav-left li.li_pc a,
	.nav-right li.li_pc a {
		text-decoration:none;
		display:block;
		height:80px;
		padding:10px 0;
		color: #555;
	}
	
	.nav-left li.li_pc a:hover,
	.nav-right li.li_pc a:hover {
		border-bottom:#E50012 4px solid;
		opacity:0.5;
	
	}
	
	/* ===== ロゴ（ここが重要） ===== */
	.logo {
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%);
	  top: 0; /* ←上の余白を完全になくす */
	}
	
	/* ロゴ画像 */
	.logo img {
	  display: block;
	  width: 100pv; /* サイズ調整 */
	  /*height: auto;*/
	  margin:5px 0 0 0;
	}


}

/* ==  pc用　ドロップダウン == */
@media screen and (min-width:1024px) {

	/*2階層目以降は横並びにしない*/
	nav.nav_pc ul.nav-left ul {
	  display:block;
	}
	
	/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
	nav.nav_pc ul.nav-left li {
	  position: relative;
	  /* background:none; */
	}
	
	/*下の階層を持っているulの指定*/
	nav.nav_pc ul.nav-left li.has-child ul{
	  position: absolute;
	  left: 0;
	  top: 80px;
	  z-index: 4;
	  background:#E50012;
	  width: 240px;
	  visibility: hidden;
	  opacity: 0;
	  transition: all .5s;
	  margin: 0;
	  padding:0;
	
	}
	
	/*hoverしたら表示*/
	nav.nav_pc ul.nav-left li.has-child:hover>ul,
	nav.nav_pc ul.nav-left li.has-child ul li:hover>ul,
	nav.nav_pc ul.nav-left li.has-child:active>ul,
	nav.nav_pc ul.nav-left li.has-child ul li:active>ul {
	  visibility: visible;
	  opacity: 1;
	  display:block;
	}
	
	/*ナビゲーションaタグの形状*/
	nav.nav_pc ul.nav-left li.has-child ul li a {
	  color: #fff;
	  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
	  height:50px;
	
	}
	
	nav.nav_pc ul.nav-left li.has-child ul li:last-child a {
	  border-bottom: none;
	}
	
	nav.nav_pc ul.nav-left li.has-child ul li a:hover,
	nav.nav_pc ul.nav-left li.has-child ul li a:active {
		opacity:0.5
	}

}

/* ---------------------------------------- メインコンテンツ ------------------------------------------------- */