
$_bsnum:1; $_scnum:7;  $_nvtxt:2; $_nvhvr:11; //デフォルト

@import "hnmvalus"; //パラメーターセッティング

/*hnmSkins メインページ設定*/
	body{
		main{
			margin-bottom: 2rem;
			h2{
				width: 100%;
				padding: 0.25rem 0 0.25rem 0.5rem;
				margin: 0;
				margin-bottom: 1.5rem;
				font-size: 1.8rem;
				line-height: 1em;
				border-left: solid 1rem $hnm-acnt;
				border-bottom: solid 1px $hnm-hr-def;
			}
			h2, h3{
				&.title_line{
					letter-spacing: 0.1em;
					border: none;
					background-color: $hnm-bg-base-sem-alfa;
					padding: 0.2rem 0 0.2rem 0.5rem;
					&:before{
						content:'|';
						color: $hnm-acnt;
						font-size: 1.2em;
						margin-right: 0.5rem;
					}
				}
			}
		}
		&.home main h2{
			font-size: 1.5rem;
			border-left: none;
			border-bottom-color: $hnm-hr-def;
		}
		&.search main h2{
			margin-bottom: 2rem;
		}
	}

/*hnmSkins パンくずリスト*/
	main ol.hnm-bread{
		list-style-type: none;
		li{
			display: inline-block;
			&:after{
				content:'>';
				padding: 0 0.5rem;
			}
			&:last-child:after{
				content:'';
			}
		}
	}

/*hnmSkins トップページ設定*/
	body.ctop .hnm-mainimg{
		margin-bottom: 2rem;
	}

/*hnmSkins アイテムページ設定*/
	body.item main{
		section{ margin-bottom: 2rem; }
		nav.hnm-page-navi{ margin-bottom: 2rem; }
	}

/*hnmSkins メンバーページ*/ //未設定
	body.member main{
		#nucleus_mf{
			width: 100%;
			.mailform{
				text-align: center;
				textarea.formfield{
					text-align: left;
					width: 100%;
					margin-bottom: 1rem;
				}
				input.formbutton{
					display: inline-block;
					border-radius: 5px;
					margin: 0 auto;
					font-size: 1rem;
					font-family: $hnm-sans-bold;
					font-weight: bold;
					padding: 0.25rem 1rem;
					min-width: 30%;
					color: $hnm-btn-txt;
					background-color: $hnm-btn-bg;
					border: 1px solid #fff;
					border-color: $hnm-btn-hr;
					&:hover{
						color: $hnm-btn-txt-hvr;
						background-color: $hnm-btn-bg-hvr;
						border-color:$hnm-btn-hr-hvr;
					}
				}
			}
		}
	}

/*hnmSkins デフォルトヘッダー*/
	header.hnm-header{
		margin: 0.25rem auto 0.5rem;
		> div.row{
			-ms-flex-align: center;
			align-items: center;
		}
		h1{
			font-size: 1.4rem;
			line-height:1em;
			margin-bottom: 0;
			white-space: nowrap;
			.small{
				color: $hnm-txt;
				font-size: 0.7rem;
				line-height: 2em;
				padding-left: 0.5rem;
			}
			a{
				color: $hnm-txt-base;
				&:hover{ color: $hnm-txt-base;}
			}
		}
		._searchbox form{
			margin-top: 0.5rem;
			border-radius: 0.25rem;
			margin-bottom: 0;

			border:1px solid $hnm-hr;
			background: $hnm-bg;
			input{
				display: inline-block;
				width: calc( 100% - 2rem );
				padding: 0.5rem 0;
				border:none;
			}
			button{
				display: inline-block;
				padding: 0.5rem 0 0;
				border:none;
				background:transparent;
				&:before{ color: $hnm-txt-sem; }
			}
		}
		._desc{
			text-align: right;
			margin-bottom: 0;
			font-size: 0.8rem;
		}
	}

	@media (max-width: 575.98px){}
	@media (min-width: 576px){
		header.hnm-header{
			margin-bottom: 1rem;
			h1{ font-size: 2rem; }
		}
	}
	@media (max-width: 767.98px) {}
	@media (min-width: 768px){
		header.hnm-header{
			margin-top: 0.25rem;
			margin-bottom: 0.25rem;
			h1{
				font-size: 2.3rem;
				color: $hnm-lnk-dark;
				.small{ font-size: 1rem; }
				a{ color: $hnm-lnk-dark;
					&:hover{ color:$hnm-lnk-dark-hvr; }
				}
			}
			._searchbox form{ margin-top: 2rem; }
		}
	}
	@media (min-width: 992px){
		header.hnm-header h1{ font-size: 2.5rem; }
	}
	@media (min-width: 1200px){
		header.hnm-header h1{ font-size: 3rem; }
	}

