@charset "UTF-8";
/* CSS Document */
:root{
}
body{margin: 0px !important;}
h1,h2,h3,h4,h5,h6{margin: 0;}
ul {
    display: block;
    list-stslideyle-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
*{
    min-height: 0;
    min-width : 0;
}
#er{
	width: 100%;
	position: relative;
    margin: 0 auto;
    box-sizing: border-box;  
    font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 11px;
	color: #111;
	line-height: 2.0; 
	letter-spacing: 1px;
	background: #EAEAEA;
}
#er a {
	text-decoration: none;
	color: #2b2b2b;
}
#er p {
    margin: 0;
}
#er a:hover {
	opacity: 1;
}
#er .clear{
	clear: both;
}
#er img{
    width: 100%;
    line-height: 0;
}
#er ul,#er li {
	list-style: none;
	padding: 0;
	margin: 0;
}
#er .f-en {
	font-family: "arial", sans-serif;
    font-style: normal;
}

/*  #main_visual
**************************************************/
#er #main_visual {
	width: 100%;
	margin: 0 0 10%;
}
#er #main_visual .main_visual_top {
	position: relative;
	overflow: hidden;
}
#er #main_visual .main_visual_top .ttl {
	position: absolute;
    width: 74%;
    top: 44%;
    left: 0;
    right: 0;
    margin: 0 auto;
	filter: drop-shadow(8px 8px 8px #555555);
}
#er #main_visual .main_visual_top .brand {
	position: absolute;
    width: 74%;
    bottom: 6%;
    left: 0;
    right: 0;
    margin: 0 auto;
	filter: drop-shadow(8px 8px 8px #555555);
}
#er #main_visual .read {
	text-align: center;
    font-size: 12px;
    line-height: 1.8;
    margin: 6% auto 4%;
}
#er #main_visual .accordionmenu {
    max-width: 80%;
    margin: 0 auto;
    margin-bottom: 7px;
    background-color: #1a1a1a;
    border-radius: 25px;
}

#er #main_visual .accordionmenu summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2.5em;
    color: #ffffff;
    font-weight: 400;
    cursor: pointer;
}

#er #main_visual .accordionmenu summary::-webkit-details-marker {
    display: none;
}

#er #main_visual .accordionmenu summary::after {
    width: 14px;
    height: 14px;
    content: url(../img/yaji.svg);
    transition: transform .3s;
}

#er #main_visual .accordionmenu[open] summary::after {
    transform: rotate(180deg);
}
#er #main_visual .accordionmenu p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1.5em 2em 1.5em;
    color: #111;
    transition: transform .5s, opacity .5s;
	background: #fff;
    border-bottom: solid #222222 1px;
}
#er #main_visual .accordionmenu p:last-of-type {
    border-bottom: none;
}

#er #main_visual .accordionmenu[open] p {
    transform: none;
    opacity: 1;
}
#er #main_visual .accordionmenu p img {
    display: block;
	width: 54%;
	margin: 0 auto;
}

@media only screen and (min-width: 769px)  {
	#er {
		display: flex;
        align-items: flex-start;
        justify-content: space-between;
	}
	#er #main_visual {
		width: 26%;
        margin: 0;
        position: sticky;
        top: 0;
        left: 0;
	}
	#er #main_visual .main_visual_top .ttl {
		top: 28%;
	}
	#er #main_visual .read {
		font-size: 11px;
		margin: 4% auto 4%;
	}
	#er #main_visual .accordionmenu p {
		padding: 1.2em 2em 1.2em;
	}
	#er #main_visual .accordionmenu p a img {
		width: 48%;
	}
}

/* SPのみ：accordionmenu を画面上部2%に到達したら固定追従
   ※ sticky は親(#main_visual)の高さ内でしか効かないため、
      SPでは #main_visual を display:contents にして
      #er 全体を追従範囲にしている（PCには影響なし）
**************************************************/
@media only screen and (max-width: 768px)  {
	#er #main_visual {
		display: contents;
	}
	#er #main_visual .accordionmenu {
		position: sticky;
        top: 1vh;
        z-index: 100;
        margin-bottom: 10%;
        opacity: .8;
	}
	#er #main_visual .accordionmenu[open] {
		max-height: 96vh;
		max-height: 96dvh;
		overflow-y: auto;
	}
}


