@charset "utf-8";

:root {
    --color-bg: #1f1f1c;
    --color-main: #5893AE;
    --color-sub: #CBDDF3;
    --color-white: #EEF1FA;
    --color-black: #222;

    --font-common: "Shippori Mincho", serif;
    --font-title: "Cormorant Garamond", serif;
}



/*===================================================
	ani
====================================================*/    
.loader {
    position: fixed;
    height: 100%;
    width: 100%;
    background: var(--color-sub);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all .5s ease-out;
}
.loader:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(/static/notequalme/official/feature/11th_single/image/ph_load_1e1u2N0k.png);
    background-repeat: repeat;
    background-size: 75px;
    mix-blend-mode: overlay;
    opacity: 0.15;
}
.loaded .loader {
    transform: translateY(-100%);
    transition-delay: 0.5s; 
}


.action img {
    opacity:0;
    transition: all .5s ease-out;
}
.loaded .action img {
    opacity:1;
}

.act01 img,
.act02 img,
.act03 img,
.act04 img,
.act05 img {
    transform: translateX(-20px);
}

.loaded .act01 img {
    transition-delay: 1s;
    transform: translateX(0);
}
.loaded .act02 img {
    transition-delay: 1.25s;
    transform: translateX(0);
}
.loaded .act03 img { 
    transition-delay: 1.25s; 
    transform: translateX(0);
}
.loaded .act04 img { 
    transition-delay: 1.5s; 
    transform: translateX(0);
}
.loaded .act05 img { 
    transition-delay: 1.75s; 
    transform: translateX(0);
}

section h3.anim span {
    opacity: 0;
    display: inline-block;
    transition: all .5s ease-out;
    transform: translateY(20px);
}
section h3.anim.on span {
    opacity: 1;
    transform: translateY(0);
}
/*
section h3.anim.on span:nth-child(1) {transition-delay: 0s}
section h3.anim.on span:nth-child(2) {transition-delay: 0.05s}
section h3.anim.on span:nth-child(3) {transition-delay: 0.1s}
section h3.anim.on span:nth-child(4) {transition-delay: 0.15s}
section h3.anim.on span:nth-child(5) {transition-delay: 0.2s}
section h3.anim.on span:nth-child(6) {transition-delay: 0.25s}
section h3.anim.on span:nth-child(7) {transition-delay: 0.3s}
section h3.anim.on span:nth-child(8) {transition-delay: 0.35s}
section h3.anim.on span:nth-child(9) {transition-delay: 0.4s}
section h3.anim.on span:nth-child(10) {transition-delay: 0.45s}
*/

.mainWrap .anim.fadeX,
.mainWrap .anim.fadeY {
    opacity: 0;
    transition: all .5s ease-out;
}
.mainWrap .anim.fadeX {
    transform: translateX(20px);
}
.mainWrap .anim.fadeY {
    transform: translateY(20px);
}
.mainWrap .anim.fadeX.on,
.mainWrap .anim.fadeY.on {
    opacity: 1;
}
.mainWrap .anim.fadeX.on {
    transform: translateX(0px);
}
.mainWrap .anim.fadeY.on {
    transform: translateY(0px);
}

#Product .inBox .productBox.anim .productImg {
    opacity: 0;
    transition: all .5s ease-out; 
    transform: translateY(30px);
}
#Product .inBox .productBox.anim.on .productImg {
    opacity: 1;
    transform: translateY(0);
}

#Product .inBox .productBox.anim:nth-child(odd) .productDetail {
    opacity: 0;
    transition: all .5s ease-out; 
    transform: translateX(30px);
}
#Product .inBox .productBox.anim:nth-child(even) .productDetail {
    opacity: 0;
    transform: translateX(-30px);
    transition: all .5s ease-out; 
}
#Product .inBox .productBox.anim.on:nth-child(odd) .productDetail,
#Product .inBox .productBox.anim.on:nth-child(even) .productDetail {
    opacity: 1;
    transition-delay: 0.25s;
    transform: translateY(0);
}

