@charset "utf-8";
/* @group Reset */
.sp_img {
  display: none;
}
.pc_img {
  display: inherit;
}
p {
  margin: 1em auto;
  padding: 0;
  text-align: justify;
}
img {
  width: 100%;
  vertical-align:top;
}
/* @group HTML */
html {
  color: #000;
  margin-left: auto;
}
body {
  /* background-color: #f7c9dd; */
  /* color: #fff; */
}
#wrapper {
  width: 100%;
  max-width: 1240px;
  margin: auto;
  font-family: 'こぶりなゴシック W3 JIS2004';
  font-feature-settings: "palt";
}
#main_line {
  width: 100%;
  margin: auto;
  overflow: hidden;
  background-image: url(../images/mainBg_pc.webp);
}
#main_img {
  margin: 2% auto;
  width: 80%;
  /* max-width: 583px; */
}
#boshuu_img {
  width: 100%;
  padding: 4% 15%;
  background-color: #fff;
  /* max-width: 583px; */
  clear: left;
}
img {
  width: 100%;
}
.cont_area {
  width: 70%;
  max-width: 800px;
  margin: auto;
  overflow: hidden;
}
.btn_area {
  clear: left;
  width: 70%;
  margin: 5em auto;
}
.btn_shop {
  clear: left;
  width: 70%;
  margin: 1em auto;
}
/* ########################## */
/* コレクションとは */
#sect01 {
  background-image: url(../images/sect01-Bg.webp);
  background-repeat: repeat;
  padding: 3% 3% 10%;
  box-sizing: border-box;

}
#sect01 h2 {
  width: 80%;
  margin: 1em auto;
  text-align: center;
  font-size: 1.8em;
}
.sect_copy {
  width: 90%;
  max-width: 840px;
  margin: 1em auto;
}
.sect01_about {
  background-color: #fff;
  border-radius: 10px;
  padding: 7% 10%;
  margin: 3em auto;
  position: relative;
}
.kazariTop {
  width: 60px;
  position: absolute;
  top: -3%;
  right: 5%;
}
.kazariBottom {
  width: 60px;
  position: absolute;
  bottom: -4%;
  left: 5%;
}

/* ########################## */
/* 当日のレポート */
/* 林芽亜里ファッションショー */
#sect02 {
  background-color: #FFE7BC;
  padding: 3% 3% 0;
  box-sizing: border-box;
}
#sect02 h2 {
  width: 80%;
  max-width: 416px;
  margin: -4em auto 0;
}
#sect02 h3 {
  width: 100%;
  max-width: 740px;
  margin: 2em auto;
}
#sect02 .sect02_wrap {
  width: 98%;
  margin: auto;
  background-image: url(../images/sect02-Bg.webp);
  background-repeat: repeat-y;
  background-size: 100%;
}
.meari_photo {
  margin: 3em auto 0;
  overflow: hidden;
}
.itemNo {
  background-color: #FF7600;
  color: #fff;
  padding: 2%;
  width: 45%;
  margin: 1em 27.5% 0;
  text-align: center;
  clear: left;
  float: left;
}
.sect02_photo01 {
  width: 55%;
  margin-right: : 3%;
  margin-top: 7%;
  float: left;
}
.sect02_photo02 {
  width: 42%;
  /* margin-left: : 2.5%; */
  float: right;
}
.sect02_photo03 {
  width: 47%;
  margin-right: : 3%;
  float: left;
}
.sect02_photo04 {
  width: 50%;
  margin-top: 7%;
  /* margin-left: : 2.5%; */
  float: right;
}
.fukidashi {
  width: 80%;
  margin: auto;
}


#sect03 {
  background-color: #F6FBE2;
  padding: 3% 3% 6%;
  box-sizing: border-box;
}
#sect03 h3 {
  width: 100%;
  max-width: 700px;
  margin: 2em auto;
}
#sect03 .sect03_wrap {
  width: 98%;
  margin: 2em auto 5em;
  background-image: url(../images/sect03-Bg.webp);
  background-repeat: repeat-y;
  background-size: 100%;
}

#sect04 {
  background-image: url(../images/sect04-Bg.webp);
  background-repeat: repeat;
  padding: 3% 3% 12%;
  box-sizing: border-box;
}
#sect04 h2 {
  width: 80%;
  max-width: 416px;
  margin: -4em auto 0;
}
.sect04_photo01 {
  width: 60%;
  margin: 0em 20% 2em;
}
#sect04 .sect04_wrap {
  width: 98%;
  margin: auto;
  background-image: url(../images/sect02-Bg.webp);
  background-repeat: repeat-y;
  background-size: 100%;
}
#sect04 h4 {
  background-color: #FF961D;
  color: #fff;
  text-align: center;
  padding: 1%;
  width: 60%;
  margin: auto;
}
#sect04 .cont_area p {
  margin-bottom: 2em;
}

#sect04 .link_btn {
  margin: 2em auto 0;
}

