/*----------------------------------------------------------------------------*/
/*	Header MENU 共通構造 01 CSS						 	     */
/*----------------------------------------------------------------------------*/
@charset "utf-8";
/* CSS Document */

	header {
	}

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

		header {
			z-index:999999;
			background-color:rgba( 255,255,255,0.98 ); 	/*  White  透過98% ◆ */
		}
		.SP_header {
			display:block;
		}
		.PC_header {
			display:none;
		}
	}

	header {
		position: fixed;
		width: 100%;
		height: 60px;	/* SP height★ */
		padding:0;
	}
	body.menuOpen header{
		position: fixed;
		top:0;
		width: 100%;
	}
	header .headerTop{
		width :100%;
		position:relative;
/*		padding:20px;	*/
		padding:inherit;
	}
	header .siteTitle {			/*  LOGO */
		margin-top:8px;
		margin-left:20px;
		width : 189px;
		height: 46px;
		display	: block;
		text-indent: -99999px;	/* テキスト非表示 */
		border	: 0px;
	}
	header .siteTitle a{
		overflow: hidden;	 /* 内容を非表示にする。*/
		width : 189px;
		height: 0 !important;
		height /**/:46px;
		padding-top: 46px;
		display	: block;
		background	: url("../images/com/logo02.svg") no-repeat;
		background-size:290px 71px;
		background-size:174px 43px;		/*  60% */
		background-size:189px 46px;		/*  65% */
		background-position: center center;
	}
	header .siteTitle a:hover{
		display	: block;
		background	: url("../images/com/logo02.svg") no-repeat;
		background-size:174px 43px;		/*  60% */
		background-size:189px 46px;		/*  65% */
		background-position: center center;
	}
	.navDrawrSP {
		background-color:rgba( 38,38,38,0.6 ); 		/*  DrarkGray  透過60% */
		position: fixed;
		width: 100%;		/* ◆ */
		top: 60px;
		bottom: 0;
		right: -100%;		/* ◆ */
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	.navDrawrSP .spmarea {
		margin: 0  auto 0 auto;
		width:100%;
		padding-top:20px;
		padding-bottom:10px;
		background-color:rgba( 255,255,255,1.0 ); 	/*  White  透過98% ◆ */
	}
	.navDrawrSP a {
		display: block;
		font-size: 14px;
		font-weight:normal;
		color: #222;
		text-decoration: none;
		background: #1abc9c;
		background-color:rgba( 38,38,38,0.6 ); 		/*  DrarkGray  透過60% */
		background-color:rgba( 255,255,255,1.0 ); 	/*  White  透過98% ◆ */
		padding: 10px;
	}
	.navDrawrSP>ul:after {
		content: ".";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
	.navDrawrSP>ul>li {
		float: left;
		width: 25%;
		position: relative;
	}
	.navDrawrSP .sub li:last-child a {
		border: none;
	}
	.navDrawrSP>ul>li>a {
		text-align: center;
	}
	.navDrawrSP>ul>li>a:hover {
		background: #1FAF93;
		background-color:rgba( 178,178,178,0.80 ); 	/*  LightGray  透過90% */
	}
	.navDrawrSP .spmenu02 {
	}
	.navDrawrSP .spmenu02 a {
		background-color:rgba( 255,255,255,1.00 ); 	/*  WHITE  透過100% */
		color:#444;
/*		border-bottom: 1px solid #EEE;	*/
		padding-bottom:17px;
	}
	.navDrawrSP .spmenu02 a .fa{
		color:#A4946C; /* Gold01 */
	}
	.navDrawrSP .spmenu02 a::after {
		position: absolute;
		top: 60%;
		margin-top: -10px;
		right: 15px;
		font-weight:normal;
		font-size:8px;
		font-family: FontAwesome;
		font-display: swap;
		content: "\f054";		/* ◇ FontAwesome → ◇  */
		color:#AAA;
	}
	.overlay {
		display: none;
		background-color:rgba( 38,38,38,0.6 ); 	/*  DrarkGray  透過60% */
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.navDrawrBtnSP {
/*		text-align: right;*/
	}
	.navDrawrBtnSP  {
		display:block;
		position: fixed;
		top: 5px;
		right:3%;
		display: block;
		width: 50px;
		height: 50px;
/*		background-color:rgba( 245,245,245,0.80 ); 	*/	/*  baseGray  透過80% */
		background-color:#48B6BC;	/* misho-black */
		cursor: pointer;
		border-radius: 50%;
		z-index:99999999;
	}
	.navDrawrBtnSP .line {
		position: absolute;
		top: 0;
		left: 13px;
		display: block;
		text-align:center;
		width: 23px; 			/* 横幅 */
		height: 2px;				/* 1本辺りの高さ */
		background: #777;		/* 線の色 */
		background: #FFF;		/* 線の色 */
			/* 適用するプロパティ、変化する時間、変化する速度 */
			-webkit-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
	}
	/* 3本線の各線の位置を指定 ---------------------- */
	.navDrawrBtnSP .line_01 { top: 15px; }
	.navDrawrBtnSP .line_02 { top: 23px; }
	.navDrawrBtnSP .line_03 { top: 31px; }

	/* 最上部の線のスタイル ---------------------- */
	.navDrawrBtnSP.is-active .line_01 {
		top: 18px; /* 上から2番目の線の位置に変更 */
		top: 23px; /* 上から2番目の線の位置に変更 */

		/* 線を45度回転 */
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	/* 上から2番目の線のスタイル ---------------------- */
	.navDrawrBtnSP.is-active .line_02 {
		 opacity: 0; /* 不透明度を下げて線を消す */
	}

	/* 最下部の線のスタイル ---------------------- */
	.navDrawrBtnSP.is-active .line_03 {
		 top: 18px; /* 上から2番目の線の位置に変更 */
		 top: 23px; /* 上から2番目の線の位置に変更 */

	  /* 線を135度回転 */
	  	-webkit-transform: rotate(135deg);
	  	transform: rotate(135deg);
	}

	/* 最上部の線のスタイル ---------------------- */
	.navDrawrBtnSP.is-deactive .line_01 {
		top: 10px; /* 上から2番目の線の位置に変更 */
		/* 線を45度回転 */
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
	}

	/* 上から2番目の線のスタイル ---------------------- */
	.navDrawrBtnSP.is-deactive .line_02 {
		top: 18px;
		 opacity: 1; /* 線の不透明度元に戻す */
	}

	/* 最下部の線のスタイル ---------------------- */
	.navDrawrBtnSP.is-deactive .line_03 {
		 top: 26px; /* 上から2番目の線の位置に変更 */

	  /* 線を135度回転 */
		  	-webkit-transform: rotate(-135deg);
		  	transform: rotate(-135deg);
	}
	.navDrawrBtnSP p {
		position: absolute;
		bottom: 5px;
		left: 7px;
		display: block;
		text-align:center;
		font-size:10px;
		color:#FFF;
		letter-spacing: 0.12em;
	}

	/* ◉ SP navigation -------------------------------------------------------*/

	.navDrawrSP a {
		position: relative;
		font-size: 14px;
		padding: 12px;
		padding: 15px;	/* ★★ */
		padding-left: 35px;
		background-color:rgba( 255,255,255,1.00 ); 	/*  White  透過98% */
	}
	.navDrawrSP a::after {
		position: absolute;
		top: 60%;
		margin-top: -9px;
		right: 15px;
		font-weight:normal;
		font-size:8px;
		font-family: FontAwesome;
		font-display: swap;
		content: "\f054";		/* ◇ FontAwesome → ◇  */
	}
	.navDrawrSP .downmenu dt a::after{
		font-family: FontAwesome;
		font-display: swap;
		content: none;
	}
	.navDrawrSP a .open::after {
		position: absolute;
		top: 60%;
		margin-top: -9px;
		right: 15px;
		font-weight:normal;
		font-size:8px;
		font-family: FontAwesome;
		font-display: swap;
		content: "\f077";	/* ◇ FontAwesome ↓ ◇ */
	}
	.navDrawrSP a .spsbt {
		position: absolute;
		top: 60%;
		margin-top: -11px;
		right: 30px;
		font-size: 12px;
		color:#444;
		color:#A4946C; /* Gold01 */
		text-align:right;
		padding-right:20px;
	}

	.navDrawrSP>dl>dl {
		display:block;
	}
	.navDrawrSP>dl>dt {
		display:block;
		font-size: 12px;
	}
	.navDrawrSP>dl>dd {
		display:block;
	}
	.navDrawrSP>dl>dt>a {
		text-align: left;
		border-right: none;
		border-bottom: 1px solid #FFF;
	}
	.navDrawrSP dt#spmenuex a {
		font-size: 12px;
	}
	.navDrawrSP>dl>dd>a {
		text-align: left;
		border-right: none;
		border-bottom: 1px solid #FFF;
	}
	.navDrawrSP>ul>li {
		float: none;
		width: auto;
	}
	.navDrawrSP>ul>li>a {
		text-align: left;
		border-right: none;
		border-bottom: 1px solid #FFF;
	}

	.navDrawrSP .downmenu dd {
		float: none;
		width: auto;
		position: relative;
	}
	.navDrawrSP .downmenu ul.sub {
		position: static;
		display: block!important;
	}
	.navDrawrSP .sub {
		position: absolute;
		left: 0;
		right: 0;
		z-index: 9999;
	}
	.navDrawrSP .sub a {
		background-color:rgba( 51,51,51,0.7 ); 		/*  Gray  透過85% */
/*		border-bottom: 1px solid #444;	*/
		padding: 15px 10px 15px 20px;		/* ★★ */
		font-family: FontAwesome;
		font-display: swap;
		content: "\f054";		/* ◇ FontAwesome → ◇  */
		font-size: 12px;
		color:#fff;
	}
	.navDrawrSP .sub a:hover {
		font-family: FontAwesome;
		font-display: swap;
		content: "\f054";		/* ◇ FontAwesome → ◇  */
		background: #179079;
		background-color:rgba( 51,51,51,0.50 ); 		/*  Gray  透過50% */
		background-color:rgba( 178,178,178,0.5 ); 	/*  LightGray  透過90% */
	}
	.navDrawrSP .sub a .spsmnut {
		padding-left:20px;
		color:#fff;
	}
	.navDrawrSP dl.downmenu dt {
		display:block;
		position: relative;
	}
	.navDrawrSP dl.downmenu dt a::after{
		position: absolute;
		top: 0;
		margin-top: 15px;
		right: 15px;
		font-weight:normal;
		font-size:8px;
		font-family: FontAwesome;
		font-display: swap;
		content: "\f078";	/* ◇ FontAwesome  ↓  ◇ */
		color:#444;
	}
	.navDrawrSP dl.downmenu dt a.open::after{
		position: absolute;
		top: 0;
		margin-top: 15px;
		right: 15px;
		font-weight:normal;
		font-size:8px;
		font-family: FontAwesome;
		font-display: swap;
		content: "\f077";	/* ◇ FontAwesome  ↑ ◇ */
		color:#444;
	}
	.navDrawrSPdl.downmenu dd > ul li {
		width: auto;
		height: auto;
	}
	.navDrawrSP dl.downmenu dt a  .fa {
		color:#A4946C; /* Gold01 */
	}
	.navDrawrSP #sc {
		color: #A4966A;		/* Gold01 */
		color: #E60021;		/* AF-red */
	}

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

		header .headerTop p {
			position:absolute;
			top:8px;
			left:38%;
			font-size:11px;
		}
		.navDrawrSP a {
			padding-left: 15px;
		}
	}

	@media only screen and (min-width:992px) {	/*■ PC Layout  ■ */

		header {
			position: fixed;
			position: absolute;	/* ★0917 */
			width: 100%;
			height: auto;
			padding:0;
			background-color: transparent;
			z-index:999999;
				-moz-box-sizing: border-box;
				-o-box-sizing: border-box;
				-ms-box-sizing: border-box;
				box-sizing: border-box;
		}
		.SP_header {
			display:none;
		}
		.PC_header {
			display:block;
		}

	/* ◉ PC navigation 01 --------------------------------------------------*/

		.g-nav {
			margin: 0 auto 0 auto;
			width:100%;
			height:100px;		/* ★PC height */
			padding:0;
			background-color:rgba( 255,255,255,0.0 ); 	/*  White  透過95% ◆*/
			position:relative;
			z-index:99;
		}
		.g-nav  #h1 {			/* LOGO */
			display	: block;
			position: absolute;
			top: 20px;
			left:2%;
			width : 291px;
			height: 70px;
			display	: block;
			text-indent: -99999px;	/* テキスト非表示 */
			border	: 0px;
		}
		.g-nav #h1 a{
			overflow: hidden;	 /* 内容を非表示にする。*/
			width : 291px;
			height: 0 !important;
			height /**/:70px;
			padding-top: 70px;
			display	: block;
			background	: url("../images/com/logo01.svg") no-repeat;
			background-size:291px 70px;
			background-position: center top 0;
		}
		.g-nav  #h1 a:hover{
			display	: block;
			background	: url("../images/com/logo01.svg") no-repeat;
			background-size:291px 70px;
			background-position: center top 0;
		}

		nav.g-nav ul.inner {
			margin: 25px auto 0 auto;
			width: 100%;
			width: 85%;
			height: 100px;
			padding-left:18%;
			text-decoration:none;
		}
		nav.g-nav ul.inner li{
			margin: 0 auto 0 auto;
			width:15%;	/* menu width ◆ */
			text-align:center;
		}
		nav.g-nav ul.inner li:first-child {
			width:14%;
		}
		nav.g-nav ul.inner li:nth-child(3) {
			width:16%;
		}
		/*◆ PC menu 共通 -----------------------*/

		nav.pc ul.inner>li {
			float:left;
			font-size:16px;
			font-family: "Noto Sans JP", serif;
			font-optical-sizing: auto;
			font-weight: 500;
			font-style: normal;
			font-display: swap;
			padding-top:0px;
		}
		nav.pc ul.inner>li a {
			line-height:2.5em;
		}
		nav.pc ul.inner>li a:hover {
			color: #AAA;
		}
							/* ◇ hover:アンダーライン　→　中心から広がるアニメーション */
		nav.pc ul.inner  {
			font-size: 0;
			box-sizing: border-box;
			list-style: none;
			text-align: center;
		}
		nav.pc ul.inner>li {
			margin: 0 0;
			display: inline-block;
			padding-bottom:30px;
		}
		nav.pc ul.inner>li:hover {
			background-color:rgba( F5,F5,F5,0.7 ); 	/* bf-Base02   透過70% */
		}
		nav.pc ul.inner>li .subt {
			color: #A4946C;		/* Gold01 */
		}
		nav.pc ul.inner>li:hover .subt {
			color: #C6C6C6;
		}
		nav.g-nav ul.inner>li>a {
			text-decoration: none;
			color:#555;	/*◆ menu text color */
			font-family: "NotoSansCJKjp-Medium";
			font-display: swap;
			display: block;
			position: relative;
/*			text-shadow: 1px 1px 1px #333333;	*/
		}
		nav.g-nav ul.inner>li>a:hover {
			color: #BDC3C7;		/* Siver */
		}
		nav.g-nav ul.inner>li>a:before {		/* ◆menu underline */
			content: '';
			width: 0;
			left: 50%;
			bottom: 0;
			transition: all 0.3s ease;
			border-bottom: 2px solid #3e3a39;	/* misho-logo-black */
			position: absolute;
			display: block;
		}
		nav.g-nav ul.inner>li>a:hover:before {
			width: 50%;
			border-bottom: 2px solid #3e3a39;	/* misho-logo-black */
		}
		nav.g-nav ul.inner>li>a:after {
			content: '';
			width: 0;
			right: 50%;
			bottom: 0;
			transition: all 0.3s ease;
			border-bottom: 2px solid #3e3a39;	/* misho-logo-black */
			position: absolute;
			display: block;
		}
		nav.g-nav ul.inner>li>a:hover:after {
			width: 50%;
			border-bottom: 2px solid #3e3a39;	/* misho-logo-black */
		}
		nav.g-nav ul.inner>li p {
			padding-top:3px;
			padding-bottom:5px;
			margin-bottom:0px;
			color:#333;
		}

		/* ◆sub mega menu ----------------------------- */

		.g-nav ul li .mega-menu {
			visibility: hidden;		/* ◆ 不可視 */
			position: absolute;
			top: 70px;			/* ◆ 上～下 */
			left: 0;
			width: 100%;
			text-align: left;
			color: #FFF;
			font-size: 0.9em;
			padding: 5%;
			padding-top:2%;
			padding-left:9%;
			padding-bottom:120px;
			background-color:rgba( 255,255,255,0.98 ); 		/*  White  透過98% */
			background:linear-gradient(180deg,#F5F5F5 0%,#F5F5F5 100px,white 100px,white 97%,#F5F5F5 97%,#F5F5F5 100%);
			opacity: 0;		/* ◆ 透過 100% */
				-webkit-transition: 1.5s;
				-moz-transition: 1.5s;
				-ms-transition: 1.5s;
				-o-transition: 1.5s;
				transition: 1.5s;
		}
		.g-nav ul li .mega-menu .mm-title {
			margin: 0 auto 50px 0;
			width: 95%;
			font-size:20px;
			text-align:left;
			font-family: "NotoSansCJKjp-Bold";
			font-display: swap;
			color: #00448D;		/* MCI-deep blue */
			color: #444;
			padding-left:30px;
			padding-bottom:15px;
			border-left: 5px solid #3f6d6c;		/* misho-green01 */
			border-bottom: 1px solid #BDC3C7;		 /* Siver */
		}
		.g-nav ul li .mega-menu .smsym {
			position: absolute;
			bottom:30px;
			left:82%;
			left:65%;
		}
		.g-nav ul li:hover .mega-menu,
		.g-nav ul li:active .mega-menu {
			visibility: visible;		/* ◆ 可視 */
			opacity: 1;			/* ◆ 透過 0 */
			-webkit-transition: 0.7s;
			-moz-transition: 0.7s;
			-ms-transition: 0.7s;
			-o-transition: 0.7s;
			transition: 0.7s;
			top: 100px;			/* ◆ 上～下 、左～右 */
			left: 0;
		}
		.g-nav ul li:hover .mega-menu li a,
		.g-nav ul li:active .mega-menu li a {
			border-bottom: none;
			font-weight: normal;
		}


		/* ● sub menu contents  --------------------- */

		.g-nav ul li:hover .mega-menu .second-level-nav li,
		.g-nav ul li:active .mega-menu .second-level-nav li {
			padding: 0;
		}

		.g-nav ul li .mega-menu .second-level-nav {
			width: 25%;
			float: left;	/* ◆mega submenu 左 */
			display: block;
			background-color:#AAA;
		}
		.g-nav ul li .mega-menu .second-level-nav li {
			width: 100%;
			text-align: left;
			border-bottom: 1px dotted #fff;
		}
		.g-nav ul li .mega-menu .second-level-nav li a {
			color: #FFF;
			padding: 20px;
			padding-left:45px;
			background	: url("../images/icon/btn-arrow03.png") no-repeat;
			background-size:11px 13px;
			background-size:9px 10px;	/* 80% */
			background-position: left 30px top 26px ; 
		}

		.g-nav ul li .mega-menu .second-level-nav li a:hover,
		.g-nav ul li .mega-menu .second-level-nav li a:active {
			text-align: left;
			padding-left:50px;
			color: #F29600;		/* HD-orange03 */
/*			text-decoration: underline;	*/
		}
		/* ---	640以上 end --- */

		/* ◇megamenu contents  -------- */
		.g-nav ul li .mega-menu .smcont {
			width: 70%;
			float: right;		/* ◆mega menu contents 右 */
			padding-left:5%;
			display:flex;
			flex-wrap:wrap;					/* 左から右、折り返す */
			justify-content: space-around;	/* 両端のアイテムも含めて、均等な間隔を空けて配置 */
			justify-content: space-between;	/* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
			justify-content: flex-end;
		}
		.g-nav ul li .mega-menu .smcont li {
			position: relative;
			width: 352px;
			height: 69px;
			height: 100px;
			overflow: hidden;
			cursor: pointer;
		}
		.g-nav ul li .mega-menu .smcont li img {
			position: absolute;
			top: 35%;
			left: 50%;
			right: 0
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			width: 352px;
			height: 69px;
			display: block;
			-webkit-transition: .4s ease-in-out;
			transition: .4s ease-in-out;
		}
		.g-nav ul li .mega-menu .smcont li:hover img:nth-of-type(2) {
			opacity: 0;
		}
		.g-nav ul li .mega-menu .smcont li img a {
			display:block;
			width: 352px;
			height: 69px;
		}

		/* ◇megamenu contents  (SERVICE)-------- */

		.g-nav ul li .mega-menu .smul {
  			margin: 0 auto 0 -2%;
			width: 100%;
			display:flex;
			flex-wrap:wrap;					/* 左から右、折り返す */
			justify-content: space-between;	/* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
			justify-content: flex-end;
		}
		.g-nav ul li .mega-menu .smul li {
			margin: 0 auto 0 auto;
			width:16%;
		}
		.g-nav ul li .mega-menu .smul li  .smitemt {
			margin: 0 auto 20px auto;
			width:99%;
		}
		.g-nav ul li .mega-menu .smul li  .smitemt a {
			display:block;
			font-size:13px;
			text-align:center;
			font-family: "NotoSansCJKjp-Medium";
			font-display: swap;
			color:#fff;
			padding-top:5px;
			padding-bottom:5px;
		}
		.g-nav ul li .mega-menu .smul li  .smitemt a:hover {
		}
		.g-nav ul li .mega-menu .smul li img {
			margin: 0 auto 20px -7.5%;
			width: 115%;
			display: block;
			-webkit-transition: .4s ease-in-out;
			transition: .4s ease-in-out;
		}
		.g-nav ul li .mega-menu .smul li:hover img:nth-of-type(2) {
			opacity: 0;
		}
		.g-nav ul li .mega-menu .smul li img a {
			display:block;
/*			width: 352px;
			height: 69px;*/
			width: 115%;
		}

		/* ◇megamenu contents  (other)-------- */

		.pc ul li .mega-menu .smblk01 {
			margin: 0 auto 0 -2%;
			width: 100%;
			margin: 0 auto 0 5%;
			width: 90%;
			display:flex;
			flex-wrap:wrap;				/* 左から右、折り返す */
/*			justify-content: space-between;	*/	/* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
			justify-content: flex-start;		/* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
		}
		.pc ul li .mega-menu .smblk01 li {
			margin: 30px 20px 30px 0;
			width:15%;
			margin: 20px 0 20px 20px;
			width:17%;
	 		animation : extend-x 4s;
			animation : extend-x 4s linear 0.0s infinite normal none running;
			animation : extend-x 4s linear 0.0s infinite normal none;
			animation : extend-x 1s linear 0.0s ;
		}
		.pc ul li .mega-menu li:nth-child(9) {
		}
		.pc ul li .mega-menu li:nth-child(10) {
		}
		.pc ul li .mega-menu li:nth-child(11) {
			width:19%;
		}
		.pc ul li .mega-menu li .smitemt {
			margin: 0 auto 0 auto;
			width:100%;
		}
		.pc ul li .mega-menu li .smitemt a {
			display:block;
			font-size:14px;
			text-align:center;
			font-family: "NotoSansCJKjp-Medium";
			font-display: swap;
			color:#fff;
			padding:5px 0 5px 0;
			background-color:#3f6d6c;		/* misho-green01 */
			background-image:url("../images/icon/logo-icon01.png") ;
			background-size:26px 29px;
			background-position: left 5% top 8px;
			background-repeat:no-repeat;
		}
		.pc ul li .mega-menu li .smitemt a:hover {
			background-color:#AAA;
		}
		.pc ul li .mega-menu li img {
			margin: 0 auto 0 auto;
			width: 100%;
			display: block;
			-webkit-transition: .4s ease-in-out;
			transition: .2s ease-in-out;
		}
		.pc ul li .mega-menu li img a {
			display:block;
			width: 100%;
		}

		.pc ul li .mega-menu .smblk02 {
			margin: 0 auto 0 -2%;
			margin: 0 auto 0 auto;
			width: 100%;
			display:flex;
			flex-wrap:wrap;					/* 左から右、折り返す */
			justify-content: space-between;	/* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
		}
		.pc ul li .mega-menu .smblk02 dl {
			display:block;
			margin: 0 auto 0 auto;
			width:15%;
			background-color:#fff;
			padding:0 0 15px 0;
			border: 1px solid #3f6d6c;		/* misho-green01 */
			animation : extend-x 1s linear 0.0s ;
		}
		.pc ul li .mega-menu .smblk02 dt {
			display:block;
			margin: 0 auto 10px auto;
			width:100%;
			font-size:14px;
			text-align:center;
			font-family: "NotoSansCJKjp-Medium";
			font-display: swap;
			color:#fff;
			padding:15px 0 15px 0;
			background-color:#3f6d6c;		/* misho-green01 */
			background-image:url("../images/icon/tricon01.svg") ;
			background-size:23px 31px;
			background-position:	left 7% center;
			background-repeat:no-repeat;
		}
		.pc ul li .mega-menu .smblk02 dl:first-child dt{
			background-image:url("../images/icon/tricon12.svg") ;
			background-size:26px 27px;
			background-position:	left 7% top 8px;
			background-repeat:no-repeat;
		}
		.pc ul li .mega-menu .smblk02 dl:nth-child(2) dt {
			background-image:url("../images/icon/tricon13.svg") ;
			background-size:27px 27px;
			background-position: left 5% top 8px;
			background-repeat:no-repeat;
		}
		.pc ul li .mega-menu .smblk02 dl:nth-child(3) dt {
			background-image:url("../images/icon/tricon14.svg") ;
			background-size:31px 27px;
			background-position: left 5% top 8px;
			background-repeat:no-repeat;
		}
		.pc ul li .mega-menu .smblk02 dl:nth-child(4) dt {
			background-image:url("../images/icon/tricon15.svg") ;
			background-size:32px 30px;
			background-position: left 5% top 7px;
			background-repeat:no-repeat;
		}
		.pc ul li .mega-menu .smblk02 dl:nth-child(5) dt {
			background-image:url("../images/icon/tricon16.svg") ;
			background-size:31px 27px;
			background-position: left 5% top 8px;
			background-repeat:no-repeat;
		}
		.pc ul li .mega-menu .smblk02 dl:nth-child(6) dt {
			background-image:url("../images/icon/tricon17.svg") ;
			background-size:29px 30px;
			background-position: left 5% top 7px;
			background-repeat:no-repeat;
		}

		.pc ul li .mega-menu .smblk02 dd {
			display:block;
			margin: 0 auto 0 auto;
			width:80%;
		}
		.pc ul li .mega-menu .smblk02 dd a {
			font-size:14px;
			font-family: "NotoSansCJKjp-Regular";
			font-display: swap;
			color:#333;
			padding:10px 0 10px 30px;
			background-image:url("../images/icon/logo-icon01.png");
			background-size:26px 28px;
			background-size:13px 14px;	/* 50% */
			background-position:	left 0 center;
			background-repeat:no-repeat;
		}
		.pc ul li .mega-menu .smblk02 dd a:hover {
			font-weight:bold;
			color: #3f6d6c;		/* misho-green01 */
			padding-left:40px;
		}

		@keyframes extend-x {
			0%{
				transform: : translate(-60px, 0);
				opacity: 0;
			}
			 100%{
				transform: : translate(0, 0);
				opacity: 1;
			 }
		}
		.pc ul li .mega-menu .smblk03 {
			margin: 0 auto 0 auto;
			width: 100%;
			display:flex;
			flex-wrap:wrap;					/* 左から右、折り返す */
			justify-content: space-between;	/* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
		}
		.pc ul li .mega-menu .smblk03 li .smitemt a {
			background-image:none;
		}
		.pc ul li .mega-menu .smblk04 {
			margin: 0 auto 0 auto;
			width: 100%;
			display:flex;
			flex-wrap:wrap;					/* 左から右、折り返す */
			justify-content:flex-start;
		}
		.pc ul li .mega-menu .smblk04 li {
			margin: 30px 20px 30px 0;
			width:25%;
		}
		.pc ul li .mega-menu .smblk04 li:first-child {
			width:30%;
		}
		.pc ul li .mega-menu .smblk04 li .smitemt a {
			background-image:none;
		}

	/* ◉ PC navigation 02 -------------------------------------------------*/

		.g-nav02 {
			display:none;
			margin: 0 auto 0 auto;
			width:100%;
			height:70px;		/* ★PC 02 height */
			padding:0;
			z-index: 99;
			background-color:rgba( 255,255,255,0.98 ); 	/*  White  透過98% */
				box-shadow: 1px 1px 5px 1px #aaa;
				-webkit-box-shadow: 1px 1px 5px 1px #aaa;
				-moz-box-shadow: 1px 1px 5px 1px #aaa;
		}
		.g-nav02 ul.inner {
			margin: 15px auto 0 auto;
			width: 100%;
			padding-left:25%;
			position:relative;
		}
		nav.g-nav02 ul.inner li{
			margin: 0 auto 0 auto;
			width:15%;	/* menu width ◆ */
			text-align:center;
		}
		nav.g-nav02 ul.inner>li:first-child {
			width:12%;
		}
		nav.g-nav02 ul.inner>li:nth-child(3) {
		}
		.g-nav02 #gnh1 {			/*  LOGO */
			position: absolute;
			top: 5px;
			left:4%;
			width :247px;
			height: 60px;
			display	: block;
			text-indent: -99999px;	/* テキスト非表示 */
			border	: 0px;
			z-index:11;
		}
		.g-nav02  #gnh1 a{
			overflow: hidden;	 /* 内容を非表示にする。*/
			width : 247px;
			height: 0 !important;
			height /**/:60px;
			padding-top: 60px;
			display	: block;
			background	: url("../images/com/logo02.svg") no-repeat;
			background-size:290px 71px;
			background-size:247px 60px;	/* 85% */
			background-position: center top 0;
		}
		.g-nav02  #gnh1 a:hover{
			display	: block;
			background	: url("../images/com/logo02.svg") no-repeat;
			background-size:247px 60px;	/* 85% */
			background-position: center top 0;
		}
		nav.g-nav02 ul.inner>li>a {
			text-decoration: none;
			color:#333;	/*◆ menu text color */
			font-family: "NotoSansCJKjp-Medium";
			font-display: swap;
			display: block;
			position: relative;
		}
		nav.g-nav02 ul.inner>li>a:hover {
			color: F4F4F4;
		}
		nav.g-nav02 ul.inner>li>a:before {			/* ◆menu underline */
			content: '';
			width: 0;
			left: 50%;
			bottom: 0;
			transition: all 0.3s ease;
			border-bottom: 2px solid #3f6d6c;		/* misho-green01 */
			position: absolute;
			display: block;
		}
		nav.g-nav02 ul.inner>li>a:hover:before {
			width: 50%;
			border-bottom: 2px solid #3f6d6c;		/* misho-green01 */
		}
		nav.g-nav02 ul.inner>li>a:after {
			content: '';
			width: 0;
			right: 50%;
			bottom: 0;
			transition: all 0.3s ease;
			border-bottom: 2px solid #3f6d6c;		/* misho-green01 */
			position: absolute;
			display: block;
		}
		nav.g-nav02 ul.inner>li>a:hover:after {
			width: 50%;
			border-bottom: 2px solid #3f6d6c;		/* misho-green01 */
		}
		nav.g-nav02 ul.inner>li p {
			padding-top:3px;
			padding-bottom:5px;
			margin-bottom:0px;
			color:#333;
		}
		/* ◆sub mega menu ----------------------------- */

		.g-nav02 ul li .mega-menu {
			visibility: hidden;
		}

		/* ◆sub mega menu ----------------------------- */

		.g-nav02 ul li .mega-menu {
			visibility: hidden;		/* ◆ 不可視 */
			position: absolute;
			top: 0px;
			left: 0;
			width: 100%;
			text-align: left;
			padding: 5%;
			padding-top: 2%;
			padding-left:9%;
			padding-bottom:120px;
			background-color:rgba( 255,255,255,0.98 ); 	/*  White  透過90% */
			background:linear-gradient(180deg,#F5F5F5 0%,#F5F5F5 100px,white 100px,white 97%,#F5F5F5 97%,#F5F5F5 100%);
			font-size: 0.9em;
			opacity: 0;		/* ◆ 透過 100% */
			z-index: 9;
			opacity: 0;		/* ◆ 透過 100% */
		}
		.g-nav02 ul li .mega-menu .mm-title {
			margin: 0 auto 50px 0;
			width: 95%;
			font-size:20px;
			text-align:left;
			font-family: "NotoSansCJKjp-Bold";
			font-display: swap;
			color: #00448D;		/* MCI-deep blue */
			color: #444;
			padding-left:30px;
			padding-bottom:15px;
			border-left: 5px solid #3f6d6c;		/* misho-green01 */
			border-bottom: 1px solid #BDC3C7;	/* Siver */
		}
		.g-nav02 ul li .mega-menu .smsym {
			position: absolute;
			bottom:30px;
			left:82%;
			left:65%;
		}
		.g-nav02 ul li:hover .mega-menu,
		.g-nav02 ul li:active .mega-menu {
			opacity: 1;
			visibility: visible;		/* ◆ 可視 */
			-webkit-transition: 0.7s;
			-moz-transition: 0.7s;
			-ms-transition: 0.7s;
			-o-transition: 0.7s;
			transition: 0.7s;
			top: 56px;
			left: 0;
		}

		.fixed{					/* ◆ ヘッダ メニュー部固定 */
			position: fixed;
			top: 0;
			left: 0;
		}
	}
	@media only screen and (min-width: 1500px) and (max-width: 1680px) {	/*◇ PC-S */

		.pc ul li .mega-menu .smblk01 li {
			margin: 20px 20px 20px 0;
			width:17.5%;
		}
		.pc ul li .mega-menu li .smitemt a {
			display:block;
			font-size:13px;
			text-align:center;
			padding:5px 0 5px 0;
		}
		.pc ul li .mega-menu li:nth-child(11) {
			width:20%;
		}
		.pc ul li .mega-menu li:nth-child(11) .smitemt a {
			background-image: url("../images/icon/tricon11.svg");
			background-size:31px 26px;
			background-position: left 3% top 8px;
			background-repeat:no-repeat;
			text-align:left;
			font-size:13px;
			padding-left:45px;
		}
	}
	/* small pc ◇ */
	@media only screen and (min-width: 993px) and (max-width: 1500px) {

		.pc ul li .mega-menu .smblk01 li {
			margin: 15px 20px 15px 0;
			width:19%;
		}
		.pc ul li .mega-menu li .smitemt a {
			display:block;
			font-size:12px;
			text-align:center;
			padding:5px 0 5px 0;
		}
		.pc ul li .mega-menu li:nth-child(11) {
			width:22%;
		}
		.pc ul li .mega-menu li:nth-child(11) .smitemt a {
			background-image: url("../images/icon/tricon11.svg");
			background-size:31px 26px;
			background-position: left 3% top 8px;
			background-repeat:no-repeat;
			text-align:left;
			font-size:12px;
			padding-left:45px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {
	}

	@media screen and (min-width: 640px) {
	}

	/* ★ 要素のはみ出し解決 ----------------------------------------------- */

		main {
			overflow-x: hidden;	/* ★ 横方向はみ出した部分を非表示にする */
		}