@charset "utf-8";

/* ==================== INDEX ====================

	0.root settings	

	A.desktop (min-width: 600px)
	• desktop 

	B.mobile (max-width: 599px)
	• mobile 


/*==================== 0.root settigs ====================*/

/* jq_actions の superScroll に切り替え
html {
    scroll-behavior: smooth;
}

section,h1,h2,h3,h4,h5,h6[id] {
	scroll-margin-top: 20vh;
}
*/


/*-------------------- 変数 --------------------*/
:root {
	--link-color: #4cb9a2;
	--link-hover-color: #4cb9a2;
	--link-dot: #e5e5e5;
    --el_gray: #81838a;
    --pad1: 2rem;
    --pad2: 4rem;
    --pad3: 6rem;
    --pad4: 8rem;
    --pad5: 15rem;
    --main_min_height: 50vw;
    --main_max_height: 80vw;
    --lightseagreen: #4cb9a2;
    --lightspanishorange: #f6af89;
}

*:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
	font-family: "dnp-shuei-mincho-pr6", YuMincho, YuMinchoM, serif;
	font-size: 1.6rem;
	/* for Chrome browser */ -webkit-text-size-adjust: none;
	font-weight: 500; /* 600 */
}

.page_works .finder {
    background: none !important;
    font-family: "source-han-sans-jp-variable", sans-serif;
    font-variation-settings: "wght" 400;
}

h1 {
    font-weight: 500;
    font-variation-settings: "wght" 500;
}

h2,h3,h4,h5,h6 {
    font-weight: 500;
    font-variation-settings: "wght" 550;
}

figcaption {
    margin-top: 1rem;
    font-size: 1.3rem;
    font-weight: 400;
    font-variation-settings: "wght" 400;
}

a {
	text-decoration: none;
	transition: color .2s ease-out;
}

a:link { color: var( --link-color ); }
a:active,
a:visited { color: var( --link-color ); }
a:focus,
a:hover { color: var( --link-hover-color ); }

ul.tags {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
    font-weight: 500;
    font-variation-settings: "wght" 550;
}

ul.tags span {
    display: inline-block;
    white-space: nowrap;
    padding: .35rem 1.5rem;
    border: 1px solid var(--lightseagreen);
    border-radius: 4rem;
    color: var(--lightseagreen);
}



/* ==================== A.desktop ==================== */

