/*+++++++++++++++
root
++++++++++++++++*/

:root {
--width-max:clamp(360px,100vw,a96vsw);
--full-inner:  clamp(480px,85vw,100vw);
--large-inner: min(90%, 1500px);
--medium-inner:clamp(360px,85vw,1200px);
--small-inner: clamp(360px,85vw,1000px);
/*font-family*/
--gs:"Noto Sans JP", sans-serif;
--maru:"Zen Maru Gothic", serif;
--engs:"Montserrat", sans-serif;
--meiryo:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
/*color*/
--red:#e7000d;
--white:#fff;
--black:#111;
--blue:#6cb0f3;
--orange:#ffa98c;
--gray:#999;
--darkgray:#333;
--lightgray:#f7f7f7;
--darkblue:#0b77dc;
--aqua:#0071bc;
--brown:#754c24;
--beige:#fefffd;
--lightblue:#f1f9fb;
--lightpink:#f9cdc6/*#f9e6e3*/;
--lightgreen:#c7dbc3/*#deebdc*/;
--lightorange:#f8b74a;
    
--darkblue:#0656a1;

--line-color:#06c755;

--line:#06c755;
--orange:#f38642;
--important:#C6061C;

/*opacity*/
--opa-white01:rgba(255,255,255,0.05);
--opa-white02:rgba(255,255,255,0.2);
--opa-white05:rgba(255,255,255,0.5);
--opa-white07:rgba(255,255,255,0.7);
--opa-white09:rgba(255,255,255,0.9);

--opa-black01:rgba(0,0,0,0.08);
--opa-black02:rgba(0,0,0,0.2);
--opa-black04:rgba(0,0,0,0.35);	
--opa-black05:rgba(0,0,0,0.5);
--opa-blue01:rgba(0, 79, 175, 0.05);	

--opa-red01 :rgba(231, 0, 13,0.1);
	
--opa-orange01:#fbf7ec;
--opa-orange03:#ffeab0;
	
/*fontsize*/
--font-mc:clamp(0.75rem, 3vw, 0.8rem);
--font-em:clamp(0.8rem, 3vw, 1.0rem);
--font-h6:clamp(1.0rem, 3vw, 1.1rem);
--font-h5:clamp(1.2rem, 3vw, 1.3rem);
--font-h4:clamp(1.4rem, 3vw, 1.8rem);
--font-h3:clamp(1.6rem, 3vw, 2.5rem);
--font-h2:clamp(1.7rem, 3vw, 3.2rem);
--font-h1:clamp(2.5rem, 8vw, 5rem);

/*flex-basis*/
--flex-10:10%;
--flex-12:12%;	
--flex-15:15%;	
--flex-20:20%;
--flex-22:22%;
--flex-25:24.5%;
--flex-28:28%;
--flex-30:30%;
--flex-32:32%;
--flex-33:32.99%;	
--flex-35:35%;
--flex-40:40%;
--flex-42:42%;	
--flex-45:45%;
--flex-47:47%;	
--flex-48:48%;
--flex-49:49%;	
--flex-50:50%;
--flex-55:55%;
--flex-60:60%;
--flex-65:65%;
--flex-70:70%;
--flex-72:72%;	
--flex-75:75%;
--flex-80:80%;
--flex-85:85%;	
--flex-90:90%;
--flex-95:95%;	
--flex-100:100%;	


/*width*/
--width160:clamp(80px,90vw,160px);
--width240:240px;
--width360:360px;
--width400:400px;	
--width480:480px;
--width640:640px;	

/*line height*/
--lh-lg:2.4;
--lh-md:2.0;
--lh-sm:1.5;
--lh-mc:1.1;	

/*font-weight*/
--wght-100:100;
--wght-300:300;
--wght-500:500;
--wght-600:600;
--wght-700:bold;	

}

/*font-family*/
.gs {font-family: var(--gs);}
.engs {
	font-family: var(--engs); 
	letter-spacing: 1px;
}

/*font-size*/
.h1-title {font-size: var(--font-h1) !important; line-height: inherit;}
.h2-title {font-size: var(--font-h2) !important;}
.h3-title {font-size: var(--font-h3) !important;}
.h4-title {font-size: var(--font-h4);}
.h5-title {font-size: var(--font-h5) !important;}
.h6-title {font-size: var(--font-h6) !important;}
.em-title {font-size: var(--font-em) !important;}
.mc-title {font-size: var(--font-mc) !important;}