#sect05 {
  background-color: #FFDEDC;
  padding: 3% 3% 8%;
  box-sizing: border-box;
  background-image: url(../images/sect05-Bg.webp?20240501);
  background-repeat: repeat-y;
  background-size: 98%;
  background-position: center;
}
#sect05 h2 {
  width: 80%;
  max-width: 416px;
  margin: -4em auto 0;
}
#sect05 .sect05_wrap {
  position: relative;
  width: 98%;
  margin: auto;
}
.sect05_photo01 {
  width: 60%;
  margin: 2em 20%;
}
#sect05 .cont_area {
  /* width: 80%;
  max-width: 1000px; */
  margin: auto;
  overflow: hidden;
}
#sect05 h3 {
  background-color: #EC7282;
  color: #fff;
  padding: 1%;
  width: 20%;
  margin: 1em auto;
  border-radius: 100px;
  text-align: center;
}
#sect05 h4 {
  font-family: 'こぶりなゴシック W6 JIS2004';
  font-feature-settings: "palt";
  font-size: 2.0em;
  margin: auto;
  text-align: center;
}
h5 {
  position: relative;
  width: 50%;
  margin: auto;
  line-height: 50px;/*リボンの高さ*/
  text-align: center;
  padding: 0 30px;/*横の大きさ*/
  font-size: 18px;/*文字の大きさ*/
  background: #fff;/*塗りつぶし色*/
  box-sizing: border-box;
  border-top: 3px solid #EC7282;
  border-bottom: 3px solid #EC7282;
  /* border: #FCA949 solid 2px; */
  font-family: 'こぶりなゴシック W6 JIS2004';
  font-feature-settings: "palt";
}

h5:before, h5:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
  border-style: solid;
}

h5:before {
  top: 0;
  left: 0;
  border-width: 25px 0px 25px 15px;
  border-color: transparent transparent transparent #FFDEDC;
  border-style: solid;
}

h5:after {
  top: 0;
  right: 0;
  border-width: 25px 15px 25px 0px;
  border-color: transparent #FFDEDC transparent transparent;
  border-style: solid;
}
.interview {
  position: relative;
  width: 100%;
  margin:0 auto 3em;
  /* -webkit-mask-image: linear-gradient(to right, transparent, black 2.5em, black calc(100% - 2.5em), transparent);
  mask-image: linear-gradient(to right, transparent, black 2.5em, black calc(100% - 2.5em), transparent); */
}
.absolute {
  z-index: 10;
  width: 100%;
  position: absolute;
}

.interview_slide {
  width: 100%;
  margin:auto;

}
.interview_slide li.interview_box {
  padding: 1em 2em;
  background-color: #fff;
  text-align: center;
  margin: 1em auto;
  height: 15em;
}
.interview_slide li.interview_box p span {
  color: #EC7282;
  font-size: 1.2em;
}
.slick-slide{
  margin-right: 1vw!important;
  margin-left: 1vw!important;
}
.slick-arrow{
  width:30px!important;
  height:30px!important;
}
.slick-arrow:before{
  content:""!important;
  width: 100%!important;
  height: 100%!important;
  position: absolute;
  top: 0;
  left: 0;
}
.slick-prev:before {
  background: url(../images/arrow_prev.webp)!important;
  background-size: contain!important;
  /* font-family: 'slick';
  font-size: 30px;
  line-height: 1;
  opacity: .75;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
}
.slick-next:before {
  background: url(../images/arrow_next.webp)!important;
  background-size: contain!important;
}
.slick-prev {
  left: 0%;
  z-index: 20!important;
}
.slick-next {
  right: 0%;
  z-index: 20!important;
}
.interview_slide h6 {
  font-size: 1.0em;
  text-align: center;
  font-family: 'こぶりなゴシック W6 JIS2004';
  font-feature-settings: "palt";
  margin: 0.5em auto;
}


#sect06 {
  background-color: #E9F7FC;
  padding: 3% 3% 8%;
  box-sizing: border-box;
  background-image: url(../images/sect02-Bg.webp?20240501);
  background-repeat: repeat-y;
  background-size: 98%;
  background-position: center;
}
#sect06 .sect06_wrap {
  position: relative;
  width: 98%;
  margin: auto;
}
#sect06 h5:before {
  border-color: transparent transparent transparent #E9F7FC;
}
#sect06 h5:after {
  border-color: transparent #E9F7FC transparent transparent;
}
.sect06_photo01 {
  width: 60%;
  margin: 2em 20%;
}
#sect06 .cont_area {
  /* width: 80%;
  max-width: 1000px; */
  margin: auto;
  overflow: hidden;
}
#sect06 h3 {
  background-color: #5BBBDE;
  color: #fff;
  padding: 1%;
  width: 20%;
  margin: 1em auto;
  border-radius: 100px;
  text-align: center;
}
#sect06 h4 {
  font-family: 'こぶりなゴシック W6 JIS2004';
  font-feature-settings: "palt";
  font-size: 2.0em;
  margin: auto;
  text-align: center;
}
#sect06 h5 {
  border-top: 3px solid #5BBBDE;
  border-bottom: 3px solid #5BBBDE;
}


