@charset "utf-8";

/* ==================================

  『建築実例』TOP SP Style

================================== */
.pc { display: none !important; }
.sp { display: inherit !important; }

/* ----------------------------------

  Swiper Slider Overwrite

---------------------------------- */
.swiper-container::before {
  top: -2em;
  font-size: calc(21 / 750 * 100vw);
}
.swiper-controller {
  position: absolute;
  bottom: 12.5%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
}
.swiper-container .show-detail {
  position: relative;
  top: calc(70 / 750 * 100vw);
}

/* Scrollbar
---------------------------------- */
.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  width: calc(506 / 750 * 100vw);
  max-width: initial;
}

/* ----------------------------------

  Main

---------------------------------- */
.main { padding: 0; }


/* ----------------------------------

  Section

---------------------------------- */

/* Main Visual
---------------------------------- */
.main-visual {
  top: 0;
  width: 100%;
  height: 0;
  padding: 0 0 calc(495 / 739 * 100vw);
  display: block;
  visibility: hidden;
  opacity: 0;
}
.main-visual.is-visible { animation: fadeIn .75s ease-in 1.0s forwards; }
.main-visual figure {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0 0 calc(495 / 739 * 100vw);
}
.main-visual figure.mv01, .main-visual figure.mv05 { flex: 1; }
.mv-scroll {
  overflow-x: scroll;
  padding: 0 0 10px;
}

/* Add 202406, Modified 202409 */
.main-visual figure a {
  z-index: 2;
  /*
  width: 100%;
  height: auto;
  padding: 0 0 calc(495 / 739 * 100vw);
  */
}
.main-visual figure a span {
  z-index: 2;
  left: 0;
  right: 0;
  transform: translateX(0);
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(32 / 750 * 100vw);
  font-weight: 400;
  text-align: center;
  color: #ffffff;
}

/* First View */
.first-view {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(495 / 739 * 100vw);
}
.first-view img {
  width: 100%;
  height: calc(495 / 739 * 100vw);
  object-fit: cover;
  aspect-ratio: 495 / 739;
}

/* Slick Slider
---------------------------------- */
.main-visual figure.slick-active a span { animation: fadeIn .75s linear 1.0s forwards; }

@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* Breadcrumb
---------------------------------- */
#bread { margin: 5px auto 0; }
#bread ul { left: 0; }
#bread ul li { font-size: calc(20 / 750 * 100vw); }

/* Heading
---------------------------------- */
.heading {
  font-size: calc(48 / 750 * 100vw);
  margin: 0 0 calc(25 / 750 * 100%);
}
.sub-heading {
  font-size: calc(40 / 750 * 100vw);
  margin: 0 0 calc(60 / 750 * 100%);
}

/* Intro
---------------------------------- */
.intro { padding: calc(85 / 750 * 100%) 0 calc(100 / 750 * 100%); }
.intro p {
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(40 / 24);
}

/* Recommend Example
---------------------------------- */
.rcmd {
  grid-template-columns: initial;
  display: flex;
  flex-direction: column-reverse;
  margin: 0 0 calc(100 / 750 * 100%);
}
.rcmd-summary {
  z-index: 1;
  padding: 0 calc((750 - 670) / 750 * 100% / 2);
}
.rcmd-summary i {
  width: calc(75 / 750 * 100vw);
  height: calc(75 / 750 * 100vw);
  display: block;
  margin: calc(75 / 750 * 100vw / 2 * -1) 0 0;
}
.rcmd-summary i img {
  width: 100%;
  height: auto;
}
.rcmd-summary h3 {
  font-size: calc(30 / 750 * 100vw);
  padding: 0 0 calc(35 / 750 * 100%);
  margin: 10px 0 calc(35 / 750 * 100%);
}
.rcmd-summary h3 small { font-size: calc(20 / 750 * 100vw); }
.tag { font-size: calc(24 / 750 * 100vw); }

/* 詳細を見る
---------------------------------- */
.show-detail, .show-detail.show-all {
  width: 100%;
  height: calc(100 / 750 * 100vw);
  line-height: calc(100 / 750 * 100vw);
  font-size: calc(30 / 750 * 100vw);
}
.show-detail { margin: calc(60 / 750 * 100%) auto 0; }
.show-detail.show-all { margin: calc(60 / 750 * 100%) auto 0; }
.show-detail.sp {
  width: calc(100% - ((750 - 670) / 750 * 100%));
  margin: calc(60 / 750 * 100%) auto 0;
}
.show-detail.show-all.sp {
  width: calc(100% - ((750 - 670) / 750 * 100%));
  margin: calc((60 + 24) / 750 * 100%) auto 0;
}
.rcmd .show-detail.show-all.sp { width: 100%; }


/* Slider Unit
---------------------------------- */

/* Swiper */
.slider-unit { padding: 0 0 calc(260 / 750 * 100%); }
.slider01 { margin: 0 0 calc(85 / 750 * 100%); }
.slider02 { margin: 0 0 calc(155 / 750 * 100%); }