@media all and (min-width: 600px) {

	/* -------------------- desktop 文字サイズ& -------------------- */
  
	html {
        font-size: min(.75vw, 62.5%); /* 10px */
	}

	body {
        margin: 0;
        padding: 0;
        background: lightgrey;
	}

    /* -------------------- desktop レイアウト -------------------- */

    .full_screen {
        height: 100vh;
        height: 100dvh; /* dynamic viewport heigh, for Safari */
        display: grid;
        grid-template-columns: 9.1vw 1fr;
        align-items: center;
    }

    #screenHeader {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        row-gap: 2em;
        box-sizing: border-box;
        height: 100vh;
        height: 100dvh;
        min-height: var(--main_min_height);
        max-height: var(--main_max_height);
        padding: var(--pad3) 0;
        overflow: hidden;
        background: var(--el_gray);
    }

    #screenHeader .menu a {
        display: block;
        position: relative;
        padding: 0 .25em;
    }

    #screenHeader .menu a:link,
    #screenHeader .menu a:visited,
    #screenHeader .menu a:hover {
        color: #fff;
    }

    #screenHeader .menu a::after {
        position: absolute;
        z-index: 2;
        top: 0;
        right: -0.2em;
        content: "";
        display: block;
        height: 100%;
        width: .2em;
        background: var(--lightseagreen);
        opacity: 0;
    }

    #screenHeader a.current::after {
        opacity: 1;
    }

    #siteName {
        margin: 0;
        line-height: 1;
    }

    #siteName img.logo {
        width: min(4vw, 47px);
        height: auto;
        vertical-align: bottom;
    }

    #screenHeader .menu {
        list-style: none;
        padding: 0;
        flex: 1;
        display: flex;
        flex-flow: column nowrap;
        row-gap: var(--pad1);
        font-size: 1.6rem;
        font-weight: 600;
        font-feature-settings: "palt";
        letter-spacing: .2em;
        line-height: 2em;
        width: 2em;
    }

    #screenHeader .menu li {
        writing-mode: vertical-rl;
        text-orientation: sideways;
    }

    #mainPane {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #fff;
    }

    #mainPane ._pagination {
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        row-gap: 2rem;
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 10;
        bottom: var(--pad4);
        right: 5rem;
    }

    #mainPane ._pagination li {
        margin: 0;
    }

    #mainPane ._pagination a {
        display: block;
        overflow: hidden;
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 50%;
        background: var(--link-dot);
        text-indent: 100rem;
    }

    #mainPane ._pagination a:focus,
    #mainPane ._pagination a:hover,
    #mainPane ._pagination li.active a {
        background: var(--el_gray);
    }

    #mainPane .finder {
        position: relative;
        z-index: 3;
        overflow-y: scroll;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
        scroll-snap-stop: always;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: var(--main_min_height);
        max-height: 80vw;
        padding: 0;
        background: url(/_str/images/typo_firstaudience.png) no-repeat 50% 50% / min(30vw,380px) auto;
    }

    .page_prof #mainPane .finder {
        background: none;
    }

    #mainPane .finder > section,
    #mainPane .finder > div.container {
        padding: var(--pad2) 10vw var(--pad4) 10vw;
    }

    #mainPane .finder > section.portfolio {
        scroll-snap-align: start;
        height: 100%;
        box-sizing: border-box;
    }

    #mainPane .grid_container {
        height: 100%;
        list-style: none;
        margin: 0;
        padding: var(--pad1) 0 0 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: var(--pad5);
        grid-auto-rows: 33.3%;
        row-gap: 33.3%;
    }

    #mainPane .grid_container .flex_colmun {
        height: 100%;
        margin: 0;
        row-gap: .25em;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #mainPane .grid_container a {
        display: block;
    }

    #mainPane .grid_container .landscape img {
        width: 100%;
        height: auto;
    }

    #mainPane .grid_container .portrait img {
        width: auto;
        max-width: 100%;
        height: 100%;
    }

    #mainPane .grid_container .caption {
        display: block;
        position: relative;
        color: var(--el_gray);
        font-size: 1.4rem;
    }

    #mainPane .grid_container .more_detail {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 100%;
        display: block;
        width: 100%;
        text-align: right;
        padding-top: 1.4rem;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 400;
        font-size: 1.4rem;
        color: var(--lightseagreen);
    }

    #mainPane .grid_container .more_detail::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 2;
        right: 0;
        bottom: -0.4em;
        width: 25%;
        height: .2em;
        background: var(--lightseagreen);
    }

    #mainPane .grid_container .more_detail::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 3;
        right: 25%;
        bottom: -0.4em;
        width: 25%;
        height: .2em;
        background: var(--lightspanishorange);
    }

    #screenFooter {
        position: absolute;
        z-index: 2;
        top: max(50%, 25vw);
        color: var(--el_gray);
    }

    .page_prof #screenFooter,
    .page_works #screenFooter {
        display: none;
    }

    #screenFooter p {
        letter-spacing: .1em;
        margin-top: var(--pad1);
    }

    #mainPane .finder > div.container .shoulder {
        display: inline-block;
        position: relative;
        margin: -2rem 0 1.75rem 0;
        font-size: 1.6rem;
        font-weight: 500;
        font-variation-settings: "wght" 500;
        color: var(--lightseagreen);
    }

    #mainPane .finder > div.container .shoulder::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 2;
        left: 0;
        bottom: -0.4em;
        width: 5rem;
        height: .35rem;
        background: var(--lightspanishorange);
    }

    #mainPane .finder > div.container .shoulder::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 2;
        left: 5rem;
        bottom: -0.4em;
        width: 5rem;
        height: .35rem;
        background: var(--lightseagreen);
    }

    #mainPane .finder > div.container section {
        padding: 6rem 0 0 0;
    }

    #mainPane .finder > div.container h2.deco {
        position: relative;
        margin: 4rem 0;
    }

    #mainPane .finder > div.container h2:first-child,
    #mainPane .finder > div.container h3:first-child {
        margin-top: 0;
    }

    #mainPane .finder > div.container h2.deco::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 2;
        left: 0;
        bottom: -0.4em;
        width: 5rem;
        height: .35rem;
        background: var(--lightspanishorange);
    }

    #mainPane .finder > div.container h2.deco::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 2;
        left: 5rem;
        bottom: -0.4em;
        width: 5rem;
        height: .35rem;
        background: var(--lightseagreen);
    }

    .cover_grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 4rem;
        align-items: center;
    }
    
    .cover_grid > .grid_item_a {
        grid-column: 1 / 6;
    }
    
    .cover_grid > .grid_item_b {
        grid-column: 6 / 13;
    }

    .cover_grid h1,
    .cover_grid p,
    .cover_grid figure {
        margin: 1.75rem 0;
    }

    .cover_grid .deco_shadow {
        padding: 0 0 0 5rem;
    }

    .deco_shadow img {
        box-shadow: 0 .7rem 1rem rgba(0, 0, 0, .25);
    }

    .deco_num {
        width: 10rem;
        display: flex;
        background: var(--lightspanishorange);
        color: #fff;
    }

    .deco_num span {
        flex: 1 5rem;
        height: 5rem;
        line-height: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .deco_num span:first-child {
        transform: rotate(45deg);
        font-size: 2rem;
        font-weight: 400;
        font-variation-settings: "wght" 400;
    }
    
    .deco_num span:last-child {
        background: var(--lightseagreen);
        font-size: 3.2rem;
        font-weight: 300;
        font-variation-settings: "wght" 300;
    }

    .article_grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 4rem;
    }

    .article_grid h2 {
        font-size: 3rem;
        font-weight: 500;
        font-variation-settings: "wght" 500;
    }

    .article_grid .grid_item_a h3 {
        display: inline-block;
        background: linear-gradient(90deg, #18b693 0%, #4cb9a2 25%, #73ceae 50%, #f6af89 75% );
        background: -webkit-linear-gradient(90deg, #18b693 0%, #4cb9a2 25%, #73ceae 50%, #f6af89 75% );
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        font-size: 3rem;
        font-weight: 300;
        font-variation-settings: "wght" 300;
    }
    
    .article_grid > .grid_item_a {
        grid-column: 1 / 9;
    }
    
    .article_grid > .grid_item_b {
        grid-column: 10 / 13;
    }
    
    .article_grid > .grid_item_c1 {
        grid-column: 1 / 7;
    }
    
    .article_grid > .grid_item_c2 {
        grid-column: 7 / 13;
    }
    
    .article_grid > .grid_item_d {
        grid-column: 1 / 13;
    }

    .creative_process h3 {
        font-size: 1.6rem;
        color: var(--lightseagreen);
        font-weight: 400;
        font-variation-settings: "wght" 400;
    }

    

	/*==================== desktop モーダル ====================*/

    body._modal_is_open_ {
        position: fixed;
        width : 100%;
        overflow-y: scroll;
    }

    body._modal_is_open_ ._modalLayer_ {
        display: block;
    }

	@keyframes modalFadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	*[data-modal-target] {
		cursor: pointer;
	}

	.modal_container {
		display: none;
	}

	._modalLayer_ .modal_container {
		display: block;
		position: relative;
		margin: 0;
		padding: 5rem;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow-y: scroll;
	}

    @keyframes appearblur {
        0% {
            backdrop-filter: blur(0);
        }
        100% {
            backdrop-filter: blur(4rem);
        }
    }

	._modalLayer_ {
        display: none;
		position: fixed;
		z-index: 200;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.7);
        animation: appearblur 2s ease-out 0s 1 normal forwards;
	}

	._modalLayer_ ._inner_ {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 5vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	._modalLayer_ > ._close_ {
		display: block;
		position: absolute;
		z-index: 2;
		right: 1rem;
		top: 1rem;
		width: 5rem;
		height: 5rem;
		transform: rotate(45deg);
		cursor: pointer;
	}

	._modalLayer_ > ._close_::before {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		top: calc(50% - .5px);
		left: 0;
		width: 5rem;
		height: 1px;
		background-color: var(--el_gray);
	}

	._modalLayer_ > ._close_::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		top: 0;
		left: calc(50% - .5px);
		width: 1px;
		height: 5rem;
		background-color: var(--el_gray);
	}

	._modalLayer_ img {
		max-width: 100%;
		max-height: 100%;
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        min-height: auto !important;
	}

}