#sect07 {
  background-image: url(../images/sect04-Bg.gif);
  background-repeat: repeat;
  padding: 3% 3% 8%;
  box-sizing: border-box;
}
#sect07 h2 {
  width: 80%;
  max-width: 416px;
  margin: -4em auto 0;
}
.sect07_photo01 {
  width: 90%;
  margin: 2em 5%;
}
.sect07_photo02 {
  width: 90%;
  margin: -6em 5% 6em;
}
#sect08 {
  text-align: center;
  background-color: #F6FBE2;
  padding: 3% 3% 8%;
  box-sizing: border-box;
  background-image: url(../images/sect05-Bg.webp?20240501);
  background-repeat: repeat-y;
  background-size: 98%;
  background-position: center;
}
#sect08 h2 {
  width: 80%;
  max-width: 416px;
  margin: -4em auto 0;
}
#sect08 .sect08_wrap {
  position: relative;
  width: 98%;
  margin: auto;
}
#sect08 iframe {
  width: 60%;
  height: 500px;
  margin: 2em auto;
}


@media screen and (max-width : 768px) {
  .sp_img {
    display: inherit;
  }
  .pc_img {
    display: none;
  }
  #main_line {
    overflow: hidden;
    background-image: url(../images/mainBg_sp.webp);
    background-size: contain;
  }
  #main_img {
    margin: 0% auto;
    width: 90%;
    max-width: 750px;
  }
  #boshuu_img {
    padding: 4% 7%;
    background-color: #fff;
    /* max-width: 583px; */
    clear: left;
  }
  #main_line {
    margin: 0 auto 2em;
  }
  h2 {
    margin: -2.5em auto 0;
  }
  h3 {
    width: 100%;
  }
  h5 {
    width: 70%;
  }
  section {
    padding-bottom: 3em;
  }
  #sect01 h2 {
    width: 98%;
    font-size: 1.2em;
  }
  #sect02 h2 {
    margin: -2.5em auto 0;
  }
  #sect02 h3 {
    width: 90%;
    margin: 1em auto;
  }
  #sect02 .itemNo {
    width: 60%;
    margin: 1em 20% 1em;
  }
  #sect02 .btn_area {
    width: 80%;
  }
  .fukidashi {
    width: 90%;
  }

  #sect03 h3 {
    width: 90%;
    margin: 1em auto;
  }

  #sect04 .sect04_wrap {
   padding-bottom: 3em;
  }

  #sect04 h2 {
    margin: -2.5em auto 0;
  }
  #sect04 .btn_area {
    width: 80%;
    margin: 2em auto 0;
  }
  #sect04 h4 {
    width: 80%;
    margin: auto;
  }
  .sect04_photo01 {
    width: 98%;
    margin: 2em 1%;
  }
  .cont_area {
    width: 95%;
    max-width: 1024px;
    margin: auto;
    overflow: hidden;
  }
  .btn_area {
    margin: 2em auto 5em;
  }
  .btn_shop {
    width: 90%;
  }
  #sect04 .link_btn {
    margin: 0.5em auto;
  }
  .sect05_photo01 {
    width: 80%;
    margin: 2em 10%;
  }
  #sect05 {
    padding: 3% 3% 0%;
  }

  #sect05 h2 {
    margin: -2.5em auto 0;
  }
  #sect05 .cont_area, #sect06 .cont_area {
    width: 95%;
    max-width: 1024px;
  }
  .interview_slide li.interview_box {
    padding: 1em 1em;
    height: 17em;
  }
  #sect05 .btn_area, #sect06 .btn_area {
    /* margin-top: 1em; */
    width: 100%;
  }
  .sect06_photo01 {
    width: 80%;
    margin: 2em 10%;
  }
  #sect05 h3, #sect06 h3 {
    padding: 1%;
    width: 40%;
  }
  #sect07 h2 {
    margin: -2.5em auto 0;
  }
  #sect08 h2 {
    margin: -2.5em auto 0;
  }
  #sect08 iframe {
    width: 90%;
    height: 300px;
  }

  footer {
    margin-top: 0 !important;
  }
}


/* ##################### */
/* ポップアップ */
body.open_popup {
  overflow: hidden;
}

.bg_onetime_popup {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}

body.open_popup .bg_onetime_popup {
  opacity: 1;
  visibility: visible;
}

.onetime_popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 500px;
  background-color: #fff;
}

.onetime_popup_title {
  position: relative;
  padding: 0;
  margin: 0px;
  /* background-color: #3388dd; */
  color: #fff;
  font-size: 32px;
  text-align: center;
  line-height: 1.5;
}

.onetime_popup_title_close {
  position: absolute;
  top: 5%;
  right: 5px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  cursor: pointer;
}
.onetime_popup_title_close::before,
.onetime_popup_title_close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  height: 4px;
  background-color: #000;
  content: "";
}
.onetime_popup_title_close::before {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.onetime_popup_title_close::after {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.onetime_popup_content {
  padding: 60px 30px;
  text-align: center;
}