@charset "UTF-8";

/********************************
common*/

html{font-size: 62.5%;}

#Wrap,.wrapTop,.wrapBottom {
    width: 100%;
}
#Wrap {
    padding-top: 4rem;
}

/********************************
main_STUDIOSEVEN*/

#main_STUDIOSEVEN {
  font-family: "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
}
.main_STUDIOSEVEN img,
.main_STUDIOSEVEN picture{width: 100%;display: block;margin: auto;}
.main_STUDIOSEVEN a{display: block; transition: all 0.5s 0s ease;}
.main_STUDIOSEVEN a:hover{opacity: 0.6;}
.main_STUDIOSEVEN p{text-align: center;line-height: 1;}

.main_STUDIOSEVEN .sec{
  position: relative;
  padding: 10rem 0 16rem;
}
.main_STUDIOSEVEN .ttl_img{
  width: 80rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
}
.main_STUDIOSEVEN .flex{
  display: flex;
  margin: auto;
}
.main_STUDIOSEVEN .flex.jc{
  justify-content: center;
}
.main_STUDIOSEVEN .flex.ac{
  align-items: center;
}

/********************************
sec_lead*/

.sec_lead{
  background-color: #EF7720;
  background-image: url("../../../Contents/ImagesPkg/lp/STUDIOSEVEN/lead_bg_pc.jpg");
  background-size: contain;
  background-repeat: repeat-x;
  padding: 10rem 0;
}
.sec_lead_inner{
  position: relative;
  width: 100rem;
  margin: auto;
}
.sec_lead img{
  width: 95rem;
  position: absolute;
  top: 0;
  left: 0;
}
.sec_lead p{
  font-size: 1.8rem;
  line-height: 2;
  font-weight: bold;
  width: 60rem;
  margin: auto;
  padding: 6rem 0;
  text-align: justify;
}

/********************************
sec_info*/

.sec_info.sec{
  background-color: #EFEEED;
}
.sec_info:not(.last) .ttl_img{
  margin: 0 auto 4rem;
  position: static;
  transform: none;
}
.sec_info ul.flex{
  gap: 4rem;
  flex-wrap: wrap;
}
.sec_info ul li img{
  width: 41rem;
}
.sec_info .sns_blk{
  margin-top: 5rem;
}
.sec_info .sns_blk a{
  font-size: 1.4rem;
  margin: 0 2rem;
}
.sec_info .sns_blk img {
    width: 1.8rem;
    margin-right: 0.8rem;
}
.sec_info.last{
  background-image: url("../../../Contents/ImagesPkg/lp/STUDIOSEVEN/line_pc.png");
  background-repeat: repeat-x;
  background-position: right 0 bottom 2rem;
  background-size: contain;
}

/********************************
sec_comment*/

.sec.sec_comment{
  background-color: #696969;
  padding: 10rem 0 8rem;
}
.sec_comment .flex{
  gap: 6rem;
  flex-wrap: wrap;
}
.sec_comment ul li{
  width: 48rem;
}
.sec_comment ul li.li_text p{
  font-size: 1.8rem;
  line-height: 2;
  font-weight: bold;
  color: #fff;
  text-align: justify;
}

/********************************
sec_ig*/

.sec_ig{
  width: 100rem;
  padding: 8rem 0;
  margin: auto;
}
.sec_ig .flex{
  margin-top: 4rem;
  gap: 2rem;
  flex-wrap: wrap;
}
.sec_ig .vimeo_blk{
  position: relative;
  padding: 28rem 50rem;
}
.sec_ig ul li{
  width: calc((100% - 4rem) / 3);
}

/********************************
sec_point*/