@media screen and (max-width: 960px){

    .loader {}
    .loader:after {
        background-size: 50px;
    }
    .loaded .loader {
        transform: translateY(0%);
        transform: translateX(100%);
    }

    .act01 img,
    .act02 img,
    .act03 img,
    .act04 img,
    .act05 img {}

    .loaded .act01 img {
        transition-delay: 1s;
        transform: translateX(0);
    }
    .loaded .act02 img {
        transition-delay: 1.25s;
        transform: translateX(0);
    }
    .loaded .act03 img { 
        transition-delay: 1.25s; 
        transform: translateX(0);
    }
    .loaded .act04 img { 
        transition-delay: 1.25s; 
        transform: translateX(0);
    }
    .loaded .act05 img { 
        transition-delay: 1.25s; 
        transform: translateX(0);
    }

    #Product .inBox .productBox.anim .productImg {
        opacity: 0;
        transition: all .5s ease-out; 
        transform: translateY(20px);
    }
    #Product .inBox .productBox.anim:nth-child(odd) .productDetail {
        transform: translateX(20px);
    }
    #Product .inBox .productBox.anim:nth-child(even) .productDetail {
        transform: translateX(-20px);
    }

}



/*===================================================
    bgBox
====================================================*/
.bgBox {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    overflow: hidden;
    box-sizing: border-box;
    background-color: var(--color-bg);
}
.bgBox .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bgBox .bg01 {
    z-index: 1;
    background: url(/static/notequalme/official/feature/11th_single/image/ph_bg_1e1u2N0k.png);
    background-repeat: repeat;
    background-size: 300px;
    opacity: 0.03;
}
.bgBox .bg02 {
    z-index: 2;
    background: url(/static/notequalme/official/feature/11th_single/image/noise.webp);
    background-repeat: repeat;
    background-size: 400px;
    mix-blend-mode: soft-light;
    opacity: 0.15;
}

@media screen and (max-width: 960px){

	.bgBox {}
	.bgBox .bg {}
    .bgBox .bg01 {
        background-size: 200px;
    }
    .bgBox .bg02 {
        background-size: 300px;
    }

}



/*===================================================
	memu
====================================================*/
.hamBtn {
    display: block;
    position: fixed;
    right: 30px;
    top: 30px;
    width: 45px;
    height: 45px;
    background: var(--color-sub);
    transition: all .3s ease;
    cursor: pointer;
    z-index: 9998;
    border-radius: 100vmax;
    border: 1px solid var(--color-bg);
}
.hamBtn.open {
    background: var(--color-bg);
}
.hamBtn span {
    display: block;
    position: absolute;
    right: 25%;
    width: 50%;
    height: 2px;
    background: var(--color-bg);
    transition: all .3s ease;
}
.hamBtn :nth-of-type(1) {
    top: 14px;
}
.hamBtn :nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}
.hamBtn :nth-of-type(3) {
    bottom: 14px;
}
.hamBtn.open span {
    background: var(--color-sub);
}
.hamBtn.open span:nth-of-type(1) {
    transform: translateY(-50%) rotate(-45deg);
    top: 50%;
}
.hamBtn.open span:nth-of-type(2) {
    opacity: 0;
}
.hamBtn.open span:nth-of-type(3) {
    transform: translateY(50%) rotate(45deg);
    bottom: 50%;
}

.navigation {
    opacity: 0;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9996;
    position: fixed;
	transition: all 0.5s ease-out;
    font-family: var(--font-common);
    color: var(--color-white);
}
.navigation.active {
    transition: opacity 0.5s ease;
    pointer-events:auto;
    opacity:1;
}

.navigation .headerNavBox {
    background: var(--color-white);
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    flex-direction: row;
}
.navigation .headerNavBox .headerNav {}

.navigation .heroNavLogo {
    margin: 0 90px 0 0;
    width: 25%;
    max-width: 300px;
}
.navigation .heroNavLogo a img {}

.navigation .headerNav li {
	padding: 0;
    position: relative;
    margin: 0 0 20px;
}
.navigation .headerNav li:nth-last-child(2) {
    margin-bottom: 40px;
}
.navigation .headerNav li:last-child {
	margin: 0;
}
.navigation .headerNav li a {
    display: block;
    font-family: var(--font-title);
    font-size: 32px;
    text-decoration: none;
    line-height: 1;
    font-weight: bold;
    letter-spacing: 0.03em;
    color: var(--color-main);
}