/* Slick */
.slick-list { padding: 0; }
.hiraya .slick-slide, .lifestyle .slick-slide {
  /*width: calc(670 / 750 * 100vw);*/
  width: calc(630 / 750 * 100vw);
  margin: 0 calc(25 / 750 * 100vw) 0 0;
}
.slick-list img {
  width: 100%;
  height: auto;
}

/* Example Items
---------------------------------- */
.example-wrap {
  display: block;
  overflow: hidden;
}
.example-item h4 {
  font-size: calc(30 / 750 * 100vw);
  margin: calc(40 / 750 * 100%) 0 calc(30 / 750 * 100%);
}
.example-item h5 {
  font-size: calc(36 / 750 * 100vw);
  margin: 0 0 calc(30 / 750 * 100%);
}

/* New Arrivals
---------------------------------- */
.new-arrivals { padding: 0 0 calc(140 / 750 * 100%); }
.new-arrivals .inner { width: 100%; }
.new-arrivals .example-wrap { display: block; }
.new-example .example-item {
  width: 100%;
  margin: 0 0 calc(100 / 750 * 100%);
}
.new-example .example-item:nth-child(n+6) { display: none; }
.new-example .example-item h4 {
  padding: 0 calc( (750 - 670) / 750 * 100% / 2 ) calc(35 / 750 * 100%);
  margin: 0 auto calc(35 / 750 * 100%);
  border-bottom: solid 1px #eeeeee;
}
.new-example .tag-unit { padding: 0 calc((750 - 670) / 750 * 100% / 2); }

/* NEW */
.example-item.new::before { content: none; }
.new-example .example-item.new h4::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  width: calc(75 / 750 * 100vw);
  height: calc(75 / 750 * 100vw);
  aspect-ratio: 1 / 1;
  display: inline-block;
  background: url(../images/new.png) no-repeat 0 0;
  background-size: cover;
  margin: calc( (60 + 37.5) / 750 * 100vw * -1 ) 0 0;
}

/* Slick Slider */
.ei-slide.slick-slider {
  max-width: 100%;
  margin: 0 0 calc(60 / 750 * 100%);
}
.ei-slide.slick-slider .slick-slide img { aspect-ratio: 2 / 1; }

.new-arrivals .show-detail { display: none; }

/* Hiraya Example
---------------------------------- */
.hiraya { padding: 0 0 calc(215 / 750 * 100%); }
.hiraya .inner {
  width: calc(710 / 750 * 100%);
  margin: 0 0 0 calc(40 / 750 * 100%) !important;
}
.hiraya .example-item h4 {
  font-size: calc(24 / 750 * 100vw);
  margin: calc(15 / 750 * 100%) 0 calc(30 / 750 * 100%);
}

/* Lifestyle Example
---------------------------------- */
.lifestyle { padding: 0 0 calc(180 / 750 * 100%); }
.lifestyle .inner {
  width: calc(710 / 750 * 100%);
  margin: 0 0 0 calc(40 / 750 * 100%) !important;
}
.lifestyle .example-item h4 {
  font-size: calc(24 / 750 * 100vw);
  margin: calc(15 / 750 * 100%) 0 calc(30 / 750 * 100%);
}

/* Image Gallery
---------------------------------- */
.gallery { padding: 0 0 calc(200 / 750 * 100%); }
.gallery-unit { grid-template-columns: repeat(2, minmax(calc((100% - 1px) / 2), 1fr)); }
.gallery-item {
  margin: 0 0 calc(50 / 750 * 100vw);
}
.gallery-item figure figcaption {
  font-size: calc(24 / 750 * 100vw);
  letter-spacing: 0.05em;
}

/* Keyword Search
---------------------------------- */
.keyword-search { padding: 0 0 calc(125 / 750 * 100%); }
.tag-box { padding: 0; }
.search-wrap { width: 100%; }
::-webkit-input-placeholder { font-size: calc(24 / 750 * 100vw); }
:-moz-placeholder { font-size: calc(24 / 750 * 100vw); }
::-moz-placeholder { font-size: calc(24 / 750 * 100vw); }
:-ms-input-placeholder { font-size: calc(24 / 750 * 100vw); }

/* Banner
---------------------------------- */
.bnr-unit {
  display: block;
  gap: 0;
  margin: 0 0 calc(90 / 750 * 100%);
}
.bnr { margin: 0 0 calc(60 / 750 * 100%); }
.bnr a { aspect-ratio: 670 / 220; }
.bnr a img {
width: 100%;
height: auto;
}
.bnr p {
  font-size: calc(22 / 750 * 100vw);
  margin: 0 0 0.5em;
}
.modal-content {
  bottom: 50%;
  transform: translate(-50%, 50%);
  width: calc(680 / 750 * 100%);
  height: auto;
  max-width: initial;
  padding: calc(75 / 750 * 100%) calc(40 / 750 * 100%) calc(60 / 750 * 100%);
}
.modal-content h2 {
  font-size: calc(40 / 750 * 100vw);
  margin: 0 auto calc(60 / 750 * 100%);
}
.modal-content p { margin: 0 0 calc(35 / 750 * 100%); }
.modal-content p .tag { font-size: calc(24 / 750 * 100vw); }
a.js-modal-close {
  top: calc(30px * .75);
  transform: scale(.75);
}