.sec.sec_point{
  background-color: #EFEEED;
  background-image: url("../../../Contents/ImagesPkg/lp/STUDIOSEVEN/bg_pc.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
.sec_point .bg_img{
  position: absolute;
}
.sec_point .bg_img.front{
  top: 0;
}
.sec_point .bg_img.back{
  bottom: 0;
}
.sec_point .ttl_img{
  width: 60rem;
  position: static;
  transform: none;
  margin: 0 auto 6rem;
}
.sec_point .flex{
  width: 100rem;
  flex-wrap: wrap;
  gap: 8rem;;
}
.sec_point > ul > li{
  position: relative;
  padding: 6rem 0;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 0px 6px #00000029;
}
.sec_point > ul > li .point_img{
  position: absolute;
  width: 16rem;
  height: 8rem;
  overflow: hidden;
  top: -4rem;
  left: 0;
  right: 0;
  margin: auto;
}
.sec_point > ul > li .point_ttl{
  font-size: 2.3rem;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}
.sec_point > ul > li .point_lead{
  font-size: 1.6rem;
  line-height: 2;
  margin-bottom: 2rem;
}
.sec_point > ul > li .key_img img{
  width: 60rem;
}
.sec_point > ul > li .package_img img{
  width: 80rem;
}
.sec_point .item_blk{
  width: 84rem;
  margin: auto;
}
.sec_point .item_blk:not(:last-child){
  padding-bottom: 6rem;
  margin: 0 auto 6rem;
  border-bottom: 1px solid #E6E6E6;
}
.sec_point .item_blk .item_ttl{
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.sec_point .item_blk .item_ttl span{
  font-family: Helvetica;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 1.2rem;
  color: #EF7720;
}
.sec_point .item_blk .item_lead{
  font-size: 1.4rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}
.sec_point .item_blk ul{gap: 0;width: 100%;}
.sec_point .item_blk ul li{
  width: 20rem;
}
.sec_point .item_blk .brand_name{
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 0.8rem;
}
.sec_point .item_blk .item_name{
  font-size: 1.3rem;
  line-height: 1.5;
  margin-bottom: 0.8rem;
}
.sec_point .item_blk .price{
  font-size: 1.3rem;
  margin-bottom: 1.6rem;
}
.sec_point .item_blk .btn_img{
  width: 12rem;
  margin: auto;
}

/********************************
sec_items*/

.sec_items .ttl_img{width: 62rem;}
.sec_items .flex{
  flex-wrap: wrap;
  gap: 4rem 1.3rem;
  width: 100rem;
}
.sec_items ul li{
  width: 24rem;
}
.sec_items .brand_name{
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 0.8rem;
  margin-top: 1.6rem;
}
.sec_items .item_name{
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 0.4rem;
}
.sec_items .price{
  font-size: 1.6rem;
  margin-bottom: 1.6rem;
}
.sec_items .btn_img{
  width: 12rem;
  margin: auto;
}

/********************************
sec_insta*/

.sec_insta{
  background-color: #EF7720;
}
.sec_insta .ttl_img{width: 62rem;}
.sec_insta > .flex{
  width: 90rem;
  box-shadow: 0px 0px 10px #9B6945;
  background-color: #fff;
}
.sec_insta .li_img{
  width: 27rem;
}
.sec_insta .li_text{
  width: 63rem;
}
.sec_insta .li_text .live_text{
  margin-bottom: 2.4rem;
  font-weight: bold;
}
.sec_insta .li_text .live_ttl span{
  display: inline-block;
  font-size: 3.2rem;
  padding: 0 1rem 0.4rem;
  background: linear-gradient(transparent 50%, #FFFE01 0%);
}
.sec_insta .li_text .live_ttl span:last-child{
  font-size: 2.2rem;
  margin-top: 1.2rem;
  margin-bottom: 1.6rem;
}
.sec_insta .li_text .live_date span{
  display: block;
  font-size: 1.8rem;
}
.sec_insta .li_text .live_date span:last-child{
  font-size: 2.2rem;
  margin-top: 1rem;
}
.sec_insta .li_text > .flex{
  gap: 0.8rem;
}
.sec_insta .li_text > ul li{
  padding: 0.8rem 2rem;
  border: 1px solid #333;
  border-radius: 2rem;
  font-size: 1.4rem;
}
.sec_insta .li_text > ul li img{
  width: 1.8rem;
  margin-right: 0.8rem;
}

/********************************
sec_campaign*/

.sec_campaign{
  background-color: #696969;
}
.sec_campaign .ttl_img{width: 62rem;}
.sec_campaign .campaign_ttl{
  color: #fff;
  font-size: 2.3rem;
  font-weight: bold;
  margin-bottom: 4rem;
}
.sec_campaign > .flex{
  width: 90rem;
  gap: 4rem;
  flex-wrap: wrap;
}
.sec_campaign > .flex > li{
  width: 90rem;
  padding: 3rem 4rem;
  background-color: #fff;
  box-shadow: 0px 0px 10px #00000029;
}
.sec_campaign > .flex > li .campaign_no{
  font-family: Helvetica;
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #EF7720;
}
.sec_campaign > .flex > li .text_inner .flex{
  gap: 2rem;
}
.sec_campaign > .flex > li .text_inner .li_img{
  width: 32rem;
}
.sec_campaign > .flex > li .text_inner .li_text{
  width: 48rem;
  margin-top: 2rem;
}
.sec_campaign > .flex > li .text_inner .campaign_subttl{
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 1.2rem;
  text-align: left;
}
.sec_campaign > .flex > li .text_inner .campaign_subttl span{
  color: #EF7720;
}
.sec_campaign > .flex > li .text_inner .campaign_text{
  font-size: 1.4rem;
  line-height: 1.75;
  text-align: justify;
}
.sec_campaign .attension_blk{
  background-color: #FAFAFA;
  padding: 1.6rem;
}
.sec_campaign .attension_blk p{
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: left;
}
.sec_campaign .btn_blk{
  margin: 2rem auto 0;
  width: 25rem;
  height: 5rem;
  line-height: 5rem;
  font-size: 1.6rem;
  font-weight: bold;
  background-color: #000;
  border-radius: 2.5rem;
}
.sec_campaign .btn_blk a{ 
  color: #fff;
  text-align: center;
}
.sec_campaign .share_blk{
  margin-top: 2rem;
}
.sec_campaign .share_blk p{
  font-size: 1.6rem;
  font-weight: bold;
  margin-right: 1.5rem;
}
.sec_campaign .share_blk a img{
  margin: 0 0.5rem;
  width: 4.8rem;
}

/********************************
modal*/
.modaal-inner-wrapper{
  padding: 0 !important;
}
.modaal-content{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.modaal-image .modaal-inner-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.modaal-image .modaal-container,
.modaal-gallery-item-wrap{
  max-width: 50vw !important;
  max-height: 50vw !important;
}
.modaal-gallery-item img{
  max-width: 50vw;
  max-height: 50vw;
  width: 50vw;
  height: 50vw;
}


@media screen and (min-width:521px) {
  .sp_only{display: none !important;}
}


/********************************
Tablet*/

@media screen and (min-width:521px) and ( max-width:1000px) {
  html{font-size: calc(10 *(100vw / 1400));}
}

@media screen and (min-width:521px) and ( max-width:1400px) {
  .sec_lead{
    background-size: cover;
  }
}


/********************************
SmartPhone*/

@media screen and (max-width:520px) {
  .pc_only{display: none !important;}


/********************************
main_STUDIOSEVEN*/

.main_STUDIOSEVEN a:hover{opacity: 1;}

.main_STUDIOSEVEN .sec{
  padding: calc(70 *(100vw / 390)) 0 calc(100 *(100vw / 390));
}
.main_STUDIOSEVEN .ttl_img{
  width: calc(360 *(100vw / 390));
}

/********************************
sec_lead*/

.sec_lead{
  background-image: url("../../../Contents/ImagesPkg/lp/STUDIOSEVEN/lead_bg_sp.jpg");
  padding: calc(50 *(100vw / 390)) 0;
}
.sec_lead_inner{
  width: calc(370 *(100vw / 390));
}
.sec_lead img{
  width: 100%;
}
.sec_lead p{
  font-size: calc(14 *(100vw / 390));
  width: calc(300 *(100vw / 390));
  padding: calc(50 *(100vw / 390)) 0;
}

/********************************
sec_info*/

.sec_info:not(.last) .ttl_img{
  margin: 0 auto calc(20 *(100vw / 390));
}
.sec_info ul.flex{
  gap: calc(12 *(100vw / 390));
}
.sec_info ul li img{
  width: calc(300 *(100vw / 390));
}
.sec_info .sns_blk{
  flex-wrap: wrap;
  gap: calc(14 *(100vw / 390)) calc(40 *(100vw / 390));
  margin-top: calc(40 *(100vw / 390));
}
.sec_info .sns_blk a{
  font-size: calc(14 *(100vw / 390));
  margin: 0;
}
.sec_info .sns_blk img {
    width: calc(18 *(100vw / 390));
    margin-right: calc(8 *(100vw / 390));
}
.sec_info.last{
  background-image: url("../../../Contents/ImagesPkg/lp/STUDIOSEVEN/line_sp.png");
  background-position: right 0 bottom calc(20 *(100vw / 390));
}

/********************************
sec_comment*/

.sec.sec_comment{
  padding: calc(70 *(100vw / 390)) 0 calc(60 *(100vw / 390));
}
.sec_comment .flex{
  gap: calc(30 *(100vw / 390));
}
.sec_comment ul li{
  width: calc(350 *(100vw / 390));
}
.sec_comment ul li.li_img img{
  width: calc(300 *(100vw / 390));
}
.sec_comment ul li.li_text p{
  font-size: calc(14 *(100vw / 390));
}

/********************************
sec_ig*/

.sec_ig{
  width: 100%;
  padding: calc(80 *(100vw / 390)) 0;
}
.sec_ig .flex{
  margin-top: calc(40 *(100vw / 390));
  gap: calc(1.5 *(100vw / 390));
}
.sec_ig .vimeo_blk{
  padding: calc(210 *(100vw / 750)) calc(195 *(100vw / 750));
}
.sec_ig ul li{
  width: calc((100% - calc(4.5 *(100vw / 390))) / 3);
}

/********************************
sec_point*/

.sec.sec_point{
  background-image: url("../../../Contents/ImagesPkg/lp/STUDIOSEVEN/bg_1_sp.png");
}
.sec_point .ttl_img{
  margin: 0 auto calc(60 *(100vw / 390));
}
.sec_point .flex{
  width: calc(360 *(100vw / 390));
  gap: calc(80 *(100vw / 390));;
}
.sec_point > ul > li{
  padding: calc(50 *(100vw / 390)) 0 calc(40 *(100vw / 390));
}
.sec_point > ul > li:nth-child(2){
  padding: calc(50 *(100vw / 390)) 0 0;
}
.sec_point > ul > li .point_img{
  width: calc(160 *(100vw / 390));
  height: calc(80 *(100vw / 390));
  top: calc(-40 *(100vw / 390));
}
.sec_point > ul > li .point_ttl{
  width: calc(320 *(100vw / 390));
  font-size: calc(18 *(100vw / 390));
  margin: 0 auto calc(12 *(100vw / 390));
}
.sec_point > ul > li .point_lead{
  font-size: calc(14 *(100vw / 390));
  margin: 0 auto calc(30 *(100vw / 390));
  width: calc(320 *(100vw / 390));
  text-align: justify;
}
.sec_point > ul > li:first-child .point_lead{
  margin: 0 auto;
}
.sec_point > ul > li .key_img img{
  width: 100%;
}
.sec_point > ul > li .package_img img{
  width: calc(360 *(100vw / 390));
}
.sec_point .item_blk{
  width: 100%;
}
.sec_point .item_blk:not(:last-child){
  padding-bottom: calc(40 *(100vw / 390));
  margin: 0 auto calc(40 *(100vw / 390));
}
.sec_point .item_blk .item_ttl{
  font-size: calc(17 *(100vw / 390));
  margin-bottom: calc(10 *(100vw / 390));
}
.sec_point .item_blk .item_ttl span{
  font-size: calc(13 *(100vw / 390));
  margin-bottom: calc(10 *(100vw / 390));
}
.sec_point .item_blk .item_lead{
  width: calc(320 *(100vw / 390));
  font-size: calc(12 *(100vw / 390));
  margin: 0 auto calc(20 *(100vw / 390));
  text-align: justify;
}
.sec_point .item_blk ul{
  gap: calc(20 *(100vw / 390)) 0;
}
.sec_point .item_blk ul li{
  width: 50%;
}
.sec_point .item_blk .brand_name{
  font-size: calc(14 *(100vw / 390));
  margin-bottom: calc(8 *(100vw / 390));
}
.sec_point .item_blk .item_name{
  font-size: calc(12 *(100vw / 390));
  margin-bottom: calc(8 *(100vw / 390));
}
.sec_point .item_blk .price{
  font-size: calc(12 *(100vw / 390));
  margin-bottom: calc(10 *(100vw / 390));
}
.sec_point .item_blk .btn_img{
  width: calc(100 *(100vw / 390));
}

/********************************
sec_items*/

.sec_items .flex{
  gap: calc(20 *(100vw / 390));
  width: calc(340 *(100vw / 390));
}
.sec_items ul li{
  width: calc(160 *(100vw / 390));
}
.sec_items .brand_name{
  font-size: calc(14 *(100vw / 390));
  margin-bottom: calc(8 *(100vw / 390));
  margin-top: calc(10 *(100vw / 390));
}
.sec_items .item_name{
  font-size: calc(12 *(100vw / 390));
  margin-bottom: calc(8 *(100vw / 390));
}
.sec_items .price{
  font-size: calc(12 *(100vw / 390));
  margin-bottom: calc(10 *(100vw / 390));
}
.sec_items .btn_img{
  width: calc(100 *(100vw / 390));
}

/********************************
sec_insta*/

.sec_insta > .flex{
  width: calc(330 *(100vw / 390));
  flex-wrap: wrap;
}
.sec_insta .li_img{
  width: 100%;
}
.sec_insta .li_text{
  width: 100%;
  padding: calc(30 *(100vw / 390)) 0;
}
.sec_insta .li_text .live_text{
  margin-bottom: calc(18 *(100vw / 390));
}
.sec_insta .li_text .live_ttl span{
  font-size: calc(22 *(100vw / 390));
  padding: 0 calc(10 *(100vw / 390)) calc(4 *(100vw / 390));
  margin-bottom: calc(4 *(100vw / 390));
}
.sec_insta .li_text .live_ttl span:last-child{
  font-size: calc(19 *(100vw / 390));
  margin-top: calc(6 *(100vw / 390));
  margin-bottom: calc(16 *(100vw / 390));
}
.sec_insta .li_text .live_date span{
  font-size: calc(15 *(100vw / 390));
}
.sec_insta .li_text .live_date span:last-child{
  font-size: calc(19 *(100vw / 390));
  margin-top: calc(10 *(100vw / 390));
}
.sec_insta .li_text > .flex{
  gap: calc(8 *(100vw / 390));
  flex-wrap: wrap;
}
.sec_insta .li_text > ul li{
  padding: calc(8 *(100vw / 390)) 0 calc(10 *(100vw / 390));
  box-sizing: border-box;
  border-radius: calc(20 *(100vw / 390));
  font-size: calc(14 *(100vw / 390));
  width: calc(200 *(100vw / 390));
  height: calc(40 *(100vw / 390));
}
.sec_insta .li_text > ul li a{
  display: flex;
  justify-content: center;
}
.sec_insta .li_text > ul li img{
  width: calc(18 *(100vw / 390));
  margin: 0 calc(8 *(100vw / 390)) 0 0;
}


/********************************
sec_campaign*/

.sec_campaign .campaign_ttl{
  font-size: calc(18 *(100vw / 390));
  line-height: 1.5;
  margin-bottom: calc(24 *(100vw / 390));
}
.sec_campaign > .flex{
  width: calc(330 *(100vw / 390));
  gap: calc(30 *(100vw / 390));
}
.sec_campaign > .flex > li{
  width: calc(330 *(100vw / 390));
  padding: calc(30 *(100vw / 390)) calc(15 *(100vw / 390));
}
.sec_campaign > .flex > li .campaign_no{
  font-size: calc(22 *(100vw / 390));
  margin-bottom: calc(16 *(100vw / 390));
}
.sec_campaign > .flex > li .text_inner .flex{
  gap: 0;
  flex-direction: column-reverse;
  flex-wrap: wrap;
}
.sec_campaign > .flex > li .text_inner .li_img{
  width: calc(240 *(100vw / 390));
  margin: auto;
}
.sec_campaign > .flex > li:nth-child(2) .text_inner .li_img{
  width: calc(280 *(100vw / 390));
  margin: 0 auto calc(20 *(100vw / 390));
}
.sec_campaign > .flex > li .text_inner .li_text{
  width: 100%;
  margin-top: 0;
}
.sec_campaign > .flex > li .text_inner .campaign_subttl{
  font-size: calc(16 *(100vw / 390));
  margin-bottom: calc(12 *(100vw / 390));
}
.sec_campaign > .flex > li .text_inner .campaign_text{
  font-size: calc(12 *(100vw / 390));
}
.sec_campaign .attension_blk{
  padding: calc(16 *(100vw / 390));
}
.sec_campaign .attension_blk p{
  font-size: calc(12 *(100vw / 390));
}
.sec_campaign .btn_blk{
  margin: calc(20 *(100vw / 390)) auto 0;
  width: calc(180 *(100vw / 390));
  height: calc(40 *(100vw / 390));
  line-height: calc(40 *(100vw / 390));
  font-size: calc(14 *(100vw / 390));
  border-radius: calc(20 *(100vw / 390));
}
.sec_campaign .share_blk{
  margin-top: calc(20 *(100vw / 390));
}
.sec_campaign .share_blk p{
  font-size: calc(16 *(100vw / 390));
  margin-right: calc(15 *(100vw / 390));
}
.sec_campaign .share_blk a img{
  margin: 0 calc(5 *(100vw / 390));
  width: calc(40 *(100vw / 390));
}

/********************************
modal*/
.modaal-image .modaal-container,
.modaal-gallery-item-wrap{
  max-width: 80vw !important;
  max-height: 80vw !important;
}
.modaal-gallery-item img{
  max-width: 80vw;
  max-height: 80vw;
  width: 80vw;
  height: 80vw;
}
.modaal-gallery-next {
    right: calc(-42 *(100vw / 390)) !important;
    background: none !important;
    top: calc(50% - 15px) !important;
}
.modaal-gallery-prev{
    left: calc(-42 *(100vw / 390)) !important;
    background: none !important;
    top: calc(50% - 15px) !important;
}

}