.navigation .snsList {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}
.navigation .snsList:last-child {
    margin-bottom: 0;
}
.navigation .snsList .menuList {
	display: flex;
}
.navigation .snsList .navListTit{
    margin-right: 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    color: var(--color-main);
    font-weight: bold;
}
.navigation .snsList .navListTit.snsTit {
    margin-right: 30px;
}
.navigation .snsList .menuList li {
    margin: 0px 10px 0 0;
}
.navigation .snsList .menuList li:nth-last-child(2) {
    margin: 0px 10px 0 0;
}
.navigation .snsList .menuList li:last-child {
	margin-right: 0;
}
.navigation .snsList .menuList li a{
	font-size: 24px;
}
.navigation .snsList .menuList .menu_icon a {
    display: flex;
    width: 35px;
    height: 35px;
    border-radius: 100px;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    background: var(--color-main);
    color: var(--color-white);
}
.navigation .snsList .menuList .menu_icon a i,
.navigation .shareList .menu_icon a i {
    font-size: 14px;
}
.navigation .shareList .menu_icon a img {
	height: 16px;
}

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

	.navigation .headerNav a:hover {
		opacity: 0.7;
	}

}

@media screen and (max-width: 960px){

    .hamBtn {
        width: 40px;
        height: 40px;
        right: 20px;
        top: 20px;
    }
    .hamBtn :nth-of-type(1) {
        top: 12px;
    }
    .hamBtn :nth-of-type(3) {
        bottom: 12px;
    }

	.navigation .headerNav {
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-position: top center;
	    overflow: hidden;
	    object-fit: cover;
	}

    .navigation .headerNavBox {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .navigation .heroNavLogo {
        margin: 0px 0 40px;
        width: 65%;
    }
    .navigation .heroNavLogo a img {}
    .navigation .headerNav li {
        text-align: left;
        position: relative;
        margin: 0 0 15px;
    }
    .navigation .headerNav li:nth-last-child(2) {
        margin-bottom: 30px;
    }
    .navigation .headerNav li a {
        font-size: 24px;
        display: block;
        line-height: 1;
    }

    .navigation .snsWrap {}
    .navigation .snsWrap .menuList {
        display: flex;
    }
    .navigation .snsWrap .menuList li {
        margin: 0 20px 0 0;
    }
    .navigation .snsWrap .menuList li:last-child {
        margin: 0;
    }
    .navigation .snsWrap .menuList li a {
        font-size: 20px;
    }
    .navigation .headerNav li .sns_wrap {}
    .navigation .headerNav li .sns_wrap .menu_sns {}
    .navigation .headerNav li .sns_wrap .menu_sns:last-child {}
    .navigation .headerNav li .sns_wrap .menu_sns .menuTit {}
    .navigation .headerNav li .sns_wrap .menu_sns .menuList {}
    .navigation .headerNav li .sns_wrap .menu_sns .menuList li {}
    .navigation .headerNav li .sns_wrap .menu_sns .menuList li:last-child {}
    .navigation .headerNav li .sns_wrap .menu_sns .menuList li a {}

}


/*===================================================
	all
====================================================*/
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {}

.mainWrap {
    font-family: var(--font-common);
	position: relative;
    z-index: 1;
	line-height: 1.5;
	font-size: 16px;
	color: var(--color-sub);
    overflow: hidden;
}

.container {
    position: relative;
}

section {
    padding: 0 0 160px;
}
section:last-of-type {
    padding: 0 0 240px;
}

section h3 {
    font-family: var(--font-title);
    font-style: italic;
    position: relative;
    margin: 0 auto 75px;
    text-align: center;
    font-size: 96px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
}

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

	.sp { 
		display: none;
	}

	a {
		-webkit-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}

}

