/* Scss Document */
.rough {
  background-image: url("../images/model/rough.jpg");
  height: 1530px;
  background-position: center top; }

.wrap {
  background: #f2f2f2; }

.area1 {
  width: 90%;
  max-width: 960px;
  margin: auto;
  padding-top: 40px;
  padding-bottom: 160px; }
  @media only screen and (max-width: 900px) {
    .area1 {
      padding-bottom: 100px; } }
  @media only screen and (max-width: 768px) {
    .area1 {
      padding-bottom: 18%; } }
  .area1 h1 {
    font-family: 'EB Garamond', serif;
    text-align: center;
    color: #1b2d58;
    opacity: .7;
    letter-spacing: .2em;
    font-size: 5.5rem;
    border-bottom: 1px solid #1b2d58;
    margin-bottom: 20px; }
  .area1 p.cap {
    font-size: 2rem;
    text-align: center; }

@media screen and (max-width: 800px) {
  .area1 {
    padding-top: 20px; }

  .area1 h1 {
    font-size: 6.5vw;
    margin-bottom: 20px; }

  .area1 p.cap {
    font-size: 3.5vw; }

  .area1 p.p1 {
    font-size: 3vw;
    margin: 30px 0 50px 0; }

  .area1 figure {
    margin: 0 auto 40px auto; }

  .area2 {
    margin: 10% 0; }

  .area2 ul {
    flex-wrap: wrap; }

  .area2 li {
    width: 49%;
    margin-bottom: 2%; }

  .area2 li span {
    font-size: 1rem; }

  .area3 {
    background: rgba(0, 0, 0, 0.1);
    padding: 10% 0; }

  .area3 .a3a {
    padding: 5% 7.5%;
    display: block; }

  .area3 dl {
    width: 100%; }

  .area3 dt {
    font-size: 4.25vw; }

  .area3 dd dl {
    width: 100%; }

  .area3 dd dt {
    font-size: 2.5vw; }

  .area3 dd dd {
    font-size: 4vw; }

  .area3 dd dd span {
    font-size: 6vw; }

  .area3 figure {
    width: 100%; }

  .area3 figcaption {
    font-size: 1rem; }

  .area4 figcaption {
    margin: 5px 5px 0 0; }

  .area4 .badge {
    width: 35vw;
    right: 5vw;
    bottom: 35vw; } }
.gallery_wrap {
  padding: 180px 0 140px;
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
  position: relative; }
  @media only screen and (max-width: 900px) {
    .gallery_wrap {
      padding: 130px 0 70px; } }
  @media only screen and (max-width: 600px) {
    .gallery_wrap {
      padding: 120px 0 70px; } }
  @media only screen and (max-width: 400px) {
    .gallery_wrap {
      padding: 90px 0 70px; } }
  .gallery_wrap .btnwrap {
    top: -8%;
    left: 0%;
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 30px; }
    @media only screen and (max-width: 768px) {
      .gallery_wrap .btnwrap {
        justify-content: center;
        gap: 0; } }
    .gallery_wrap .btnwrap .btn {
      max-width: 32%;
      filter: drop-shadow(2px 11px 12px #707070);
      cursor: pointer; }
      @media only screen and (max-width: 768px) {
        .gallery_wrap .btnwrap .btn {
          max-width: 48%;
          margin: 0 0 30px; }
          .gallery_wrap .btnwrap .btn:nth-child(2) {
            margin-left: 4%; } }
      @media only screen and (max-width: 768px) {
        .gallery_wrap .btnwrap .btn.h1type .active {
          transform: translate(0, 10.5%); } }
  .gallery_wrap .btn img.active {
    display: none; }
  .gallery_wrap .btn img.inactive {
    display: block; }
  .gallery_wrap .btn.on img.active {
    display: block; }
  .gallery_wrap .btn.on img.inactive {
    display: none; }
  .gallery_wrap .sliderwrap {
    position: relative; }
  .gallery_wrap #etype, .gallery_wrap #h1type {
    opacity: 0;
    width: 100%;
    margin: 0 auto;
    z-index: 0;
    position: absolute;
    top: 0; }
    .gallery_wrap #etype.on, .gallery_wrap #h1type.on {
      opacity: 1;
      z-index: 2;
      position: relative; }
    .gallery_wrap #etype .slide-arrow, .gallery_wrap #h1type .slide-arrow {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      z-index: 2;
      width: 5%;
      min-width: 40px;
      max-width: 80px;
      background: none;
      cursor: pointer; }
      @media only screen and (max-width: 768px) {
        .gallery_wrap #etype .slide-arrow, .gallery_wrap #h1type .slide-arrow {
          width: 20px;
          min-width: 0px; } }
      .gallery_wrap #etype .slide-arrow.prev-arrow, .gallery_wrap #h1type .slide-arrow.prev-arrow {
        left: 10px; }
      .gallery_wrap #etype .slide-arrow.next-arrow, .gallery_wrap #h1type .slide-arrow.next-arrow {
        right: 10px; }
    .gallery_wrap #etype .slider, .gallery_wrap #h1type .slider {
      margin-bottom: 30px; }
      @media only screen and (max-width: 768px) {
        .gallery_wrap #etype .slider, .gallery_wrap #h1type .slider {
          margin-bottom: 15px; } }
      @media only screen and (max-width: 768px) {
        .gallery_wrap #etype .slider .slick-slide, .gallery_wrap #h1type .slider .slick-slide {
          /*height:480px;
          li{
            height:100%;
            overflow: hidden;
          }
          img{
            left:50%;
            transform: translate(-50%,0);
            max-width: none;
            height:480px;
            position: relative;
          }*/ } }
  .gallery_wrap .thumbnail-list {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap; }
    .gallery_wrap .thumbnail-list li {
      max-width: 12%;
      width: 125px;
      margin: 0 12px 0 0;
      position: relative;
      cursor: pointer; }
      .gallery_wrap .thumbnail-list li:last-child {
        margin-right: 0px; }
      @media only screen and (max-width: 1280px) {
        .gallery_wrap .thumbnail-list li {
          margin: 0 0.5% 0 0; } }
      @media only screen and (max-width: 768px) {
        .gallery_wrap .thumbnail-list li {
          margin: 0 2.6% 2% 0;
          max-width: 23%;
          width: 23%; }
          .gallery_wrap .thumbnail-list li:nth-child(4) {
            margin-right: 0px; }
          .gallery_wrap .thumbnail-list li img {
            width: 100%; } }
      .gallery_wrap .thumbnail-list li img.inactive {
        position: relative;
        opacity: 1; }
      .gallery_wrap .thumbnail-list li img.active {
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0; }
      .gallery_wrap .thumbnail-list li.thumbnail-current img.inactive, .gallery_wrap .thumbnail-list li:hover img.inactive {
        opacity: 0; }
      .gallery_wrap .thumbnail-list li.thumbnail-current img.active, .gallery_wrap .thumbnail-list li:hover img.active {
        opacity: 1; }