/*hnmSkins デフォルトグローバルナビ*/
	nav.hnm-navbar{
		display: -ms-flexbox;
		display: flex;
		-ms-flex-flow: row nowrap;
		flex-flow: row nowrap;
		-ms-flex-pack: start;
		justify-content: flex-start;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: justify;
		z-index: 900;

		background-color: $hnm-nav-bg;
		#Navbar{
			display: -ms-flexbox;
			display: flex;
			-ms-flex-preferred-size: auto;
			flex-basis: auto;
			-ms-flex-preferred-size: 100%;
			flex-basis: 100%;
			-ms-flex-positive: 1;
			flex-grow: 1;
			-ms-flex-align: center;
			align-items: center;
			> ul{
				display: -ms-flexbox;
				display: flex;
				-ms-flex-direction: row;
				flex-direction: row;
				padding-left: 0;
				margin-bottom: 0;
				list-style: none;
				> li{
					> a{
						display: inline-block;
						color: $hnm-nav-txt;
						&:hover{
							text-decoration: none;
							color: $hnm-nav-txt-hvr;
						}
					}
					&.dropdown{
						> ul.dropdown-menu{
							padding: 0.3rem 0.5rem 0.2rem;
							> li{
								line-height: 2rem;
								padding: 0.2rem 0 0.3rem 0.5rem;
								border-bottom:1px solid $hnm-lnk-dark-hr;
								&:nth-last-child(1){
									border:none;
								}
								> a {
									font-size: 1rem;
									vertical-align: middle;
									color: $hnm-lnk-dark;
									&:before{
										font-size: 1.5rem;
										vertical-align: middle;
										padding-right:0.5rem;
									}
									&:hover{
										text-decoration: none;
										color: $hnm-lnk-dark-hvr;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	@media (max-width: 767.98px) {
		nav.hnm-navbar{
			position: fixed;
			bottom: 0; left: 0; right: 0;
			#Navbar{
				> ul{
					text-align: center;

					&:nth-child(1){
						width: 80%;
						> li{
							width: 25%;
							&:nth-child(3){
								z-index: 910;
								margin-top: -0.8rem;
								padding-top: 0.8rem;
								padding-bottom: 0.2rem;
								border-top-right-radius: 1rem;
								border-top-left-radius: 1rem;
								background-color: saturate($hnm-nav-bg, nth($hnm-per, 3));
								border: 2px solid darken($hnm-nav-txt, nth($hnm-per, 2));
								
								border-bottom: none;
							}
						}
					}
					&:nth-child(2){
						width: 20%;
						> li{ width: 100%; }
					}

					> li{
						padding-top: 0.5rem;
						padding-bottom: 0.5rem;
						> a{
							font-size: 0.7rem; line-height: 1rem;
							&:hover{ text-decoration: none; }
							&._icon{ white-space: pre;
								&:before{ font-size: 1.4rem; }
								@each $name, $cnt in $hnm-aicon {
									&._#{$name}:before { content: $cnt$hnm-br; }
								}
							}
						}
					}
				}
			}
		}
	}
	@media (min-width: 768px) {
		nav.hnm-navbar{
			position: relative;
			padding: 0.5rem 1rem;
			margin-bottom: 1.5rem;
			#Navbar{
				> ul{
					> li{
						display: list-item;
						text-align: -webkit-match-parent;
						padding-right: 1.5rem;
						&:nth-last-child(1){
							padding-right: 0;
						}
						> a{
							font-size: 1rem;
							line-height: 2.4rem;
							font-weight: bold;
							vertical-align: middle;
							&:before{
								display: inline-block;
								padding-right: 0.5rem;
								font-size: 1.5rem;
								font-weight: normal;
								vertical-align: middle;
							}
						}
						&.dropdown > a.toggle:after{
							display: inline-block;
							font-family: 'Aicon';
							content: '\e252';
							font-style: normal;
							font-weight: normal;
							font-size: 0.8rem;
							margin-left: .5rem;
							vertical-align:bottom;
						}
					}
				}
			}
		}
		@supports ((position: -webkit-sticky) or (position: sticky)) {
			nav.hnm-navbar {
				position: -webkit-sticky;
				position: sticky;
				top: 0;
			}
		}
	}

/*hnmSkins ジャンボトロン*/
	body.ctop .hnm-jumbotron{
		margin-bottom: 2rem;
	}
	body.home .hnm-jumbotron{
		position: relative;
		margin:0 0 0.5rem;
		border-radius: .25rem;
		background-color: $hnm-acnt;
		overflow: hidden;
		height: auto;
		img{
			z-index: 50;
			width: 100%;
			max-height: 6rem;
			object-fit: cover;
			object-position: 100% 50%;
		}
		div.jumbtoron-txt{
			position: absolute;
			z-index: 51;
			top: 0.5rem;
			left: 0.5rem;
			padding: 0;
			h1{
				font-size: 1.5rem;
				margin-bottom: 0;
			}
			p{
				font-size: 1.2rem;
				line-height: 1.5rem;
				margin-bottom: 0;
			}
		}
		a{ color: $hnm-lnk-scnd;
			&.jumbotron-pakutaso{
				background-color: $hnm-bg-white-alfa;
				display: block;
				position: absolute;
				z-index: 52;
				bottom: 0;
				right: 0;
				padding: 0;
				height: 1.2rem;
				width: calc(100px + 0.2rem);
				img{
					position: absolute;
					top:0.1rem;
					left:0.1rem;
					height: auto;
					width: 100px;
				}
			}
			&:hover{
				text-decoration: none;
				color: $hnm-lnk-scnd-hvr;
			}
			&.hnm-edit{
				position: absolute;
				z-index: 60;
				top: 0.5rem;
				left: 0.5rem;
			}
		}
	}

	@media (max-width: 575.98px){}
	@media (min-width: 576px){
		body.home .hnm-jumbotron{ margin-bottom: 1.5rem;
			img{ max-height: 10rem; }
			div.jumbtoron-txt{ top: 1rem; left: 1rem;
				h1{ display: inline-block; font-size: 1.2rem; margin-bottom: 0; }
				p{ margin-bottom: 0.5rem; }
			}
			a.jumbotron-pakutaso{
				bottom: 0.2rem;
				right: 0.2rem;
				height: calc( 18px + 0.2rem);
				width: calc( 150px + 0.2rem);
				img{
					width: 150px;
				}
			}
		}
	}
	@media (min-width: 768px){
		body.home .hnm-jumbotron{
			img{ max-height: 12rem; }
			div.jumbtoron-txt{ top: 1.5rem; left: 1.5rem;
				h1{ font-size: 1.5rem; line-height: 2rem; margin-bottom: 0.5rem; }
				p{ font-size: 1.2rem; line-height: 1.75rem; margin-bottom: 0.5rem; }
			}
			a.jumbotron-pakutaso{
				bottom: 0.5rem;
				right: 0.5rem;
				height: calc( 24px + 0.4rem);
				width: calc( 200px + 0.4rem);
				img{
					width: 200px;
					top: 0.2rem;
					left: 0.2rem;
				}
			}
		}
	}
	@media (min-width: 992px){
		body.home .hnm-jumbotron{ margin-bottom: 2rem;
			img{ max-height: 15rem; }
			div.jumbtoron-txt{ top: 2rem; left: 2rem; height: calc(100% - 4rem);
				h1{ font-size: 2rem; line-height: 2.5rem; }
				p{ line-height: 2rem; }
			}
		}
	}
	@media (min-width: 1200px){
		body.home .hnm-jumbotron{
			img{ max-height: 20rem; }
			div.jumbtoron-txt{ height: calc(100% - 4rem);
				h1{ }
				p{ }
			}
			a.jumbotron-pakutaso{
				bottom: 1rem;
				right: 1rem;
				height: calc( 30px + 0.4rem);
				width: calc( 250px + 0.4rem);
				img{
					width: 250px;
				}
			}
		}
	}

/*hnmSkins メインコンテンツ*/
	.hnm-content{}

/*hnmSkins offcanvas*/
	aside.offcanvas-collapse{
		ul, ol{
			padding-left: 0;
			list-style-type: none;
		}
		.hnm-aside-nav{
		}
	}
	@media (max-width: 767.98px) {
		html { overflow-x: hidden; }
		aside.offcanvas-collapse{
			z-index: 201;
			position: fixed;
			top: 0;
			bottom: calc(1.25rem*1.5 + 1rem); 
			left: 100%;
			width: 100%;
			padding-right: 0;
			padding-left: 0;
			overflow-y: auto;
			background-color: $hnm-bg-alfa;
			transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
			.hnm-aside-desc{}
			.hnm-aside-nav{
				padding-top: 1rem;
				padding-bottom: 1rem;
				h3{
					padding: 0.7rem 0.5em;
					font-family: $hnm-sans-bold;
					font-weight: bold;
					font-size: 1.4rem;
					line-height: 1em;
					text-align: center;
					color: $hnm-hr-alfa;
					border-bottom: 1px solid $hnm-hr-alfa;
				}
				ul, ol{
					list-style-type: none;
					margin-bottom: 1rem;
					padding-left: 0;
					border-bottom: 1px solid $hnm-hr-alfa;
					li{border-bottom: 1px solid $hnm-hr-alfa;
						a{
							display: block;
							padding: 0.5rem 1em;
							font-size: 1.4rem;
							line-height: 2rem;
							background-color: none;
							color: $hnm-lnk-scnd;
							&:hover{
								text-decoration: none;
								color: $hnm-lnk-scnd-hvr;
								background-color: $hnm-lnk;
							}
						}
					}
				}
			}
			&.open {
				visibility: visible;
				-webkit-transform: translateX(-100%);
				transform: translateX(-100%);
			}
		}
	}
	@media (min-width: 768px) {
		aside.offcanvas-collapse{
			h3{
				padding-left: 0.25em;
				border-bottom: 1px solid $hnm-hr;
			}
			.hnm-aside-desc{
				margin-bottom: 1.5rem;
				p{
					padding-left: 0.5rem;
				}
			}
			.hnm-aside-nav {
				position: -webkit-sticky;
				position: sticky;
				top: calc(2.4rem + 1rem + 1.5rem);
				ul, ol{
					margin-bottom: 1.5rem;
					li{
						padding-left: 0.5rem;
					}
				}
			}
		}
	}

/*hnmSkins footer*/
	footer{
		font-family: serif;
		text-align: center;
		padding: .5rem 0 5rem;
		color: $hnm-foot-txt;
		background-color: $hnm-foot-bg;
		border-top: 2px solid $hnm-foot-bg-hr;
	}
	@media (max-width: 575.98px){}
	@media (min-width: 576px){}
	@media (min-width: 768px){ footer{ padding: 3rem 0; } }
	@media (min-width: 992px){}
	@media (min-width: 1200px){}

/*hnmSkins トップボタン*/
	button#btn_top {
		z-index: 800;
		position: fixed;
		bottom: 70px;
		right: 10px;
		padding: 0;
		text-align: center;
		border: none;
		background: none;
		opacity: 0.6;
		&:hover { opacity: 1; }
		._icon:before {
			font-size: 4rem;
			text-align: left;
			color: $hnm-acnt;
		}
	}

/*hnmSkins リスト*/
	.hnm-lists{
		article{
			margin-bottom: 2rem;
			overflow: hidden;
			> div.row{
				margin:0;
				height: calc(10.5rem + 5px);
				overflow: hidden;
				-ms-flex-direction: row;
				flex-direction: row;
				padding: 0;
				._desc{
					position: absolute;
					height: calc(10.5rem + 5px);
					right: 0;
					padding-bottom: 1px;
					border-bottom: 1px solid $hnm-hr-def;
					h2._title, h3._title{
						line-height: 1.5rem;
						padding-bottom: 1px;
						margin-bottom: 1px;
						border-bottom: 1px solid $hnm-lnk-dark-hr;
						a{ color: $hnm-lnk-dark;
							&:hover{ color: $hnm-lnk-dark-hvr; }
						}
					}
					p{
						line-height: 1.5rem;
						margin-bottom: 0;
						&._dat, &._link{ text-align: right; }
						&._text{
							a{ color: $hnm-lnk;
								&:hover{ color:$hnm-lnk-hvr; }
							}
						}
					}
				}
				._image{
					position: absolute;
					left: 0;
					svg, img{
						object-fit: cover;
						height: calc(10.5rem + 5px);
						width: 100%;
						max-width: 100%;
					}
				}
			}
		}
	}

	@media (max-width: 575.98px){
		.hnm-lists article > div.row{
			&._image{ display: none; }
			&._desc{ left: 0; width: 100%; max-width: 100%; }
		}
	}
	@media (min-width: 576px){}
	@media (min-width: 768px){}
	@media (min-width: 992px){}
	@media (min-width: 1200px){}

/*hnmSkins リストボックス*/
	.hnm-list-box{
		article{
			> div.row{
				overflow: hidden;
				border:1px solid $hnm-hr-scnd;
				border-radius: 0.25rem;
				margin:0 0 1rem;
				height: 12rem;
				box-shadow: 0.15rem 0.1rem 0.5rem rgba($hnm-bg-scnd, 0.2);
				-ms-flex-direction: row;
				flex-direction: row;
				padding: 0;
				._desc{
					padding-top:0.5rem;
					h2._title, h3._title{
						font-size: 1.2rem;
						line-height: 1.5rem;
						margin-bottom: 0.5rem;
						a{ color: $hnm-lnk-dark;
							&:hover{ color: $hnm-lnk-dark-hvr; }
						}
					}
					p{
						&._dat{
							font-size: 1rem;
							line-height: 1rem;
							padding: 0;
							margin-bottom: 0.5rem;
							a{ display: none; }
						}
						&._link{ text-align:right; margin:0; }
						&._text{
							margin:0;
							a{
								font-size: 1rem;
								line-height: 1.5rem;
								padding: 0;
								color: $hnm-lnk;
								&:hover{ color:$hnm-lnk-hvr; }
							}
						}
					}
				}
				._image{
					padding: 0;
					svg, img{
						height: 14rem;
						width: 100%;
						object-fit: cover;
						object-position: 50% 50%;
						margin-right: 0;
					}
				}
			}
		}
	}

	@media (min-width: 576px){
		.hnm-list-box article > div.row ._desc p._dat a{
			display: inline;
		}
	}
	@media (min-width: 768px){
		.hnm-list-box article > div.row ._desc{
			h2, h3{ &._title{ font-size: 1.4rem; } }
		}
	}
	@media (min-width: 992px){
		.hnm-list-box article > div.row ._desc{
			padding-top:1rem;
		}
	}
	@media (min-width: 1200px){
		.hnm-list-box article > div.row {
			height:14rem;
			._desc{
				h2._title, h3._title, p._dat{ margin-bottom:1rem; }
				p._text{margin-bottom:0.5rem;}
			}
		}
	}

/*hnmSkins サムネールボックス*/
	.hnm-thum-box{
		overflow: hidden;
		article{
			> div.row{
				display: flex;
				position: relative;
				overflow: hidden;
				border:1px solid $hnm-hr-scnd;
				border-radius: 0.25rem;
				margin:0 0 1.5rem;
				box-shadow: 0.15rem 0.1rem 0.5rem rgba( $hnm-bg-scnd, 0.2);
				-ms-flex-direction: row;
				flex-direction: row;
				padding: 0;
				width: 100%;
				height: 12rem;
				._desc{
					h2._title, h3._title{
						background-color: $hnm-bg-sem-alfa;
						font-size: 1.2rem;
						line-height: 1.5rem;
						padding: 0.25rem 0.5rem;
						margin-bottom: calc(0.5rem - 1px);
						border-bottom: 1px solid $hnm-lnk-dark-hr;
						a{ color: $hnm-lnk-dark;
							&:hover{ color: $hnm-lnk-dark-hvr; }
						}
					}
					p{
						&._dat{ display: none; }
						&._link{ display: none; }
						&._text{
							margin-bottom: 0;
							padding:  0 0.5rem 0.5rem;
							font-size: 1rem;
							line-height: 1.5rem;
							color: $hnm-txt;
							a{ color: $hnm-lnk;
								&:hover{ color:$hnm-lnk-hvr; }
							}
						}
					}
					&.col-7{
						position: absolute;
						background-color: $hnm-bg-sem-alfa;
						bottom: 0;
						z-index: 101;
						max-width: 100%;
						width: 100%;
						padding: 0;
						top:6.2rem;
					}
				}
				._image{
					&.col-5{
						display: flex;
						position: absolute;
						max-width: 100%;
						top:0;
						bottom:0;
						overflow: hidden;
						padding: 0;
					}
					svg, img{
						width: 100%;
						max-height: 12rem;
						object-fit: cover;
						object-position: 50% 0;
					}
				}
			}
		}
	}
	@media (min-width: 576px){}
	@media (min-width: 768px){}
	@media (min-width: 992px){
		.hnm-thum-box article{
			> div.row{
				height: 20rem;
				._desc.col-7{ top:11rem; }
			}
			&.col-lg-3{
				> div.row{
					height: 15rem;
					._desc.col-7{ top:6rem; }
					._image img{ max-height:8rem; }
				}
			}
		}
	}
	@media (min-width: 1200px){}

/*hnmSkins ページナビ*/
	.hnm-page-navi{
		width: 100%;
		text-align: center;
		a{
			display: inline-block;
			font-family: $hnm-sans-bold;
			font-weight: normal;
			text-align: center;
			vertical-align: middle;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			border: 1px solid transparent;
			padding: .375rem .75rem;
			font-size: 1rem;
			line-height: 1.5;
			border-radius: .25rem;
			transition: $hnm-btn-trnsition;

			color: $hnm-btn-txt;
			background-color: $hnm-btn-bg;
			&:hover{
				text-decoration: none;
				color: $hnm-btn-txt-hvr;
				background-color: $hnm-btn-bg-hvr;
			}
		}
	}

/*hnmSkins デフォルト設定*/
	a{
		&:hover{
			text-decoration: none;
			//color: #2121de;
		}
		&.hnm-edit{
			font-size: 1rem;
			//color: #007bff;
			&:before{
				padding-left: 0.5rem;
			}
		}
	}

	.row img{ max-width: 100%; height: auto; object-fit: cover; }
	@media (max-width: 991.98px){ _::-webkit-full-page-media, _:future, :root .row img {max-height: 20rem;}}
	@media (min-width: 992px){ _::-webkit-full-page-media, _:future, :root .row img {max-height: 30rem;}}
	@media (min-width: 1200px){ _::-webkit-full-page-media, _:future, :root .row img {max-height: 40rem;}}

	.serif{ font-family: $hnm-serif; }
	.small{ font-family: $hnm-mono; font-weight: normal; font-size: 0.8em; }

	li.cat999{ display: none; }
	body._admin li.cat999{ display: list-item; }

	.leftbox{float:left;}
	.rightbox{float:right;}
	.txtL{text-align:left;}
	.txtR{text-align:right;}
	.txtC{text-align:center;}
	.crL{clear:left;}
	.crR{clear:right;}
	.crB{clear:both;}
	.red{ color: $hnm-txt-red; }
	.grn{ color: $hnm-txt-grn;}
	.wht{ color: $white; }
	.dgry{ color: $gray-800; }
	.gry{ color: $gray-500; }
	.lgry{ color: $gray-200; }
	.edit-pencil{ display: inline-block; float: right; font-size: 1rem; }
	.jumbotron .edit-pencil{ display: block; position: absolute; right:2rem; top:1rem; z-index: 100; }

	/*回り込み解除の指定*/
	.clBox,.floatbox{zoom: 100%;}
	.clBox:after,.floatbox:after{content: " ";clear: both;height: 0;display: block;visibility: hidden;}

	/*ファーストイメージ*/
//	.hnm-first-img { overflow: hidden; height: 100%;}
//	.hnm-first-img img{ height: 100%; width:100%; object-fit:cover; }
	
	@for $i from 0 through 40{ .mt#{$i * 5}{ margin-top: #{$i / 2 }rem; }}
	@for $i from 0 through 40{ .mb#{$i * 5}{ margin-bottom: #{$i / 2 }rem; }}
	@for $i from 0 through 40{ .ml#{$i * 5}{ margin-left: #{$i / 2 }rem; }}
	@for $i from 0 through 40{ .mr#{$i * 5}{ margin-right: #{$i / 2 }rem; }}
	@for $i from 0 through 40{ .pa#{$i}{ padding: #{ $i / 10 }rem; }}
	@for $i from 0 through 40{ .pat#{$i}{ padding-top: #{ $i / 10 }rem; }}
	@for $i from 0 through 40{ .pab#{$i}{ padding-bottom: #{ $i / 10 }rem; }}
	@for $i from 0 through 40{ .pal#{$i}{ padding-left: #{ $i / 10 }rem; }}
	@for $i from 0 through 40{ .par#{$i}{ padding-right: #{ $i / 10 }rem; }}
	
	@for $i from 1 through 10{ .w#{$i*10}per{ width: $i*10%; }}
	@for $i from 1 through 10{ .h#{$i*10}per{ height: $i*10%; }}

	@for $i from 1 through 10{ .w#{$i*10}{ width: #{$i}rem; }}
	@for $i from 1 through 10{ .w#{$i*10 + 100}{width:#{ $i + 10 }rem;}}
	@for $i from 1 through 16{ .w#{$i*50 + 200}{width:#{ $i*5 + 20 }rem;}}

	@for $i from 1 through 10{ .h#{$i*10}{ height: #{$i}rem; }}
	@for $i from 1 through 10{ .h#{$i*10 + 100}{height:#{ $i + 10 }rem;}}
	@for $i from 1 through 16{ .h#{$i*50 + 200}{height:#{ $i*5 + 20 }rem;}}
	.hauto{height:auto;}

/*hnmSkins ログインフォーム*/
	#nucleus_lf {
		z-index: 2000;
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: $hnm-bg-gry-alfa;
		top: 0;
		left: 0;
		padding-top: 10%;
		}
	.form-signin {
		max-width: 330px;
		padding: 1rem;
		margin: 0 auto;
		h2{
			background-color: transparent;
			font-size: 1.4rem;
			font-family: $hnm-sans-bold;
			font-weight: bold;
			color: $hnm-txt-scnd;
			margin-bottom: 1rem;
		}
		.checkbox{
			display: block;
			position: relative;
			font-weight: normal;
			margin: 0.8rem 0 0.8rem 1rem;
			color: $hnm-txt-scnd;
			margin-bottom: 1rem;
		}
		.form-control {
			position: relative;
			height: auto;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			padding: 0.8rem;
			font-size: 1.5rem;
			&:focus { z-index: 2010; }
		}
		input{
			&[type="email"] {
				margin-bottom: -1px;
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
			}
			&[type="password"] {
				margin-bottom: 10px;
				border-top-left-radius: 0;
				border-top-right-radius: 0;
			}
		}
		a{
			color: $hnm-lnk-scnd;
			&:focus, &:hover{color: $hnm-lnk-scnd-hvr;}
		}
		a, input{
			&.formbot{
				display: inline-block;
				width: 100%;
				margin: 0 auto .5rem;
				text-align: center;
				vertical-align: middle;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				border-radius: .25rem;
				border: none;
				padding: .375rem .75rem;
				font-size: 1.2rem;
				font-family: $hnm-sans-bold;
				font-weight: bold;
				letter-spacing: 0.2em;
				line-height: 1.5rem;
				transition: $hnm-btn-trnsition;

				color: $hnm-btn-txt;
				background-color: $hnm-btn-bg;

				&.wide{ width: 60%; }
				&:hover{
					text-decoration: none;
					color: $hnm-btn-txt-hvr;
					background-color: $hnm-btn-bg-hvr;
				}
				&.scnd{
					color: $hnm-btn-scnd-txt;
					background-color: $hnm-btn-scnd-bg;
					&:hover{
						color: $hnm-btn-scnd-txt-hvr;
						background-color: $hnm-btn-scnd-bg-hvr;
					}
				}
			}
		}
	}

/*hnmSkins 問合せフォーム*/
	.hnm-form{
		h2{ margin-top:1rem; }

		.red, .green, .grn{ margin-left: 0.1rem; display: inline-block; width: 0.4rem; }
		dl{
			margin: 0.5rem 0;
			width: 100%;
			&.mb20{ margin-bottom: 2rem; }
			dt{ font-size: 1rem; }
			dd{ border:none; }
		}
		input, select, textarea { width: 100%; }
		input, input.formbot, select, textarea {
			&.w08{ width: 8%; }
			&.w10{ width: 10%; }
			&.w15{ width: 15%; }
			&.w20{ width: 20%; }
			&.w25{ width: 25%; }
			&.w30{ width: 30%; }
			&.w35{ width: 35%; }
			&.w40{ width: 40%; }
			&.w45{ width: 45%; }
			&.w50{ width: 50%; }
			&.w55{ width: 55%; }
			&.w60{ width: 60%; }
			&.w65{ width: 65%; }
			&.w70{ width: 70%; }
			&.w75{ width: 75%; }
			&.w80{ width: 80%; }
			&.w85{ width: 85%; }
			&.w90{ width: 90%; }
			&.w100{ width: 100%; }
		}
		input[type="radio"], input[type="checkbox"]{
			width: 1rem;
			margin-right: 0.5rem;
		}
		label input{ border:none; }
		a, input{
			&.formbot{
				display: inline-block;
				width: 30%;
				margin: 0 auto;
				text-align: center;
				vertical-align: middle;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				border-radius: 2rem;
				padding: .375rem .75rem;
				font-size: 1.2rem;
				font-family: $hnm-sans-bold;
				font-weight: bold;
				letter-spacing: 0.2em;
				line-height: 1.5rem;
				border-radius: 2rem;
				transition: $hnm-btn-trnsition;
				color: $hnm-btn-txt;
				background-color: $hnm-btn-bg;
				border: 1px solid transparent;
				&.wide{ width: 60%; }
				&:hover{
					text-decoration: none;
					color: $hnm-btn-txt-hvr;
					
					border-color: $hnm-btn-hr-hvr;
					background-color: $hnm-btn-bg-hvr;
				}
			}
		}
	}

	@media (max-width: 767.98px){
		.hnm-form{
			dt{
				padding-top: 0.5rem;
				//border-bottom: 1px dotted $hnm-hr-def;
				border: none;
				&.w20, &.w30, &.w45, &.w75{ width: 100%; float: left; }
			}
			dd{
				padding-top:0.5rem;
				&.w20{ width: 20%; float: left;}
				&.w30{ width: 35%; float: left;}
				&.w45{ width: 60%; float: left;}
				&.w75{ width: 95%; float: left;}
			}
			input, textarea, a.formbot{
				font-size: 1rem;
				line-height: 1.4rem;
			}
			select{
				font-size: 1.2rem;
				line-height: 1.4rem;
			}
		}
	}
	@media (min-width: 768px){
		.hnm-form{
			margin-left:1rem;
			dl{
				border-bottom: 1px dotted $hnm-hr;
				&:after{
					content: ".";  display: block;  height: 0;  font-size:0; clear: both; visibility:hidden; 
				}
				dt{ width: 20%; float: left; text-align: right; }
				dd{ width: 78%; float: right; border:none; }
				dt, dd{
					&.txtC{ text-align: center; }
					&.w20{ width: 20%; float: left;}
					&.w30{ width: 30%; float: left;}
					&.w45{ width: 45%; float: left;}
					&.w75{ width: 75%; float: left;}
				}
			}
			input, textarea, a.formbot{
				font-size: 1.2rem;
				line-height: 1.5rem;
			}
			select{
				font-size: 1.4rem;
				line-height: 1.5rem;
			}
			.add_table_form dl{
				dt{ width:20%; }
				dt.nth2, dd{ width: 30%; float: left; }
				dt.nth1, dd.nth1{ width: 50%; }
			}
		}
	}

/*hnmSkins 擬似テーブル*/
	.hnm-table-set {
		margin-bottom: 2rem;
		dl {
			dt {
				color: $hnm-txt-scnd;
				text-align: center;
				padding: 0.5rem 2rem;
				border:1px solid $hnm-hr-scnd;
				border-width: 0 1px 1px 0;
				background: $hnm-bg-scnd;
			}
			dd {
				color: $hnm-txt;
				padding: 0.5rem 2rem;
				border-width: 0 1px 1px 0;
				border: 1px solid $hnm-hr;
				background-color: $hnm-bg;
			}
		}
	}

/*アイコンフォント設定*/
	@font-face {
		font-family: "#{$hnm-aicon-font}";
		src: url('#{$hnm-aicon-font-src}.eot');
		src: url('#{$hnm-aicon-font-src}.eot?#iefix') format('embedded-opentype'),
		url('#{$hnm-aicon-font-src}.woff2') format('woff2'),
		url('#{$hnm-aicon-font-src}.woff') format('woff'),
		url('#{$hnm-aicon-font-src}.ttf') format('truetype'),
		url('#{$hnm-aicon-font-src}.svg#glyphicons_halflingsregular') format('svg');
	}
	._icon{
		font-size: 1.4rem;
		position: relative;
		top: 1px;
		display: inline-block;
		font-style: normal;
		font-weight: normal;
		line-height: 1;
		vertical-align:text-bottom;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		&:before{ font-family: "#{$hnm-aicon-font}"; }
		@each $name, $cnt in $hnm-aicon {
			&._#{$name}:before { content: $cnt; }
		}
	}