/*line-height*/
.lh-em {line-height: var(--lh-em) !important;}
.lh-sm {line-height: var(--lh-sm);}
.lh-md {line-height: var(--lh-md);}
.lh-lg {line-height: var(--lh-lg);}

/*color*/
.red {color: var(--red);}
.black {color: var(--black) !important;}
.white,.white mark {color: var(--white);}
.blue {color: var(--blue);}
.navy {color: var(--navy);}
.lightgray {color: var(--lightgray);}
.gray {color: var(--gray);}
.dgray {color: var(--darkgray);}
.darkblue {color: var(--darkblue);}
.aqua {color: var(--aqua);}
.line {color: var(--line);}

/*position*/
.pos-re {position: relative;}
.pos-ab {position: absolute;}

/*background*/
.bg-lightgray {background: var(--lightgray);}
.bg-navy {background: var(--navy);}
.bg-white {background: var(--white) !important;}
.bg-lightblue {background:var(--lightblue);}
.bg-beige {background:var(--beige);}
.bg-black {background: var(--black) !important;}
.bg-darkblue {background: var(--darkblue);}
.bg-orange {background: var(--orange);}

/*width*/
.width240 {max-width: var(--width240);}
.width360 {max-width: var(--width240);}
.width480 {max-width: var(--width480) !important;}
.width640 {max-width: var(--width640);}

/*inner*/
.small-inner {max-width:var(--small-inner);}
.medium-inner {max-width: var(--medium-inner);}
.large-inner{max-width: var(--large-inner) !important;}
.full-inner{max-width: var(--full-inner);}
.m-auto {margin: auto !important;}

/*width*/
.flex-100 {width: var(--flex-100);}

/*weight*/
.wght-100 {font-weight: 100;}
.wght-400 {font-weight: 400;}
.wght-500 {font-weight: 500;}
.wght-600 {font-weight: 600;}
.wght-700 {font-weight: bold;}

/*text-decoration*/
.under-white {border-bottom: 1px solid var(--opa-white05); padding: 0 0 10px;}
.under-white:hover {border-bottom: 1px solid transparent;}

/*flex*/
.flex {display: flex;}
.wrap {flex-wrap: wrap;}
.item-center {align-items: center;}
.item-top {align-items: flex-start;}

/*lettter-spacing*/
.space-1{letter-spacing: 1px;}

/*gap*/
.gap-10 {gap:5px;}
.gap-20 {gap: clamp(10px, 3vw, 20px);}
.gap-30 {gap: clamp(15px, 3vw, 30px);}
.gap-50 {gap: clamp(50px, 3vw, 50px);}
.gap-80 {gap: clamp(30px, 3vw, 80px);}

.gap-6030 {gap:60px 30px}

/*radius*/
.radius-10 {border-radius:10px;}
.radius-20 {border-radius:20px;}
.radius-30 {border-radius:30px;}

/*padding*/
/*0.739rem + 0.68vw 320-1200*/
.pa-10 {padding: 5px;}
.pa-20 {padding: 10px;}
.pa-30 {padding: 15px;}
.pa-50 {padding: clamp(1.563rem, 0.827rem + 3.68vw, 3.125rem); box-sizing: border-box;} /*25/50*/
.pa-80 {padding: clamp(40px, 0.668rem + 1.03vw, 80px); box-sizing: border-box;}
.pa-100 {padding: 30px;}

.ptb-30 {padding: 15px 0;}
.ptb-50 {padding:clamp(25px, 10vw,50px) 0;}
.ptb-100 {padding:clamp(50px, 10vw,100px) 0;}
.ptb-150 {padding: clamp(75px, 10vw,150px) 0;}

.pb-10 {padding: 0 0 5px;}
.pb-30 {padding: 0 0 15px;}
.pb-50 {padding: 0 0 25px;}
.pb-100 {padding-bottom:clamp(50px, 10vw, 100px);}
.pb-150 {padding-bottom:clamp(70px, 10vw, 150px);}


