@charset "utf-8";

:root {
    --bg: #e0a3af;
    --main: #F892B2;
    --sub: #a2a8ac;
    --white: #fff;
    --black: #222;

    --commonFont: "Shippori Mincho", serif;
    --titleFont: "Cormorant Garamond", serif;
}



/*===================================================
	ani
====================================================*/
.loader {
    position: fixed;
    height: 100%;
    width: 100%;
    background: var(--sub);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader .loaderLogo {}
.loader .loaderLogo img {
    aspect-ratio: 375 / 1322;
    width: auto;
    height: 65svh;
}

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

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

.loaded .act01 img {
    transition-delay: 1.5s;
    transform: translateX(0);
}
.loaded .act02 img {
    transition-delay: 1.75s;
    transform: translateY(0);
}
.loaded .act03 img { 
    transition-delay: 2s; 
    transform: translateY(0);
}
.loaded .act04 img { 
    transition-delay: 2.5s; 
    transform: translateY(0);
}
.loaded .act05 img { 
    transition-delay: 2.75s; 
    transform: translateY(0);
}

section h3.anim span {
    opacity: 0;
    display: inline-block;
    transition: all .25s 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}

section#MusicVideo .mov.anim,
section#Special .inBox .specialBox.anim {
    opacity: 0;
    transition: all .5s ease-out; 
    transform: translateY(30px);
}
section#MusicVideo .mov.anim.on,
section#Special .inBox .specialBox.anim.on {
    opacity: 1;
    transform: translateY(0);
}

#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 .loaderLogo {}
    .loader .loaderLogo img {
        height: 45svh;
    }


    .act03 img,
    .act04 img,
    .act05 img {
        transform: translate(20px, 0);
    }
    .loaded .act03 img { 
        transform: translateX(0);
    }
    .loaded .act04 img { 
        transform: translateX(0);
    }
    .loaded .act05 img { 
        transform: translateX(0);
    }

    section#MusicVideo .inBox.anim,
    section#Special .inBox .specialBox.anim {
        transform: translateY(20px);
    }

    #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%;
    padding: 0;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    overflow: hidden;
    background-color: var(--bg);
}
.bgBox .bg {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.bgBox .bg01 {
    z-index: 1;
    background: url(/static/equallove/official/feature/single19th/image/ph_bg_0e9n1Q7d.jpg);
    background-position: center center;
    background-size: contain;
    background-repeat: repeat-y;
    mix-blend-mode: color-burn;
    opacity: 0.2;
}
.bgBox .bg02 {
    z-index: 2;
    background: url(/static/equallove/official/feature/single19th/image/ph_bgItem_0e9n1Q7d.png);
    background-position: center center;
    background-size: contain;
    background-repeat: repeat-y;
    mix-blend-mode: overlay;
    opacity: 0.1;
}

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

	.bgBox {}
	.bgBox .bg {}
    .bgBox .bg01 {
        z-index: 1;
        background: url(/static/equallove/official/feature/single19th/image/ph_bg_sp_0e9n1Q7d.png);
        background-position: center center;
        background-size: contain;
    }
    .bgBox .bg02 {
        z-index: 2;
        background: url(/static/equallove/official/feature/single19th/image/ph_bgItem_sp_0e9n1Q7d.png);
        background-position: center center;
        background-size: contain;
    }

}



/*===================================================
	memu
====================================================*/
.hamBtn {
    display: block;
    position: fixed;
    right: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background: var(--white);
    transition: all .3s ease;
    cursor: pointer;
    z-index: 9998;
    border-radius: 0 0 0 10px;
}
.hamBtn span {
    display: block;
    position: absolute;
    right: 25%;
    width: 50%;
    height: 2px;
    background: var(--main);
    transition: all .3s ease;
}
.hamBtn :nth-of-type(1) {
    top: 15px;
}
.hamBtn :nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}
.hamBtn :nth-of-type(3) {
    bottom: 15px;
}
.hamBtn.open span {}
.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(--commonFont);
    color: var(--white);
}
.navigation.active {
    transition: opacity 0.5s ease;
    pointer-events:auto;
    opacity:1;
}

