@charset "UTF-8";
/*! Writen  by SCSS */
/* CSS Document */
@media screen and (max-width: 767px) {
  .photo1 {
    width: 100%;
    height: auto;
    margin: 0px 0px 30px 0; } }
@media screen and (min-width: 768px) {
  .clearfix::after {
    content: “”;
    display: block;
    clear: both; }

  .photo {
    width: 982px;
    height: auto; }

  .photo1 {
    width: 982px;
    height: auto;
    margin: 0px 0px 30px 0; }

  .photo1-left {
    float: left;
    width: 30%;
    height: auto;
    margin: 0px 30px 0px 0; }

  .photo1-right {
    float: right;
    width: 30%;
    height: auto; } }
.img_gal {
  display: flex;
  flex-wrap: wrap;
  gap: 30px calc(30% / 9.82); }
  @media screen and (max-width: 767px) {
    .img_gal {
      gap: 10px calc(30% / 9.82); } }
  .img_gal li {
    width: calc(476% / 9.82); }
    .img_gal li.w {
      width: 100%; }

.movie {
  position: relative;
  width: 50%;
  max-width: 320px;
  margin: 0 auto 40px;
  overflow: hidden; }
  .movie > div {
    width: 100%;
    position: relative; }
    .movie > div > div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .movie > div > div.op {
        display: none; }
  .movie video {
    transform: translateY(-1px);
    width: 100%; }

@media screen and (max-width: 767px) {
  #slider1 .planslider .slick-dots {
    position: static; } }
@media screen and (max-width: 767px) {
  #slider1 .planslider .slick-dots li {
    margin: 0 4px; }
    #slider1 .planslider .slick-dots li button:before {
      width: 1em; } }

/*# sourceMappingURL=plan2.css.map */