@charset "UTF-8";

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

index：トップページ

----------------------------------------------- */
/* FV */
main#index {
  padding: 0;
}
#index .mv {
  position: relative;
  height: 75vh;
  overflow: hidden;
}
#index .mv .mv-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}
#index .mv .mv-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 0;
}
#index .mv .mv-slide.active {
  opacity: 1;
  z-index: 1;
}
#index .mv .mv-copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
#index .mv .mv-copy p {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  line-height: 2;
  letter-spacing: 4px;
}
#index .mv .mv-scroll {
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #fff;
  text-align: center;
}
#index .mv .mv-scroll span {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  letter-spacing: .05em;
  margin-bottom: 12px;
}
#index .mv .mv-scroll .scroll_arrow {
  position: relative;
  width: 92px;
  height: 35px;
}
#index .mv .mv-scroll .scroll_arrow::before,
#index .mv .mv-scroll .scroll_arrow::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 1px;
  background: #fff;
}
#index .mv .mv-scroll .scroll_arrow::before {
  left: 0;
  transform: rotate(13deg);
  transform-origin: right center;
}
#index .mv .mv-scroll .scroll_arrow::after {
  right: 0;
  transform: rotate(-13deg);
  transform-origin: left center;
}
@media (max-width: 750px) {
  #index .mv .mv-copy {
    top: 27%;
    left: 50%;
  }
}

/* event */
#index .event {
  max-width: 1240px;
  width: 90%;
  margin: auto;
  padding: 120px 0;
}
#index .event .event-inner {
  margin: 0 auto;
}
#index .event .event-inner .section-head {
  margin-bottom: 40px;
letter-spacing: 3px;
}
#index .event .event-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 80px;
}
#index .event .event-card {
  text-decoration: none;
  color: #191919;
  display: block;
}
#index .event .event-img {
  position: relative;
  overflow: hidden;
}
#index .event .event-img img {
  width: 100%;
  display: block;
  transition: 0.6s ease;
}
#index .event .event-card:hover img {
  transform: scale(1.05);
}
#index .event .label {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  padding: 6px 10px;
  letter-spacing: 0.1em;
}
#index .event .label span {
  font-weight: 100;
}
#index .event .label.natural { background: #99cd8f; }
#index .event .label.nordic { background: #8aa0ac; }
#index .event .label.urban { background: #7c6769; }
#index .event .ribbon {
  position: absolute;
  top: 0;
  left: 0;
  background: #111;
  color: #fff;
  padding: 6px 12px;
  font-family: "Inter", sans-serif;
  font-weight: bold;
  font-size: 12px;
}
#index .event .event-info {
  margin-top: 20px;
}
#index .event .date {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.625rem, 0.336rem + 0.62vw, 0.875rem);
  margin-bottom: 8px;
}
#index .event .title {
  font-size: clamp(0.75rem, 0.205rem + 1.16vw, 1.25rem);
  letter-spacing: 0.04rem;
  margin-bottom: 10px;
}
#index .event .comment {
  font-size: clamp(0.625rem, 0.489rem + 0.29vw, 0.75rem);
  letter-spacing: 0.04rem;
}
@media (max-width: 750px) {
  #index .event {
    width: 85%;
    padding: 15% 0;
  }
  #index .event .event-inner .section-head {
    margin-bottom: 6%;
  }
  #index .event .event-grid {
    display: block;
  }
  #index .event .event-card {
    margin-bottom: 8%;
  }
  #index .event .event-info {
    margin-top: 1%;
  }
  #index .event .date {
    font-size: clamp(0.875rem, 0.25rem + 2.67vw, 1.5rem);
  }
  #index .event .title {
    font-size: clamp(1.25rem, 0.875rem + 1.6vw, 1.625rem);
  }
  #index .event .comment {
    font-size: clamp(0.75rem, 0.5rem + 1.07vw, 1rem);
  }
}
/* about */
#index .about {
  max-width: 1400px;
  width: 100%;
  margin: auto;
  position: relative;
  background: url("../image/index/about-bg.jpg") no-repeat center center;
  background-size: cover;
}
#index .about .about-box {
  background: #fff;
  width: 33%;
  max-width: 450px;
  padding: 7% 6%;
  margin-left: 5%;
  box-shadow: 0 30px 60px rgba(0,0,0,0.08);
}
#index .about .photo {
  display: none;
}
#index .about .about-lead {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1rem, 0.494rem + 1.08vw, 1.438rem);
  line-height: 2;
  margin: 20px 0;
	letter-spacing: 3px;
}
#index .about .about-desc {
  font-size: clamp(0.688rem, 0.398rem + 0.62vw, 0.938rem);
  line-height: 2;
  margin-bottom: 40px;
	text-align: justify;
}
#index .about .about-btn {
  display: inline-block;
padding: 25px 60px;
  border: 1px solid #191919;
  border-radius: 50px;
  text-decoration: none;
  font-size: clamp(1rem, 0.408rem + 0.46vw, 0.813rem);
  color: #191919;
  transition: 0.4s;
	width: 100%;
    text-align: center;
}
#index .about .about-btn:hover {
  background: #191919;
  color: #fff;
}
@media (max-width: 750px) {
  #index .about {
    background: none;
    padding: 0;
  }
  #index .about .about-box {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: auto;
    box-shadow: none;
  }
  #index .about .section-sub,
  #index .about .section-title {
    width: 85%;
   margin: 0 auto 20px auto;
  }
  #index .about .photo {
    display: block;
    margin-top: 6%;
  }
  #index .about .about-lead {
    width: 85%;
    margin: 6% auto;
    font-size: clamp(1.25rem, 5.33vw, 2.5rem);
  }
  #index .about .about-desc {
    width: 85%;
    margin: auto;
    font-size: clamp(0.875rem, 0.188rem + 2.93vw, 1.563rem);
    line-height: 1.8;
  }
  #index .about .about-btn {
    width: 70%;
    margin: 5% auto 15%;
    text-align: center;
    display: block;
  }
}

/* housing series */
#index .housing {
  background: #d9ddde;
  padding: 120px 0 0;
}
#index .housing .housing-inner {
  width: 100%;
  margin: 0 auto;
}
#index .housing .housing-head {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto 60px;
}
#index .housing .housing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1px;
}
#index .housing .housing-card {
  text-decoration: none;
  color: #fff;
  display: block;
}
#index .housing .housing-img {
  overflow: hidden;
}
#index .housing .housing-img img {
  width: 100%;
  display: block;
  transition: transform .6s ease;
}
#index .housing .housing-card:hover .housing-img > img {
  transform: scale(1.05);
}
#index .housing .housing-bottom {
  background: #191919;
  display: flex;
  padding: 8% 6%;
  min-height: 220px;
  position: relative;
  justify-content: space-around;
}
#index .housing .housing-letter {
  font-family: "Inter", sans-serif;
  font-size: clamp(1.563rem, 0.839rem + 1.54vw, 2.188rem);
  font-weight: 200;
  letter-spacing: 0.1rem;
  line-height: 1.2;
}
#index .housing .housing-letter span {
  font-size: clamp(6.25rem, 2.055rem + 8.94vw, 9.875rem);
  font-weight: 700;
  line-height: 0.7;
}
#index .housing .housing-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#index .housing .housing-jp {
  font-size: clamp(0.563rem, 0.273rem + 0.62vw, 0.813rem);
  letter-spacing: 0.1em;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#index .housing .housing-jp span {
  font-size: 22px;
  font-weight: 100;
}
#index .housing .housing-jp span .bracket {
  width: 0.4em;
  height: auto;
}
#index .housing .housing-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  letter-spacing: 0.08em;
}
#index .housing .housing-list li {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.75rem, 0.027rem + 1.54vw, 1.375rem);
  font-weight: bold;
  margin-bottom: 6px;
  display: flex;
  align-items: center; 
}
#index .housing .housing-list li span {
  font-weight: 100;
}
#index .housing .housing-list li::before{
 content: "・";
 color: #fff;
 font-size: 0.6em;
 margin-right: 0.5rem;
}
#index .housing .green li:first-child { color: #99cd8f; }
#index .housing .green li:last-child { color: #c28600; }

#index .housing .yellow li:first-child { color: #a9987f; }
#index .housing .yellow li:last-child { color: #8aa0ac; }

#index .housing .purple li:first-child { color: #c28dbd; }
#index .housing .purple li:last-child { color: #7c6769; }
#index .housing .housing-link {
  font-size: clamp(0.563rem, 0.273rem + 0.62vw, 0.813rem);
  letter-spacing: 0.1em;
  line-height: 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
#index .housing .housing-link span.arrow {
  width: 12.6%;
  overflow: hidden;
  display: inline-block;
}
#index .housing .housing-link span.arrow img {
  display: block;
  transform: translateX(0);
}
#index .housing .br-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 73%;
  max-width: 1004px;
  margin: auto;
  padding: 10% 0;
}
#index .housing .br-card {
  text-decoration: none;
  color: #fff;
  display: block;
}
#index .housing .br-img {
  position: relative;
  overflow: hidden;
}
#index .housing .br-img img {
  width: 100%;
  display: block;
  transition: transform 0.8s ease;
}
#index .housing .br-card:hover img {
  transform: scale(1.05);
}
#index .housing .br-img-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.2em;
  color: #fff;
  text-align: center;
}
#index .housing .br-img-title span {
  font-family: "Inter", sans-serif;
}
#index .housing .br-bottom {
  background: #111;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 22px 30px;
  font-size: clamp(0.563rem, 0.273rem + 0.62vw, 0.813rem);
  letter-spacing: 0.1em;
  line-height: 0;
}
#index .housing .br-bottom span.arrow {
  width: 6%;
  overflow: hidden;
  display: inline-block;
}
#index .housing .br-bottom span.arrow img {
  display: block;
  transform: translateX(0);
}
.arrow img.is-animate {
  animation: arrowOrbit 1s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes arrowOrbit {
  0% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(120%);
  }
  46% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(0);
  }
}
@media (max-width: 750px) {
  #index .housing {
    padding: 15% 0;
  }
  #index .housing .housing-head {
    width: 85%;
    margin: 0 auto 6%;
  }
  #index .housing .housing-grid {
    display: block;
  }
  #index .housing .housing-card {
    margin-bottom: 1px;
  }
  #index .housing .housing-bottom {
    padding: 10% 7%;
    min-height: auto;
    justify-content: space-between;
  }
  #index .housing .housing-letter {
    margin-right: 0;
    font-size: clamp(2.188rem, 0.813rem + 5.87vw, 3.563rem);
    font-weight: 100;
    line-height: 1;
  }
  #index .housing .housing-letter span {
    font-size: clamp(9.375rem, 3.125rem + 26.67vw, 15.625rem);
  }
  #index .housing .housing-jp {
    font-size: clamp(0.75rem, 0.063rem + 2.93vw, 1.438rem);
    margin-bottom: 0;
  }
  #index .housing .housing-list li {
    font-size: clamp(1rem, -0.188rem + 5.07vw, 2.188rem);
  }
  #index .housing .housing-link {
    font-size: clamp(0.875rem, 0.25rem + 2.67vw, 1.5rem);
  }
  #index .housing .br-grid {
    display: block;
    width: 85%;
  }
  #index .housing .br-card {
    margin-bottom: 5px;
  }
  #index .housing .br-bottom {
    font-size: clamp(0.875rem, 0.25rem + 2.67vw, 1.5rem);
  }
}

/* quality */
#index .quality {
  background: #d9d9d9;
  padding: 120px 0 140px;
}
#index .quality .quality-inner {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
}
#index .quality .quality-head {
  margin-bottom: 40px;
}
#index .quality .quality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin: auto;
}
#index .quality .quality-card {
  text-decoration: none;
  color: #fff;
  display: block;
}
#index .quality .quality-img {
  position: relative;
  overflow: hidden;
}
#index .quality .quality-img img {
  width: 100%;
  display: block;
  transition: transform 0.6s ease;
}
#index .quality .quality-card:hover img {
  transform: scale(1.05);
}
#index .quality .quality-img-title {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
	font-size: 18px;
 /* font-size: clamp(1.125rem, 0.402rem + 1.54vw, 1.75rem);*/
  letter-spacing: 0.1em;
  color: #fff;
}
#index .quality .quality-bottom {
  background: #111;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 22px 30px;
  font-size: clamp(0.563rem, 0.273rem + 0.62vw, 0.813rem);
  letter-spacing: 0.1em;
  line-height: 0;
}
#index .quality .quality-bottom span.arrow {
  width: 6%;
  overflow: hidden;
  display: inline-block;
}
#index .quality .quality-bottom span.arrow img {
  display: block;
  transform: translateX(0);
}
@media (max-width: 750px) {
  #index .quality {
    padding: 15% 0;
  }
  #index .quality .quality-inner {
    width: 85%;
  }
  #index .quality .quality-head {
    margin-bottom: 12%;
  }
  #index .quality .quality-grid {
    display: block;
    width: 100%;
  }
  #index .quality .quality-card {
    margin-bottom: 5px;
  }
  #index .quality .quality-img-title {
    font-size: clamp(1.25rem, 0.625rem + 2.67vw, 1.875rem);
  }
  #index .quality .quality-card:nth-of-type(2) .quality-img-title,
  #index .quality .quality-card:nth-of-type(3) .quality-img-title {
    text-align: center;
    width: 90%;
  }
  #index .quality .quality-bottom {
    font-size: clamp(0.875rem, 0.25rem + 2.67vw, 1.5rem);
  }
}