/* ==================== B.mobile ==================== */


@media all and (max-width: 599px) {

	/* -------------------- mobile 文字サイズ& -------------------- */
  
	html {
        width: 100%;
        height: 100%;
        font-size: 2.2vw; /* 10px */
	}
  
	body {
        margin: 0;
        padding: 0;
	}

	/* -------------------- mobile レイアウト -------------------- */

    .full_screen {
        height: 100vh;
        height: 100dvh; /* dynamic viewport heigh, for Safari */
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }

    #screenHeader {
        grid-column: 1 / 3;
    }

    #mainPane {
        grid-column: 3 / 13;
    }

    #mainPane ._pagination {
        display: none;
    }

    #screenHeader {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        row-gap: 2em;
        box-sizing: border-box;
        height: 100vh;
        height: 100dvh;
        padding: var(--pad2) 0;
        overflow: hidden;
        background: var(--el_gray);
    }

    #screenHeader .menu a {
        display: block;
        position: relative;
        padding: 0 .25em;
    }

    #screenHeader .menu a:link,
    #screenHeader .menu a:visited,
    #screenHeader .menu a:hover {
        color: #fff;
    }

    #screenHeader .menu a::after {
        position: absolute;
        z-index: 2;
        top: 0;
        right: -0.2em;
        content: "";
        display: block;
        height: 100%;
        width: .2em;
        background: var(--lightseagreen);
        opacity: 0;
    }

    #screenHeader a.current::after {
        opacity: 1;
    }

    #siteName {
        margin: 0;
        line-height: 1;
    }

    #siteName img.logo {
        width: 7vw;
        height: auto;
        vertical-align: bottom;
    }

    #screenHeader .menu {
        list-style: none;
        padding: 0;
        flex: 1;
        display: flex;
        flex-flow: column nowrap;
        row-gap: var(--pad1);
        font-size: 1.6rem;
        font-weight: 600;
        font-feature-settings: "palt";
        letter-spacing: .2em;
        line-height: 2em;
        width: 2em;
    }

    #screenHeader .menu li {
        writing-mode: vertical-rl;
        text-orientation: sideways;
    }

    #mainPane {
        position: relative;
        background: #fff;
    }

    #mainPane .finder {
        position: relative;
        z-index: 3;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        scroll-snap-stop: always;
        height: 100vh;
        height: 100dvh;
        box-sizing: border-box;
        padding: 10vw;
        background: url(/_str/images/typo_firstaudience.png) no-repeat 50% 50% / 50vw auto;
    }

    .page_prof #mainPane .finder {
        background: none;
    }

    #mainPane .finder > section,
    #mainPane .finder > div.container {
        box-sizing: border-box;
        /* scroll-snap-align: center; */
    }

    #mainPane .grid_container {
        list-style: none;
        margin: 0 0 30vh 0;
        margin: 0 0 30dvh 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        row-gap: 30vh;
        row-gap: 30dvh;
    }

    #mainPane .grid_container .flex_colmun {
        margin: 0;
        height: 30vh;
        height: 30dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #mainPane .grid_container .landscape img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }

    #mainPane .grid_container .portrait img {
        width: auto;
        height: 100%;
    }

    #mainPane .grid_container .caption {
        padding: 1rem 0;
        background: rgba(255, 255, 255, 0.83);
        color: var(--el_gray);
        font-size: 1.6rem;
    }

    #mainPane .grid_container .more_detail {
        position: relative;
        display: block;
        width: 100%;
        text-align: right;
        margin-top: 1vw;
        padding-top: 1.6rem;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: "wght" 500;
        font-size: 1.5rem;
        color: var(--lightseagreen);
    }

    #mainPane .grid_container .more_detail::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 2;
        right: 0;
        bottom: -0.4em;
        width: 25%;
        height: .2em;
        background: var(--lightseagreen);
    }

    #mainPane .grid_container .more_detail::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 3;
        right: 25%;
        bottom: -0.4em;
        width: 25%;
        height: .2em;
        background: var(--lightspanishorange);
    }

    #mainPane .grid_container a:hover .more_detail::before,
    #mainPane .grid_container a:focus .more_detail::before,
    #mainPane .grid_container a:active .more_detail::before {
        background: var(--lightseagreen);
    }

    #screenFooter {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
        color: var(--el_gray);
    }

    .page_prof #screenFooter,
    .page_works #screenFooter {
        display: none;
    }

    #screenFooter p {
        margin: 0;
        letter-spacing: .1em;
    }

    #mainPane .finder > div.container .shoulder {
        display: inline-block;
        position: relative;
        margin: -2rem 0 1.75rem 0;
        font-size: 1.6rem;
        font-weight: 500;
        font-variation-settings: "wght" 500;
        color: var(--lightseagreen);
    }

    #mainPane .finder > div.container .shoulder::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 2;
        left: 0;
        bottom: -0.4em;
        width: 5rem;
        height: .35rem;
        background: var(--lightspanishorange);
    }

    #mainPane .finder > div.container .shoulder::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 2;
        left: 5rem;
        bottom: -0.4em;
        width: 5rem;
        height: .35rem;
        background: var(--lightseagreen);
    }

    #mainPane .finder > div.container section {
        padding: 6rem 0 0 0;
    }

    #mainPane .finder > div.container h2.deco {
        position: relative;
        margin: 4rem 0;
    }

    #mainPane .finder > div.container h2:first-child,
    #mainPane .finder > div.container h3:first-child {
        margin-top: 0;
    }

    #mainPane .finder > div.container h2.deco::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 2;
        left: 0;
        bottom: -0.4em;
        width: 5rem;
        height: .35rem;
        background: var(--lightspanishorange);
    }

    #mainPane .finder > div.container h2.deco::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 2;
        left: 5rem;
        bottom: -0.4em;
        width: 5rem;
        height: .35rem;
        background: var(--lightseagreen);
    }

    .cover_grid {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .cover_grid h1,
    .cover_grid p,
    .cover_grid figure {
        margin: 1.75rem 0;
    }

    .deco_shadow img {
        box-shadow: 0 .7rem 1rem rgba(0, 0, 0, .25);
    }

    .deco_num {
        width: 10rem;
        display: flex;
        background: var(--lightspanishorange);
        color: #fff;
    }

    .deco_num span {
        flex: 1 5rem;
        height: 5rem;
        line-height: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .deco_num span:first-child {
        transform: rotate(45deg);
        font-size: 1.8rem;
        font-weight: 400;
        font-variation-settings: "wght" 400;
    }
    
    .deco_num span:last-child {
        background: var(--lightseagreen);
        font-size: 2.4rem;
        font-weight: 300;
        font-variation-settings: "wght" 300;
    }

    .article_grid {
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }

    .article_grid h2 {
        font-size: 2rem;
        font-weight: 500;
        font-variation-settings: "wght" 500;
    }

    .article_grid .grid_item_a h3 {
        display: inline-block;
        background: linear-gradient(90deg, #18b693 0%, #4cb9a2 25%, #73ceae 50%, #f6af89 75%);
        background: -webkit-linear-gradient(90deg, #18b693 0%, #4cb9a2 25%, #73ceae 50%, #f6af89 75%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        font-size: 2rem;
        font-weight: 300;
        font-variation-settings: "wght" 300;
    }

    .creative_process h3 {
        font-size: 1.6rem;
        color: var(--lightseagreen);
        font-weight: 400;
        font-variation-settings: "wght" 400;
    }

	/*==================== mobile モーダル ====================*/

    body._modal_is_open_ {
        position: fixed;
        width : 100%;
        overflow-y: scroll;
    }

    body._modal_is_open_ ._modalLayer_ {
        display: block;
    }
    
	*[data-modal-target] {
		cursor: pointer;
	}

	.modal_container {
		display: none;
	}

	._modalLayer_ .modal_container {
		display: block;
		position: relative;
		margin: 0;
		padding: 5rem;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow-y: scroll;
	}

    @keyframes appearblur {
        0% {
            backdrop-filter: blur(0);
        }
        100% {
            backdrop-filter: blur(4rem);
        }
    }

	._modalLayer_ {
        display: none;
		position: fixed;
		z-index: 200;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.7);
        animation: appearblur 2s ease-out 0s 1 normal forwards;
	}

	._modalLayer_ ._inner_ {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 5vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	._modalLayer_ > ._close_ {
		display: block;
		position: absolute;
		z-index: 2;
		right: 1rem;
		top: 1rem;
		width: 5rem;
		height: 5rem;
		transform: rotate(45deg);
		cursor: pointer;
	}

	._modalLayer_ > ._close_::before {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		top: calc(50% - .5px);
		left: 0;
		width: 5rem;
		height: 1px;
		background-color: var(--el_gray);
	}

	._modalLayer_ > ._close_::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		top: 0;
		left: calc(50% - .5px);
		width: 1px;
		height: 5rem;
		background-color: var(--el_gray);
	}

	._modalLayer_ img {
		max-width: 100%;
		max-height: 100%;
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        min-height: auto !important;
	}

}