.navigation .headerNavBox {
    background: var(--sub);
    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;
}
.navigation .heroNavLogo a img {
    aspect-ratio: 454 / 1601;
    height: 60vh;
}

.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 {
    font-family: var(--titleFont);
    font-size: 32px;
    text-decoration: none;
    line-height: 1;
    font-weight: bold;
    letter-spacing: 0.03em;
    color: var(--white);
}

.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;
}
.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(--main);
    color: var(--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: 45px;
        height: 45px;
    }
    .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 30px;
    }
    .navigation .heroNavLogo a img {
        height: 35svh;
        width: auto;
    }
    .navigation .headerNav li {
        position: relative;
        margin: 0 0 15px;
    }
    .navigation .headerNav li:nth-last-child(2) {
        margin-bottom: 30px;
    }
    .navigation .headerNav li a {
        font-size: 28px;
        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(--commonFont);
	position: relative;
    z-index: 1;
	line-height: 1.5;
	font-size: 16px;
	color: var(--white);
}

.container {
    position: relative;
}

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

section h3 {
    font-family: var(--titleFont);
    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: 100svh;
    min-height: 600px;
    overflow: hidden;
    margin: 0 0 160px;
}

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

.scrollBox {
    position: absolute;
    width: 100%;
    height: 100svh;
    top: 0;
    z-index: 1;
    pointer-events: none;
}
.scrollBox .scrollArrow {
    width: 1px;
    height: 60px;
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index: 1;
    background: var(--white);
    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;
}
}

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

    #heroView .heroInner .kv {
        position: absolute;
        top: 0;
        left: 0;
        width: 80%;
        height: 100%;
        border-radius: 0 60px 60px 0;
        overflow: hidden;
    }
    #heroView .heroInner .kv img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 45% 50%;
    }
    #heroView .heroInner .txtBox {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20%;
    }
    #heroView .heroInner .txtBox .topTxt {
        width: 50%;
        margin: 0 auto 9%;
    }
    #heroView .heroInner .txtBox .logo {
        width: 40%;
        margin: 0 auto 9%;
    }
    #heroView .heroInner .txtBox .dateBox {
        width: 50%;
        margin: 0 auto;
    }
    #heroView .heroInner .txtBox .dateBox .dateTxt {}
    #heroView .heroInner .txtBox .dateBox .dateTxt.dateTxt01 {
        margin: 0 auto 5%;
    }
    #heroView .heroInner .txtBox .dateBox .dateTxt.dateTxt02 {}

}

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

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

	#heroView .heroInner {
        top: 50%;
        transform: translateY(-50%);
        height: initial;
    }
    #heroView .heroInner .kv {
        width: calc(100% - 20px);
        max-width: 750px;
        height: 47.5svh;
        border-radius: 0 20px 20px 0;
        overflow: hidden;
    }
    #heroView .heroInner .kv img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 44% 50%;
    }
    #heroView .heroInner .txtBox {
        margin: 40px 0 0 20px;
        width: 45%;
        max-width: 200px;
    }
    #heroView .heroInner .txtBox .topTxt {
        width: 60%;
        margin: 0 0 9%;
        line-height: 1;
    }
    #heroView .heroInner .txtBox .dateBox {}
    #heroView .heroInner .txtBox .dateBox .dateTxt {}
    #heroView .heroInner .txtBox .dateBox .dateTxt.dateTxt01 {
        margin: 0 0 6%;
    }
    #heroView .heroInner .txtBox .dateBox .dateTxt.dateTxt02 {
        width: 75%;
    }
    #heroView .heroInner .logo {
        position: absolute;
        aspect-ratio: 375 / 1322;
        bottom: 0;
        right: 40px;
        height: 60%;
    }

	.scrollBox .scrollArrow {
	    left: initial;
        right: 20px;
	    bottom: 20px;
	}
	
}



