@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/aos/aos.css);
/* @import url(../libs/fontawesome/css/all.min.css); */
@import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css);
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
index
==============================*/

/* header ----------*/
#header .logo .ico.-mark { fill: #FFF; transition: all 0.3s ease-out; }
.show_pageup #header .logo .ico.-mark { fill: #F7B52C; }
#nav .link li a:hover { color: #FFF; }
#nav .link li a:hover .ico { fill: #FFF; }

/* mv ----------*/
#mv { position: relative; width: 100%; overflow: hidden; background: radial-gradient(circle farthest-corner at 50% 55.35%, #FFD0E0 28%, #F69 100%); }
#mv .bg_mark { position: absolute; z-index: 2; top: 18%; right: -5%; width: 115rem; fill: rgba(255,255,255,0.3); }
#mv::after { position: absolute; z-index: 1; top: 55.35%; left: 50%; content: ""; width: 58%; min-width: 110rem; max-width: 128rem; aspect-ratio: 1; border-radius: 100%; background: rgba(255, 112, 160, 0.60); opacity: var(--mv-after-opacity, 1); transform: translate(-50%, -50%) scale(var(--mv-after-scale, 1)); will-change: transform, opacity; }
#mv .inner { position: relative; z-index: 3; max-width: 89rem; padding-top: 14rem; }
#mv h2 { position: relative; top: -6rem; left: -24rem; transform: rotate(-15deg); }
#mv .art__tw { margin-top: 3rem; }
#mv .art__iw { margin-top: 3rem; }
#mv .art__h { font-size: 2.4rem; line-clamp: 2; -webkit-line-clamp: 2; height: 2.7em; }
#mv .art__lead { line-clamp: 1; -webkit-line-clamp: 1; height: 1.4em; }
#mv .art__iw { display: flex; padding-top: 1rem; gap: 2rem; align-items: center; border-top: solid 1px rgba(255,255,255,0.3); }
#mv .art__date span { color: #FF6699; background-color: #FFF; }
#mv .art__like { margin-left: auto; }
#mv .owl-carousel .owl-stage-outer { overflow: visible; }
#mv .owl-stage { display: flex; height: 63rem; align-items: flex-end; }
#mv .owl-item { display: grid; place-items: center; }
#mv .owl-item li { width: 50%; transition: all 0.6s ease-out; }
#mv .owl-item.active li { width: 100%; }
#mv .owl-nav { position: absolute; top: calc(50% - 8.6rem - 6.25rem); left: -18rem; display: flex; width: calc(100% + 34rem); pointer-events: none; }
#mv .owl-nav .disabled { opacity: 0; transition: all 0.3s ease-out; pointer-events: none; }
#mv .owl-nav .owl-next { margin-left: auto; }
#mv .owl-nav button { pointer-events: all; }
#mv .owl-dots { display: flex; margin-top: 7rem; padding-bottom: 4rem; gap: 2rem; justify-content: center; }
#mv .owl-dots .owl-dot { position: relative; width: 1.5rem; aspect-ratio: 1; border-radius: 100%; background-color: #000; }
#mv .owl-dots .owl-dot::before { position: absolute; top: 50%; left: 50%; content: ""; width: 1rem; aspect-ratio: 1; border-radius: 100%; border: solid 1px #000; transform: translate(-50%, -50%); transition: all 0.3s ease-out; }
#mv .owl-dots .owl-dot.active::before { width: 3rem; }
@media screen and (max-width:1660px) {
	#mv .bg_mark { right: -15%; }
}
@media screen and (max-width:1440px) {
	#mv .owl-item li { width: 60%; }
	#mv .owl-nav { left: -12rem; width: calc(100% + 24rem); }
}
@media screen and (max-width:1360px) {
	#mv h2 { left: -12rem; }
}
@media screen and (max-width:1260px) { /* x */
	#mv::after { width: 86%; min-width: auto; }
	#mv .inner { max-width: 70vw; }
	#mv h2 { width: 30vw; }
	#mv .owl-stage { height: 52vw; }
	#mv .owl-item li { width: 70%; }
	#mv .owl-nav { left: -8vw; width: calc(100% + 15.5vw); }
	#mv .owl-nav svg { width: 6vw;	height: auto; }
}
@media screen and (max-width:480px) { /* s */
	#mv .inner { max-width: 85vw; padding-top: 20vw; }
	#mv .bg_mark { right: -15%; top: 24%; }
	#mv::after { width: 102%; }
	#mv h2 { top: 0; left: -13vw; }
	#mv .art__tw { margin-top: 1.5rem; }
	#mv .art__iw { margin-top: 1.5rem; display: grid; grid-template-areas: "a b" "c c"; gap: 1rem; }
	#mv .art__date { grid-area: a; }
	#mv .art__rpt { grid-area: c; }
	#mv .art__like { grid-area: b; }
	#mv .owl-stage { height: 80vw; }
	#mv .art__h { font-size: 2rem; }
	#mv .owl-nav { top: calc(50% - 8.6rem - 3rem); }
	#mv .owl-dots { margin-top: 3rem; padding-bottom: 2rem; gap: 1.5rem; }
	#mv .owl-dots .owl-dot { width: 1rem; }
	#mv .owl-dots .owl-dot.active::before { width: 2rem; }
}