/* works */
#index .works {
  max-width: 1240px;
  width: 90%;
  margin: auto;
  padding: 120px 0;
}
#index .works .works-inner {
  margin: 0 auto;
}
#index .works .works-inner .section-head {
  margin-bottom: 40px;
}
#index .works .works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 80px;
}
#index .works .works-card {
  text-decoration: none;
  color: #191919;
  display: block;
}
#index .works .works-img {
  position: relative;
  overflow: hidden;
}
#index .works .works-img img {
  width: 100%;
  display: block;
  transition: 0.6s ease;
}
#index .works .works-card:hover img {
  transform: scale(1.05);
}
#index .works .label {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  padding: 6px 10px;
  letter-spacing: 0.1em;
}
#index .works .label span {
  font-weight: 100;
}
#index .works .label.natural { background: #99cd8f; }
#index .works .label.nordic { background: #8aa0ac; }
#index .works .label.urban { background: #7c6769; }
#index .works .label.hotel { background: #c28dbd; }
#index .works .ribbon {
  position: absolute;
  top: -15px;
  right: -45px;
  background: #111;
  color: #fff;
  padding: 30px 40px 10px;
  transform: rotate(45deg);
  font-family: "Inter", sans-serif;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.1em;
}
#index .works .works-info {
  margin-top: 20px;
}
#index .works .date {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.625rem, 0.336rem + 0.62vw, 0.875rem);
  margin-bottom: 6px;
}
#index .works .title {
  font-size: clamp(0.688rem, 0.398rem + 0.62vw, 0.938rem);
}
#index .works .works-button {
  text-align: center;
}
#index .works .btn-round {
  display: inline-block;
  background: #191919;
  color: #fff;
  border: 1px solid #191919;
  padding: 18px 60px;
  border-radius: 50px;
  text-decoration: none;
  font-size: clamp(0.625rem, 0.408rem + 0.46vw, 0.813rem);
  letter-spacing: 0.1em;
  transition: 0.4s ease;
}
#index .works .btn-round:hover {
  background: #fff;
  color: #191919;
}
@media (max-width: 750px) {
  #index .works {
    width: 85%;
    padding: 15% 0;
  }
  #index .works .works-inner .section-head {
    margin-bottom: 6%;
  }
  #index .works .works-grid {
    display: block;
  }
  #index .works .works-card {
    margin-bottom: 8%;
  }
  #index .works .works-info {
    margin-top: 3%;
  }
  #index .works .date {
    font-size: clamp(0.875rem, 0.25rem + 2.67vw, 1.5rem);
  }
  #index .works .title {
    font-size: clamp(0.875rem, 0.063rem + 3.47vw, 1.688rem);
  }
  #index .works .btn-round {
    padding: 8% 14%;
    font-size: clamp(1rem, 0.5rem + 2.13vw, 1.5rem);
  }
}

/* insta */
#index .instagram {
  max-width: 1240px;
  width: 90%;
  margin: auto;
  padding: 120px 0;
}
#index .instagram .instagram-inner {
  width: 100%;
  margin: 0 auto;
}
#index .instagram .instagram-inner .section-head {
  margin-bottom: 40px;
}
#index .instagram .insta-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
#index .instagram .insta-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: .5s ease;
}
#index .instagram .insta-grid img:hover {
  opacity: 0.8;
}
@media (max-width: 750px) {
  #index .instagram {
    width: 85%;
    padding: 15% 0 20%;
  }
  #index .instagram .instagram-inner .section-head {
    margin-bottom: 6%;
  }
  #index .instagram .insta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* news */
#index .news {
  padding: 120px 0 160px;
  max-width: 1400px;
  width: 90%;
  margin: auto;
}
#index .news .news-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  gap: 100px;
}
#index .news .news-left {
  width: 30%;
}
#index .news .news-right {
  width: 70%;
}
#index .news .news-list {
  list-style: none;
}
#index .news .news-list li {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #191919;
  position: relative;
}
/*#index .news .news-list li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2%;
  width: 8px;
  height: 8px;
  border-top: 1px solid #191919;
  border-right: 1px solid #191919;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s ease;
}
#index .news .news-list li a:hover::after {
  transform: translate(6px, -50%) rotate(45deg);
}*/
#index .news .date {
  width: 120px;
  font-family: "Inter", sans-serif;
  font-size: clamp(0.625rem, 0.336rem + 0.62vw, 0.875rem);
}
#index .news .badge {
  background: #191919;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: clamp(0.688rem, 0.398rem + 0.62vw, 0.938rem);
  padding: 2px 8px;
  margin-right: 10px;
}
#index .news .text {
  font-size: clamp(0.688rem, 0.398rem + 0.62vw, 0.938rem);
}
#index .news .arrow {
  font-size: 22px;
}
@media (max-width: 750px) {
  #index .news {
    width: 85%;
    margin: auto;
    padding: 15% 0;
  }
  #index .news .news-inner {
    display: block;
  }
  #index .news .news-left {
    width: 100%;
    margin-bottom: 6%;
  }
  #index .news .news-right {
    width: 100%;
  }
}

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

about：サカケンについて

