@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');


@media screen and (max-width: 767px) {
  #undercolumn_blog　{ width: 100% !important}
	.only_pc { display: none}
  .PageWrapper { background: #fff}
  .PageWrapper { width: 100%; margin: 0 auto; padding-bottom: 10px; color: #000; font-size: 12px; /*letter-spacing: 0.05em;*/ line-height: 1.4em; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'Noto Sans JP', sans-serif;}
  .PageWrapper a:link { text-decoration: none; color: #000}
  .PageWrapper a:visited { text-decoration: none; color: #000}
  .PageWrapper a:hover { text-decoration: underline; color: #000}
  .PageWrapper a.bottom { display: inline-block; margin-top: 8px}
  .PageWrapper img { max-width: 100%}

  .PageWrapper {
    background: url(/user_data/packages/ravijour/feature/angelday/images/bg_sp.jpg) center top no-repeat;
    background-size: auto 100%;
  }

  .mainVisual { opacity: 0; margin: 0 auto 60px; text-align: center}
  .mainVisual .pic img { width: 100%; height: auto}
  .mainVisual { animation: fadein 1.5s ease 0.5s 1 forwards}
  .mainVisual .text { margin: 40px auto 30px; font-size: 14px; line-height: 2}
  .mainVisual p.check { margin: 0 auto; padding: 0 30px; text-align: center}


  @-webkit-keyframes fadein {
    100% { opacity: 1}
  }

  @keyframes fadein {
    100% { opacity: 1}
  }

  .section {
    max-width: 1000px;
    margin: 0 auto 60px;
    box-sizing: border-box;
  }
  .section > ul {
    margin: 0;
    padding: 0 32px;
  }
  .section > ul li {
    margin-bottom: 26px;
    /* padding: 0 7.89%; */
  }
  .section > ul li img {
    display: block;
    max-width: 100%;
  }
  .section > ul a {
    display: block; 
  }
  .section > ul.slider {
    padding: 0 30px;
  }
  .section .text {
    font-size: 10px;
    text-align: left;
  }
  .section .btns { display: flex; justify-content: center; width: calc(100% - 20px); margin: 0 auto}
  .section .btns li { width: 50%; margin: 0 5px}
  .section .btns li a { display: block; padding: 15px 0; text-align: center; border: 1px solid #F4B3C2; color: #F4B3C2; background: #fff; font-size: 10px; font-weight: bold}
  .section .btns li:nth-of-type(1) a { background: #F4B3C2; color: #fff}
  .PageWrapper .section .btns li a span.arrow {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    margin: -1px 0 0 4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 0.475em 0.7em;
    border-left-color: currentColor; border-right: 0}
  .PageWrapper .section .btns li:last-child a span.arrow { color: white}
  .section .detail { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: -10px; padding: 0 20px}
  .section .detail .text { margin-bottom: 24px}

  .num01_04 .text {
    background: #fff;
  }

  .section .slick-dotted.slick-slider {
    margin-bottom: 10px;
  }
  .section .slick-dots {
    bottom: 8px;
    width: calc(100% - 60px);
  }
  .section .slick-dots li {
    width: 7px;
    height: 7px;
    margin: 0 6px;  
  }
  .section .slick-dots li button {
    width: 7px;
    height: 7px;
    padding: 0;
  }
  .section .slick-dots li button:before {
    content: "";
    width: 7px;
    height: 7px;
    background: #FBDEE5;
    border-radius: 100%;
    opacity: .7;
  }
  .slick-dots li.slick-active button:before {
    opacity: 1;
    background: #FBDEE5;
  }

  .PageWrapper p.check { max-width: 400px; margin: 0 auto; text-align: center}
  .PageWrapper p.check a { background: #F4B3C2; color: #fff; display: block; font-size: 12px; letter-spacing: 0.05em; padding: 15px; position: relative; text-decoration: none; box-sizing: border-box; transition: background 1s ease}
    .PageWrapper p.check a span.arrow {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    margin: -1px 0 0 4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 0.475em 0.7em;
    border-left-color: currentColor; border-right: 0}
  .PageWrapper p.bnnr { margin: 80px auto 0}
  .PageWrapper p.bnnr img { width: 100%; height: auto}

  .PageWrapper p.bnnr { margin: 80px auto 0}
  .PageWrapper p.bnnr img { width: 100%; height: auto}
  .PageWrapper p.list { color: #F4B3C2; font-family: serif; font-size: 16px; font-weight: bold; margin: 0 auto; text-align: center}

}

@media screen and (min-width: 768px) {
	.only_sp { display: none}
  .wrapper { position: relative; background: url(/user_data/packages/ravijour/feature/angelday/images/bg_pc.jpg) center 512px no-repeat; 
    color: #000; font-size: 14px; line-height: 1.8; margin: 0 auto; padding-bottom: 10px; width: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'Noto Sans JP', sans-serif}
  .wrapper a:link { text-decoration: none; color: #000}
  .wrapper a:visited { text-decoration: none; color: #000}
  .wrapper a:hover { text-decoration: underline; color: #000}
  .wrapper img { max-width: 100%}

  .wrapper .section { position: relative; width: 788px; margin: 0 auto 180px}
  .wrapper .section > ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 -32px}
  .wrapper .section > ul > li { width: calc(100% / 2 - 64px); margin: 0 32px 24px; box-sizing: border-box}
  .wrapper .section > ul > li.center { width: 550px; margin: 0 auto 52px}
  .wrapper .section > ul > li img { width: 100%; height: auto}
  .wrapper .section .btns { display: flex; justify-content: center}
  .wrapper .section .btns li { min-width: 176px; margin: 0 5px}
  .wrapper .section .btns li a { display: block; padding: 12px 15px; text-align: center; border: 1px solid #BA83B7; font-size: 12px; color: #BA83B7; font-weight: bold}
  .wrapper .section .btns li:nth-of-type(1) a { background: #BA83B7; color: #fff}
  .wrapper .section .btns li a span.arrow {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    margin: -1px 0 0 4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 0.475em 0.7em;
    border-left-color: currentColor; border-right: 0}
  .wrapper .section .btns li:last-child a span.arrow { color: white}
  .wrapper .section .detail { display: flex; flex-direction: column; justify-content: center; align-items: center}
  .wrapper .section .detail .text { margin: 0 0 24px; text-align: left; font-size: 12px; line-height: 1.5}
  .wrapper .section li.detail { margin-top: 0}
  .wrapper p.bnnr { margin: 160px auto 0; text-align: center}
  .wrapper p.list { color: #BA83B7; font-family: serif; font-size: 20px; font-weight: bold; margin: 0 auto; text-align: center}

  .mainVisual { width: 100%; margin: 0 auto; opacity: 0;}
  .mainVisual { animation: fadein-main 2.5s ease 0.5s 1 forwards}
  .mainVisual { position: relative; width: 970px; margin: 0 auto 117px; text-align: center}
  .mainVisual img { max-width: 100%}
  .mainVisual .text { margin: 60px auto; font-size: 14px; letter-spacing: 0.15em}
  .mainVisual p.check { width: 460px; margin: 0 auto; text-align: center}
  .mainVisual p.check a { display: block; padding: 2%; font-size: 17px; font-weight: bold; background: #BA83B7; color: #fff}
  .mainVisual .check a span.arrow {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    margin: -1px 0 0 4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 0.475em 0.7em;
    border-left-color: currentColor; border-right: 0
 }

  @-webkit-keyframes fadein-main {
    100%  { opacity: 1}
  }

  @keyframes fadein-main {
    100%  { opacity: 1}
  }
}