/*  contents section
**************************************************/
#er #contents {
	position: relative;
}
#er #contents section {
	width: 100%;
	margin: 0% auto;
	padding: 20% 0 0 0;
	overflow: hidden;
}
#er #contents section:last-of-type {
	padding-bottom: 0;
}
#er #contents section .midasi_brand {
	width: 66%;
	margin: 0 auto 12%;
}
#er #contents section .personal {
	margin-bottom: 18%;
}
#er #contents section .personal .profile {
	display: flex;
	justify-content: space-between;
	border-bottom: solid 1px #111;
	padding: 0 4% 4%;
}
#er #contents section .personal .profile div {
	font-size: 17px;
	line-height: 1.3;
}
#er #contents section .personal .profile div span.shop {
	display: block;
	font-size: 68%;
	color: #838383;
}
#er #contents section .personal .profile div span.height {
	margin-left: 8px;
	font-size: 68%;
	color: #838383;
}
#er #contents section .personal .profile a {
	display: block;
    width: 36%;
    border: solid 2px #111;
    border-radius: 50px;
}
#er #contents section .personal .profile a img {
    display: block;
    width: 66%;
    margin: 0 auto;
    padding: 6px 0 0 0;
    line-height: 0;
}
#er #contents section .personal .collage_area {
	position: relative;
}
#er #contents section .personal .pic {
	line-height: 0;
}
#er #contents section .personal .collage_area .mainitem {
	position: absolute;
    width: 36%;
	z-index: 3;
}
#er #contents section .personal .collage_area .creditbox {
	position: absolute;
    width: 44%;
}
#er #contents section .personal .collage_area .creditbox h3 {
	font-size: 17px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: .5px;
}
#er #contents section#cl .personal:nth-of-type(4) .collage_area .creditbox h3 {
	font-size: 16px;
}
#er #contents section .personal .collage_area .creditbox h3 span {
	display: block;
	font-size: 50%;
	line-height: 2.2;
}
#er #contents section .personal .collage_area .creditbox a {
	padding: 0 2%;
    display: flex;
    justify-content: space-between;
    border-bottom: dotted #111 2px;
	font-size: 12px;
}
#er #contents section .personal .collage_area .creditbox a img {
	width: 4%;
}
#er #contents section .personal .comment {
	width: 72%;
	margin: 4% auto 0;
}
#er #contents section .personal .comment p {
	margin: 0 auto 6%;
}
#er #contents section .personal .comment h4 {
	font-size: 17px;
    font-weight: 400;
}
#er #contents section .personal .comment a {
	display: block;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 7px;
    background-color: #565656;
    border-radius: 50px;
}
#er #contents section .personal .comment a img {
    width: 74%;
    margin: 0 auto;
    display: block;
    padding: 3% 0;
}

@media only screen and (min-width: 769px)  {
	#er #contents  {
		width: 70%;
        margin: 0 2% 0 auto;
		padding-top: 80px;
	}
	#er #contents section {
		padding: 0;
	}
	#er #contents section#br {
		padding-bottom: 0px;
	}
	#er #contents section .flex {
		display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
	}
	#er #contents section .flex .personal {
		width: 44%;
		margin-bottom: 120px;
	}
	#er #contents section#br .flex .personal {
		margin-bottom: 80px;
	}
	#er #contents section .midasi_brand {
		width: 46%;
        max-width: 400px;
        margin: 0 auto 80px;
	}
	#er #contents section .personal .profile div {
		font-size: 21px;
		line-height: 1.6;
	}
	#er #contents section .personal .profile a {
		display: block;
		max-height: 34px;
	}
	#er #contents section .personal .profile a img {
		padding: 6px 0 0 0;
		max-width: 100px;
	}
	#er #contents section .personal .comment a img {
        width: 60%;
		padding: 2% 0;
	}
	#er #contents section .personal .collage_area .creditbox h3 {
		font-size: 20px;
	}
	#er #contents section .personal .profile div span.shop {
		font-size: 58%;
	}
	#er #contents section .personal .collage_area .creditbox a {
		font-size: 14px;
	}
}