----------------------------------------------- */
#about .hero .inner {
  padding: 0 0 0 5%;
}
#about .hero .intro {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5%;
  align-items: start;
  margin-top: -10%;
  padding-top: 10%;
}
#about .hero .intro-copy .eyebrow {
  display: block;
  font-size: clamp(1rem, 0.711rem + 0.62vw, 1.25rem);
  color: #7c6769;
  letter-spacing: .06em;
}
#about .hero .intro-copy h1 {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  line-height: clamp(2.188rem, 0.741rem + 3.08vw, 3.438rem);
  letter-spacing: .01em;
  padding: 6% 0;
}
#about .hero .intro-copy p {
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
  line-height: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  text-align: justify;
}
#about .hero .intro-image img {
  width:100%;
  aspect-ratio: 1.36 / 1;
  object-fit:cover;
}
#about .features {
  padding: 5% 2% 0;
  margin-top: -5%;
}
#about .features .container {
  max-width: 1240px;
  margin: auto;
}
#about .features .section-title {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  text-align: center;
  font-size: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  font-weight: 500;
  letter-spacing: .08em;
  padding: 8% 0;
}
#about .features .feature-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:34px 34px;
  margin-bottom:110px;
}
#about .features .feature-grid > div.trigger,
#about .features .feature-grid > div.trigger ~ div {
  transform: translateY(30px);
  opacity: 0;
}
#about .features .feature-grid > div:nth-of-type(1) {
  transition: 0.6s;
}
#about .features .feature-grid > div:nth-of-type(2) {
  transition: 0.6s 0.3s;
}
#about .features .feature-grid > div:nth-of-type(3) {
  transition: 0.6s 0.6s;
}
#about .features .feature-grid > div:nth-of-type(4) {
  transition: 0.6s 0.9s;
}
#about .features .feature-grid > div.trigger.move,
#about .features .feature-grid > div.trigger.move ~ div {
  transform: translateY(0);
  opacity: 1;
}
#about .features .feature-card {
  position: relative;
  background: #eee;
  padding: 7%;
}
#about .features .feature-card .check {
  position:absolute;
  top: -20px;
  right: 18px;
  width: 42px;
  height: 42px;
}
#about .features .feature-card h3 {
  font-size: clamp(0.938rem, 0.576rem + 0.77vw, 1.25rem);
  line-height: 1.7;
  font-weight: 700;
  margin-bottom: 5%;
  letter-spacing: 0.03em;
}
#about .features .feature-card p {
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
  line-height: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
}
#about .features .feature-card strong {
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:2px;
}
#about .message {
  padding: 12% 2% 0%;
  margin-top: -12%;
}
#about .message .container {
  max-width: 1240px;
  margin: auto;
}
#about .message-box {
  position:relative;
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#about .message-box::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(70,58,45,.35), rgba(70,58,45,.35)),
    url("../image/about/message.jpg") center center / cover no-repeat;
  transform:scale(1.01);
}
#about .message-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  width: min(92%, 900px);
  padding: 3% 0;
}
#about .message-content h2 {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  line-height: clamp(2.5rem, 1.415rem + 2.31vw, 3.438rem);
  letter-spacing: 0.08em;
  margin-bottom: 1%;
}
#about .message-content p {
  font-size: clamp(0.938rem, 0.793rem + 0.31vw, 1.063rem);
  line-height: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  letter-spacing: 0.04em;
}
#about .material {
  padding-bottom: 0%;
}
#about .material-grid {
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 4%;
  align-items:start;
	padding-top: 10%;
	padding-bottom: 10%;
}
#about .material-image img {
  width:100%;
  aspect-ratio: 785 / 435;
  object-fit:cover;
}
#about .material-copy {
  padding: 0 8% 0 0;
}
#about .material-copy .eyebrow {
  display: block;
  font-size: clamp(1rem, 0.711rem + 0.62vw, 1.25rem);
  color: #7c6769;
  margin-bottom: 1%;
  letter-spacing: 0.06em;
}
#about .material-copy h2 {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  line-height: clamp(2.188rem, 0.741rem + 3.08vw, 3.438rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
	padding: 6% 0;
}
#about .material-copy p {
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
  line-height: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  text-align: justify;
}
@media screen and (max-width: 1340px) {
  #about .hero .intro {
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
  }
  #about .material-grid {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }
}
@media screen and (max-width: 1080px) {
  #about .hero .intro {
    grid-template-columns: 1fr 1.4fr;
  }
  #about .material-grid {
    grid-template-columns: 1.3fr 1fr;
  }
}
@media screen and (max-width: 980px) {
  #about .hero .intro {
    grid-template-columns: 1fr 1.3fr;
  }
  #about .material-grid {
    grid-template-columns: 1.2fr 1fr;
  }
}
@media screen and (max-width: 860px) {
  #about .hero .intro {
    grid-template-columns: 1fr 1.2fr;
  }
  #about .material-grid {
    grid-template-columns: 1.1fr 1fr;
  }
}
@media screen and (max-width: 780px) {
  #about .hero .intro {
    grid-template-columns: 1fr 1.1fr;
  }
  #about .material-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 750px) {
  #about .hero .inner {
    padding: 0;
  }
  #about .hero .intro {
    grid-template-columns: 1fr;
    gap: 1%;
    margin-top: -20%;
    padding-top: 20%;
  }
  #about .hero .intro .intro-copy {
    width: 88%;
    margin: auto;
  }
  #about .hero .intro-image {
    order:-1;
  }
  #about .hero .intro-image img {
    aspect-ratio:auto;
    width:100%;
  }
  #about .hero .intro-copy .eyebrow {
    display:none;
  }
  #about .hero .intro-copy h1 {
    font-size: min(40px, 5.34vw);
    line-height: min(70px, 9.34vw);
    margin-bottom: 4%;
    letter-spacing: .06em;
  }
  #about .hero .intro-copy p {
    font-size: min(25px, 3.34vw);
    line-height: min(50px, 6.67vw);
  }
  #about .features {
    padding: 15% 6% 0;
    margin-top: -15%;
  }
  #about .features .section-title {
    font-size: min(40px, 5.34vw);
    line-height: min(70px, 9.34vw);
    padding: 15% 0 10%;
  }
  #about .features .feature-grid {
    grid-template-columns: 1fr;
    gap: 1%;
  }
  #about .features .feature-grid .feature-card {
    min-height: auto;
    padding: 6%;
    margin-bottom: 10%;
  }
  #about .features .feature-grid .feature-card .check {
    width: 10%;
    height: auto;
    top: -6%;
    right: 4%;
  }
  #about .features .feature-grid .feature-card h3 {
    font-size: min(35px, 4.67vw);
    line-height: min(50px, 6.67vw);
  }
  #about .features .feature-grid .feature-card p {
    font-size: min(25px, 3.34vw);
    line-height: min(50px, 6.67vw);
  }
  #about .message {
    margin-bottom: 10%;
    padding: 0;
  }
  #about .message-box {
    min-height: auto;
  }
  #about .message-box::before {
    background:
      linear-gradient(rgba(70,58,45,.35), rgba(70,58,45,.35)),
      url("../image/about/message_sp.jpg") center center / cover no-repeat;
  }
  #about .message-content {
    width: 100%;
    padding: 0;
    aspect-ratio: 1 / 1;
  }
  #about .message-content h2 {
    font-size: min(40px, 5.34vw);
    line-height: min(65px, 8.67vw);
    margin-bottom: 1%;
  }
  #about .message-content p {
    font-size: min(25px, 3.34vw);
    line-height: min(50px, 6.67vw);
    margin-bottom: 1%;
    text-align: left;
    padding: 5% 5% 2%;
  }
  #about .material {
    padding-bottom: 12%;
    padding-top: 16%;
    margin-top: -16%;
  }
  #about .material .material-grid {
    grid-template-columns: 1fr;
    gap: 1%;
  }
  #about .material-copy {
    padding: 5% 6%;
  }
  #about .material .material-copy .eyebrow{
    display: none;
  }
  #about .material .material-copy h2{
    font-size: min(40px, 5.34vw);
    line-height: min(70px, 9.34vw);
    font-feature-settings: "palt";
    margin-bottom: 8%;
  }
  #about .material .material-copy p{
    font-size: min(25px, 3.34vw);
    line-height: min(50px, 6.67vw);
  }
}
#about .flow {
  padding: 30px 0 60px;
  margin-top: 10px;
  background: #d9ddde;
}
#about .flow-container {
  max-width: 1100px;
  margin: -80px auto 100px;
  padding-top: 180px;
}
#about .flow-heading {
  text-align: center;
  margin-bottom: 7%;
}
#about .flow-title {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  font-weight: 500;
  letter-spacing: 0.08em;
}
#about .flow-lead {
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
  line-height: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  letter-spacing: 0.04em;
  padding: 2% 0;
}
#about .flow-top {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  margin-bottom: 12%;
  border-top: 1px solid transparent;
}
#about .flow-top-item {
  padding: 0 26px 0 26px;
  position: relative;
}
#about .flow-top-item:not(:first-child)::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #7d7d7d;
}
#about .flow-top-item h3 {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.125rem, 0.98rem + 0.31vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
  margin-bottom: 4%;
}
#about .flow-top-item p {
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
  line-height: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  text-align: justify;
}
#about .flow-top-btn {
  width: 100%;
  max-width: 210px;
  margin-top: 5%;
  background: #191919;
  color: #fff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
  letter-spacing: 0.08em;
  transition: 0.25s ease;
  padding: 5% 0;
}
#about .flow-top-btn:hover {
  opacity: 0.85;
}
#about .flow-timeline {
  position: relative;
  padding-left: 126px;
  max-width: 750px;
  margin: auto;
}
#about .flow-timeline > div.trigger .flow-step-main {
  transition: 0.6s;
  transform: translateY(30px);
  opacity: 0;
}
#about .flow-timeline > div.trigger.move .flow-step-main {
  transform: translateY(0);
  opacity: 1;
}
#about .flow-step{
  position:relative;
  padding-bottom:46px;
}
#about .flow-step-line{
  position:absolute;
  left: -65px;
  top: 10px;
  bottom:-10px;
  width:2px;
  background:#191919;
}
#about .flow-step--last .flow-step-line{
  bottom: 150px;
}
#about .flow-step-line::before {
  content: "";
  position:absolute;
  top: 3px;
  left: 55%;
  width: 53px;
  height: 1px;
  background: #191919;
}
#about .flow-step-dot{
  position:absolute;
  left:-76px;
  top:2px;
  width: 23px;
  height: 23px;
  border:2px solid #191919;
  background:#fff;
  border-radius:50%;
  z-index:2;
}
#about .flow-step-head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:16px;
}
#about .step-no{
  display:inline-block;
  font-family: "Inter", sans-serif;
  font-size:20px;
  line-height:1;
  font-weight:700;
  letter-spacing:.06em;
  white-space:nowrap;
}
#about .flow-step-head h3{
  font-size:18px;
  line-height:1.6;
  font-weight:500;
  letter-spacing:.05em;
	font-weight: bold;
}
#about .flow-step-grid{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap:26px;
  align-items:start;
}
#about .flow-step-copy p,
#about .flow-step-main > p{
  font-size:14px;
  line-height:27px;
  text-align: justify;
}
#about .flow-step-copy p strong,
#about .flow-step-main > p strong {
  text-decoration: underline;
}
#about .flow-step-image img{
  width:100%;
  aspect-ratio: 300 /  200;
  object-fit:cover;
}
#about .flow-small-copy{
  margin-bottom:10px;
}
#about .flow-step-copy p.flow-tel{
  font-family: "Inter", sans-serif;
  font-size:20px;
  font-weight:700;
  letter-spacing:.08em;
  margin-bottom:16px;
}
#about .flow-tel span{
  display:block;
  font-size:12px;
  font-weight:400;
  letter-spacing:.03em;
}
#about .flow-contact-btn{
  width:100%;
  max-width:220px;
  height:50px;
  background:#111;
  color:#fff;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 13px;
  letter-spacing:.08em;
  margin-top:10px;
}
#about .flow-note-box{
  margin-top:14px;
  border:1px solid #191919;
  background:#f8f8f8;
  padding:16px 18px;
}
#about .flow-note-box p{
  font-size: 12px;
  line-height:20px;
}
#about .flow-note-box strong{
  font-size: 15px;
  color:#64aadc;
  font-weight:700;
  display: block;
}
#about .flow-subtitle{
  font-size:28px;
  line-height:1.6;
  font-weight:500;
  letter-spacing:.08em;
  margin:20px 0 38px;
}
#about .flow-step--textonly .flow-step-main{
  max-width:740px;
}
@media screen and (max-width: 980px){
  #about .flow-timeline {
    padding-left:96px;
  }
  #about .flow-step-line {
    left:-54px;
  }
  #about .flow-step-dot {
    left:-60px;
  }
  #about .flow-step-grid {
    grid-template-columns:1fr;
  }
  #about .flow-note-box {
    width: 90%;
  }
  #about .flow-step-image {
    max-width:340px;
  }
}
@media screen and (max-width: 750px){
  #about .flow-container {
    margin: -17% auto 10%;
    padding-top: 27%;
    max-width: 100%;
    width: 88%;
  }
  #about .flow-heading {
    margin-bottom: 10%;
  }
  #about .flow-title {
    font-size: min(40px, 5.34vw);
    line-height: min(55px, 7.34vw);
    margin-bottom: 5%;
  }
  #about .flow-lead {
    font-size: min(25px, 3.34vw);
    line-height: min(45px, 6vw);
  }
  #about .flow-top {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 5%;
  }
  #about .flow-top-item {
    padding: 0 0 5%;
    margin-bottom: 5%;
    border-bottom:1px solid #191919;
  }
  #about .flow-top-item:not(:first-child)::before {
    display:none;
  }
  #about .flow-top-item h3 {
    font-size: min(40px, 5.34vw);
  }
  #about .flow-top-item p {
    font-size: min(22px, 2.94vw);
    line-height: min(45px, 6vw);
  }
  #about .flow-top-btn {
    max-width: none;
    width: 88% ;
    height: auto;
    font-size: min(35px, 4.67vw);
    margin: 3% auto 0;
    padding: 5% 0;
  }
  #about .flow-timeline {
    padding-left: 0;
  }
  #about .flow-step {
    padding-bottom: 12%;
  }
  #about .flow-step-line,
  #about .flow-step-dot {
    display: none;
  }
  #about .flow-step-head {
    gap: 2%;
    align-items: flex-start;
    margin-bottom: 5%;
    flex-wrap: wrap;
  }
  #about .step-no {
    font-size: min(35px, 4.67vw);
    line-height: 1.5;
  }
  #about .flow-step-head h3 {
    font-size: min(30px, 4vw);
    flex: 1;
    min-width: 0;
  }
  #about .flow-step-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  #about .flow-step-grid .flow-step-copy {
    order: 2;
  }
  #about .flow-step-grid .flow-step-image {
    order: 1;
    max-width: none;
    margin-bottom: 5%;
  }
  #about .flow-step-image img{
    width: 100%;
    aspect-ratio: auto;
  }
  #about .flow-step-copy p,
  #about .flow-step-main > p {
    font-size: min(24px, 3.2vw);
    line-height: min(40px, 5.34vw);
  }
  #about .flow-small-copy {
    margin-bottom: 3%;
  }
  #about .flow-step-copy p.flow-tel {
    font-size: min(40px, 5.34vw);
    margin-bottom: 3%;
  }
  #about .flow-step-copy p.flow-tel span {
    font-size: min(25px, 3.34vw);
  }
  #about .flow-contact-btn {
    max-width: none;
    width: 100%;
    font-size: min(35px, 4.67vw);
    padding: 11% 0;
  }
  #about .flow-note-box {
    margin-top: 7%;
    padding: 4% 3%;
    text-align: justify;
    width: 100%;
  }
  #about .flow-note-box strong {
    font-size: min(25px, 3.34vw);
    line-height: min(35px, 4.67vw);
  }
  #about .flow-note-box p {
    font-size: min(22px, 2.94vw);
    line-height: min(38px, 5.07vw);
  }
  #about .flow-step--textonly .flow-step-head {
    align-items:flex-start;
  }
}
#about .prof {
  padding-top: 5%;
  margin-top: -5%;
}
#about .prof .inner {
  width: min(900px,90%);
  margin: 120px auto 200px;
}
#about .prof .inner h2 {
  font-family: "Inter", sans-serif;
  font-size: clamp(2.5rem, 1.777rem + 1.54vw, 3.125rem);
  font-weight: 700;
  text-align: center;
	letter-spacing: 0.05em;
}
#about .prof .inner h3 {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(0.875rem, 0.658rem + 0.46vw, 1.063rem);
  text-align: center;
	letter-spacing: 0.3em;
}
#about .prof .inner .center {
  display: flex;
  justify-content: space-between;
  margin: 10% 0 4%;
}
#about .prof .inner .center .left {
  aspect-ratio: 425 / 280;
  width: min(425px, 48%);
}
#about .prof .inner .center .right dl > div {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
}
#about .prof .inner .center .right dl dt {
  font-size: clamp(0.75rem, 0.605rem + 0.31vw, 0.875rem);
  line-height: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  font-weight: 500;
  letter-spacing: 0.1rem;
}
#about .prof .inner .center .right dl dd {
  font-size: clamp(0.75rem, 0.605rem + 0.31vw, 0.875rem);
  line-height: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  letter-spacing: 0.05rem;
}
#about .prof .inner .map {
  height: 400px;
}
#about .prof .inner .map iframe {
  width: 100%;
  height: 100%;
  border: none;
}
@media screen and (max-width: 950px){
  #about .prof .inner .center .right dl dd {
    letter-spacing: 0;
  }
}
@media screen and (max-width: 750px){
  #about .prof .inner {
    margin: 15% auto 12%;
  }
  #about .prof .inner h2 {
    font-size: min(90px, 12vw);
    line-height: min(100px, 13.34vw);
  }
  #about .prof .inner h3 {
    font-size: min(27px, 3.6vw);
    margin-top: 2%;
  }
  #about .prof .inner .center {
    display: block;
  }
  #about .prof .inner .center .left {
    width: 100%;
  }
  #about .prof .inner .center .right dl {
    margin: 2% 0;
  }
  #about .prof .inner .center .right dl > div {
    grid-template-columns: 0.3fr 1fr;
  } 
  #about .prof .inner .center .right dl dt,
  #about .prof .inner .center .right dl dd {
    font-size: min(23px, 3.07vw);
    line-height: min(51px, 6.8vw);
  }
  #about .prof .inner .map {
    height: min(500px, 66.67vw);
  }
}


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

housing_series：住宅シリーズ