@media screen and (max-width: 960px){

	.pc {
		display: none !important;
	}

	html {
	    scroll-padding-top: 60px;
	}

	body {}

	.mainWrap {}

	.container {}

	section {
		padding: 0 0 90px;
	}
    section:last-of-type {
        padding: 0 0 150px;
    }

	section h3 {
        font-size: 42px;
        margin: 0 0px 30px;
	}

}



/*===================================================
    heroView
====================================================*/
#heroView {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    margin: 0 0 160px;
}

#heroView .heroInner {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    position: relative;
}

#heroView .artistLogo {
    position: absolute;
    width: 100px;
    top: 30px;
    left: 30px;
}

#heroView .scrollBox {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    z-index: 2;
    pointer-events: none;
}
#heroView .scrollBox .scrollArrow {
    width: 1px;
    height: 60px;
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index: 1;
    background: var(--color-sub);
    animation: scrollArrow 3s cubic-bezier(.19,1,.22,1) 0.5s infinite;
}
@keyframes scrollArrow{
  0% {clip-path: inset(0 0 100% 0);}
  25% {clip-path: inset(0 0 0 0);}
  75% {clip-path: inset(0 0 0 0);}
  100% {clip-path: inset(100% 0 0 0);}
}

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

    #heroView {
        height: 50vw;
    }

    #heroView .heroInner .txtBox .dateBox {
        max-width: initial;
    }

}

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

    #heroView .heroInner .kv {
        position: absolute;
        top: 0;
        left: 0;
        width: 80%;
        height: 100%;
        overflow: hidden;
    }
    #heroView .heroInner .kv img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 60% 25%;
    }
    #heroView .heroInner .txtBox {
        position: absolute;
        z-index: 2;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20%;
        height: 100%;
    }
    #heroView .heroInner .txtBox .logoBox {
        position: absolute;
        width: calc(130% - 30px);
        right: 30px;
        top: 34%;
        transform: translateY(-50%);
    }
    #heroView .heroInner .txtBox .logoBox .logo {}
    #heroView .heroInner .txtBox .logoBox .logoTxt {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 40%;
    }
    #heroView .heroInner .txtBox .dateBox {
        position: absolute;
        width: calc(100% - 60px);
        max-width: 250px;
        right: 30px;
        bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    #heroView .heroInner .txtBox .dateBox .dateTxt {
        line-height: 1;
    }
    #heroView .heroInner .txtBox .dateBox .dateTxt.dateTxt01 {
        margin: 0 0 9%;
    }
    #heroView .heroInner .txtBox .dateBox .dateTxt.dateTxt02 {
        width: 60%;
    }

    #heroView .artistLogo a:hover {
        opacity: 0.7;
    }

}

@media screen and (min-width: 961px) and (max-width: 1400px) and (min-height: 600px) {

    #heroView .heroInner .kv {
        width: 90%;
        height: 85%;
        top: 50%;
        transform: translateY(-50%);
    }

}

@media screen and (min-width: 961px) and (max-width: 1400px) and (min-height: 750px) {

    #heroView .heroInner .kv {
        height: 75%;
    }

}

@media screen and (max-width: 960px) {

	#heroView {
	    margin: 0 0 90px;
        height: 100svh;
	    min-height: 450px;
	}

	#heroView .heroInner {
        height: initial;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 500px;
    }
    #heroView .heroInner .kv {}
    #heroView .heroInner .kv img {}
    #heroView .heroInner .txtBox {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    #heroView .heroInner .txtBox .logoBox {
        position: absolute;
        bottom: 109%;
        width: 50%;
        max-width: 180px;
    }
    #heroView .heroInner .txtBox .logoBox .logo {}
    #heroView .heroInner .txtBox .logoBox .logoTxt {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 35%;
    }
    #heroView .heroInner .txtBox .dateBox {
        position: absolute;
        top: 109%;
        width: 35%;
        max-width: 140px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #heroView .heroInner .txtBox .dateBox .dateTxt {
        line-height: 1;
    }
    #heroView .heroInner .txtBox .dateBox .dateTxt.dateTxt01 {
        margin: 0 auto 6%;
    }
    #heroView .heroInner .txtBox .dateBox .dateTxt.dateTxt02 {
        width: 60%;
    }

    #heroView .artistLogo {
        width: 75px;
        top: 20px;
        left: 20px;
	}

    #heroView .scrollBox {
        height: 100svh;
    }
	#heroView .scrollBox .scrollArrow {
	    left: 20px;
	    bottom: 20px;
	}
	
}



