@charset "utf-8";
/* ==================================================
		
		top

================================================== */
 /* --------------------------------------------------
		mv
-------------------------------------------------- */
#mv .mv-inner {
 position: relative;
 padding: 0;
 height: 100vh;
 max-height: 810px;
}
#mv .mv-inner .mv-box {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 width: 29%;
 left: -100px;
}
#mv .mv-inner .mv-box .logo {
 width: 100%;
 fill: #ffffff;
}
#mv .mv-inner .mv-box .txt {
 font-size: 1.8rem;
 color: #fff;
 line-height: 1.5;
 letter-spacing: 0.5px;
 padding-top: 14px;
}
#mv .mv-inner .mv-box .mvbtn {
 margin-top: 36px;
}
#mv .mv-inner .mv-box .mvbtn a {
 color: #ffffff;
 font-weight: normal;
 letter-spacing: 0.5px;
 height: 68px;
 font-size: 1.4rem;
 border: 3px solid #ffffff;
 background: none;
 transition: none;
}
.mvbtn a:hover {
 transition: opacity 0.5s;
 opacity: 0.7;
}
#mv .mv-inner .mv-box .mvbtn a span {
 position: relative;
 margin-left: -20px;
}
#mv .mv-inner .mv-box .mvbtn a .iconArrowRight03 {
 width: 33px;
 height: 10px;
 position: absolute;
 top: 50%;
 right: -40px;
 margin: -5px 0 0 0;
 transition: 0.1s ease-out;
}
#mv .mv-inner .vol {
 position: absolute;
 bottom: 50px;
 right: -100px;
}

/* --------------------------------------------------
		sidebar
-------------------------------------------------- */
.sidebar {
 position: absolute;
 top: 0;
 right: 0;
 z-index: 5;
 width: 56px;
 height: 599px;
 background: #000000;
 opacity: 0;
 -webkit-transition: 1s ease-out;
 transition: 1s ease-out;
 -webkit-transition-duration: 0.5s;
 transition-duration: 0.5s;
 -webkit-transition-delay: 0.2s;
 transition-delay: 0.2s;
}
.sidebar.anime {
 opacity: 1;
}
.sidebar img {
 width: 26.83%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
}

 /* --------------------------------------------------
		inner02
-------------------------------------------------- */
.inner02 {
 max-width: 100%;
 background: #f2f0ef;
 padding-bottom: 70px;
}
.index #pickup .inner02 #pickup02 .img01 {
 width: 42.2%;
}

 /* --------------------------------------------------
		inner03
-------------------------------------------------- */
.inner03 {
 max-width: 100%;
 padding: 90px 20px 0;
}
.inner03 .icon {
 font-size: 1.5rem;
 font-weight: 400;
 color: #ffffff;
 background: #f58220;
 text-align: center;
 padding: 9px 33px 9px 31px;
 position: absolute;
 top: 0;
 left: 127px;
 z-index: 5;
 opacity: 0;
 -webkit-transition: 1s ease-out;
 transition: 1s ease-out;
 -webkit-transition-duration: 0.5s;
 transition-duration: 0.5s;
 -webkit-transition-delay: 0.2s;
 transition-delay: 0.2s;
}
.index #pickup .inner03 .pickupContent .boxbk {
 -webkit-transition: 1s ease-out;
 transition: 1s ease-out;
 -webkit-transition-duration: 0.5s;
 transition-duration: 0.5s;
 -webkit-transition-delay: 0.4s;
 transition-delay: 0.4s;
 margin: 30px 0 0;
 opacity: 0;
 left: 50px;
}
.index #pickup .inner03 .pickupContent.anime .boxbk {
 opacity: 1;
 left: 0;
}

/* --------------------------------------------------
		btn
-------------------------------------------------- */
.index #pickup .inner .pickupContent .articleBox .blbtn a {
 color: #ffffff;
 font-size: 1.5rem;
 letter-spacing: -0.5px;
 font-weight: 400;
 width: 184px;
 height: 68px;
 line-height: 66px;
 background: #000000;
}
.blbtn a span {
 margin-left: -41px;
}
.blbtn a .iconArrowRight03, 
.colorbtn a .iconArrowRight03 {
 width: 33px;
 height: 10px;
 right: 30px;
}
.inner02 .blbtn.hoverSlide a:before {
 content: "";
 color: #000000;
 display: block;
 width: 0;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background: #f2f0ef;
 transition: 0.2s ease-out;
}
.index #pickup .inner02 .pickupContent .articleBox .blbtn a:hover {
 color: #000000;
}
.inner02 .blbtn a:hover .iconArrowRight03 {
 fill: #000000;
}
.index #pickup .inner03 .pickupContent .articleBox .colorbtn {
 margin: 22px 0 0;
}
.index #pickup .inner .pickupContent .articleBox .colorbtn a {
 color: #ffffff;
 font-size: 1.5rem;
 letter-spacing: -0.5px;
 font-weight: 400;
 width: 184px;
 height: 68px;
 line-height: 66px;
 background: #f58220;
 border: 1px solid #f58220;
}
.colorbtn a span {
 margin-left: -40px;
}
.inner03 .colorbtn.hoverSlide a:before {
 content: "";
 color: #000000;
 display: block;
 width: 0;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background: #ffffff;
 transition: 0.2s ease-out;
}
.index #pickup .inner03 .pickupContent .articleBox .colorbtn a:hover {
 color: #f58220;
}
.inner03 .colorbtn a:hover .iconArrowRight03 {
 fill: #f58220;
}