----------------------------------------------- */
#housing_series1 .series-block {
  padding: 50px 5% 100px;
}
#housing_series1 .series-main-image {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 5%;
}
#housing_series1 .series-main-image img {
  width: 100%;
  aspect-ratio: 1100 / 700;
  object-fit: cover;
}
#housing_series1 .series-content {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 5%;
  align-items: start;
  max-width: 1100px;
  margin: auto;
}
#housing_series1 .series-copy {
  padding-top:4px;
}
#housing_series1 .series-name {
  margin-bottom: 5%;
}
#housing_series1 .series-name .en {
  font-family: "Inter", sans-serif;
  display: block;
  font-size: clamp(1.625rem, 1.336rem + 0.62vw, 1.875rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 6px;
}
#housing_series1 .series-name .ja {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .14em;
}
#housing_series1 .series-copy .lead {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.25rem, 0.888rem + 0.77vw, 1.563rem);
  line-height: clamp(2.5rem, 1.777rem + 1.54vw, 3.125rem);
  letter-spacing: 0.2em;
  margin-bottom: 9%;
  font-weight: 400;
  font-feature-settings: "palt";
}
#housing_series1 .series-btn {
  width: 100%;
  max-width: 190px;
  height: 54px;
  border-radius: 999px;
  background: #191919;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.12em;
  transition: 0.25s ease;
}
#housing_series1 .series-btn:hover {
  opacity:.85;
}
#housing_series1 .series-sub-images {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
}
#housing_series1 .series-sub-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#housing_series1 .series-block.natural .series-name .en,
#housing_series1 .series-block.natural .series-name .ja {
  color: #99cd8f;
	letter-spacing: 2px;
}
#housing_series1 .series-block.classic .series-name .en,
#housing_series1 .series-block.classic .series-name .ja {
  color: #c28600;
	letter-spacing: 2px;
}
#housing_series1 .other-series {
}
#housing_series1 .other-title {
  font-family: "Inter", sans-serif;
  text-align: center;
  font-size: 50px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 10% 0 3%;
}
#housing_series1 .other-series .housing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 1px;
  max-width: 933px;
  margin: 0 auto 15%;
}
#housing_series1 .other-series .housing-card {
  text-decoration: none;
  color: #fff;
  display: block;
}
#housing_series1 .other-series .housing-img {
  overflow: hidden;
}
#housing_series1 .other-series .housing-img img {
  width: 100%;
  display: block;
  transition: transform .6s ease;
}
#housing_series1 .other-series .housing-card:hover .housing-img > img {
  transform: scale(1.05);
}
#housing_series1 .other-series .housing-bottom {
  background: #191919;
  display: flex;
  padding: 8% 6%;
  min-height: 220px;
  position: relative;
  justify-content: space-around;
}
#housing_series1 .other-series .housing-letter {
  font-family: "Inter", sans-serif;
  font-size: clamp(1.563rem, 0.839rem + 1.54vw, 2.188rem);
  font-weight: 200;
  letter-spacing: 0.1rem;
  line-height: 1.2;
}
#housing_series1 .other-series .housing-letter span {
  font-size: clamp(6.25rem, 2.055rem + 8.94vw, 9.875rem);
  font-weight: 700;
  line-height: 0.7;
}
#housing_series1 .other-series .housing-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#housing_series1 .other-series .housing-jp {
  font-size: clamp(0.563rem, 0.273rem + 0.62vw, 0.813rem);
  letter-spacing: 0.1em;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#housing_series1 .other-series .housing-jp span {
  font-size: 22px;
  font-weight: 100;
}
#housing_series1 .other-series .housing-jp span .bracket {
  width: 0.4em;
  height: auto;
}
#housing_series1 .other-series .housing-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  letter-spacing: 0.08em;
}
#housing_series1 .other-series .housing-list li {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.75rem, 0.027rem + 1.54vw, 1.375rem);
  font-weight: bold;
  margin-bottom: 6px;
  display: flex;
  align-items: center; 
}
#housing_series1 .other-series .housing-list li span {
  font-weight: 200;
}
#housing_series1 .other-series .housing-list li::before{
 content: "・";
 color: #fff;
 font-size: 0.6em;
 margin-right: 0.5rem;
}
#housing_series1 .other-series .green li:first-child { color: #99cd8f; }
#housing_series1 .other-series .green li:last-child { color: #c28600; }

#housing_series1 .other-series .yellow li:first-child { color: #a9987f; }
#housing_series1 .other-series .yellow li:last-child { color: #8aa0ac; }

#housing_series1 .other-series .purple li:first-child { color: #c28dbd; }
#housing_series1 .other-series .purple li:last-child { color: #7c6769; }
#housing_series1 .other-series .housing-link {
  font-size: clamp(0.563rem, 0.273rem + 0.62vw, 0.813rem);
  letter-spacing: 0.1em;
  line-height: 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
#housing_series1 .other-series .housing-link span.arrow {
  width: 12.6%;
  overflow: hidden;
  display: inline-block;
}
#housing_series1 .other-series .housing-link span.arrow img {
  display: block;
  transform: translateX(0);
}
@media screen and (max-width: 750px){
  #housing_series1 .series-block {
    padding: 5% 0;
  }
  #housing_series1 .series-main-image {
    margin: 0;
  }
  #housing_series1 .series-main-image img {
    aspect-ratio: auto;
  }
  #housing_series1 .series-content {
    grid-template-columns: 1fr;
    gap: 0;
    width: 88%;
    margin: 5% auto;
  }
  #housing_series1 .series-sub-images {
    order: 1;
  }
  #housing_series1 .series-copy{
    order: 2;
    padding-top: 5%;
  }
  #housing_series1 .series-sub-images img {
    min-height: 10%;
  }
  #housing_series1 .series-name {
    margin-bottom: 5%;
  }
  #housing_series1 .series-name .en {
    font-size: min(50px, 6.67vw);
    line-height: 1.1;
  }
  #housing_series1 .series-name .ja {
    font-size: min(25px, 3.34vw);
    letter-spacing: 0.12em;
  }
  #housing_series1 .series-copy .lead {
    font-size: min(37px, 4.94vw);
    line-height: min(75px, 10vw);
    letter-spacing: 0.08em;
    margin-bottom: 8%;
  }
  #housing_series1 .series-btn {
    max-width: none;
    width: 69%;
    font-size: min(25px, 3.34vw);
    padding: 9%;
    margin: auto;
  }
  #housing_series1 .other-title {
    font-size: min(70px, 9.34vw);
    line-height: 1.15;
    margin: 12% 0 5%;
  }
  #housing_series1 .other-series .housing-grid {
    display: block;
    width: 88%;
  }
  #housing_series1 .other-series .housing-card {
    margin-bottom: 5%;
  }
  #housing_series1 .other-series .housing-bottom {
    padding: 10% 7%;
    min-height: auto;
    justify-content: space-between;
  }
  #housing_series1 .other-series .housing-letter {
    margin-right: 0;
    font-size: clamp(2.188rem, 0.813rem + 5.87vw, 3.563rem);
    font-weight: 100;
    line-height: 1;
  }
  #housing_series1 .other-series .housing-letter span {
    font-size: clamp(9.375rem, 3.125rem + 26.67vw, 15.625rem);
  }
  #housing_series1 .other-series .housing-jp {
    font-size: clamp(0.75rem, 0.063rem + 2.93vw, 1.438rem);
    margin-bottom: 0;
  }
  #housing_series1 .other-series .housing-list li {
    font-size: clamp(1rem, -0.188rem + 5.07vw, 2.188rem);
  }
  #housing_series1 .other-series .housing-link {
    font-size: clamp(0.875rem, 0.25rem + 2.67vw, 1.5rem);
  }
}
/* -----------------------------------------------

housing_series2：住宅シリーズ2

----------------------------------------------- */
#housing_series2 .hero {
  margin-bottom:58px;
}
#housing_series2 .hero .engja_title {
  padding: 0 4%;
}
#housing_series2 .hero .series-name {
  padding: 0 4% 4%;
	text-align: center;
}
#housing_series2 .hero .series-name .en {
  font-family: "Inter", sans-serif;
  display: block;
  font-size: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 6px;
  color: #99cd8f;
}
#housing_series2 .hero .series-name .ja {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .14em;
  color: #99cd8f;
}
#housing_series2 .hero .slider {
  display: none;
}
#housing_series2 .hero .slider.slick-initialized {
  display: block;
}
#housing_series2 .hero .slider .slick-arrow {
  cursor: pointer;
}
#housing_series2 .hero .slider .slick-list {
  cursor: grab;
}
#housing_series2 .hero .slider .slick-list:active {
  cursor: grabbing;
}
#housing_series2 .hero .slider .slick-dots li * {
  display: none;
}
#housing_series2 .hero .slider_wrap .slider img {
  width: min(1000px, 90%);
  margin: auto;
  max-width: 1112px;
}
#housing_series2 .hero .slider_wrap .slider .slick-dots {
  bottom: -2.8%;
  height: 1.2%;
}
#housing_series2 .hero .slider_wrap .slider .slick-dots li {
  width: auto;
  height: 70%;
  margin: 0% 0.6%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  background-color: #c9c9c9;
  transition: 0.2s;
}
#housing_series2 .hero .slider_wrap .slider .slick-dots li.slick-active {
  background-color: #191919;
}
#housing_series2 .concept {
  text-align: center;
  margin: 10% auto;
}
#housing_series2 .concept-title {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  line-height: clamp(2.813rem, 2.089rem + 1.54vw, 3.438rem);
  letter-spacing: 0.10em;
  font-weight: 500;
  margin-bottom: 3%;
}
#housing_series2 .concept-text {
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
  line-height: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  letter-spacing: 0.08em;
}
#housing_series2 .room-section {
  width: min(1100px,90%);
  margin: 0 auto 8%;
}
#housing_series2 .room-head {
  display:grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap:52px;
  align-items:start;
  margin-bottom:26px;
}
#housing_series2 .room-copy {
  padding-top:150px;
}
#housing_series2 .room-name {
  margin-bottom:10px;
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
#housing_series2 .room-name .en {
  font-family: "Inter", sans-serif;
  font-size: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .05em;
  color: #99cd8f;
}
#housing_series2 .room-name .ja {
  font-size: clamp(0.625rem, 0.48rem + 0.31vw, 0.75rem);
  line-height: 1;
  letter-spacing: 0.14em;
  color: #99cd8f;
}
#housing_series2 .room-name .bord {
  background: #99cd8f;
  width: 1px;
  height: clamp(1rem, 0.566rem + 0.92vw, 1.375rem);
}
#housing_series2 .room-lead {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.25rem, 0.888rem + 0.77vw, 1.563rem);
  line-height: clamp(2.188rem, 1.464rem + 1.54vw, 2.813rem);
  letter-spacing: 0.05em;
}
#housing_series2 .room-main-image img {
  width:100%;
  aspect-ratio: 550 / 360;
  object-fit:cover;
}
#housing_series2 .thumb-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:4px;
}
#housing_series2 .thumb {
  position: relative;
  background: #cfcfcf;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}