/*===================================================
    Music Video
====================================================*/
#MusicVideo {}
#MusicVideo h3 {}
#MusicVideo .inBox {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--color-main);
    padding: 5px;
}

#MusicVideo .inBox .mov {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
#MusicVideo .inBox .mov iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
#MusicVideo .inBox .mov:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 960px){

	#MusicVideo {}
	#MusicVideo h3 {}
	#MusicVideo .inBox {
        padding: 3px;
    }

	#MusicVideo .inBox .mov {
        margin-bottom: 20px;
    }
	#MusicVideo .inBox .mov iframe {}

}



/*===================================================
	Product
====================================================*/
#Product {}
#Product h3{}
#Product .inBox {}

#Product .inBox .productBox {
    width: 90%;
    margin: 0 auto 120px;
    position: relative;
    max-width: 1400px;
    display: flex;
}
#Product .inBox .productBox:nth-child(even)  {
	flex-flow: row-reverse;
}
#Product .inBox .productBox:last-child {
    margin: 0 auto;
}
#Product .inBox .productBox .productImg {
    z-index: 2;
    overflow: hidden;
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--color-main);
}
#Product .inBox .productBox .productImg img {}
#Product .inBox .productBox .productDetail {
    position: relative;
    width: 55%;
    z-index: 1;
    margin-top: 10%;
    padding: 5% 0 5% 5%;
}
#Product .inBox .productBox:nth-child(even) .productDetail {
    padding: 5% 5% 5% 0;
}
#Product .inBox .productBox .productDetail::after {
    content: "";
    display: block;
    width: 150vw;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -10%;
    z-index: -1;
    background: var(--color-bg);
    border: 1px solid var(--color-main);
}
#Product .inBox .productBox:nth-child(even) .productDetail::after {
    right: -10%;
    left: initial;
}
#Product .inBox .productBox .productDetail .detailInner {}
#Product .inBox .productBox .productDetail .detailInner .detailTit {
    font-size: 48px;
    margin-bottom: 30px;
    line-height: 1;
    font-weight: bold;
}
#Product .inBox .productBox .productDetail .detailInner .detailTit span {
	font-size: 24px;
    padding: 0 0 0 10px;
    font-weight: 400;
}
#Product .inBox .productBox .productDetail .detailInner .price {
	font-size: 24px;
    line-height: 1;
    margin-bottom: 15px;
}
#Product .inBox .productBox .productDetail .detailInner .price .tax {
    font-size: 14px;
    padding-left: 5px;
}
#Product .inBox .productBox .productDetail .detailInner .code {
    font-size: 14px;
    line-height: 1;
    margin-bottom: 30px;
}
#Product .inBox .productBox .productDetail .detailInner .code .tag {
    font-size: 12px;
    padding: 0 10px 2px;
    margin-right: 10px;
    font-weight: bold;
    background: var(--color-sub);
    color: var(--color-bg);
}
#Product .inBox .productBox .productDetail .detailInner .code .subTag {
    display: block;
    line-height: 1.5;
    padding: 10px 0 0;
}
#Product .inBox .productBox .productDetail .detailInner .detailListBox {
    margin: 0 0 20px;
}
#Product .inBox .productBox .productDetail .detailInner .detailListBox:last-child {
    margin: 0;
}
#Product .inBox .productBox .productDetail .detailInner .detailListBox .listTit {
    line-height: 1;
    display: inline-block;
    margin: 0 0 15px;
    font-weight: bold;
}
#Product .inBox .productBox .productDetail .detailInner .detailListBox .listTit span {
    font-size: 80%;
    padding: 0 0 0 5px;
}
#Product .inBox .productBox .productDetail .detailInner .detailListBox .txtBox {}
#Product .inBox .productBox .productDetail .detailInner .detailListBox .txtBox p {
    margin-bottom: 5px;    
}
#Product .inBox .productBox .productDetail .detailInner .detailListBox .txtBox p:last-child {
    margin-bottom: 0;
}
#Product .inBox .productBox .productDetail .detailInner .detailListBox .listTxt {
    margin: 0 0 5px;
    padding: 7px 15px 7px 15px;
    background: var(--color-white);
    color: var(--color-bg);
    border-left: 5px solid var(--color-main);
    display: flex;
    font-size: 14px;
    align-items: center;
}
#Product .inBox .productBox .productDetail .detailInner .detailListBox ul {}
#Product .inBox .productBox .productDetail .detailInner .detailListBox ul li {
    margin: 0 0 5px;
    padding: 7px 15px 7px 15px;
    background: var(--color-white);
    color: var(--color-bg);
    border-left: 5px solid var(--color-main);
    display: flex;
    font-size: 14px;
}
#Product .inBox .productBox .productDetail .detailInner .detailListBox ul li:last-child {
    margin: 0;
}
#Product .inBox .productBox .productDetail .detailInner .detailListBox ul li span.num {
    padding: 0 5px 0 0;
    color: var(--color-main);
}