/*  type_a
************************/
#er #contents section .personal .collage_area.type_a {
	position: relative;
	height: 172vw;
}
#er #contents section#ch .personal:nth-of-type(5) .collage_area.type_a {
	height: 182vw;
}
#er #contents section .personal .collage_area.type_a .pic:nth-of-type(1) {
	position: relative;
    width: 52%;
    margin: 5% 0 0 4%;
    border: solid 1px #111;
    z-index: 2;
}
#er #contents section .personal .collage_area.type_a .pic:nth-of-type(2) {
	position: absolute;
    width: 48%;
    top: 26%;
    right: 0;
}

#er #contents section .personal .collage_area.type_a .pic:nth-of-type(3) {
	position: absolute;
    width: 74%;
    bottom: 0%;
	border: solid 1px #111;
}
#er #contents section .personal .collage_area.type_a .mainitem {
    top: 2%;
    right: 4%;
}
#er #contents section#by .personal:nth-of-type(1) .collage_area.type_a .mainitem {
    top: -1%;
    right: 7%;
	width: 33%;
}
#er #contents section#ch .personal:nth-of-type(5) .collage_area.type_a .mainitem {
    top: 0%;
}
#er #contents section#ch .personal:nth-of-type(5) .collage_area.type_a .pic:nth-of-type(2) {
	top: 29%;
}
#er #contents section#cl .personal:nth-of-type(5) .collage_area.type_a .mainitem {
    width: 37%;
    right: 3%;
}

#er #contents section .personal .collage_area.type_a .creditbox {
	margin: 4% 0 0 4%;
}

@media only screen and (min-width: 769px)  {
	#er #contents section#by .personal:nth-of-type(1) .collage_area.type_a .mainitem {
		top: 0%;
	}
	#er #contents section#ch .personal:nth-of-type(5) .collage_area.type_a {
		height: 56vw;
	}
	#er #contents section .personal .collage_area.type_a .pic:nth-of-type(2) {
		top: 28%;
	}
	#er #contents section .personal .collage_area.type_a .creditbox {
		margin: 8% 0 0 4%;
	}
	#er #contents section#ch .personal:nth-of-type(5) .collage_area.type_a .mainitem {
		top: -1%;
	}
}


/*  type_b
************************/
#er #contents section .personal .collage_area.type_b {
	position: relative;
	height: 164vw;
}
#er #contents section .personal .collage_area.type_b .pic:nth-of-type(1) {
	position: relative;
    width: 58%;
    margin: 5% 0 0 auto;
}
#er #contents section .personal .collage_area.type_b .pic:nth-of-type(2) {
	position: absolute;
    width: 44%;
    bottom: 0%;
    right: 8%;
	border: solid 1px #111;
}
#er #contents section .personal .collage_area.type_b .pic:nth-of-type(3) {
	position: absolute;
    width: 44%;
    bottom: 0%;
    left: 0;
	border: solid 1px #111;
}
#er #contents section#cl .personal .collage_area.type_b .mainitem {
    top: 0;
}
#er #contents section .personal .collage_area.type_b .mainitem {
    width: 33%;
    top: 4%;
    left: 4%;
}
#er #contents section#by .personal:nth-of-type(2) .collage_area.type_b .mainitem {
    width: 36%;
    left: 2%;
}
#er #contents section#br .personal:nth-of-type(1) .collage_area.type_b .mainitem {
    top: 0%;
}
#er #contents section .personal .collage_area.type_b .creditbox {
	margin: 4% 0 0 3%;
    top: 30%;
    width: 36%;
}
#er #contents section#by .personal:nth-of-type(2) .collage_area.type_b .creditbox {
	top: 28%;
}

@media only screen and (min-width: 769px)  {
	#er #contents section .personal .collage_area.type_b .pic:nth-of-type(2) {
    position: absolute;
    width: 45%;
    bottom: 2%;
	}
	#er #contents section .personal .collage_area.type_b .pic:nth-of-type(3) {
    position: absolute;
    width: 45%;
    bottom: 2%;
	}
	#er #contents section#by .personal:nth-of-type(2) .collage_area.type_b .creditbox {
		top: 26%;
	}
}