@media screen and (max-width: 1480px) {
 /* --------------------------------------------------
		mv
-------------------------------------------------- */
#mv .mv-inner .mv-box .logo {
 width: 100%;
}
#mv .mv-inner .mv-box {
 left: 20px;
}
 #mv .mv-inner .vol {
 right: 20px;
}
 
}


@media screen and (max-width: 1024px) {
 /* --------------------------------------------------
		mv
-------------------------------------------------- */
#mv .mv-inner .mv-box {
 width: 35%;
}
#mv .mv-inner .mv-box .logo {
 width: 87%;
 margin: 0 auto;
}
#mv .mv-inner .mv-box .txt {
 padding-top: 0;
 margin-top: -10px;
}
#mv .mv-inner .mv-box .mvbtn {
 margin-top: 30px;
}
#mv .mv-inner .mv-box .mvbtn a {
 line-height: 41px;
 height: 51px;
}
#mv .mv-inner .vol {
 width: 55%;
}

/* --------------------------------------------------
		sidebar
-------------------------------------------------- */
.sidebar {
 width: 5%;
}

 /* --------------------------------------------------
		inner02
-------------------------------------------------- */
.index #pickup .inner02 #pickup02 {
 padding: 0;
}

 /* --------------------------------------------------
		inner03
-------------------------------------------------- */
.index #pickup .inner03 #pickup01, 
.index #pickup .inner03 #pickup03 {
 padding: 0 20px;
 margin-top: 80px;
}
.index #pickup .inner #pickup01 .articleBox,
.index #pickup .inner #pickup03 .articleBox {
 width: 58%;
} 
.index #pickup .inner03 .pickupContent .boxbk {
 right: 0;
 width: 58%;
}
.index #pickup .inner03 #pickup01 .img01, 
.index #pickup .inner03 #pickup03 .img01 {
 left: 0;
}
.inner03 .icon {
 left: 0 !important;
}
 
}


@media screen and (max-width: 750px) {
 /* --------------------------------------------------
		mv
-------------------------------------------------- */
#mv .mv-inner .mv-box {
 width: 70%;
 margin: 0 auto;
 left: 0;
 right: 0;
 margin-top: -30px;
}
#mv .mv-inner .mv-box .logo {
 width: 100%;
}
#mv .mv-inner .mv-box .txt {
 margin-top: 10px;
 font-size: 1.5rem;
 line-height: 1.8;
}
#mv .mv-inner .mv-box .mvbtn a {
 line-height: 48px;
 height: 56px;
}
#mv .mv-inner .vol {
 width: 70%;
 bottom: 40px;
}
 
/* --------------------------------------------------
		sidebar
-------------------------------------------------- */
.sidebar {
 display: none;
}

 /* --------------------------------------------------
		inner02
-------------------------------------------------- */
.inner02 {
 padding-bottom: 30px;
}
.index #pickup .inner02 #pickup02 .img01 {
 width: 90%;
 padding: 0;
 margin: 0 auto 0;
 padding-top: 30px;
}

 /* --------------------------------------------------
		inner03
-------------------------------------------------- */
.inner03 {
 padding: 0;
 margin-top: -40px;
}
.index #pickup .inner03 #pickup01, 
.index #pickup .inner03 #pickup03 {
 padding: 0 27px;
 margin-top: 30px;
}
.index #pickup .inner #pickup01 .articleBox,
.index #pickup .inner #pickup03 .articleBox {
 width: 100%;
} 
.index #pickup .inner03 .pickupContent .boxbk {
 right: 0;
 width: 100%;
 margin: 0 auto;
 padding: 20px;
 box-shadow: 5px 5px 0px 0 #dbdbdb;
 }
.index #pickup .inner03 #pickup01 .img01, 
.index #pickup .inner03 #pickup03 .img01 {
 left: 0;
 bottom: -40px;
 padding: 0;
}
.inner03 .icon {
 left: 20px;
 padding: 8px 30px 7px 30px;
 margin-top: 40px;
}
.index #pickup .inner .pickupContent.anime .icon {
 left: 0;
}
 
 /* --------------------------------------------------
		btn
-------------------------------------------------- */
.index #pickup .inner .pickupContent .articleBox .blbtn a, 
.index #pickup .inner03 .pickupContent .articleBox .colorbtn a{
 height: 47px;
 line-height: 45px;
}
 
}