@media screen and (max-width: 960px){

    #Product {
        overflow: hidden;
    }
    #Product h3{}
    #Product .inBox {}

	#Product .inBox .productBox {
	    margin: 0 auto 60px;
	    flex-wrap: wrap;
	}
	#Product .inBox .productBox:nth-child(even)  {
		flex-flow: wrap;
	}
	#Product .inBox .productBox .productImg {
        width: 90%;
        margin: 0 auto;
        position: relative;
        top: 0;
	}
    #Product .inBox .productBox .productImg img {}
	#Product .inBox .productBox .productDetail {
        width: 100%;
        padding: 20px 0 20px 20px;
        margin-top: 0;
	}
    #Product .inBox .productBox:nth-child(even) .productDetail {
        padding: 20px 20px 20px 0;
    }
    #Product .inBox .productBox .productDetail:after {
	    height: 108%;
	    top: -6%;
	    left: 0%;
	}
	#Product .inBox .productBox:nth-child(even) .productDetail:after {
	    right: 0;
	}
	#Product .inBox .productBox .productDetail .detailInner {}
	#Product .inBox .productBox .productDetail .detailInner .detailTit {
        font-size: 32px;
        margin-bottom: 20px;
	}
	#Product .inBox .productBox .productDetail .detailInner .detailTit span {
        font-size: 16px;
    }
	#Product .inBox .productBox .productDetail .detailInner .price {
	    font-size: 20px;
	    margin-bottom: 10px;
	}
	#Product .inBox .productBox .productDetail .detailInner .price .tax {
	    font-size: 12px;
	}
	#Product .inBox .productBox .productDetail .detailInner .code {
	    margin-bottom: 25px;
    	font-size: 12px;
	}
    #Product .inBox .productBox .productDetail .detailInner .code:has(.subTag) {
        margin-bottom: 15px;
    }
	#Product .inBox .productBox .productDetail .detailInner .code .tag {
	    font-size: 12px;
	}
    #Product .inBox .productBox .productDetail .detailInner .code .subTag {}
	#Product .inBox .productBox .productDetail .detailInner .detailListBox {
        margin-bottom: 20px;
    }
	#Product .inBox .productBox .productDetail .detailInner .detailListBox:last-child {}
	#Product .inBox .productBox .productDetail .detailInner .detailListBox .listTit {}
	#Product .inBox .productBox .productDetail .detailInner .detailListBox .listTit span {}
	#Product .inBox .productBox .productDetail .detailInner .detailListBox .listTxt {
        font-size: 14px;
        padding: 5px 15px;
	}
    #Product .inBox .productBox .productDetail .detailInner .detailListBox .txtBox {}
	#Product .inBox .productBox .productDetail .detailInner .detailListBox ul {}
	#Product .inBox .productBox .productDetail .detailInner .detailListBox ul li {
        font-size: 14px;
        padding: 5px 15px;
	}
	#Product .inBox .productBox:nth-of-type(4) .productDetail .detailInner .detailListBox:nth-of-type(2) ul li:nth-of-type(1) {}
	#Product .inBox .productBox .productDetail .detailInner .detailListBox ul li span.note {
        font-size: 12px;
    }
	#Product .inBox .productBox .productDetail .detailInner .detailListBox ul li span.num {}
	#Product .inBox .productBox .productDetail .detailInner .detailListBox ul li span.inst {}

}