/*margin*/
.mb-10 {margin-bottom: clamp(5px, 10vw, 10px);}
.mb-20 {margin-bottom: clamp(10px, 10vw, 20px);}
.mb-30 {margin-bottom: clamp(15px, 10vw, 30px);}
.mb-50 {margin-bottom: clamp(25px, 3vw, 50px);}
.mb-80 {margin-bottom: clamp(40px, 5vw, 80px);}
.mb-150 {margin-bottom:clamp(80px, 10vw, 150px);}	

.mtb-80 {margin:clamp(40px, 10vw, 80px) 0;}	

.mt-30 {margin-top: clamp(15px, 10vw, 30px);}
.mt-50 {margin-top: clamp(25px, 10vw, 50px);}
.mt-150 {margin-top: clamp(75px, 10vw, 150px);}

/*category*/
.center {display: block; margin: auto; text-align: center;}

::before {
font-family: "Font Awesome 6 Free";
font-weight: 600;
}
.grd-title .grd-line {
	margin: auto;
}
.grd-line {
	position: relative;
	max-width: max-content;
	padding: 0 10px;
}
.grd-line:before {
    content: "";
    position: absolute;
    bottom: 10%;
    width: var(--flex-100);
    height: 20px;
    background: rgba(255, 255, 0, 0.3);
    z-index: -1;
    left: 0;
    padding: 0 3px;
}

.pc {display: none !important;}
.sp {display: block !important;}

.new {color: var(--red);}

.fade {
  opacity: 0;
 	transition: .6s;
	transition-delay:0.6s;
}
.mv-fade {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);	
}
	
.sec-title {
	margin:0 auto 30px;
}
.efc-title {
  display: flex;
  overflow: hidden;
  justify-content: center;
  /* margin: 0 0 5px; */
}

.efc-title span {
	display: block;
	transform: translate(0, 100%);
	transition-delay: .10s;
	transition: transform cubic-bezier(0.215, 0.61,0.35,1) 0.8s;
}

.efc-title.visible span {
  transform: translate(0, 0);
}	
/*+++++++++++++++++++++++*/

body {
	margin: 0;
	overflow-x: hidden;
	font-family: var(--gs);
}

a {
	color: inherit;
	text-decoration: none;
}

.maxwidth {
    max-width:max-content;
}

/*+++++++++++++++++++++++*/
/*common BASE
/*+++++++++++++++++++++++*/
#wrapper {
	overflow: hidden;
}

aside {
	width: 0;
	top: 0;
	height: var(--flex-100);
	left: 0;
	z-index: 5;
}
.aside-fixed {
	display: none;
	position: absolute;
	bottom: 0;
	padding: 20px;
	right: 0;
	left: 0;
	margin: auto;
}
.aside-fixed img {
	width:25px;
	margin: auto;
	text-align: center;
	display: block;
}

.aside-fixed .aside-en {
	writing-mode: vertical-rl;
	color: var(--white);
	font-family: var(--engs);
	font-weight: var(--wght-600);
	letter-spacing: 2px;
	padding: 35px 5px;
	font-size: 0.9rem;
}

/*+++++++++++++++++++++++*/
img {
    height: auto;
	vertical-align: bottom;
	max-width: var(--flex-100);
}

.br {display: none;}
.br2{display: block;}

/*+++++++++++++++++++++++*/
/*button
/*+++++++++++++++++++++++*/
.smbutton-white {
	background: var(--white) !important;
	border:1px solid var(--black) !important;
}

.smbutton-white span {
	color: var(--black) !important;
}

.smbutton-white:before {
	color:var(--black) !important;
}

.smbutton-white::after {
	 color: var(--white) !important;
	 background: var(--black) !important;
	}