#housing_series2 .thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
}
#housing_series2 .thumb .corner{
  position:absolute;
  right:0;
  bottom:0;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 30px 30px;
  border-color:transparent transparent #1b1b1b transparent;
  z-index:2;
}
#housing_series2 .thumb .plus{
  position:absolute;
  right: 1px;
  bottom: 3px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  z-index: 3;
}
#housing_series2 .other-section {
  width: min(1100px,90%);
  margin: 0 auto 8%;
}
#housing_series2 .other-title {
  font-family: "Inter", sans-serif;
  text-align: center;
  font-size: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  color: #99cd8f;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 3%;
}
#housing_series2 .other-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:4px;
}
aside .modal {
  position: fixed;
  inset: 0%;
  z-index: 11;
  display: none;
}
aside .modal .shadow {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
aside .modal .img {
  position: absolute;
  inset: 21% 0 auto;
  width: fit-content;
  max-width: 900px;
  text-align: center;
  max-height: calc(100vh - 80px);
  margin: auto;
  overflow: auto;
}
aside .modal .img img {
  max-height: 600px;
}
aside .modal .close {
  position: absolute;
  inset: 20% 0 auto;
  margin: auto;
  width: 70%;
  max-width: 1400px;
}
aside .modal .close .c_inner {
  display: block;
  width: min(50px, 3.572vw);
  height: min(50px, 3.572vw);
  margin-left: auto;
  transform: translate(10px, 0);
  cursor: pointer;
}
aside .modal .close .c_inner::before,
aside .modal .close .c_inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: min(30px, 2.145vw);
  background: #fff;
}
aside .modal .close .c_inner::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
aside .modal .close .c_inner::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
@media screen and (max-width: 1000px){
  #housing_series2 .hero .slider_wrap .slick-slide{
    width: min(1000px, 80vw);
    margin-left: 10vw;
  }
  #housing_series2 .hero .slider_wrap .slider img {
    width:100%;
    display:block;
  }
}
@media screen and (max-width: 980px){
  #housing_series2 .room-head {
    grid-template-columns:1fr;
    gap:24px;
  }
}
@media screen and (max-width: 750px){
  #housing_series2 .hero {
    margin-bottom: 10%;
  }
  #housing_series2 .hero .engja_title {
    padding: 0 6%;
  }
  #housing_series2 .hero .series-name {
    display: none;
  }
  #housing_series2 .hero .slider_wrap {
    padding: 0;
    width: 87%;
    margin: auto;
  }
  #housing_series2 .hero .slider_wrap .slider img {
    width: 100%;
  }
  #housing_series2 .concept {
    margin: 10% auto 10%;
  }
  #housing_series2 .concept-title {
    font-size: min(35px, 4.67vw);
    line-height: min(60px, 8vw);
    margin-bottom: 5%;
  }
  #housing_series2 .concept-text {
    font-size: min(20px, 2.67vw);
    line-height: min(40px, 5.34vw);
    letter-spacing: 0;
    font-feature-settings: "palt";
  }
  #housing_series2 .room-section {
    width: 87%;
    margin: 0 auto 12%;
  }
  #housing_series2 .room-head {
    display: block;
  }
  #housing_series2 .room-copy {
    margin-bottom: 8%;
  }
  #housing_series2 .room-name{ 
    gap: 10px;
    margin-bottom: 5%;
  }
  #housing_series2 .room-name .en {
    font-size: min(45px, 6vw);
  }
  #housing_series2 .room-name .ja{
    font-size: min(20px, 2.67vw);
  }
  #housing_series2 .room-name .bord {
    height: min(34px, 4.534vw);
  }
  #housing_series2 .room-lead {
    font-size: min(30px, 4vw);
    line-height: min(50px, 6.67vw);
    letter-spacing:.10em;
  }
  #housing_series2 .room-main-image {
    margin-bottom: 5%;
  }
  #housing_series2 .room-main-image img {
    aspect-ratio: auto;
  }
  #housing_series2 .thumb-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: min(16px, 2.14vw);
  }
  #housing_series2 .thumb {
    aspect-ratio: 1 / 1;
  }
  #housing_series2 .other-section {
    width: 87%;
    margin: 5% auto 20%;
  }
  #housing_series2 .other-title {
    font-size: min(45px, 6vw);
    margin-bottom: 5%;
  }
  #housing_series2 .other-grid {
    grid-template-columns:repeat(2, 1fr);
    gap: min(16px, 2.14vw);
  }
  aside .modal .img {
    inset: 25% 0 auto;
    width: 70%;
  }
}
/* -----------------------------------------------

work：施工事例一覧

----------------------------------------------- */
#work article .inner {
  width: min(1240px,90%);
  margin: 0 auto 10%;
}
#work article .works-tab {
  display: flex;
  margin-bottom: 7%;
}
#work article .works-tab li {
  width: 50%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: clamp(0.875rem, 0.658rem + 0.46vw, 1.063rem);
  background: #e8e8e8;
  color: #b1b1b1;
  position: relative;
  padding: 2% 0;
  cursor: pointer;
}
#work article .works-tab li.active {
  background: #191919;
  color: #fff;
}
#work article .works-tab li.active::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #111;
}
#work article .works-type li {
  display: none;
}
#work article .works-type li.active {
  display: block;
}
#work article .works-type .works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.625rem, -1.545rem + 4.62vw, 2.5rem);
  margin-bottom: 10%;
}
#work article .works-type .works-card {
  text-decoration: none;
  color: #191919;
  display: block;
}
#work article .works-type .works-img {
  position: relative;
  overflow: hidden;
}
#work article .works-type .works-img img {
  width: 100%;
  display: block;
  transition: 0.6s ease;
}
#work article .works-type .works-card:hover img {
  transform: scale(1.05);
}
#work article .works-type .label {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: clamp(0.625rem, 0.48rem + 0.31vw, 0.75rem);
  padding: 6px 10px;
  letter-spacing: 0.1em;
}
#work article .works-type .label span {
  font-weight: 100;
}
#work article .works-type .label.natural { background: #99cd8f; }
#work article .works-type .label.nordic { background: #8aa0ac; }
#work article .works-type .label.provence { background: #a9987f; }
#work article .works-type .label.urban { background: #7c6769; }
#work article .works-type .label.hotel { background: #c28dbd; }
#work article .works-type .label.classic { background: #c28600; }
#work article .works-type .label.other { background: #8b8dd0; }
#work article .works-type .ribbon {
  position: absolute;
  top: -15px;
  right: -45px;
  background: #111;
  color: #fff;
  padding: 30px 40px 10px;
  transform: rotate(45deg);
  font-family: "Inter", sans-serif;
  font-weight: bold;
  font-size: clamp(0.5rem, 0.211rem + 0.62vw, 0.75rem);
  letter-spacing: 0.1em;
}
#work article .works-type .works-info {
  margin-top: 20px;
}
#work article .works-type .date {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.625rem, 0.336rem + 0.62vw, 0.875rem);
  margin-bottom: 6px;
}
#work article .works-type .title {
  font-size: clamp(0.688rem, 0.398rem + 0.62vw, 0.938rem);
}
#work article .works-type .renov-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, -0.196rem + 3.08vw, 2.5rem);
  margin-bottom: 10%;
}
#work article .works-type .renov-grid .renov-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
#work article .works-type .renov-grid .renov-card .before p {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 1%;
  color: #787d82;
}
#work article .works-type .renov-grid .renov-card .after p {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 1%;
  color: #c83232;
}
#work article .works-type .page {
  display: none;
}
#work article .works-type .page.current {
  display: grid;
}
#work article .pagination {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 10%;
}
#work article .pagination a {
  font-family: "Inter", sans-serif;
  text-decoration: none;
  font-weight: 700;
  position: relative;
  font-size: 14px;
}
#work article .pagination a.current::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: #191919;
}
#work article .works-card img {
  transition: 0.4s;
}
#work article .works-card:hover img {
  transform: scale(1.05);
}
@media(max-width:750px){
  #work article .works-tab li {
    font-size: min(24px, 3.2vw);
    padding: 6% 0;
  }
  #work article .works-type .works-grid,
  #work article .works-type .page.current {
    display: block;
  }
  #work article .works-type .works-card {
    margin-bottom: 8%;
  }
  #work article .works-type .works-info {
    margin-top: 3%;
    letter-spacing: 1px;
  }
  #work article .works-type .date {
    font-size: clamp(0.875rem, 0.25rem + 2.67vw, 1.5rem);
    font-weight: bold;
  }
  #work article .works-type .title {
    font-size: clamp(0.875rem, 0.063rem + 3.47vw, 1.688rem);
  }
  #work article .works-type .renov-grid .renov-card {
    margin-bottom: 5%;
  }
  #work article .works-type .renov-grid .renov-card .before p,
  #work article .works-type .renov-grid .renov-card .after p {
    font-size: min(25px, 3.34vw);
    margin-bottom: 2%;
  }
  #work article .pagination a {
    font-size: min(24px, 3.2vw);
  }
}
/* -----------------------------------------------

work_more：施工事例一覧詳細

----------------------------------------------- */
main#work_more {
  margin: 80px 0 0;
}
#work_more .breadcrumb {
  padding: 1% 0 0 3%;
  display: flex;
  gap: 12px;
  font-size: 11px;
}
#work_more .breadcrumb span::before {
  content: "—";
  margin-right: 12px;
}
#work_more .inner {
  width: min(800px,90%);
  margin: auto;
}
#work_more .detail-head {
  margin-bottom: 1%;
	margin-top: 10%;
}
#work_more .detail-head h1 span {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  padding-right: 2%;
}
#work_more .detail-head h1 {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 2%;
	    letter-spacing: 0.05em;
}
#work_more .spec-label {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#work_more .spec-label span {
  background: #191919;
  color: #fff;
  padding: 7px 14px;
  font-size: 13px;
}
#work_more .main-photo {
  position: relative;
}
#work_more .main-photo img {
  width: 100%;
  display: block;
}
#work_more .label {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  padding: 6px 10px;
  letter-spacing: 0.1em;
}
#work_more .label span {
  font-weight: 100;
}
#work_more .label.natural {background: #99cd8f;}
#work_more .label.classic {background: #c28600;}
#work_more .label.hotel {background: #c28dbd;}
#work_more .label.nordic {background: #8aa0ac;}
#work_more .label.urban {background: #7c6769;}
#work_more .label.provence {background: #a9987f;}
#work_more .label.other {background: #8b9dd0;}

#work_more .description {
  padding: 4% 0 10%;
}
#work_more .description p {
  line-height: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
  text-align: justify;
}
#work_more .other-photo {
  padding: 10% 0 0;
  background: #eee;
}
#work_more .house-data {
  padding: 5% 0;
  background: #eee;
}
#work_more .other-photo .section-title,
#work_more .house-data .section-title {
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 5%;
  font-size: 30px;
  font-weight:700;
}
#work_more .other-photo .section-title::before,
#work_more .other-photo .section-title::after,
#work_more .house-data .section-title::before,
#work_more .house-data .section-title::after {
  content: "";
  flex: 1;
  max-width: 280px;
  height: 1px;
  background: #191919;
}
#work_more .photo-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}
#work_more .photo-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
#work_more .data-table > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  padding: 22px 0;
  border-bottom: 1px dotted #bbb;
}
#work_more .data-table dt {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-weight:700;
  font-size: 14px;
}
#work_more .data-table dd {
  font-size: 14px;
}
@media(max-width:750px){
  main#work_more {
    margin: 14% 0 0;
  }
  #work_more .breadcrumb {
    padding: 7% 0 7% 6%;
    flex-wrap: wrap;
    font-size: min(20px, 2.67vw);
  }
  #work_more .inner {
    width: 88%;
  }
  #work_more .detail-head h1 span {
    font-size: min(25px, 3.34vw);
    padding-right: 0;
  }
  #work_more .detail-head h1 {
    font-size: min(30px, 4vw);
    line-height: 1.6;
  }
  #work_more .spec-label span {
    font-size: min(20px, 2.67vw);
    padding: 1% 2%;
  }
  #work_more .label {
    font-size: min(25px, 3.34vw);
  }
  #work_more .description {
    padding: 5% 0 20%;
  }
  #work_more .description p {
    font-size: min(25px, 3.34vw);
    line-height: min(50px, 6.67vw);
  }
  #work_more .other-photo {
    padding: 14% 0 0;
  }
  #work_more .other-photo .section-title,
  #work_more .house-data .section-title {
    margin-bottom: 7%;
    font-size: min(45px, 6vw);
  }
  #work_more .photo-grid {
    grid-template-columns: repeat(2,1fr);
    gap: min(30px, 4vw);
  }
  #work_more .house-data {
    padding: 10% 0 20%;
  }
  #work_more .data-table > div {
    grid-template-columns: 0.5fr 1fr;
    gap: 2%;
  }
  #work_more .data-table dt,
  #work_more .data-table dd {
    font-size: min(25px, 3.34vw);
    line-height: min(45px, 6vw);
  }
}

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

grade：グレード・スペック