/*  type_c
************************/
#er #contents section .personal .collage_area.type_c {
	position: relative;
	height: 184vw;
}
#er #contents section .personal .collage_area.type_c .pic:nth-of-type(1) {
	position: relative;
    width: 62%;
    margin: 5% 0 0 0;
    z-index: 2;
}
#er #contents section .personal .collage_area.type_c .pic:nth-of-type(2) {
	position: absolute;
    width: 42%;
    top: 35%;
    right: 4%;
    z-index: 2;
	 border: solid 1px #111;
}
#er #contents section .personal .collage_area.type_c .pic:nth-of-type(3) {
	position: absolute;
    width: 72%;
    bottom: 0%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#er #contents section .personal .collage_area.type_c .mainitem {
    top: 5%;
    right: 3%;
}
#er #contents section#by .personal:nth-of-type(3) .collage_area.type_c .mainitem {
    width: 39%;
}
#er #contents section#ch .flex .personal:nth-of-type(1) .collage_area.type_c .mainitem {
    top: 1%;
}
#er #contents section#ch .personal:nth-of-type(3) .collage_area.type_c .mainitem {
    width: 38%;
}
#er #contents section#cl .flex .personal:nth-of-type(1) .collage_area.type_c .mainitem {
    top: 1%;
}
#er #contents section .personal .collage_area.type_c .creditbox {
	margin: 4% 0 0 4%;
}

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


/*  type_d
************************/
#er #contents section .personal .collage_area.type_d {
	position: relative;
	height: 173vw;
}
#er #contents section .personal .collage_area.type_d .pic:nth-of-type(1) {
	position: relative;
    width: 62%;
    margin: 5% auto 0 4%;
    z-index: 2;
}
#er #contents section .personal .collage_area.type_d .pic:nth-of-type(2) {
	position: absolute;
    width: 46%;
    top: 48%;
    right: 4%;
    z-index: 2;
}
#er #contents section#cl .personal:nth-of-type(4) .collage_area.type_d .pic:nth-of-type(2) {
	top: 51%;
}
#er #contents section .personal .collage_area.type_d .pic:nth-of-type(3) {
	position: absolute;
    width: 42%;
    bottom: 0%;
	border: solid 1px #111;
}
#er #contents section .personal .collage_area.type_d .mainitem {
    top: 2%;
    right: 3%;
}

#er #contents section .personal .collage_area.type_d .creditbox {
	top: 28%;
    right: 3%;
    z-index: 3;
    width: 35%;
}
#er #contents section#er .personal:nth-of-type(2) .collage_area.type_b .creditbox {
    top: 28%;
}
#er #contents section#bl .personal:nth-of-type(4) .collage_area.type_b .creditbox {
    top: 33%;
}
#er #contents section#cl .personal:nth-of-type(4) .collage_area.type_d .creditbox {
	top: 32%;
}
#er #contents section#br .personal:nth-of-type(2) .collage_area.type_d .creditbox {
	top: 26%;
}

#er #contents section#er .personal:nth-of-type(2) .collage_area.type_b .mainitem {
	width: 35%;
    top: 5%;
}

#er #contents section#er .personal:nth-of-type(3) .collage_area.type_c .mainitem {
	width: 39%;
    top: 7%;
    right: 2%;
}
#er #contents section#bl .personal:nth-of-type(4) .collage_area.type_b .mainitem {
	width: 29%;
    top: 3%;
    left: 6%;
}

#er #contents section#ch .personal:nth-of-type(2) .collage_area.type_d .mainitem {
    top: -2%;
    right: 2%;
}
#er #contents section#cl .personal:nth-of-type(4) .collage_area.type_d .mainitem {
    top: -2%;

}

@media only screen and (min-width: 769px)  {
	#er #contents section .personal .collage_area.type_a,
	#er #contents section .personal .collage_area.type_b,
	#er #contents section .personal .collage_area.type_c,
	#er #contents section .personal .collage_area.type_d {height: 56vw;}
	
	#er #contents section#bl .personal .collage_area.type_b .mainitem {
		top: 2%;
	}
	#er #contents section#bl .personal:nth-of-type(4) .collage_area.type_b .creditbox {
		top: 30%;
	}
}

/* lineup
**************************************************/
#er #contents section .lineup {
	--u: min(1vw, 5px); 
	background: #B3ADA0;
	padding: calc(var(--u) * 19.5) 0 calc(var(--u) * 14);
}
#er #contents section .lineup .brlogo {
	width: 34%;
	margin: 0 auto;
}
#er #contents section .lineup h4 {
	font-size: 32px;
    font-weight: 300;
    text-align: center;
    line-height: 1.3;
    margin: 0 0 5%;
}