.smbutton:before {
	content:"";
	background: var(--black);
	position: absolute;
	right: -1.8rem;
	height: 100%;
	width: 3px;
	transform: skew(-20deg);
}
.smbutton {
	/* background: var(--black); */
	max-width: max-content;
	position: relative;
}
.smbutton a{
	background: var(--black);
	/* border-bottom: 1px solid var(--opa-black01); */
	padding: 20px 30px 20px 30px;
	font-size: var(--font-mc);
	position: relative;
	color: var(--white);
	width: auto;
	max-width: max-content;
	display: block;
	right: -2rem;
	overflow: hidden;
	margin: 0;
	font-weight: var(--wght-600);
	transition: all 280ms cubic-bezier(.25, .46, .45, .94);
	-webkit-transform: skewX(-20deg) rotate(.00001deg);
	transform: skewX(-20deg) rotate(.00001deg);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	font-variant-east-asian: normal;
	-webkit-font-feature-settings: normal;
	font-feature-settings: normal;
}
.smbutton span {
	position:relative;
	max-width: max-content;
	padding: 0 80px 0 0;
	-webkit-transform: skewX(15deg) rotate(.00001deg);
	transform: skewX(15deg) rotate(.00001deg);
	/* -webkit-transform-origin: 0 0; */
	transform-origin: 0 0;
	display: block;
}
.smbutton .icon-arrow {
	top: 0;
	margin: auto;
	background: none;
	height: auto;
	padding: 18px 0;
}

.smbutton::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    /* height: 100%; */
    /* color: var(--black); */
    transform: scale(0, 1);
    /* transform-origin: right top; */
    transition: transform .5s;
    z-index: 0;
 }

.smbutton:hover:after {
	 transform-origin: left top;
	transform: scale(1, 1);
	 bottom: -1.2rem;
}
.mdbutton {
	border: 1px dashed var(--gray);
	padding: 15px 30px 15px;
	display: block;
	max-width: max-content;
	margin: auto;
	position: relative;
	font-size: var(--font-em);
	font-weight: var(--wght-500);
}
.mdbutton:before {
	content:"";
	position: absolute;
	background: linear-gradient(90deg, currentColor 0.1em, rgba(0, 0, 0, 0) 0.5em calc(100% - 0.5em), currentColor calc(100% - 0.5em)) 0% 0%/100% 1px,linear-gradient(90deg, currentColor 0.5em, rgba(0, 0, 0, 0) 0.5em calc(100% - 0.5em), currentColor calc(100% - 0.5em)) 0% 100%/100% 1px,linear-gradient(0deg, currentColor 0.5em, rgba(0, 0, 0, 0) 0.5em calc(100% - 0.5em), currentColor calc(100% - 0.5em)) 0% 0%/1px 100%,linear-gradient(0deg, currentColor 0.5em, rgba(0, 0, 0, 0) 0.5em calc(100% - 0.5em), currentColor calc(100% - 0.5em)) 100% 0%/1px 100%;
	padding: 10px 5px;
	top: 0;
	left: 0;
	/* border-bottom: none; */
	border-right: none;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	background-repeat: no-repeat;
}
.mdbutton span {
	position: relative;
	z-index: 1;
}

.mdbutton::after {
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 content: '';
	 width: 100%;
	 height: 100%;
	 color: var(--black);
	 background: #fff;
	 transform: scale(0, 1);
	 transform-origin: right top;
	 transition: transform .5s;
	 z-index: 0;
	}

	/*++++++++++++++++
	arrow
	+++++++++++++++++*/

	.icon-arrow {
		width: 40px;
		height: 40px;
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 100%;
		position: absolute;
		bottom: 0;
		z-index: 8;
		right: 0;
		margin: 20px;
		transform: skewX(15deg) rotate(.00001deg);
	}
	.icon-arrow span {
	display: block;
	width: 20px;
	height: 20px;
	position: relative;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}
	.icon-arrow span::before, .icon-arrow span::after {
	display: block;
	content: "\f061";
	width: 100%;
	height: 100%;
	position: absolute;
	transition:.3s;
	top: 0;
	left: 0;
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
	font-size: 16px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	}

