@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;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%; }

  a.rollover, a img.rollover { transition: opacity 0.5s; backface-visibility: hidden}
  a.rollover:hover, a img.rollover:hover { opacity: 0.75}


  .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 96px;
    box-sizing: border-box;
  }
  .section > ul {
    margin: 0;
  }
  .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 #000; color: #000; font-size: 10px; font-weight: bold; }
  .section .btns li:nth-of-type(1) a { background: #000; color: #fff; }
  .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;
  }
  .section .btns li:nth-child(2) a span.arrow {
    color: #000;
  }

  .section .detail { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px; padding: 0 20px; }
  .section .detail .text { margin-bottom: 27px; }

  .section .slick-dotted.slick-slider {
    margin-bottom: 0;
  }
  .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: #999;
    border-radius: 100%;
    opacity: .7;
  }
  .slick-dots li.slick-active button:before {
    opacity: 1;
    background: #999;
  }



  .pagetop { position: fixed; bottom: 0; right: 0; z-index: 2}
  .pagetop a { background: #212121; color: #fff; display: inline-block; padding: 20px; position: relative; text-indent: -9999px; width: 30px; height: 30px; box-sizing: border-box}
  .pagetop a:after { position: absolute; top: 6px; bottom: 0; left: 14px; margin: auto; content: ""; vertical-align: middle; width: 10px; height: 10px; border: 1px solid; border-color: #fff #fff transparent transparent; transform: rotate(-45deg); transition: all .2s}
  .pagetop:hover a:after { top: 0}
  #hide { display: none !important}


  .PageWrapper p.check { max-width: 400px; margin: 0 auto; text-align: center}
  .PageWrapper p.check a { background: #000; 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;
    font-weight: 500;
    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; }
}

@media screen and (min-width: 768px) {
  .only_sp { display: none}
  .wrapper { background: transparent !important; position: relative}
  .wrapper { 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%; }

  .section { position: relative; width: 788px; margin: 0 auto 120px}
  .section > ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 -26px; }
  .section > ul > li { width: calc(100% / 2 - 52px); margin: 0 26px 52px; box-sizing: border-box; }
  .section > ul > li.center { width: 550px; margin: 0 auto 52px; }
  .section > ul > li img { width: 100%; height: auto; }
  .section .btns { display: flex; justify-content: center; }
  .section .btns li { min-width: 176px; margin: 0 5px; }
  .section .btns li a { display: block; padding: 12px 15px; text-align: center; border: 1px solid #000; font-size: 12px; color: #000; font-weight: bold; }
  .section .btns li:nth-of-type(1) a { background: #000; color: #fff; }
  .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;
  }
  .section .btns li:nth-child(2) a span.arrow {
    color: #000;
  }
  .section .detail { display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .section .detail .text { margin: 0 0 30px; text-align: left; font-size: 12px; line-height: 1.5; }
  .section li.detail { margin-top: 0; }


  /* .wrapper p.check { margin: 120px auto; text-align: center; width: 470px} */
  /* .wrapper p.check a { background: #007C8A; color: #fff; display: inline-block; font-size: 12px; font-weight: bold; letter-spacing: 0.05em; padding: 2%; position: relative; width: 470px; text-decoration: none; box-sizing: border-box; transition: background 1s ease} */
  /* .wrapper p.check a:after { position: absolute; top: 0; bottom: 0; left: 92%; margin: auto; content: ""; vertical-align: middle; width: 8px; height: 8px; border: 1px solid; border-color: #000 #000 transparent transparent; transform: rotate(45deg); transition: all .4s} */
  /* .wrapper p.check a:hover { text-decoration: none} */

  .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 65px; 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: 2%; font-size: 17px; font-weight: bold; background: #000; color: #fff; }
  .mainVisual p.check a span.arrow {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-weight: 500;
    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}
  }

  a.rollover img { transition:opacity 0.35s; backface-visibility: hidden}
  a.rollover:hover img { opacity: 0.8}
}