@charset "utf-8";

body { background: #000}

@media screen and (max-width: 767px) {
  #undercolumn_blog　{ width: 100% !important}
  .only_pc { display: none}

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

  .mainVisual { opacity: 0; margin: 0 auto 40px; 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; 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}
  }

  .PageWrapper .section {
    margin: 0 auto 85px;
    padding: 0;
    box-sizing: border-box;
  }
  .PageWrapper .section > ul {
    margin: 0;
  }
  .PageWrapper .section > ul li {
    margin-bottom: 20px;
    /* padding: 0 7.89%; */
  }
  .PageWrapper .section > ul li img {
    display: block;
    max-width: 100%;
  }
  .PageWrapper .section > ul a {
    display: block; 
  }
  .PageWrapper .section .text {
    font-size: 10px;
    text-align: left;
  }
  .PageWrapper .section .btns { display: flex; justify-content: center; width: calc(100% - 60px); margin: 0 auto}
  .PageWrapper .section .btns li { width: 50%; margin: 0 5px}
  .PageWrapper .section .btns li a { display: block; padding: 15px 0; text-align: center; border: 1px solid #5F2428; color: #fff; font-size: 10px; font-weight: bold}
  .PageWrapper .section .btns li:nth-of-type(1) a { background: #5F2428; 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 .detail { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 15px}
  .PageWrapper .section .detail .text { margin-bottom: 15px}

   .PageWrapper .section .slick-dotted.slick-slider {
    margin-bottom: 10px;
  }
   .PageWrapper .section .slick-dots {
    bottom: 0 !important;
  }
   .PageWrapper .section .slick-dots li {
    width: 7px;
    height: 7px;
    margin: 0 6px;  
  }
   .PageWrapper .section .slick-dots li button {
    width: 7px;
    height: 7px;
    padding: 0;
  }
   .PageWrapper .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#list_sp { font-size: 15px !important; margin: 0 auto -40px; text-align: center}
  .PageWrapper p.check { max-width: 400px; margin: 0 auto; text-align: center}
  .PageWrapper p.check a { background: #5F2428; 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}

  .video_wrap { position: relative; width: 100%; margin: 0 auto 80px}
  .video { position: relative; width: 100%; padding: 56.25% 0 0}
  .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%}
}




@media screen and (min-width: 768px) {
	.only_sp { display: none }
  .wrapper { background: #000; position: relative}
  .wrapper { color: #fff; 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: serif}
  .wrapper a:link { text-decoration: none; color: #fff}
  .wrapper a:visited { text-decoration: none; color: #fff}
  .wrapper a:hover { text-decoration: underline; color: #fff}
  .wrapper img { max-width: 100%}

  .wrapper .section { position: relative; width: 966px; margin: 0 auto 124px}
  .wrapper .section > ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 -15px}
  .wrapper .section > ul > li { width: calc(100% / 2 - 30px); margin: 0 15px 0; box-sizing: border-box}
  .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 #5F2428; font-size: 12px; color: #fff; font-weight: bold}
  .wrapper .section .btns li:nth-of-type(1) a { background: #5F2428; 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 .detail { display: flex; flex-direction: column; justify-content: center; align-items: center}
  .wrapper .section .detail .text { margin: 30px 0; text-align: left; font-size: 12px; line-height: 1.5}
  .wrapper .section li.detail { margin-top: 0}

  .wrapper .section > ul > li:nth-of-type(2) {
    margin-top: 145px;
  }

   .wrapper p.check { color: #fff; font-size: 18px; margin: 0 auto 40px; text-align: center} 
  .wrapper p.bnnr { margin: 160px auto 0; 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 80px; text-align: center}
  .mainVisual img { max-width: 100%}
  .mainVisual .text { margin: 60px auto; font-size: 14px}
  .mainVisual p.check { width: 460px; margin: 0 auto; text-align: center}
  .mainVisual p.check a { display: block; padding: 3%; font-size: 18px; font-weight: bold; background: #5F2428; 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}
  }
}