----------------------------------------------- */
#grade .side-buttons {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: none;
}
#grade .side-buttons .side-buttons-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
#grade .side-buttons a.side-btn {
  font-family: serif;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: "vert";
  padding: 0 13.4px;
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
  letter-spacing: .1em;
  line-height: 1.6;
  color: #fff;
  text-decoration: none;
  height: 160px;
}
#grade .side-buttons .advance {
  background: #8aa0ac;
}
#grade .side-buttons .mid {
  background: #a0a4a7;
}
#grade .side-buttons .premium {
  background: #7c6769;
}
#grade .typemenu {
  width: min(1240px,90%);
  margin: auto;
}
#grade .typemenu .engja_title span.slash {
  font-family: "Inter", sans-serif;
  font-size: clamp(2.25rem, 1.237rem + 2.16vw, 3.125rem);
  font-weight: 700;
}
#grade .typemenu .tab_menu {
  display: flex;
  margin-bottom: 4%;
}
#grade .typemenu .tab_menu a {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2% 0;
}
#grade .typemenu .tab_menu a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  width: 1px;
  height: 60%;
  background: #191919;
}
#grade .typemenu .tab_menu a h3 {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.07rem;
}
#grade .typemenu .tab_menu a p {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: 12px;
  margin-top: 1%;
}
#grade .typemenu .tab_menu a span {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: 1%;
  border-right: 1px solid #191919;
  border-bottom: 1px solid #191919;
  transform: rotate(45deg);
}
#grade .typemenu .tab_menu a:nth-of-type(1) {
  color: #8aa0ac;
}
#grade .typemenu .tab_menu a:nth-of-type(2) {
  color: #a0a4a7;
}
#grade .typemenu .tab_menu a:nth-of-type(3) {
  color: #7c6769;
}
#grade .typecont {
  width: min(1240px,90%);
  margin: auto;
}
#grade .typecont .grade_head {
  text-align: center;
  margin: 3% 0 5%;
}
#grade .typecont .grade_head h1 {
  font-family: "Inter", sans-serif;
  font-size: clamp(2.75rem, 2.316rem + 0.92vw, 3.125rem);
  color: #8aa0ac;
  font-weight: 700;
}
#grade .typecont .grade_head .sub {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  display: block;
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
}
#grade .typecont#advance .grade_head h1,
#grade .typecont#advance .grade_head .sub {
  color: #8aa0ac;
}
#grade .typecont#mid .grade_head h1,
#grade .typecont#mid .grade_head .sub {
  color: #a0a4a7;
}
#grade .typecont#premium .grade_head h1,
#grade .typecont#premium .grade_head .sub {
  color: #7c6769;
}
#grade .typecont .performance {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  margin-top: 4%;
  font-size: clamp(1.25rem, 0.888rem + 0.77vw, 1.563rem);
}
#grade .typecont .price {
  margin-top: 5%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap;
}
#grade .typecont .ua {
  font-family: "Inter", sans-serif;
  font-size: clamp(1.375rem, 0.796rem + 1.23vw, 1.875rem);
  font-weight: 700;
}
#grade .typecont .slash {
  font-size: clamp(1.375rem, 0.796rem + 1.23vw, 1.875rem);
}
#grade .typecont .money {
  font-size: clamp(1.375rem, 0.796rem + 1.23vw, 1.875rem);
  font-weight:700;
}
#grade .typecont .money strong {
  font-family: "Inter", sans-serif;
  font-size: clamp(3.125rem, 1.679rem + 3.08vw, 4.375rem);
  line-height: 0;
  font-weight: 700;
}
#grade .typecont .note {
  width: min(500px, 90%);
  text-align: left;
  margin: 2% auto 0;
  line-height: clamp(0.75rem, 0.244rem + 1.08vw, 1.188rem);
  font-size: clamp(0.625rem, 0.48rem + 0.31vw, 0.75rem);
}
#grade .typecont .grade_body {
  margin: 6% 0 12%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5%;
}
#grade .typecont .text {
  flex:1;
}
#grade .typecont .text h2 {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.25rem, 0.888rem + 0.77vw, 1.563rem);
  line-height: clamp(1.875rem, 1.152rem + 1.54vw, 2.5rem);
	letter-spacing: 3px;
}
#grade .typecont .text p {
  margin-top: 5%;
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
  line-height: clamp(1.25rem, 0.744rem + 1.08vw, 1.688rem);
  text-align: justify;
}
#grade .typecont .text span {
  font-size: clamp(0.625rem, 0.48rem + 0.31vw, 0.75rem);
  line-height: clamp(1rem, 0.711rem + 0.62vw, 1.25rem);
  margin-top: 2%;
  display: block;
}
#grade .typecont .recommend {
  width: 47%;
  background: #f3f3f3;
  padding: 3%;
}
#grade .typecont .recommend h3 {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.25rem, 0.888rem + 0.77vw, 1.563rem);
  line-height: clamp(1.875rem, 1.152rem + 1.54vw, 2.5rem);
  margin-bottom: 5%;
  text-align: center;
}
#grade .typecont .recommend ul {
  list-style:none;
}
#grade .typecont .recommend li {
  position: relative;
  padding-left: 28px;
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
  line-height: clamp(1.25rem, 0.744rem + 1.08vw, 1.688rem);
}
#grade .typecont .recommend li+li{
  margin-top:10px;
}
#grade .typecont .recommend li::before{
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 17px;
  height: 17px;
  background: url("../image/grade/check.png") center center/contain no-repeat;
}

@media (max-width:750px){
  #grade aside {
    display: none;
  }
  #grade .typemenu .tab_menu a h3 {
    font-size: min(30px, 4vw);
  }
  #grade .typemenu .tab_menu a p {
    font-size: min(18px, 2.4vw);
  }
  #grade .typecont .grade_head h1 {
    font-size: min(60px, 8vw);
  }
  #grade .typecont .grade_head .sub {
    font-size: min(24px, 3.2vw);
  }
  #grade .typecont .performance {
    margin-top: 3%;
    font-size: min(25px, 3.34vw);
  }
  #grade .typecont .price {
    margin-top: 9%;
    gap: 1%;
  }
  #grade .typecont .ua {
    font-size: min(40px, 5.34vw);
  }
  #grade .typecont .slash {
    font-size: min(40px, 5.34vw);
  }
  #grade .typecont .money {
    font-size: min(40px, 5.34vw);
  }
  #grade .typecont .money strong {
    font-size: min(100px, 13.34vw);
  }
  #grade .typecont .note {
    width: 100%;
    text-align: justify;
    margin: 3% auto 0;
    font-size: min(20px, 2.667vw);
    line-height: min(30px, 4vw);
  }
  #grade .typecont .grade_body {
    display:block;
    margin: 8% 0 16%;
  }
  #grade .typecont .text h2 {
    font-size: min(30px, 4vw);
    line-height: min(50px, 6.676vw);
  }
  #grade .typecont .text p {
    margin-top: 3%;
    font-size: min(20px, 2.667vw);
    line-height: min(35px, 4.667vw);
  }
  #grade .typecont .text span {
    font-size: min(20px, 2.667vw);
    line-height: min(30px, 4vw);
  }
  #grade .typecont .recommend {
    width: 100%;
    padding: 4% 6%;
    margin: 6% 0;
  }
  #grade .typecont .recommend h3 {
    font-size: min(30px, 4vw);
    line-height: min(40px, 5.34vw);
    margin-bottom: 5%;
  }
  #grade .typecont .recommend li {
    font-size: min(20px, 2.667vw);
    line-height: min(43px, 5.735vw);
  }
  #grade .typecont .recommend li::before {
    top: 25%;
    width: min(20px, 2.667vw);
    height: min(20px, 2.667vw);
  }
}
#grade .spec table {
  border-collapse:collapse;
  width:100%;
}
#grade .spec th,
#grade .spec td {
  font-weight:400;
}
#grade .spec {
  width: min(1240px,90%);
  margin: 10% auto;
}
#grade .spec h2 {
  text-align: center;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 5%;
  letter-spacing: 0.08em;
}
#grade .spec .table-wrap{
  width:100%;
  margin-bottom:80px;
}
#grade .spec .spec-table{
  table-layout:fixed;
  border-collapse:collapse;
}
#grade .spec .spec-table tr{
  border-bottom:1px solid #777;
}
#grade .spec .spec-table th,
#grade .spec .spec-table td{
  padding:16px 14px;
  text-align:center;
  font-size:1.6rem;
  vertical-align:middle;
}
#grade .spec .spec-table th.item{
  width:22%;
  text-align:left;
  padding-left:18px;
  border-right:1px dotted #bdbdbd;
}
#grade .spec .spec-table tbody>tr>th:first-child{
  width:22%;
}
#grade .spec .spec-table td{
  width:26%;
  border-right:1px dotted #c8c8c8;
}
#grade .spec .spec-table td:last-child{

  border-right:none;
}
#grade .spec .spec-table thead th {
  color: #fff;
  font-size: 15px;
  padding: 1% 0;
  border-bottom: 1px solid #666;
  border-right: 2px solid #fff;
}
#grade .spec .spec-table thead th:nth-of-type(1),
#grade .spec .spec-table thead th:nth-of-type(2) {
  border-bottom: 1px solid #666;
  border-right: none;
}
#grade .spec .spec-table thead th:last-child {
  border-right: none;
}
#grade .spec .plan {
  color:#fff;
  letter-spacing:.05em;
}
#grade .spec .premium {
  background:#7a696c;
}
#grade .spec .advance {
  background:#8da5b5;
}
#grade .spec .mid {
  background:#bebfc4;
}
#grade .spec .group {
  border-right: 1px dotted #bdbdbd;
  writing-mode: vertical-rl;
  text-align: center;
  padding: 0;
}
#grade .spec .group-after {
  border-right: 1px dotted #bdbdbd;
  padding: 14px !important;
}
#grade .spec .group-after .dot {
  display:inline-block;
  transform: rotate(90deg);
}
#grade .spec .group-start{
  border-top:1px solid #777;
}
#grade .spec .spec-table td{
  position:relative;
}
#grade .spec .spec-table td:has(> span){
  padding:18px 10px;
}
#grade .spec .circle{
  font-size:2rem;
  line-height:1;
}
#grade .spec .circle.black{
  color:#222;
}
#grade .spec .circle.white{
  color:#888;
}
#grade .spec .spec-table td{
  font-feature-settings:"palt";
}
#grade .spec .legend{
  display:flex;
  justify-content:flex-end;
  gap:28px;
  margin-top:20px;
  font-size: 12px;
}
#grade .spec .table-wrap + .table-wrap{
  margin-top:90px;
}
#grade .spec .spec-table tbody tr:first-child{
  border-top:1px solid #777;
}
#grade .spec .spec-table tbody tr:last-child{
  border-bottom:1px solid #777;
}
#grade .spec .spec-table th{
  font-size: 14px;
}
#grade .spec .spec-table td{
  font-size: 14px;
}
#grade .spec .spec-table tr{
  min-height:56px;
}
#grade .spec .spec-table td,
#grade .spec .spec-table th{
  height:35px;
}
#grade .spec .spec-table td,
#grade .spec .spec-table th{
  word-break:keep-all;
  overflow-wrap:break-word;
}
/*#grade .spec .spec-table br{
  display:block;
}*/

@media (max-width:1200px) {
  #grade .spec {
    width: 95%;
  }
  #grade .spec .spec-table th,
  #grade .spec .spec-table td{
    padding:14px 0;
  }
}
@media (max-width:750px) {
  #grade .spec {
    width: 94%;
    margin: 60px auto;
  }
  #grade .spec h2 {
    font-size: min(35px, 4.67vw);
  }
  #grade .spec .spec-table th,
  #grade .spec .spec-table td{
    padding: 0;
  height: min(62px, 8.27vw);
  }
  #grade .spec .spec-table thead th,
  #grade .spec .spec-table th,
  #grade .spec .spec-table td {
    font-size: min(16px, 2.135vw);
    line-height: min(20px, 2.667vw);
  }
  #grade .spec .spec-table th.item {
    padding-left: 1.4%;
  }
  #grade .spec .spec-table .lesp {
    letter-spacing: -0.1rem;
  }
  #grade .spec .legend {
    font-size: min(16px, 2.135vw);
  }
}
#grade .spec .spec-table tbody tr:hover{
  background:#fafafa;
  transition:.2s;
}
#grade .spec .spec-table td{
  letter-spacing:.02em;
}
#grade .spec .spec-table td:contains("●"),
#grade .spec .spec-table td:contains("○"){
  font-size: 1.8rem;
}

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

select：インテリアセレクト

----------------------------------------------- */
#select .sub_intro,
#select .wall_lineup,
#select .wall_material,
#select .ceiling,
#select .floor,
#select .spec_intro,
#select .spec_box,
#select .security {
  width: min(1240px, 90%);
  margin: auto;
}
#select .section_title {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.5rem, 1.066rem + 0.92vw, 1.5rem);
  font-weight: 500;
  padding-left: 1rem;
  border-left: 3px solid #191919;
  margin-bottom: 5%;
}
#select .wall_lineup {
  margin-bottom: 90px;
}
#select .wall_lineup .grade_list{
  display: flex;
  gap: clamp(0.625rem, -0.098rem + 1.54vw, 1.25rem);
}
#select .wall_lineup .grade{
  flex: 1;
  color: #fff;
  text-align: center;
  padding: 3.2% 0;
}
#select .wall_lineup .grade h3{
  font-family: "Inter", sans-serif;
  font-size: clamp(1rem, 0.711rem + 0.62vw, 1.25rem) ;
  letter-spacing: 0.15em;
  margin-bottom: 1%;
}
#select .wall_lineup .grade span{
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  display: block;
  font-size: clamp(0.563rem, 0.273rem + 0.62vw, 0.813rem);
  margin-bottom: 7%;
}
#select .wall_lineup .grade .catch{
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(0.813rem, 0.523rem + 0.62vw, 1.063rem);
  margin-bottom: 4%;
}
#select .wall_lineup .grade .text{
  font-size: clamp(0.563rem, 0.201rem + 0.77vw, 0.875rem);
}
#select .wall_lineup .grade.premium{
  background: #7d6c71;
}
#select .wall_lineup .grade.advance{
  background: #9dadbb;
}
#select .wall_lineup .grade.mid{
  background: #8d9093;
}
#select .wall_material {
  background: #f6f6f6;
  padding: 0 clamp(2.5rem, 0.33rem + 4.62vw, 4.375rem);
}
#select .wall_material .material{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(1.875rem, -0.295rem + 4.62vw, 3.75rem);
  padding: 7% 0;
}
#select .wall_material .material + .material{
  border-top: 1px dashed #bcbcbc;
}
#select .wall_material .material_text{
  flex: 1;
}
#select .wall_material .material_text h3{
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.125rem, 0.619rem + 1.08vw, 1.563rem);
  line-height: clamp(1.875rem, 1.152rem + 1.54vw, 2.5rem);
  margin-bottom: 5%;
  font-feature-settings: "palt";
	letter-spacing: 0.1em;
}
#select .wall_material .material_text p {
  font-size: clamp(0.625rem, 0.263rem + 0.77vw, 0.938rem);
  line-height: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  text-align: justify;
}
#select .wall_material .material_img{
  width: 50%;
  flex-shrink: 0;
}
#select .wall_material .material_img img{
  width: 100%;
  display: block;
}
@media screen and (max-width:750px){
  #select .section_title {
    font-size: min(45px, 6vw);
    margin-bottom: 6%;
  }
  #select .wall_lineup {
    margin-bottom: 10%;
    padding: 0 6.5%;
    width: 100%;
  }
  #select .wall_lineup .grade_list {
    display: block;
  }
  #select .wall_lineup .grade {
    padding: 7.2% 0;
  }
  #select .wall_lineup .grade + .grade {
    margin-top: 4%;
  }
  #select .wall_lineup .grade h3 {
    font-size: min(35px, 4.67vw);
  }
  #select .wall_lineup .grade span {
    font-size: min(20px, 2.67vw);
    margin-bottom: 5%;
  }
  #select .wall_lineup .grade .catch {
    font-size: min(26px, 4.7vw);
    margin-bottom: 4%;
  }
  #select .wall_lineup .grade .text {
    font-size: min(19px, 3vw);
  }
  #select .wall_material {
    padding: 0 6.5%;
    width: 100%;
  }
  #select .wall_material .material {
    display: flex;
    flex-direction: column-reverse;
    gap: min(40px, 5.34vw);
    padding: 8% 0;
  }
  #select .wall_material .material_text {
    width: 100%;
  }
  #select .wall_material .material_text h3 {
