html{
	font-size:15px;	
}

body{
	margin:0;
	width:100%;
	position:relative;
}

body > header
{
	background:hsl(var(--col),0%,95%);
	padding:1vh 1vw;
	justify-content:space-between;
}

body > header
{
	padding:2vh 1vw;
}

body > .field_wrap{
	gap:4vw;
	height:100%;
}

body > .field_wrap > *{
	align-items: stretch;
}

body > .field_wrap > nav
{
	position: fixed;
	top:0;
	bottom:0;
	display: flex;
	flex-wrap: wrap;
	flex-flow: column;
	width:150px;
	background:hsl(var(--col),0%,95%);
	border-top:1px solid hsl(var(--col),0%,85%);
}

body > .field_wrap > nav > .name_wrap
{
	background: hsl(var(--col),0%,85%);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
}

body > .field_wrap > nav > .name_wrap > span
{
	width: 100%;
	text-align: center;
}

body > .field_wrap > nav > a,
body > .field_wrap > nav > span.item
{
	position: relative;
	display: block;
	border-bottom:1px solid hsl(var(--col),0%,85%);
	color:var(--col-link);
	text-decoration: underline;
}

body > .field_wrap > nav > *{
	flex-grow: 0;
	width:100%;
	font-size: .9rem;
	padding:1vh 1vw;
}

body > .field_wrap > nav > .last{
	border-top:1px solid hsl(var(--col),0%,85%);
	margin-top: auto;
}

body > .field_wrap > nav > span.item ul
{
	display: none;
	position: absolute;
	left:100%;
	width:100%;
	border:1px solid hsl(var(--col),0%,85%);
	border-top-width:4px;
	background: #fff;
	z-index: 99999;
}

body > .field_wrap > nav > span.item ul:not(body > .field_wrap > nav > span.last ul)
{
	top:-1px;
}

body > .field_wrap > nav > span.last ul
{
	bottom:-1px;
}

body.domain_top{
	background: hsl(var(--col),0%,80%);
}

body.domain_top > main{
	width:40%;
	margin:40px 30%;
	padding:3vh 2vw;
	background: #fff;
}

body > .field_wrap > nav > span.item ul li
{
	padding:1vh 1vw;
	border-bottom:1px solid hsl(var(--col),0%,85%);
}
body > .field_wrap > nav > span.item ul li:last-of-type
{
	border-bottom:none;
}

body > .field_wrap > nav > .focus{
	color:#000 !important;
	font-weight:bold;
	text-decoration:none !important;
}

body > .field_wrap > nav > .focus *{
	font-weight:normal;
}

body > .field_wrap > main{
	flex-grow: 1;
	width:15%;
	margin-left:150px;
	padding:2vh 4vw 2vh;
}

body > .field_wrap > main > .page_route *{
	font-size:.8rem;
}

body > .field_wrap > main > .page_route > *:not(:last-of-type):after{
	content:">";
	padding:0 .5vw;
}

body > .field_wrap > main > h1{
	border-left:6px solid hsl(var(--col),0%,75%);
	padding-left:1vw;
	line-height:170%;
	font-size:1.2rem;
}



body > .field_wrap > main > .btn_wrap{
	gap:2vw;	
	background:hsl(var(--col),0%,95%);
	padding:1vh 1vw;
}

body > .field_wrap > main > .btn_wrap *{
	color:var(--col-link);
	text-decoration:underline;
	cursor:pointer;
}

body > .field_wrap > main > *{
	margin-top:2vh;	
}

body > .field_wrap > main > h1{
	border-left:6px solid hsl(var(--col),0%,75%);
	padding-left:1vw;
	line-height:170%;
	font-size:1.2rem;
}

body > .field_wrap > main > .setting-type{
	gap:1vh;
}

body > .field_wrap > main > .setting-type > *{
	width:100%;
}

body > .field_wrap > main > .list_wrap{
	border:1px solid hsl(var(--col),0%,95%);
}

body > .field_wrap > main > .list_wrap > *{
	padding:1vh 1vw;
}

body > .field_wrap > main > .list_wrap > *:nth-of-type(even){
	background:	hsl(var(--col),0%,97%);
}

.thumb_form{
	gap:2vw;
}

.thumb_form > *{
	flex-grow:3;
}

.thumb_form > .thumb_wrap{
	width:20%;
	flex-grow:1;
}

body > .field_wrap > main > form .top_page_edit{
	position:relative;
}

body > .field_wrap > main > form .top_page_edit > .flex{
	top:50%;
	left:0;
	width:100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

body > .field_wrap > main > form .top_page_edit > .flex > *{
	width:100%;
}

form .flex{
	gap:1.5vw;
}

form .flex > *{
	width:50%;
	flex-grow: 1;
}

form .flex > *[class*="files"]{
	width:30%;
}

.img_wrap_w4x3{
	position: relative;
	padding-top: 75%;
	overflow: hidden;
}
.img_wrap_w4x3 img{
	position: absolute;
	top:0;
	left:0;
	width:100%;
}

.store_case_head_list > *{
	margin-top: 1.5vh;
	gap:2vw;
	padding-bottom: 1vh;
	border-bottom:1px solid hsl(var(--col),0%,90%) ;
}

.store_case_head_list > * .w100{
	width:100%;
}

.store_case_head_list > * > .img{
	width:30%;
	position: relative;
	padding-top: 20%;
	overflow: hidden;
}

.store_case_head_list > * > .img > img{
	position: absolute;
	top:0;
	left:0;
	width:100%;
}

.store_case_head_list > * > .flex{
	gap:1vw;
}

.store_case_head_list > * > .flex > *{
	width:8%;
}

.page_head_list{
	border:1px solid hsl(var(--col),0%,90%);
}

.page_head_list > *:nth-of-type(even){
	background: hsl(var(--col),0%,95%);
}

.page_head_list > .flex > *{
	width:15%;
	padding:1vh 1vw;
	border-right:1px solid hsl(var(--col),0%,90%);
}


.page_head_list > .flex > *:first-of-type{
	width:10%;
}

.page_head_list > .flex > *:last-of-type{
	border:none;
}

.page_head_list > .flex > *:nth-of-type(2){
	width:60%;
}

body > .field_wrap > main > * > .css_themes_list > *{
	border:1px solid hsl(var(--col),0%,90%);
	margin-top: -1px;
	padding:1vh 1vw;
}

body > .field_wrap > main > * > .css_themes_list > * > .flex{
	gap: 1.5vw;
}

body > .field_wrap > main > * > .css_themes_list > * > .flex > *{
	width:8%;
	flex-grow: 0;
}

body > .field_wrap > main > * > .css_themes_list > * > .flex .color_item{
	display: inline-block;
	width:100%;
	aspect-ratio: 1 / 1;
}

form.work_detail textarea{
	height:10vh;
}

body > .field_wrap > main > div.work_detail_list{
	margin-bottom: 2vh;
	width:70%;
}

body > .field_wrap > main > div.work_detail_list > *{
	border: 1px solid hsl(var(--col),0%,80%);
	margin: -1px 0 0 -1px;
	padding:1vh 1vw;
	width:80%;
	flex-wrap: 1;
	text-align: left;
}

body > .field_wrap > main > div.work_detail_list > *:nth-of-type(odd){
	width:15%;
	flex-grow: 0;
	text-align: right;
}

body > .field_wrap > main > form > div.page_use > *{
	border:1px solid hsl(var(--col),0%,90%);
	padding:1vh 1vw;
}