#er #contents section .lineup .lineup_inner {
	display: flex;
	gap: calc(var(--u) * 5.3);
	padding: 0 0 calc(var(--u) * 4.7) calc(var(--u) * 5.3);
	overflow-x: scroll;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scroll-padding-left: calc(var(--u) * 5.3);
}
#er #contents section .lineup .lineup__box {
	flex: 0 0 calc(var(--u) * 45.7);
	scroll-snap-align: start;
}
#er #contents section .lineup .lineup__box:last-child {
	margin-right: calc(var(--u) * 5.3);
}
#er #contents section .lineup .lineup__box a {
	display: block;
	color: #111;
}

#er #contents section .lineup .lineup__box img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: contain;
	object-position: center;
	padding: calc(var(--u) * 3);
	box-sizing: border-box;
	background: #EAEAEA;
}
#er #contents section .lineup .lineup__box span {
	display: block;
	margin-top: calc(var(--u) * 3);
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: .5px;
	word-spacing: 100vw;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#er #contents section .lineup .lineup_inner::-webkit-scrollbar {
	height: 10px;
}
#er #contents section .lineup .lineup_inner::-webkit-scrollbar-track {
	background: #fff;
}
#er #contents section .lineup .lineup_inner::-webkit-scrollbar-thumb {
	background: #333;
	border-radius: 0;
}
@supports not selector(::-webkit-scrollbar) {
	#er #contents section .lineup .lineup_inner {
		scrollbar-color: #333 #fff;
	}
}

#er #contents section .lineup .allbtn {
	display: block;
	box-sizing: border-box;
	width: calc(var(--u) * 73.9);
	height: calc(var(--u) * 12.6);
	margin: calc(var(--u) * 8) auto 0;
	border: 1px solid #111;
	border-radius: 999px;
	font-size: 15px;
	line-height: calc(var(--u) * 12.6 - 2px);
	text-align: center;
}

@media only screen and (min-width: 769px)  {
	#er #contents section .lineup {
		margin-bottom: 160px;
	}
	#er #contents section#br .lineup {
		margin-bottom: 0px;
	}
	#er #contents section .lineup .brlogo {
		width: 16%;
	}
	#er #contents section .lineup h4 {
		font-size: 38px;
	}
	#er #contents section .lineup .lineup_inner {
		width: 74%;
		margin: 0 auto;
		gap: 50px 3.5%;
		flex-wrap: wrap;
		justify-content: flex-start;
		overflow: visible;       /* PCは横スクロールさせない */
		padding: 0;
		scroll-snap-type: none;
	}
	#er #contents section#br .lineup .lineup_inner {
		justify-content: center;
	}
	#er #contents section .lineup .lineup__box {
		flex: 0 0 31%;           /* 31% × 3列 + 3.5% × 2 = 100% */
	}
	#er #contents section .lineup .lineup__box:last-child {
		margin-right: 0;
	}
	#er #contents section .lineup .lineup__box span {
		font-size: 12px;
		padding-left: 5%;
	}
	#er #contents section .lineup .allbtn {
		width: 300px;
		height: 56px;
		line-height: 54px;
		margin-top: 80px;
	}
}

/* #footer
**************************************************/
#er #footer {
	color: #fff;
	background: #1e1e1e;
	padding: 28% 0 1%;
	position: relative;
	z-index: 4;
}
#er #footer .logo {
	width: 60%;
	margin: 0 auto;
}
#er #footer .links {
    width: 6%;
    margin: 0% auto 8%;
    text-align: center;
    line-height: 0;
}
#er #footer .links a {
	color: #fff;
}
#er #footer .copy {
	font-size: 8px;
	text-align: center;
}

@media only screen and (min-width: 769px)  {
	#er #footer {
		width: 100%;
        margin: 0 auto;
        padding: 200px 0 10px;
		position: relative;
		z-index: 10;
	}
	#er #footer .logo {
		width: 36%;
	}
	#er #footer .links {
        margin: 0 auto 80px;
        max-width: 28px;
	}
}

/* js
**************************************************/
#er .anim {
	opacity: 0;
	transition: 1s all 0s;
}
#er .anim.ac {
	opacity: 1;
	transform: translate(0);
}

/* view 
**************************************************/
#er .spview {
	display: block;
}
#er .pcview {
	display: none;
}
@media only screen and (min-width: 768px)  {
     #er .spview {
		display: none;
	}	
	#er .pcview {
		display: block;
	}
}