/*===================================================
    Music Video
====================================================*/
#MusicVideo {}
#MusicVideo h3 {}
#MusicVideo .inBox {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

#MusicVideo .inBox .mov {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    box-shadow: 10px 10px var(--white);
    margin-bottom: 40px;
    border-radius: 40px;
    overflow: hidden;
}
#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 {}

	#MusicVideo .inBox .mov {
        margin-bottom: 20px;
        border-radius: 20px;
        box-shadow: 5px 5px var(--white);
    }
	#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;
    border-radius: 30px;
    overflow: hidden;
    width: 45%;
    position: sticky;
    top: 120px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 10px 10px var(--white);
}
#Product .inBox .productBox .productImg img {}
#Product .inBox .productBox .productDetail {
    position: relative;
    width: 55%;
    z-index: 1;
    padding: 0 0 0 5%;
}
#Product .inBox .productBox:nth-child(even) .productDetail {
    padding: 0 5% 0 0;;
}
#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: 14px;
    border: 1px solid;
    padding: 0 10px 2px;
    margin-right: 10px;
    font-weight: bold;
    border-radius: 100px;
}
#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 {
    color: var(--white);
    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(--white);
    color: var(--main);
    border-radius: 100px;
    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(--white);
    color: var(--main);
    border-radius: 100px;
    display: flex;
    font-size: 14px;
    align-items: center;
}
#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(--sub);
}

@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 25px;
        position: relative;
        top: 0;
        border-radius: 20px;
        box-shadow: 5px 5px var(--white);
	}
    #Product .inBox .productBox .productImg img {}
	#Product .inBox .productBox .productDetail {
        width: 100%;
        padding: 0;
	}
    #Product .inBox .productBox:nth-child(even) .productDetail {
        padding: 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 {
    display: flex;
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    justify-content: space-between;
}

#Special .inBox .specialBox {
    width: calc(50% - 40px / 2);
    max-width: 600px;
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    color: var(--main);
}
#Special .inBox .specialBox:last-child {
    margin: 0 auto;
}

#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: 15px 30px;
    color: var(--white);
    width: 100%;
    max-width: 350px;
    text-align: center;
    background: var(--main);
    border: 1px solid var(--main);
    margin: 0 auto;
    text-decoration: none;
    font-weight: bold;
    border-radius: 100px;
}

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

	/*===================================================
		hover
	====================================================*/
	
	#Special .inBox .specialBox .mainBtn a:hover {
        color: var(--main);
        background: var(--white);
	}
	
}

@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 .mainBtn {}
	#Special .inBox .specialBox .mainBtn a {}

}


/*===================================================
	footer
====================================================*/
#footer {
    width: 100%;
    padding: 0 0 40px;
    position: relative;
    z-index: 10;
}
#footer dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}
#footer dl dt a {
    height: 74px;
    display: block;
}
#footer dl dt svg {
    width: 150px;
    height: 74px;
    fill: var(--black);
}
#footer dl dd .yoani {
	display: block;
    width: 180px;
    margin: 0 auto 10px;
    line-height: 0;
}
#footer .copy {
    display: inline-block;
    font-size: 10px;
    color: var(--black);
}

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

	#footer dl dt svg,
	#footer dl dd .yoani img {
		-webkit-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}

	#footer dl dt a:hover svg,
	#footer dl dd .yoani:hover img {
	    opacity: 0.7;
	}
	
}

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

	#footer {}
	#footer dl {
		display: flex;
	    align-items: center;
	    padding: 0;
	    flex-direction: column;
	    justify-content: inherit;
	}
	#footer dl dt a {
		margin: 0 0 30px;
	    height: 54px;
	}
	#footer dl dt svg {
	    width: 110px;
	    height: 54px;
	}
	#footer dl dd .yoani {}
	#footer .copy {}

}