.icon-arrow span::before {
  transform: translate(-100%, 0);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.icon-arrow span::after {
  transform: translate(0, 0);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}



@media screen and (min-width: 767px) {
/*category*/
.center {}

::before {
font-family: "Font Awesome 6 Free";
font-weight: 600;
}
.grd-title .grd-line {
	margin: auto;
}
.grd-line {
	position: relative;
	max-width: max-content;
	padding: 0 10px;
}
.grd-line:before {
    content: "";
    position: absolute;
    bottom: 10%;
    width: var(--flex-100);
    height: 20px;
    background: rgba(255, 255, 0, 0.3);
    z-index: -1;
    left: 0;
    padding: 0 3px;
}

.pc {display: none !important;}
.sp {display: block !important;}

.new {color: var(--red);}

/*+++++++++++++++++++++++*/

/*++++++++++++++++
inview
+++++++++++++++++*/
.view-up1 {
opacity: 0;
transform: translate(0, 10px);
 -webkit-transform: translate(0, 10px);	
transition: .7s;
transition-delay:0.7s;
}

.view-up2 {
opacity: 0;
transform: translate(0, 10px);
-webkit-transform: translate(0, 10px);		
transition: .8s;
transition-delay:0.8s;	
}
.view-up3 {
opacity: 0;
transform: translate(0, 10px);
-webkit-transform: translate(0, 10px);		
transition: .9s;
transition-delay:0.9s;	
}
.view-up4 {
opacity: 0;
transform: translate(0, 10px);
-webkit-transform: translate(0, 10px);		
transition: .10s;
transition-delay:1.0s;	
}	

.mv-up {
opacity: 1.0;
}

	
/*+++++++++++++++++++++++*/
/*common BASE
/*+++++++++++++++++++++++*/

.aside-fixed img {
	width:25px;
	margin: auto;
	text-align: center;
	display: block;
}

.aside-fixed .aside-en {
}

/*+++++++++++++++++++++++*/
img {
}

.br {display: none;}
.br2{display: block;}

/*+++++++++++++++++++++++*/
/*button
/*+++++++++++++++++++++++*/

.smbutton:before {
}

.smbutton::after {
	}
.smbutton:hover:after {
	 transform-origin: left top;
	transform: scale(1, 1);
}

}


@media screen and (min-width: 1024px) {
.efc-title {
	justify-content:left;
}

.grd-title .grd-line {
	display: inline-block;
	padding: 0;
}

::before {
font-family: "Font Awesome 6 Free";
font-weight: 600;
}
.grd-title .grd-line {
	margin: auto;
}
.grd-line {
	position: relative;
	max-width: max-content;
	padding: 0 10px;
}
.grd-line:before {
    content: "";
    position: absolute;
    bottom: 10%;
    width: var(--flex-100);
    height: 20px;
    background: rgba(255, 255, 0, 0.3);
    z-index: -1;
    left: 0;
    padding: 0 3px;
}

.pc {display: none !important;}
.sp {display: block !important;}

.new {color: var(--red);}

/*+++++++++++++++++++++++*/
.scale {
	transition: .5s;
	transform: scale(1.0);
}
.scale:hover {
	transition: .5s;
	transform: scale(1.1);
}
/*+++++++++++++++++++++++*/
/*common BASE
/*+++++++++++++++++++++++*/

aside {
	width: 7%;
}
.aside-fixed {
}
.aside-fixed img {
	width:25px;
	margin: auto;
	text-align: center;
	display: block;
}

.aside-fixed .aside-en {
}

/*+++++++++++++++++++++++*/
img {
}

.br {display: none;}
.br2{display: block;}


/*+++++++++++++++++++++++*/
/*button
/*+++++++++++++++++++++++*/
.smbutton-white:hover:before,
.smbutton-white:hover span {
	color:var(--white) !important;
}

.smbutton:before {
}
.smbutton:hover:before {
	color:var(--white);
}
.smbutton::after {
	}
.smbutton:hover:after {
	transition-delay:.3s;
	transform-origin: left top;
	transform: scale(1, 1);
	height:1px;
	/* background:var(--black); */
}


.mdbutton {
	font-size: var(--font-em);
}
.mdbutton:before {
	content:"";
	position: absolute;
	background: linear-gradient(90deg, currentColor 0.1em, rgba(0, 0, 0, 0) 0.5em calc(100% - 0.5em), currentColor calc(100% - 0.5em)) 0% 0%/100% 1px,linear-gradient(90deg, currentColor 0.5em, rgba(0, 0, 0, 0) 0.5em calc(100% - 0.5em), currentColor calc(100% - 0.5em)) 0% 100%/100% 1px,linear-gradient(0deg, currentColor 0.5em, rgba(0, 0, 0, 0) 0.5em calc(100% - 0.5em), currentColor calc(100% - 0.5em)) 0% 0%/1px 100%,linear-gradient(0deg, currentColor 0.5em, rgba(0, 0, 0, 0) 0.5em calc(100% - 0.5em), currentColor calc(100% - 0.5em)) 100% 0%/1px 100%;
	padding: 10px 5px;
	top: 0;
	left: 0;
	/* border-bottom: none; */
	border-right: none;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	background-repeat: no-repeat;
}
.mdbutton span {
}
.mdbutton:hover:before,
a:hover .mdbutton span{
	color:var(--white);
}
.mdbutton::after {
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 content: '';
	 width: 100%;
	 height: 100%;
	 color: var(--black);
	 background: #fff;
	 transform: scale(0, 1);
	 transform-origin: right top;
	 transition: transform .5s;
	 z-index: 0;
	}
a:hover .mdbutton:after {
	 transform-origin: left top;
	transform: scale(1, 1);
	background: var(--black);
}
    
    

a:hover .icon-arrow span::before {
    transform: translate(0, 0);
  }
a:hover .icon-arrow span::after {
    transform: translate(100%, 0);
  }
    

}


@media screen and (min-width: 1200px) {
.pc {display: block !important;}
.sp {display: none !important;}
.br {display: block;}
.br2{display: none;}


::before {
font-family: "Font Awesome 6 Free";
font-weight: 600;
}
.grd-title .grd-line {
	margin: auto;
}
.grd-line {
	position: relative;
	max-width: max-content;
	padding: 0 10px;
}
.grd-line:before {
    content: "";
    position: absolute;
    bottom: 10%;
    width: var(--flex-100);
    height: 20px;
    background: rgba(255, 255, 0, 0.3);
    z-index: -1;
    left: 0;
    padding: 0 3px;
}

.pc {}
.sp {}

.new {color: var(--red);}

/*+++++++++++++++++++++++*/

.scale {
	transition: .5s;
	transform: scale(1.0);
}
.scale:hover {
}
/*+++++++++++++++++++++++*/
/*common BASE
/*+++++++++++++++++++++++*/

.aside-fixed {padding: 15px;text-align: center;}
.aside-fixed img {
	width:25px;
	margin: auto;
	text-align: center;
	display: block;
}

.aside-fixed .aside-en {
}

/*+++++++++++++++++++++++*/
img {
}


/*+++++++++++++++++++++++*/
/*button
/*+++++++++++++++++++++++*/
.smbutton {
}
.smbutton:hover {
	transition:.3s;	
}
.smbutton span {
}
.smbutton:before {
}
.smbutton:hover:before,
.smbutton:hover span {
	/* color:var(--black); */
}
.smbutton::after {
	}
.smbutton:hover:after {
	 transform-origin: left top;
	transform: scale(1, 1);
}


.mdbutton {max-width: max-content;}
.mdbutton:before {
	content:"";
	position: absolute;
	background: linear-gradient(90deg, currentColor 0.1em, rgba(0, 0, 0, 0) 0.5em calc(100% - 0.5em), currentColor calc(100% - 0.5em)) 0% 0%/100% 1px,linear-gradient(90deg, currentColor 0.5em, rgba(0, 0, 0, 0) 0.5em calc(100% - 0.5em), currentColor calc(100% - 0.5em)) 0% 100%/100% 1px,linear-gradient(0deg, currentColor 0.5em, rgba(0, 0, 0, 0) 0.5em calc(100% - 0.5em), currentColor calc(100% - 0.5em)) 0% 0%/1px 100%,linear-gradient(0deg, currentColor 0.5em, rgba(0, 0, 0, 0) 0.5em calc(100% - 0.5em), currentColor calc(100% - 0.5em)) 100% 0%/1px 100%;
	padding: 10px 5px;
	top: 0;
	left: 0;
	/* border-bottom: none; */
	border-right: none;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	background-repeat: no-repeat;
}
.mdbutton span {
}
.mdbutton:hover:before,
a:hover .mdbutton span{
}
.mdbutton::after {
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 content: '';
	 width: 100%;
	 height: 100%;
	 color: var(--black);
	 background: #fff;
	 transform: scale(0, 1);
	 transform-origin: right top;
	 transition: transform .5s;
	 z-index: 0;
	}
a:hover .mdbutton:after {
	 transform-origin: left top;
	transform: scale(1, 1);
	background: var(--black);
}

}

@media screen and (min-width: 1400px) {
	aside {
		width:100px;
		left: 0;
		background: var(--black);
	}

}

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


}