font-size: min(30px, 6vw);
        line-height: min(50px, 8vw);
    margin-bottom: 3%;
  }
  #select .wall_material .material_text p {
          font-size: min(20px, 3vw);
        line-height: min(35px, 5.5vw);
  }
  #select .wall_material .material_img{
    width: 100%;
  }
}
#select .ceiling {
  margin-top: 120px;
}
#select .ceiling .ceiling_wrap{
  display: flex;
  justify-content: space-between;
  gap: clamp(1.875rem, -0.295rem + 4.62vw, 3.75rem);
}
#select .ceiling .ceiling_group{
  flex: 1;
}
#select .ceiling .ceiling_group h3{
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: clamp(0.813rem, 0.523rem + 0.62vw, 1.063rem);
  padding: 2.6% 0;
  margin-bottom: 10px;
}
#select .ceiling .ceiling_group h3.gray{
  background: #80868c;
}
#select .ceiling .ceiling_group h3.premium{
  background: #7d6c71;
}
#select .ceiling .ceiling_grid{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}
#select .ceiling .ceiling_item{
  background: #fff;
}
#select .ceiling .ceiling_item img{
  width: 100%;
/*  aspect-ratio: 1 / 1;*/
  object-fit: cover;
  display: block;
}
#select .ceiling .ceiling_item p {
  background: #191919;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(0.813rem, 0.523rem + 0.62vw, 1.063rem);
  padding: 5.1% 0;
}
#select .floor {
  margin-top: 120px;
}
#select .floor .floor_grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(0.625rem, -0.098rem + 1.54vw, 1.25rem);
}
#select .floor .floor_item{
  background: #fff;
}
#select .floor .floor_item img{
  width: 100%;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  display: block;
}
#select .floor .floor_item p{
  background: #191919;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: clamp(0.813rem, 0.523rem + 0.62vw, 1.063rem);
  padding: 5.1% 0;
}
@media screen and (max-width:750px){
  #select .ceiling,
  #select .floor {
    padding: 0 6.5%;
    width: 100%;
  }
  #select .ceiling {
    margin-top: 10%;
  }
  #select .ceiling .ceiling_wrap {
    display: block;
  }
  #select .ceiling .ceiling_group + .ceiling_group {
    margin-top: 10%;
  }
  #select .ceiling .ceiling_group h3 {
    font-size: min(25px, 4.5vw);
    padding: 3% 0;
    margin-bottom: 2%;
  }
  #select .ceiling .ceiling_grid {
    gap: min(10px, 1.34vw);
  }
  #select .ceiling .ceiling_item p {
    font-size: min(25px, 3.34vw);
    padding: 3.2% 0;
  }
  #select .floor {
    margin-top: 20%;
  }
  #select .floor .floor_grid{
    grid-template-columns: repeat(2,1fr);
    gap: min(10px, 1.34vw);
  }
  #select .floor .floor_item p{
    padding: 3.2% 0;
    font-size: min(25px, 3.34vw);
  }
}

#select .spec_intro {
  margin: 40px auto 100px;
  padding-top: 120px;
}
#select .spec_intro .block_center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(1.875rem, 0.429rem + 3.08vw, 3.125rem);
}
#select .spec_intro .intro_text{
  flex:1;
}
#select .spec_intro .lead_sub{
  font-size: clamp(0.875rem, 0.441rem + 0.92vw, 1.25rem);
  color: #7c6769;
  margin-bottom: 5%;
}
#select .spec_intro .intro_text h2{
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.125rem, 0.619rem + 1.08vw, 1.563rem);
  line-height: clamp(2.25rem, 1.237rem + 2.16vw, 3.125rem);
  margin-bottom: 5%;
}
#select .spec_intro .intro_text .text{
  font-size: clamp(0.625rem, 0.263rem + 0.77vw, 0.938rem);
  line-height: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  text-align: justify;
}
#select .spec_intro .intro_img{
  width:52%;
  flex-shrink:0;
}
#select .spec_intro .intro_img img{
  width:100%;
  display:block;
}
#select .spec_box {
  background:#f6f6f6;
  padding: 0 clamp(2.5rem, 0.33rem + 4.62vw, 4.375rem);
  margin-bottom:70px;
}
#select .spec_box :last-child{
  margin-bottom:0;
}
#select .spec_box .spec_main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(1.25rem, -0.92rem + 4.62vw, 3.125rem);
  padding: 7% 0;
}
#select .spec_box .spec_main.reverse{
  flex-direction:row-reverse;
}
#select .spec_box .spec_main + .spec_main {
  border-top: 1px dashed #bcbcbc;
}
#select .spec_box .main_img{
  width:48%;
  flex-shrink:0;
}
#select .spec_box .main_img img{
  width:100%;
  display:block;
}
#select .spec_box .main_text{
  flex:1;
}
#select .spec_box .main_text h2{
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, -0.223rem + 1.54vw, 1.125rem);
  margin-bottom: 8%;
  font-size: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  font-weight: 500;
}
#select .spec_box .main_text h2 span{
  font-family: "Inter", sans-serif;
  font-size: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  font-weight: 700;
  letter-spacing: 0.3rem;
}
#select .spec_box .main_text p{
  font-size: clamp(0.625rem, 0.263rem + 0.77vw, 0.938rem);
  line-height: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  text-align: justify;
}
@media screen and (max-width:750px){
  #select .spec_intro,
  #select .spec_box {
    padding: 0 6.5%;
    width: 100%;
  }
  #select .spec_intro {
    margin: 7% auto 15%;
    padding: 20% 6.5% 0;
  }
  #select .spec_intro .engja_title {
    padding: 0;
  }
  #select .spec_intro .block_center {
    display: flex;
    flex-direction: column-reverse;
    gap: min(40px, 5.34vw);
  }
  #select .spec_intro .intro_img {
    width:100%;
  }
  #select .spec_intro .lead_sub {
    font-size: min(24px, 3.2vw);
    margin-bottom: 4%;
  }
  #select .spec_intro .intro_text h2 {
            font-size: min(35px, 6vw);
        line-height: min(55px, 8vw);
    margin-bottom: 4%;
  }
  #select .spec_intro .intro_text .text {
            font-size: min(20px, 3vw);
        line-height: min(35px, 5.5vw);
  }
  #select .spec_box {
    margin-bottom: 10%;
    padding: 6% 6.5% 10%;
  }
  #select .spec_box .spec_main,
  #select .spec_box .spec_main.reverse {
    display: block;
  }
  #select .spec_box .main_img {
    width: 100%;
    margin-bottom: 5%;
  }
  #select .spec_box .main_text h2 {
    gap: 2%;
    margin-bottom: 4%;
    font-size: min(40px, 5.34vw);
  }
  #select .spec_box .main_text h2 span {
    font-size: min(40px, 5.34vw);
  }
  #select .spec_box .main_text p {
           font-size: min(20px, 3vw);
        line-height: min(35px, 5.5vw);
  }
}

#select .security {
  padding: 80px 0 200px;
}
#select .security .engja_title {
  margin-bottom: 4%;
}
#select .security .security_grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(0.625rem, -0.821rem + 3.08vw, 1.875rem);
}
#select .security .security_item figure{
  margin-bottom:20px;
}
#select .security .security_item img{
  width:100%;
  display:block;
}
#select .security .security_item h3{
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(0.875rem, 0.441rem + 0.92vw, 1.25rem);
  font-weight: 500;
  line-height: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  margin-bottom: 3%;
}
#select .security .security_item .sub{
  margin: -1% 0 3%;
      font-size: clamp(0.688rem, 0.326rem + 0.77vw, 0.8rem);
    font-weight: 500;
}
#select .security .security_item .sub span {
  color: #7a5d79;
}
#select .security .security_item p{
  font-size: clamp(0.625rem, 0.48rem + 0.31vw, 0.75rem);
  line-height: clamp(0.875rem, 0.441rem + 0.92vw, 1.25rem);
  text-align: justify;
}
@media screen and (min-width:1117px){
  #select .security .security_item {
    display: flex;
    flex-direction: column;
  }
  #select .security .security_item p {
    flex: 1;
  }
}
@media screen and (max-width:750px){
  #select .security {
    padding: 0 6.5%;
    width: 100%;
  }
  #select .security .security_grid {
    grid-template-columns:1fr;
    gap: 0;
    margin-bottom: 20%;
  }
  #select .security .security_grid .security_item {
    margin-bottom: 15%;
  }
  #select .security .security_item figure {
    margin-bottom: 3%;
  }
  #select .security .security_item h3 {
    font-size: min(35px, 4.67vw);
    line-height: min(55px, 7.34vw);
    margin-bottom: 2%;
  }
  #select .security .security_item .sub {
    font-size: min(24px, 3.2vw);
    margin-bottom: 2%;
  }
  #select .security .security_item p {
    font-size: min(20px, 3vw);
    line-height: min(35px, 5.5vw);
  }
}

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

contact：お問い合わせ

