@charset "UTF-8";
header{
 position: sticky;
 transition: box-shadow 0.3s ease;
 box-shadow: none;
}
.header.is-scrolled {
 box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}
header + div{
 margin: 20px 0 0;
}
.top{
 background: linear-gradient(135deg, #C20064, #D0155B, #DB2852, #E53B47, #EB4D3C, #F0602F, #F1721E, #F08500);
 margin-top: 20px;
}
.top > img{
 width: 100%;
}
.top > div{
 color: #fff;
 display: flex;
 justify-content: center;
 width: fit-content;
 margin: 0 0 0 auto;
 gap: 50px;
 padding-left: 60px;
}
.top > div:nth-child(1){
 top: 634px;
 left: 35px;
}
.top > div:nth-child(1) > p{
 font-size: 100px;
 font-weight: bold;
 letter-spacing: -0.05rem;
 line-height: 1.38;
}
.top > div > div{
 display: flex;
 margin: 100px 0 80px 0;
 gap: 63px;
 position: relative;
}
.top > div > div > p{
 writing-mode: sideways-rl;
 letter-spacing: 0rem;
}
.top > div > div > div > p{
 line-height: 3;
 margin: 50px 0;
 font-size: 18px;
}
.top > div:nth-child(1) > div{
 display: flex;
 gap: 10px;
 align-items: center;
}
.top > div:nth-child(1) > div p{
 font-weight: bold;
}
.top > div:nth-child(1) > div p:nth-child(1){
 font-size: 60px;
 letter-spacing: -0.05rem;
 line-height: 0.83;
}
.top > div:nth-child(1) > div p:nth-child(2){
 font-size: 20px;
 line-height: 0.6;
}
.top > div:nth-child(2){
 width: 100%;
 display: flex;
 gap: 50px;
 margin: 0 0 0 60px;
 justify-content: space-between;
}
.top > div:nth-child(2) > img{
 width: 577px;
}
.top > div:nth-child(2) > p{
 writing-mode: sideways-rl;
 font-size: 18px;
 font-weight: bold;
}
.top > div:nth-child(2) > div{
 display: flex;
 gap: 63px;
}
.top > div:nth-child(2) > div > p{
 writing-mode: sideways-rl;
 letter-spacing: 0;
}
.top > div:nth-child(2) > div > div > p{
 margin: 50px 0 0;
 line-height: 3;
}
.top > div:nth-child(2) > div .link-btn{
 margin: 62px 0 0;
}
.top > div > img{
 width: 47.5%;
 margin: 0 0 0 auto;
 height: fit-content;
}
.our-method{
 display: flex;
 justify-content: space-between;
 padding: 123px 0 100px;
}
.our-method > div{
 width: 100%;
}
.our-method > div:nth-child(2){
 position: relative;
 display: flex;
 justify-content: space-around;
 align-items: flex-end;
 height: 690px;
}
.our-method div:nth-child(1) div p{
 font-size: 18px;
 line-height: 2;
}
.our-method .left-box div{
 display: grid;
 gap: 50px;
}
.our-method > div:nth-child(2) div:first-child{
 width: 192px;
}
.our-method > div:nth-child(2) div:last-child{
 width: 188px;
}
.our-method > div:nth-child(2) div div + div{
 margin: 20px 0 0;
}
.our-method div:nth-child(2) img{
 position: absolute;
 width: 750px;
 left: -20px;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
}
.our-method > div:nth-child(2) > div > div > p{
 font-size: 15px;
}
.our-method > div:nth-child(2) > div > div > ul li{
 font-size: 14px;
}
.our-method > div:nth-child(2) > div > div > p{
 color: #fff;
 background: linear-gradient(135deg, #C20064, #D0155B, #DB2852, #E53B47, #EB4D3C, #F0602F, #F1721E, #F08500);
 padding: 4px 10px;
 margin: 0 0 5px;
}
.our-method > div:nth-child(2) > div > div > ul{
 display: flex;
 flex-wrap: wrap;
 gap: 5px 10px;
}
.menu{
 padding: 150px 0 90px;
}
.menu .inner{
 padding: 0;
}
.menu .inner > div{
 display: flex;
 justify-content: space-between;
 margin: 0;
}
.menu .inner > div > div:nth-child(1){
 width: fit-content;
 height: fit-content;
 position: sticky;
 top: 160px;
}
.menu .mid-txt + p{
 font-size: 18px;
 font-weight: 500;
 margin: 50px 0 0;
 line-height: 2;
}
.menu .menu-list{
 width: 50%;
 min-width: 720px;
 display: grid;
 gap: 80px;
}
.menu .menu-list .menu-item img{
 width: 100%;
}
.menu .menu-list .menu-item .about{
 display: flex;
 gap: 44px;
 justify-content: space-between;
}
.menu .menu-list .menu-item .about div:nth-child(1){
 color: #C20064;
 padding: 20px 0 20px 20px;
}
.menu .menu-list .menu-item .about div:nth-child(1) p{
 font-size: 30px;
 font-weight: bold;
}
.menu .menu-list .menu-item .about div:nth-child(1) ul{
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin: 15px 0 0;
}
.menu .menu-list .menu-item .about div:nth-child(1) ul li{
 padding: 8px 10px;
 border: solid 1px;
 border-radius: 5px;
}
.menu .menu-list .menu-item .about > div:nth-child(2){
 display: flex;
 align-items: center;
 gap: 50px;
 width: 50%;
 min-width: 400px;
 background: linear-gradient(135deg, #C20064, #D0155B, #DB2852, #E53B47, #EB4D3C, #F0602F, #F1721E, #F08500);
 margin: -50px 0 0;
 padding: 30px 30px 30px 50px;
}
.menu .menu-list .menu-item .about > div:nth-child(2) img{
 width: fit-content;
 height: 230px;
}
.menu .menu-list .menu-item .about > div:nth-child(2) div,
.menu .menu-list .menu-item .about > div:nth-child(2) div a{
 color: #fff;
}
.menu .menu-list .menu-item .about > div:nth-child(2) > div p:nth-child(1){
 font-size: 17px;
 font-weight: bold;
}
.menu .menu-list .menu-item .about > div:nth-child(2) > div p:nth-child(2){
 font-size: 15px;
 font-weight: 600;
 margin: 10px 0 0;
 line-height: 1.7;
}
.menu .menu-list .menu-item .about > div:nth-child(2) > div a{
 display: block;
 position: relative;
 width: fit-content;
 background-color: #0A0A0A;
 padding: 8px 24px 8px 12px;
 border-radius: 5px;
 margin: 20px 0 0;
 font-weight: 500;
}
.menu .menu-list .menu-item .about > div:nth-child(2) > div a::after{
 position: absolute;
 content: "";
 background: url("../images/common/icon-arrow-right.svg") no-repeat center center;
 background-size: cover;
 width: 4px;
 height: 8px;
 top: 0;
 bottom: 0;
 right: 12px;
 margin: auto;
}
.symptoms{
 padding: 133px 0 90px;
 background: linear-gradient(135deg, #C20064, #D0155B, #DB2852, #E53B47, #EB4D3C, #F0602F, #F1721E, #F08500);
}
.symptoms h2{
 color: #fff;
}
.symptoms h2 span{
 display: block;
 margin: 23px 0 0;
 font-size: 24px;
 letter-spacing: 0;
}
.symptoms ul{
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 margin: 50px auto 0;
}
.symptoms ul li{
 width: calc((100% - 20px)/2);
 background: #fff;
}
.symptoms ul li:nth-child(n+3){
 width: calc((100% - 60px)/4);
}
.symptoms ul li a{
 position: relative;
 display: flex;
 gap: 30px;
 align-items: center;
 width: 100%;
 height: 100%;
 padding: 30px 35px;
}
.symptoms ul li a:after{
 position: absolute;
 content: "";
 width: 10px;
 height: 10px;
 background: url('../images/common/icon-arrow-right-up-pink.svg') no-repeat center center;
 background-size: cover;
 top: 20px;
 right: 20px;
}
.symptoms ul li a div p:nth-child(1),
.symptoms ul li:nth-child(n+3) a p{
 font-size: 17px;
 font-weight: bold;
 color: #C20064;
}
.symptoms ul li a div p:nth-child(2){
 font-size: 16px;
 margin: 5px 0 0;
}
.symptoms .link-btn{
 width: fit-content;
 margin: 50px auto 0;
}
.owned-media{
 padding: 133px 0 100px;
 overflow: hidden;
}
.owned-media .inner{
 max-width: unset;
}
.owned-media .inner h2{
 max-width: 1320px;
 margin: 0 auto;
}
.owned-media .inner .mid-txt{
 max-width: 1320px;
 margin: 23px auto 50px;
}
.owned-media .inner .slider-area{
 margin: 0 0 0 60px;
}
.owned-media .link-btn{
 display: block;
 width: fit-content;
 margin: 50px auto 0;
}
.owned-media .link-btn a{
 color: #C20064;
}
.owned-media .link-btn a:after{
 background: url('../images/common/icon-arrow-right-circle-pink.svg') no-repeat center center;
}
.shop-list{
 padding: 123px 0 100px;
}
@media screen and (min-width:769px) and ( max-width:1441px) {
 
}
@media (max-width: 768px) {
 header{
  margin: 0 auto;
  top: 10px;
  transition: .3s;
 }
 header + div{
  overflow: hidden;
 }
 header.is-scrolled{
  top: 20px;
  transition: .3s;
 }
 .our-method,
 .menu,
 .symptoms,
 .owned-media{
  padding: 40px 0;
 }
 .top > div{
  padding: 0 0 50px;
  margin: 50px 20px 0;
 }
 .top > div > div{
  display: block;
  margin: 0;
  position: unset;
 }
 .top > div > div p{
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: bold;
  writing-mode: unset;
 }
 .top > div > div > div p{
  font-size: 0.91rem;
  font-weight: 400;
  line-height: 2.8;
 }
 .top > div > div > div > p{
  margin: 10px 0 0;
 }
 .top .link-btn{
  margin: 30px 0 0;
 }
 .top > div:nth-child(1) > p{
  font-size: 40px;
 }
 .top > div:nth-child(1) > div{
  gap: 8px;
 }
 .top > div:nth-child(1) > div p:nth-child(1){
  font-size: 24px;
 }
 .top > div:nth-child(1) > div p:nth-child(2){
  font-size: 10px;
 }
 .top > div:nth-child(2){
  display: block;
  top: 685px;
  left: 30px;
 }
 .top > div:nth-child(2) > p{
  writing-mode: unset;
  font-size: 14px;
  font-weight: bold;
 }
 .top > div:nth-child(2) > div > p{
  margin: 30px 0 0;
  font-size: 16px;
  font-weight: 400;
 }
 .top > div:nth-child(2) > div .link-btn{
  margin: 50px 0 0;
 }
 .top + img{
  width: 100%;
 }
 .our-method{
  display: block;
 }
 .our-method .left-box div{
  gap: 20px;
 }
 .our-method div:nth-child(1) div p{
  font-size: 0.92rem;
 }
 .our-method > div:nth-child(2){
  display: block;
  height: auto;
 }
 .our-method > div:nth-child(2) div:first-child{
  order: 2;
  width: 100%;
 }
 .our-method > div:nth-child(2) div:first-child{
  width: 100%;
 }
 .our-method > div:nth-child(2) div:last-child{
  width: 100%;
 }
 .our-method div:nth-child(2) img{
  position: relative;
  width: 600px;
  left: 50%;
  transform: translateX(-50%);
  margin: -80px auto -40px;
 }
 .our-method > div:nth-child(2) div:last-child{
  order: 3;
  width: 100%;
  margin: 20px 0 0;
 }
 .our-method > div:nth-child(2) div:first-child{
  width: 100%;
 }
 .our-method > div:nth-child(2) div:last-child{
  width: 100%;
 }
 .menu .inner{
  overflow: hidden;
 }
 .menu .inner > div{
  display: block;
  margin: 0;
 }
 .menu .inner > div > div:nth-child(1){
  margin: 0 30px;
  position: unset;
 }
 .menu .mid-txt + p{
  font-size: 0.91rem;
 }
 .menu .menu-list{
  width: 100%;
  min-width: auto;
  gap: 50px;
  margin: 50px 0 0;
 }
 .menu .menu-list .menu-item{
  display: grid;
 }
 .menu .menu-list .menu-item img{
  order: 2;
  position: relative;
  width: 92%;
  margin: 0 0 0 auto;
 }
 .menu .menu-list .menu-item .about{
  order: 1;
  display: grid;
  gap: 0;
 }
 .menu .menu-list .menu-item .about div:nth-child(1){
  order: 1;
  padding: 0;
  margin: 0 20px 30px;
 }
 .menu .menu-list .menu-item .about div:nth-child(1) ul{
  margin: 10px 0 0;
 }
 .menu .menu-list .menu-item .about div:nth-child(1) ul li{
  line-height: 1;
  font-size: 0.9rem;
 }
 .menu .menu-list .menu-item .about > div:nth-child(2){
  order: 3;
  width: 100%;
  margin: -30px 0 0;
  border-radius: 0;
  gap: 20px;
  padding: 50px 60px 20px 35px;
 }
 .menu .menu-list .menu-item .about > div:nth-child(2) img{
  order: 1;
 }
 .menu .menu-list .menu-item .about > div:nth-child(2) div{
  order: 2;
 }
 .symptoms .inner{
  padding: 0 30px;
 }
 .symptoms h2 span{
  font-size: 15px;
  margin: 10px 0 0;
 }
 .symptoms ul{
  margin: 20px 0 0;
 }
 .symptoms ul li{
  width: 100%;
 }
 .symptoms ul li:nth-child(n+3){
  width: calc((100% - 20px)/2);
 }
 .symptoms ul li a{
  display: block;
  text-align: center;
  padding: 20px;
 }
 .symptoms ul li a img{
  height: 60px;
 }
 .symptoms ul li a img + div{
  margin: 15px 0 0;
 }
 .symptoms ul li a div p:nth-child(2){
  margin: 10px 0 0;
  text-align: left;
  font-size: 15px;
  line-height: 1.6;
 }
 .symptoms ul li:nth-child(n+3) a img{
  height: 40px;
 }
 .symptoms ul li:nth-child(n+3) a p{
  margin: 5px 0 0;
 }
 .owned-media .inner{
  overflow: hidden;
  padding: 0 0 0 20px;
 }
 .owned-media .link-btn{
  margin: 35px 0 0;
 }
 .owned-media .link-btn a{
  line-height: 1.8;
 }
 .shop-list{
  padding: 50px 0;
 }
}
@media (max-width: 768px) {
 .slider .slide p.date{
  font-size: 15px;
 }
 .slider .slide p.title{
  font-size: 16px;
  margin: 10px 0 0;
  font-weight: 500;
  line-height: 1.6;
 }
 .bg-gray{
  overflow: hidden;
 }
 .owned-media .inner .slider-area{
  margin: 0 0 0 -10%;
 }
}