@charset "utf-8";
/******************************
header 仮
*******************************/
header#min{
	color:hsla(0,0%,15%,1.0);
	font-size:0.83em;
	line-height: 1.5em;
	text-align:center;
	background-color:hsla(0,0%,0%,1.0);
	background-image: url(../img/bg01.jpg);
}

@media screen and (max-width: 799px) {
	#tpmn{
		width:100%;
		background-image: url(../img/top.png);
		background-repeat: no-repeat;
		background-position: left top;
		background-color:hsla(0,100%,10%,1.0);
	}
	.tpmnlogo{}
	.tpmnlogo img{width:100%;}
	.tpmnsns{
		display:none;
	}
	.tpmnsns img{width:30px; margin-right:5px;}
	.tpmndtl{display:none;}
}
@media screen and (min-width: 800px) {
	#tpmn{
		width:100%;
		height:98px;
		background-image: url(../img/top.png);
		background-repeat: no-repeat;
		background-position: left top;
		background-color:hsla(0,100%,10%,1.0);
		display:table;
	}
	.tpmnlogo{
		width:490px;
		display:table-cell;
		vertical-align:middle;
	}
	.tpmnsns{
		text-align:left;
		padding:0 0 15px 20px;
		display:table-cell;
		vertical-align:bottom;
	}
	.tpmnsns img{width:30px; margin-right:5px;}
	.tpmndtl{
		width:80px;
		display:table-cell;
		vertical-align:middle;
	}
}
@media screen and (min-width: 1200px) {
}

/******************************
header
*******************************/
header[id^="MnHD"]{
	width: 100%;
	text-align: center;
}
header[id^="MnHD"] > dl{
	margin: 0 auto;
	display: flex;
	flex-direction: row;
}
header[id^="MnHD"] > dl dt a span{display: none;}

@media screen and (max-width: 799px) {
	header[id^="MnHD"]{
		background:
			url(../img/bg01.svg?1) left top no-repeat,
			url(../img/logo01.svg?2) right -40px top -5px no-repeat,
			linear-gradient(to right, hsla(0, 0%, 0%,0), hsla(0, 0%, 0%, .8)),
			url(../img/bg00.jpg?1) left top;
		background-size: 50% auto, 130px, 100% 100%, auto;
		background-blend-mode: overlay, color-dodge, normal, normal;
		background-color: hsl(0, 100%, 30%);
	}
	header[id^="MnHD"] > dl{
		height: 80px;
		width: 100%;
		justify-content: space-between;
	}
	header[id^="MnHD"] > dl dt{
		text-align: left;
		width: 50%;
		padding: 1rem 0 0 1rem;
		position: relative;
	}
	header[id^="MnHD"] > dl dt img{
		height: 60px;
	}
	header[id^="MnHD"] > dl dd{width: 50%;}
}
@media screen and (min-width: 800px) {
	header[id^="MnHD"]{
		background:
			url(../img/bg01.svg?1) left top no-repeat,
			url(../img/logo01.svg?2) right -10px top -10px no-repeat,
			linear-gradient(to right, hsla(0, 0%, 0%,0), hsla(0, 0%, 0%, .8)),
			url(../img/bg00.jpg?1) left top;
		background-size: auto 100%, 200px, 100% 100%, auto;
		background-blend-mode: overlay, color-dodge, normal, normal;
		background-color: hsl(0, 100%, 30%);
	}
	header[id^="MnHD"] > dl{
		width: 100%;
		margin: auto;
		position: relative;
		align-items: center;
	}
	header[id^="MnHD"] > dl dt{
		text-align: left;
		width: calc(100% - 60px);
		padding: .5em 0 .5em 1em;
	}
	header[id^="MnHD"] > dl dt img{width: 390px;}
	header[id^="MnHD"] > dl dd{
		text-align: right;
		padding-right: 1em;
	}
	header[id^="MnHD"] > dl dd img{
		display: none;
	}
}
@media screen and (min-width: 1200px) {
	header[id^="MnHD"] > dl{
		width: 1200px;
	}
}

/******************************
Menu
*******************************/
.drawer-menu{
	box-sizing:border-box;
	background: hsl(0, 0%, 0%);
}
/***メイン***/
#primary-menu{
	text-align: center;
	padding: 0;
	margin: 0;
	display: flex;
	box-sizing: border-box;
	list-style: none;
}
#primary-menu > li{
	text-align: center;
	position: relative;
}
#primary-menu > li a{
	color: hsl(0, 0%, 100%);
	text-decoration: none;
	display: block;
	transition: 0.3s ease-in all;
}

/* メニューOPEN時の背景 */
.close-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
	visibility: hidden;
	opacity: 0;
}
.check:checked ~ .close-menu {
	background: hsla(0, 0%, 0%, .7);
	visibility: visible;
	opacity: 1;
}