----------------------------------------------- */
main#contact .engja_title {
  padding: 0 0 0 8%;
  margin-bottom: 5%;
}
main#contact .inner {
  width: min(1000px,90%);
  margin: 0 auto 10%;
}
#contact .lead{
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 4%;
	text-align: justify;
}
#contact .contact_tab {
  display: flex;
  margin-bottom: 80px;
}
#contact .contact_tab li {
  width: 50%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #e3e3e3;
  color: #999;
  font-size: clamp(0.875rem, 0.658rem + 0.46vw, 1.063rem);
  position: relative;
  cursor: pointer;
  padding: 4% 0;
}
#contact .contact_tab li.active {
  background: #191919;
  color: #fff;
}
#contact .contact_tab li.active::after {
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #111;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
#contact .contact_type li {
  display: none;
}
#contact .contact_type li.active {
  display: block;
}
#contact .contact_tel {
  text-align: center;
  margin-bottom: 80px;
}
#contact .contact_tel h2,
#contact .contact_mail h2 {
  width: 22%;
  max-width: 220px;
  border: 1px solid #191919;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 30px;
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1rem, 0.711rem + 0.62vw, 1.25rem);
  padding: 1.4% 0;
}
#contact .tel {
  font-family: "Inter", sans-serif;
  display: block;
  text-decoration: none;
  color: #191919;
  font-size: clamp(2.5rem, 1.777rem + 1.54vw, 3.125rem);
  font-weight: 700;
  pointer-events: none;
	letter-spacing: 0.05em;
}
#contact .contact_tel p {
  margin-top: 15px;
  font-size: 13px;
}
#contact .contact_mail {
  text-align: center;
  margin-bottom: 60px;
}
#contact .mail_text {
  font-size: clamp(0.875rem, 0.658rem + 0.46vw, 1.063rem);
}
#contact .attention {
  margin-top: 3%;
  color: #c83232;
  font-size: 13px;
  letter-spacing: 0.08rem;
  text-decoration: underline;
  text-underline-offset: 7px;
}
#contact .required {
  margin-top: 3%;
  font-size: 13px;
}
#contact .required span {
  color: #c83232;
}
#contact .form_list {
  max-width: 780px;
  margin: auto;
}
#contact .form_row {
  margin-bottom: 6%;
}
#contact .form_row dt {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(0.875rem, 0.658rem + 0.46vw, 1.063rem);
  font-weight: 700;
  margin-bottom: 15px;
}
#contact .form_row dt span {
  color: #c83232;
}
#contact input[type=text],
#contact input[type=tel] {
  width: 100%;
  height: 60px;
  border: none;
  background: #ebebeb;
  padding: 0 20px;
}
#contact textarea {
  width: 100%;
  height: 300px;
  border: none;
  background: #ebebeb;
  resize: none;
  padding: 20px;
}
#contact .checkbox_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 25px 40px;
}
#contact .checkbox_wrap label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(0.813rem, 0.668rem + 0.31vw, 0.938rem);
}
#contact .checkbox_wrap input {
  width: 18px;
  height: 18px;
}
#contact .honeypot {
    display:none;
}
#contact .privacy {
  text-align: center;
  margin-top: 10%;
}
#contact .privacy p {
  font-size: clamp(0.813rem, 0.668rem + 0.31vw, 0.938rem);
  line-height: clamp(1.875rem, 1.513rem + 0.77vw, 2.188rem);
}
#contact .privacy a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
#contact .agree {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 5%;
  font-size: clamp(0.813rem, 0.668rem + 0.31vw, 0.938rem);
}
#contact .submit_wrap {
  text-align: center;
  margin-top: 60px;
}
#contact .submit_wrap button {
  width: 240px;
  padding: 3% 0;
  border: none;
  background: #191919;
  color: #fff;
  cursor: pointer;
  font-size: clamp(0.875rem, 0.658rem + 0.46vw, 1.063rem);
}
@media(max-width: 750px){
  #contact .lead {
    font-size: min(24px, 3.5vw);
    line-height: min(45px, 6.2vw);
    margin-bottom: 7%;
  }
  #contact .contact_tab li {
    font-size: min(24px, 3.2vw);
    height: auto;
    padding: 6% 0;
  }
  #contact .contact_tel {
    margin-bottom: 15%;
  }
  #contact .contact_tel h2,
  #contact .contact_mail h2 {
    width: 45%;
    max-width: 300px;
    margin: 0 auto 4%;
    font-size: min(30px, 4vw);
    padding: 2.3% 0;
  }
  #contact .tel {
    font-size: min(60px, 8vw);
    pointer-events: visible;
  }
  #contact .contact_tel p {
    margin-top: 3%;
    font-size: min(20px, 2.67vw);
  }
  #contact .mail_text {
    font-size: min(25px, 3.34vw);
    line-height: min(45px, 6vw);
  }
  #contact .attention {
    font-size: min(20px, 2.67vw);
    line-height: min(35px, 4.67vw);
    margin: 6% auto 9%;
    text-underline-offset: 0.2rem;
  }
  #contact .required {
    font-size: min(20px, 2.67vw);
  }
  #contact .form_row dt {
    font-size: min(30px, 4vw);
  }
  #contact .checkbox_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  #contact .checkbox_wrap label {
    font-size: min(25px, 3.34vw);
    line-height: min(45px, 6vw);
  }
  #contact .privacy p {
    font-size: min(20px, 2.67vw);
    line-height: min(35px, 4.67vw);
    text-align: left;
    letter-spacing: 0.05rem;
  }
  #contact .agree {
    font-size: min(25px, 3.34vw);
  }
  #contact .submit_wrap button {
    font-size: min(27px, 3.6vw);
    padding: 5% 0;
  }
}
main#thanks {
  padding: 3% 0;
}
main#thanks .engja_title {
  padding: 0 0 0 8%;
  margin-bottom: 5%;
}
#thanks .inner {
  margin: 10% auto;
}
#thanks .inner h1 {
  text-align: center;
  font-size: 20px;
  line-height: 35px;
  margin: 12% auto 1%;
}
#thanks .inner p {
  text-align: center;
  font-size: 15px;
  margin-bottom: 26%;
}
@media(max-width: 750px){
  main#thanks .engja_title {
    padding: 0 0 0 5%;
  }
  #thanks .inner {
    width: 90%;
  }
  #thanks .inner h1 {
    font-size: min(30px, 4vw);
    line-height: min(55px, 7.34vw);
    margin: 12% auto 2%;
  }
  #thanks .inner p {
    font-size: min(20px, 2.67vw);
    line-height: min(35px, 4.67vw);
    margin-bottom: 33%;
  }
}

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

privacypolicy：プライバシーポリシー

----------------------------------------------- */
#privacypolicy .policy {
  width: min(1100px, 90%);
  margin: auto;
  padding: 50px 0;
}
#privacypolicy .policy .heading {
  text-align: center;
  margin-bottom: 12%;
}
#privacypolicy .policy .heading h1 {
  font-family: "Inter", sans-serif;
  font-size: clamp(2.875rem, 1.862rem + 2.16vw, 3.75rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}
#privacypolicy .policy .heading p {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  margin-top: 2%;
  font-size: clamp(0.875rem, 0.586rem + 0.62vw, 1.125rem);
}
#privacypolicy .policy .section {
  margin-bottom: 8%;
}
#privacypolicy .policy .section h2 {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(1.5rem, 1.066rem + 0.92vw, 1.875rem);
  font-weight: 500;
  margin-bottom: 2%;
  line-height: 1.3;
}
#privacypolicy .policy .section p,
#privacypolicy .policy .section li {
  font-size: clamp(0.75rem, 0.533rem + 0.46vw, 0.938rem);
  line-height: 1.6;
  text-align: justify;
}
#privacypolicy .policy .section ul {
  list-style: none;
  margin-top: 1%;
}
#privacypolicy .policy .section li {
  font-weight: 500;
}
#privacypolicy .policy p a.tel {
  pointer-events: none;
}

@media (max-width:750px){
  #privacypolicy .policy {
    padding: 12% 0;
    width: 88%;
  }
  #privacypolicy .policy .heading {
    margin-bottom: 14%;
  }
  #privacypolicy .policy .heading h1 {
    font-size: min(60px, 8vw);
  }
  #privacypolicy .policy .heading p {
    font-size: min(24px, 3.2vw);
    margin-top: 2%;
  }
  #privacypolicy .policy .section {
    margin-bottom: 10%;
  }
  #privacypolicy .policy .section h2 {
    font-size: min(36px, 4.8vw);
    margin-bottom: 1%;
  }
  #privacypolicy .policy .section p,
  #privacypolicy .policy .section li {
    font-size: min(18px, 3vw);
    line-height: 2;
  }
  #privacypolicy .policy p a.tel {
    pointer-events: visible;
  }
}

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

faq：よくあるご質問

----------------------------------------------- */
#faq .inner {
  width: min(90%, 800px);
  margin: 0 auto 140px;
  padding: 50px 0;
}
#faq .sec-title {
  text-align: center;
}
#faq .sec-title h2 {
  font-family: "Inter", sans-serif;
  font-size: clamp(2.875rem, 1.862rem + 2.16vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.7rem;
}
#faq .sub-title {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(0.875rem, 0.658rem + 0.46vw, 1.063rem);
  margin-top: clamp(0.625rem, -0.098rem + 1.54vw, 1.25rem);
}
#faq .lead {
  font-size: clamp(0.625rem, 0.263rem + 0.77vw, 0.938rem);
  line-height: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  margin-top: clamp(1.875rem, -0.295rem + 4.62vw, 3.75rem);
}
#faq .faq-group {
  margin-top: clamp(3.75rem, 2.304rem + 3.08vw, 5rem);
}
#faq .group-title {
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  padding: 1.7% 3%;
  background: #191919;
  color: #fff;
  font-size: clamp(1rem, 0.711rem + 0.62vw, 1.25rem);
}
#faq .faq-list dt,
#faq .faq-list dd {
  margin: 0;
}
#faq .faq-list .faq-item {
  border-bottom:1px solid #ddd;
}
#faq .faq-list .faq-item.active{
  border-bottom:none;
}
#faq .faq-question {
  width: 100%;
  padding: 3% 0;
  display: flex;
  align-items: center;
  gap: clamp(0.625rem, 0.191rem + 0.92vw, 1rem);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: 0.3s;
}
#faq .faq-question .q {
  font-family: "Inter", sans-serif;
  flex-shrink: 0;
  font-size: clamp(0.875rem, 0.586rem + 0.62vw, 1.125rem);
  font-weight: 600;
  line-height: 1;
}
#faq .faq-question .question {
  flex: 1;
  font-size: clamp(0.625rem, 0.263rem + 0.77vw, 0.938rem);
  line-height: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  font-weight: 300;
}
#faq .faq-question .icon {
  position: relative;
  width: clamp(0.875rem, 0.007rem + 1.85vw, 1.625rem);
  height: clamp(0.875rem, 0.007rem + 1.85vw, 1.625rem);
  flex-shrink: 0;
  margin-right: 2%;
}
#faq .faq-question .icon::before,
#faq .faq-question .icon::after {
  content: "";
  position: absolute;
  background: #191919;
  transition: 0.3s;
}
#faq .faq-question .icon::before {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
#faq .faq-question .icon::after {
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
#faq .faq-question.active .icon::after {
  opacity: 0;
  transform: translateX(-50%) rotate(90deg);
}
#faq .faq-answer {
  display: none;
  padding: 2% 0 4%;
  border-bottom: 1px solid #ddd;
}
#faq .answer {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.625rem, 0.191rem + 0.92vw, 1rem);
}
#faq .answer .a {
  font-family: "Inter", sans-serif;
  flex-shrink: 0;
  color: #f5a500;
  font-size: clamp(0.875rem, 0.586rem + 0.62vw, 1.125rem);
  line-height: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  font-weight: 600;
}
#faq .answer-body {
  flex: 1;
}
#faq .answer-body h4 {
  margin-bottom: 12px;
  font-size: clamp(0.625rem, 0.263rem + 0.77vw, 0.938rem);
  line-height: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  font-weight: 500;
}
#faq .answer-body p {
  font-size: clamp(0.625rem, 0.263rem + 0.77vw, 0.938rem);
  line-height: clamp(1.25rem, 0.527rem + 1.54vw, 1.875rem);
  text-align: justify;
}
#faq .answer-body p + p {
  margin-top: 18px;
}
#faq dl.menu {
  width: 40%;
}
#faq dl.menu div {
  position: relative;
  display: flex;
  justify-content: space-between;
}
#faq dl.menu div::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 100%;
  border-bottom: dotted 1px #000;
}
#faq dl.menu dt {
  margin:0;
  padding: 0 1% 0 0;
  background-color: #ffffff;
  z-index: 2;
  font-weight: 400;
  font-size: 15px;
  line-height: 30px;
}
#faq dl.menu dd {
  margin:0;
  padding: 0 0 0 1%;
  background-color: #ffffff;
  z-index: 2;
  font-size: 15px;
  line-height: 30px;
}
@media screen and (max-width: 750px){
  #faq .inner {
    width: 88%;
    margin: 0 auto 25%;
    padding: 10% 0;
  }
  #faq .sec-title {
    margin-bottom: 5%;
  }
  #faq .sec-title h2 {
    font-size: min(60px, 8vw);
  }
  #faq .sub-title {
    margin-top: 3%;
    font-size: min(25px, 3.34vw);
  }
  #faq .lead {
    margin-top: 10%;
    font-size: min(22px, 2.94vw);
    line-height: min(35px, 4.67vw);
  }
  #faq .faq-group {
    margin-top: 10%;
  }
  #faq .group-title {
    padding: 2.7% 4%;
    font-size: min(30px, 4vw);
  }
  #faq .faq-question {
    align-items: flex-start;
    gap: min(16px, 2.14vw);
    padding: 5% 0 4%;
  }
  #faq .faq-question .q {
    font-size: min(30px, 4vw);
    line-height: min(40px, 5.34vw);
  }
  #faq .faq-question .question {
    font-size: min(25px, 3.34vw);
    line-height: min(40px, 5.34vw);
  }
  #faq .faq-question .icon {
    width: min(40px, 5.34vw);
    height: min(40px, 5.34vw);
  }
  #faq .answer {
    gap: min(16px, 2.14vw);
  }
  #faq .faq-answer {
    padding: 5% 0;
  }
  #faq .answer .a {
    font-size: min(30px, 4vw);
    line-height: min(40px, 5.34vw);
  }
  #faq .answer-body h4 {
    margin-bottom: 4%;
    font-size: min(25px, 3.34vw);
    line-height: min(40px, 5.34vw);
  }
  #faq .answer-body p {
    font-size: min(22px, 2.94vw);
    line-height: min(40px, 5.34vw);
  }
  #faq dl.menu {
    width: 65%;
  }
  #faq dl.menu dt,
  #faq dl.menu dd {
    font-size: min(22px, 2.94vw);
    line-height: min(44px, 5.87vw);
  }
}