/*===================================================
    Special
====================================================*/
#Special {}
#Special h3 {}
#Special .inBox {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

#Special .inBox .specialBox {
    width: calc(50% - 20px / 2);
    background: var(--color-white);
    padding: 40px;
    color: var(--color-bg);
}
#Special .inBox .specialBox:first-of-type {
    width: 100%;
}

#Special .inBox .specialBox .specialBoxTit {
    text-align: center;
    font-weight: bold;
    margin: 0 0 40px;
    font-size: 20px;
    line-height: 1;
}

#Special .inBox .specialBox .mainBtn {}
#Special .inBox .specialBox .mainBtn a {
    display: block;
    padding: 20px;
    color: var(--color-white);
    width: 100%;
    max-width: 300px;
    text-align: center;
    background: var(--color-main);
    border: 1px solid var(--color-main);
    margin: 0 auto 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 100px;
}
#Special .inBox .specialBox .mainBtn:last-child a {
    margin: 0 auto;
}

@media screen and (min-width: 961px){
	
	#Special .inBox .specialBox .mainBtn a:hover {
        color: var(--color-main);
        background: var(--color-white);
	}

    #Special .inBox .specialBox .btnBox {
        display: flex;
        justify-content: center;
    }
    #Special .inBox .specialBox .btnBox .mainBtn {
        width: 47.5%;
        max-width: 300px;
        margin-right: 30px;
    }
    #Special .inBox .specialBox .btnBox .mainBtn:last-child {
        margin-right: 0;    
    }
    #Special .inBox .specialBox .btnBox .mainBtn a {
        margin: 0 auto;
    }
	
}

@media screen and (max-width: 960px){

    #Special {}
    #Special h3 {}
    #Special .inBox {
        display: block;
    }

	#Special .inBox .specialBox {
        max-width: 600px;
        width: 100%;
        padding: 25px 20px 30px;
        margin: 0px auto 20px;
	}
	#Special .inBox .specialBox:last-child {}

	#Special .inBox .specialBox .specialBoxTit {
        margin: 0 0 25px;
        font-size: 16px;
	}

    #Special .inBox .specialBox .btnBox {}
    #Special .inBox .specialBox .btnBox .mainBtn {}
    #Special .inBox .specialBox .btnBox .mainBtn:last-child {}
    #Special .inBox .specialBox .btnBox .mainBtn a {}

	#Special .inBox .specialBox .mainBtn {}
	#Special .inBox .specialBox .mainBtn a {
        line-height: 1;
        margin: 0 auto 15px;
    }

}



/*===================================================
	footer
====================================================*/
footer {
    z-index: 2;
    position: relative;
    padding: 60px 0;
    background: var(--color-white);
}
footer .inner {
    padding: 0 40px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
footer .inner a {
    display: block;
}
footer .logo_official {
    width: 100px;
}
footer .logo_yoani {
    width: 200px;
}
footer .logo_yoani a {
    line-height: 1;
    margin: 0 0 5px;
}
footer .copyright {
    display: block;
    font-size: 12px;
    text-align: right;
    color: var(--color-black);
}

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

    footer .logo_official a, 
    footer .logo_yoani a {
        cursor: pointer;
    }
    footer .logo_official a:hover, 
    footer .logo_yoani a:hover {
        opacity: 0.7;
    }
	
}

@media screen and (max-width: 960px){

    footer {
        padding: 30px 5%;
    }
    footer .inner {
        padding: 0;
    }
    footer .inner .logo_official {
        width: 25%;
        max-width: 100px;
    }
    footer .inner .logo_yoani {
        width: 65%;
    }
    footer .inner .logo_yoani a {
        margin: 0 0 5px auto;
        width: 80%;
        max-width: 200px;
    }
    footer .copyright {
        font-size: 10px;
    }

}