/* ------------------------------------------------ checkbox */
.check {
	display: none;
}
@media screen and (max-width: 699px) {
	/* ------------------------------------------------ drawer menu */
	.drawer-menu{
		width: 100%;
		margin: auto;
	}
	ul#primary-menu{
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	ul#primary-menu > li{
		width: calc(100% / 2);
		text-align: left;
	}
	ul#primary-menu > li > a{
		font-weight: normal;
		padding: .5em 1em;
		display: block;
		border-right: 1px solid hsla(0, 0%, 100%, .3);
		border-bottom: 1px solid hsla(0, 0%, 100%, .3);
	}
	ul#primary-menu > li:nth-child(even) > a{
		border-right: none;
	}
	ul#primary-menu > li:nth-child(3) > a,
	ul#primary-menu > li:nth-child(4) > a{
		border-bottom: none;
	}
}
@media screen and (min-width: 700px) {
	.drawer-menu{
		width: 100%;
		margin: auto;
	}
	.menu-btn{display:none;}
	ul.LGsns{display: none;}

	ul#primary-menu{
		width: 100%;
		margin: auto;
		flex-direction:row;
		justify-content: center;
	}
	ul#primary-menu > li{
		width: calc(100% / 4);
	}
	ul#primary-menu > li > a{
		font-size: .9em;
		height: 60px;
		line-height: 6rem;
		padding: 0;
		border-right: 1px solid hsla(0, 0%, 0%, .3);
		transition: .3s ease-in;
		display: block;
	}
	ul#primary-menu > li:first-child > a{
		border-left: 1px solid hsla(0, 0%, 0%, .3);
	}
	ul#primary-menu > li > a:hover{
		background: hsla(0, 0%, 100%, .2);
	}


	.drawer-menu li:hover ul.sub-menu img{
		animation: dlyfade .4s forwards ease-out;
	}
	.drawer-menu ul.sub-menu a img{
		width: 100%;
		height: inherit;
		object-fit: cover;
		transition: all .5s ;
		transform: scale(1);
	}
	.drawer-menu ul.sub-menu li a:hover img{
		transform: scale(1.1);
	}
	.drawer-menu ul#primary-menu li ul.sub-menu li a span{
		padding: 0 .5rem;
	}

	ul.sub-menu{
		list-style: none;
		position: absolute;
		top: 100%;
		left: 0;
		margin: 0;
		padding: 0;
	}
	ul.sub-menu li a{
		font-size: .9em;
		color: hsl(0, 0%, 20%);
		white-space: nowrap;
		padding:.7rem 2rem .7rem 2rem;
		border-bottom: 1px solid hsla(0, 0%, 0%, .2);
		border-left: 1px solid hsla(0, 0%, 0%, .2);
		border-right: 1px solid hsla(0, 0%, 0%, .2);
		text-align: left;
		background-color: hsla(0, 0%, 100%, 1);
		position: relative;
	}
	ul.sub-menu li a::after{
		content: "";
		width: 3px;
		height: 90%;
		background: hsl(26, 88%, 47%);
		position: absolute;
		left: 3px;
		top: 50%;
		transform: translate(0, -50%);
	}
	ul.sub-menu li:first-child a{
		border-top: 1px solid hsla(0,0%,0%,.2);
	}
	ul.sub-menu li a:hover{
		background-color:hsla(0, 0%, 90%, .9);
	}
	ul.sub-menu {visibility: hidden;}
	li:hover ul.sub-menu{visibility: visible;}
	ul.sub-menu{
		transform: scale(1, 0);
		transform-origin: top center;
		transition: .3s;
		box-shadow:0px 2px 3px hsla(0,0%,0%,0.1);
	}
	li:hover ul.sub-menu{
		transform: scale(1, 1);
	}
}
@media screen and (min-width: 1200px) {
	ul#primary-menu{
		width: 1000px;
	}
}


/******************************
primary-under
*******************************/
ul#primary-under{
	width: 100%;
	padding: 3rem 0;
	margin: auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
}
ul#primary-under > li{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
ul#primary-under > li > a{
	color: hsl(0, 0%, 100%);
	text-decoration: none;
	line-height: 135%;
	padding: 0 2em;
	margin: .5em 0;
	border-left: 1px solid hsl(0, 0%, 100%);
	display: block;
	position: relative;
	transition: all .5s;
}
ul#primary-under > li > a:hover{
	color: hsl(0, 0%, 80%);
}

@media screen and (max-width: 699px) {
	ul#primary-under{
		padding: 0 6%;
		justify-content: left;
	}
	ul#primary-under li{
		text-align: left;
		width: 50%;
	}
	ul#primary-under > li > a{
		padding: 0 1em;
		margin: .2em 0;
	}
}
@media screen and (min-width: 700px) {
	ul#primary-under > li > a::after{
		content: "";
		width: 1px;
		height: 100%;
		background: hsl(0, 0%, 100%);
		position: absolute;
		right: -1px;
	}
}
@media screen and (min-width: 1200px) {
}