@charset "UTF-8";
@import url("global.css");
/* ---------- Map ---------- */
.maparea {
  margin-inline: 3vw;
  height: 700px;
  position: relative;
  margin-bottom: 100px;
}

#map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#map .fukidashi {
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  line-height: 1.4;
  text-align: center;
}
#map .fukidashi a {
  color: #333;
  display: block;
}
#map .fukidashi img {
  display: block;
  margin: 0 auto 5px;
}

/* ---------- Index-Page ---------- */
#bodyarea .inner {
  display: flex;
  justify-content: space-between;
}
#bodyarea .navi-area {
  width: 150px;
  flex-shrink: 0;
}
#bodyarea .navi-area ul#navi {
  position: sticky;
  top: 150px;
  padding-left: 30px;
}
#bodyarea .navi-area ul#navi li {
  margin-bottom: 15px;
}
#bodyarea .navi-area ul#navi li a {
  display: block;
  width: fit-content;
  font-weight: 500;
  padding: 5px;
}
#bodyarea .navi-area ul#navi li a::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #E3E3E3;
  display: inline-block;
  vertical-align: 4px;
  margin-right: 12px;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#bodyarea .navi-area ul#navi li a.current::before {
  background-color: #E6001A;
  scale: 1.3;
}
@media (any-hover: hover) {
  #bodyarea .navi-area ul#navi li a:hover::before {
    background-color: #A49375;
  }
}
#bodyarea .main-area {
  flex-grow: 1;
}
#bodyarea .main-area .mainwrapper {
  max-width: 1200px;
  margin-inline: auto;
}
#bodyarea .main-area .mainwrapper .maininner {
  max-width: 980px;
  margin-left: auto;
  padding-left: 50px;
}
#bodyarea .area {
  container: main / inline-size;
}
#bodyarea .area + .area {
  margin-top: 90px;
}
#bodyarea .area .areaname {
  background-color: #F5F3F0;
  padding: 8px 25px;
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 700;
  margin-bottom: 60px;
}
#bodyarea .area .modellist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 6%;
  padding-inline: 10px;
}
#bodyarea .area .modellist li {
  display: contents;
}
#bodyarea .area .modellist li a {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0;
}
#bodyarea .area .modellist li .image {
  aspect-ratio: 3 / 2;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
#bodyarea .area .modellist li .image span {
  display: block;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#bodyarea .area .modellist li .image .in {
  display: block;
  position: absolute;
  inset: 0;
  border: rgba(255, 255, 255, 0.6) 10px solid;
  opacity: 0;
  translate: -20%;
  filter: sepia(10);
}
#bodyarea .area .modellist li .title {
  line-height: 1.5;
  padding-left: 10px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
}
#bodyarea .area .modellist li .data {
  padding-left: 10px;
}
#bodyarea .area .modellist li .data table {
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.4;
}
#bodyarea .area .modellist li .data table th {
  font-weight: 500;
  padding: 3px 15px 3px 0;
  white-space: nowrap;
}
#bodyarea .area .modellist li .data table td {
  padding: 3px 0;
}
#bodyarea .area .modellist li .more {
  margin: 10px 10px 0 auto;
  width: 130px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 100px;
  background-color: #F5F3F0;
  line-height: 30px;
  box-sizing: border-box;
  padding-inline: 20px;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 13px;
  font-weight: 700;
}
#bodyarea .area .modellist li .more::after {
  content: "\f061";
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
  display: block;
  line-height: 1;
}
@media (any-hover: hover) {
  #bodyarea .area .modellist li a:hover .image .in {
    filter: none;
    translate: 0;
    opacity: 1;
  }
  #bodyarea .area .modellist li a:hover .image .out {
    filter: grayscale(10);
    scale: 1.1;
  }
  #bodyarea .area .modellist li a:hover .more {
    background-color: #A49375;
    color: #fff;
    translate: 10px 0;
  }
}
@container (width <= 800px) {
  #bodyarea .area .modellist {
    padding-inline: 0;
  }
  #bodyarea .area .modellist li .title {
    font-size: 21px;
  }
}
@container (width <= 620px) {
  #bodyarea .area .modellist {
    display: block;
  }
  #bodyarea .area .modellist li {
    display: block;
  }
  #bodyarea .area .modellist li a {
    display: block;
  }
  #bodyarea .area .modellist li + li {
    margin-top: 50px;
  }
}
@container (width <= 480px) {
  #bodyarea .area .modellist li .image .in {
    border-width: 6px;
  }
  #bodyarea .area .modellist li .title {
    font-size: 19px;
  }
  #bodyarea .area .modellist li .data table {
    font-size: 13px;
  }
}
/* ---------- Post-Page ---------- */
#post {
  --radius: 8px;
}
#post .postinfo {
  position: relative;
  margin-bottom: 70px;
}
#post .postinfo .info_ph {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
  overflow: hidden;
}
#post .postinfo > .wrapper {
  min-height: 700px;
}
#post .postinfo .info_text {
  padding: 25px min(60px,4vw) 0 0;
  width: 50%;
  box-sizing: border-box;
}
#post .postinfo .info_text .postcat {
  font-weight: 700;
  padding: 8px 25px;
  border: #5A5657 1px solid;
  border-radius: 5px;
  margin-bottom: 15px;
  width: fit-content;
}
#post .postinfo .info_text .posttitle {
  font-size: min(2.5vw,35px);
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 50px;
}
#post .postinfo .info_text .data {
  margin-bottom: 50px;
}
#post .postinfo .info_text .data table {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.5;
}
#post .postinfo .info_text .data table tr {
  border-bottom: #ccc 1px solid;
}
#post .postinfo .info_text .data table tr:last-of-type {
  border: none;
}
#post .postinfo .info_text .data table th {
  padding: 15px 15px;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  vertical-align: top;
}
#post .postinfo .info_text .data table td {
  padding: 15px 5px 15px 15px;
}
#post .postinfo .info_text .data table a.map {
  display: inline-block;
  margin-left: 10px;
  padding-inline: 5px;
  font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 500;
}
#post .postinfo .info_text .data table a.map::before {
  content: "\f041";
  font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
  font-weight: 900;
  color: #A49375;
  font-size: 120%;
  vertical-align: -1px;
  margin-right: 5px;
  line-height: 1;
}
#post .postinfo .info_text .toform {
  max-width: 380px;
}
#post .postinfo .info_text .toform a {
  display: flex;
  border-radius: 100px;
  background-color: #A49375;
  color: #fff;
  text-align: center;
  padding: 15px;
  justify-content: center;
  align-items: center;
}
#post .postinfo .info_text .toform a .text {
  display: block;
  font-weight: 700;
  font-size: 18px;
  margin-right: 12px;
  font-size: 110%;
}
#post .postinfo .info_text .toform a .arrow {
  height: 35px;
  width: 35px;
  border-radius: 100%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 14px;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
#post .postinfo .info_text .toform a .arrow i {
  animation: scrollDown 1.5s ease infinite;
}
#post .postinfo .info_text .toform a:hover {
  background-color: #E5DED3;
}
@keyframes scrollDown {
  0% {
    transform: translateY(-15px);
    opacity: 0;
  }
  50% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}
#post .brandinfo {
  background-color: #F5F3F0;
  padding: 30px min(50px,5vw);
  box-sizing: border-box;
  max-width: 1100px;
  margin: 70px auto;
  display: flex;
  align-items: center;
  gap: 30px;
}
#post .brandinfo .brandlogo {
  width: 240px;
  flex-shrink: 0;
  max-width: 25%;
}
#post .brandinfo .text {
  font-weight: 500;
  flex-grow: 1;
}
#post .modelinfo {
  background-color: #F5F3F0;
  padding: 30px min(50px,5vw);
  box-sizing: border-box;
  max-width: 1100px;
  margin: 70px auto;
}
#post .modelinfo .text {
  font-weight: 500;
}
#post .modelpoint {
  counter-reset: number 0;
}
#post .modelpoint li {
  counter-increment: number 1;
  display: flex;
  gap: min(75px,4.5vw);
  padding-block: 35px;
  position: relative;
}
#post .modelpoint li:last-of-type::after {
  display: none;
}
#post .modelpoint li::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 55%;
  background-color: #ccc;
}
#post .modelpoint li .image {
  border-radius: var(--radius);
  width: 43%;
  height: 380px;
  flex-shrink: 0;
  overflow: hidden;
}
#post .modelpoint li .main {
  flex-grow: 1;
  padding: 40px 10px 20px 0;
}
#post .modelpoint li .main::before {
  content: "point" counter(number);
  display: block;
  color: #E6001A;
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 22px;
  font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
}
#post .modelpoint li .main .title {
  line-height: 1.5;
  margin-bottom: 50px;
  font-weight: 700;
  font-size: min(22px,2.7vw);
}
#post #gallery {
  margin-block: 120px;
}
#post #gallery .title {
  font-size: min(5.5vw,24px);
  font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  color: #5A5657;
  margin-bottom: 30px;
}
#post #present {
  border: #A49375 1px solid;
  border-radius: var(--radius);
  padding: 1px 80px 60px;
  margin-block: 100px 80px;
  position: relative;
}
#post #present .catch {
  max-width: 360px;
  text-align: center;
  background-color: #A49375;
  color: #fff;
  font-size: clamp(16px, 5vw, 24px);
  font-weight: 700;
  border-radius: 100px;
  padding: 5px;
  margin: -25px auto 30px;
  position: relative;
}
#post #present .catch::before {
  content: "";
  width: 25px;
  height: 22px;
  position: absolute;
  right: -20px;
  top: -17px;
  background: url("../img/point.png") no-repeat center center;
  background-size: contain;
}
#post #present .title {
  text-align: center;
  margin-bottom: 30px;
}
#post #present .title span {
  display: block;
  line-height: 1.3;
}
#post #present .title .en {
  font-size: 32px;
  font-family: "Outfit", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  color: #5A5657;
  letter-spacing: .08em;
}
#post #present .title .ja {
  font-size: .93em;
}
#post #present .title .ja::before {
  content: "［";
  display: inline-block;
  margin-right: 3px;
}
#post #present .title .ja::after {
  content: "］";
  display: inline-block;
  margin-left: 3px;
}
#post #present .main {
  display: flex;
  gap: 60px;
}
#post #present .image {
  max-width: 260px;
  margin: 0 auto 30px;
}
#post #present .text {
  flex-grow: 1;
}
#post #present .text .maintext {
  border-bottom: #A49375 1px solid;
  padding: 0 0 30px 20px;
  line-height: 1.5;
  font-weight: 500;
  word-break: keep-all;
}
#post #present .text .maintext span {
  display: block;
  font-size: 1.8em;
  font-weight: 700;
  color: #A49375;
  display: block;
}
#post #present .text .notice {
  padding: 30px 0 0 20px;
  font-size: .8em;
}
#post #present .text .notice ul {
  line-height: 1.5;
}
#post #present .text .notice ul li {
  margin-block: 3px;
  text-indent: -1.2em;
  padding-left: 1.2em;
}
#post #present .text .notice ul li::before {
  content: "※";
  padding-right: .15rem;
  text-indent: 0;
  color: #A49375;
  font-weight: 700;
}

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

 Responsive-Breakpoint-1 ( 1600px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  /* ---------- Index-Page ---------- */
  #bodyarea .navi-area {
    width: 120px;
  }
  #bodyarea .navi-area ul#navi {
    padding-left: 0;
  }

  /* ---------- Post-Page ---------- */
  #post #present {
    padding: 1px 5vw 60px;
  }
  #post #present .main {
    gap: 5vw;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  /* ---------- Map ---------- */
  .maparea {
    margin-inline: 0;
    height: 600px;
    margin-bottom: 80px;
  }

  /* ---------- Index-Page ---------- */
  #bodyarea .inner {
    gap: 5vw;
  }
  #bodyarea .navi-area {
    width: 100px;
  }
  #bodyarea .navi-area ul#navi li {
    margin-bottom: 10px;
  }
  #bodyarea .navi-area ul#navi li a {
    font-weight: 700;
  }
  #bodyarea .navi-area ul#navi li a::before {
    vertical-align: 3px;
    margin-right: 10px;
  }
  #bodyarea .main-area .mainwrapper .maininner {
    padding-left: 0;
  }
  #bodyarea .area + .area {
    margin-top: 70px;
  }
  #bodyarea .area .areaname {
    margin-bottom: 50px;
  }
  #bodyarea .area .modellist {
    padding-inline: 0;
  }

  /* ---------- Post-Page ---------- */
  #post .postinfo {
    margin-bottom: 60px;
  }
  #post .postinfo .info_ph {
    position: static;
    width: auto;
    border-radius: var(--radius);
    margin: 0 5vw 40px;
    aspect-ratio: 3 / 2;
  }
  #post .postinfo > .wrapper {
    min-height: inherit;
  }
  #post .postinfo .info_text {
    padding: 0;
    width: auto;
  }
  #post .postinfo .info_text .postcat {
    padding: 5px 25px;
    margin-bottom: 15px;
  }
  #post .postinfo .info_text .posttitle {
    font-size: min(5vw,30px);
    margin-bottom: 30px;
  }
  #post .postinfo .info_text .data {
    margin-bottom: 40px;
  }
  #post .postinfo .info_text .data table th {
    padding: 15px 20px;
  }
  #post .postinfo .info_text .toform {
    max-width: 300px;
  }
  #post .postinfo .info_text .toform a {
    padding: 10px;
  }
  #post .brandinfo .brandlogo {
    max-width: 30%;
  }
  #post .modelpoint {
    margin-inline: -1vw;
  }
  #post .modelpoint li::after {
    width: 53%;
  }
  #post .modelpoint li .image {
    width: 45%;
    height: 380px;
  }
  #post .modelpoint li .main {
    padding: 30px 0 20px;
  }
  #post .modelpoint li .main .title {
    margin-bottom: 30px;
  }
  #post #gallery {
    margin-block: 80px;
  }
  #post #present {
    padding: 1px 5vw 60px;
  }
  #post #present .main {
    display: block;
  }
  #post #present .image {
    max-width: 200px;
    margin: 0 auto 30px;
  }
  #post #present .text .maintext {
    text-align: center;
  }
  #post #present .text .notice {
    text-align: center;
  }
  #post #present .text .notice ul {
    display: inline-block;
    text-align: left;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ---------- Map ---------- */
  .maparea {
    margin-inline: 0;
    height: 400px;
    margin-bottom: 60px;
  }

  /* ---------- Index-Page ---------- */
  #bodyarea .inner {
    display: block;
  }
  #bodyarea .navi-area {
    border-top: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
    width: auto;
    padding: 20px 5vw;
    margin-bottom: 50px;
  }
  #bodyarea .navi-area ul#navi {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 15px;
    justify-content: center;
  }
  #bodyarea .navi-area ul#navi li {
    margin-bottom: 0;
  }
  #bodyarea .navi-area ul#navi li a {
    padding: 5px 0;
  }
  #bodyarea .navi-area ul#navi li a::before {
    vertical-align: 2px;
  }
  #bodyarea .navi-area ul#navi li a.current::before {
    background-color: #E3E3E3;
    scale: 1;
  }
  #bodyarea .area .areaname {
    text-align: center;
    margin-bottom: 40px;
  }

  /* ---------- Post-Page ---------- */
  #post {
    --radius: 5px;
  }
  #post .postinfo {
    margin-bottom: 40px;
  }
  #post .postinfo .info_ph {
    margin: 0 5vw 30px;
  }
  #post .postinfo .info_text .postcat {
    padding: 3px 10px;
    margin: 0 auto 12px;
  }
  #post .postinfo .info_text .posttitle {
    text-align: center;
    margin-bottom: 20px;
  }
  #post .postinfo .info_text .data {
    margin-bottom: 30px;
  }
  #post .postinfo .info_text .data table th {
    padding: 12px 10px;
  }
  #post .postinfo .info_text .data table td {
    padding: 12px 5px 12px 10px;
  }
  #post .postinfo .info_text .toform {
    margin-inline: auto;
    max-width: 240px;
  }
  #post .postinfo .info_text .toform a {
    padding: 8px;
  }
  #post .postinfo .info_text .toform a .text {
    margin-right: 12px;
  }
  #post .postinfo .info_text .toform a .arrow {
    height: 30px;
    width: 30px;
    font-size: 14px;
  }
  #post .brandinfo {
    margin: 40px auto;
    display: block;
  }
  #post .brandinfo .brandlogo {
    width: 200px;
    max-width: none;
    margin: 0 auto 20px;
  }
  #post .modelinfo {
    margin: 40px auto;
  }
  #post .modelpoint {
    margin-inline: 0;
  }
  #post .modelpoint li {
    display: block;
    padding-block: 35px;
  }
  #post .modelpoint li::after {
    right: 30px;
    left: 30px;
    width: auto;
  }
  #post .modelpoint li .image {
    width: auto;
    aspect-ratio: 3 / 2;
    height: auto;
  }
  #post .modelpoint li .main {
    padding: 0;
  }
  #post .modelpoint li .main::before {
    margin-bottom: 0;
  }
  #post .modelpoint li .main .title {
    margin-bottom: 20px;
    font-size: min(20px,4.5vw);
  }
  #post #gallery {
    margin-block: 20px 40px;
  }
  #post #gallery .title {
    text-align: center;
    margin-bottom: 20px;
  }
  #post #present {
    padding: 1px 5vw 40px;
    margin-block: 70px 60px;
  }
  #post #present .catch {
    max-width: 220px;
    margin: -20px auto 20px;
  }
  #post #present .catch::before {
    right: -18px;
    top: -16px;
  }
  #post #present .title {
    margin-bottom: 25px;
  }
  #post #present .title .en {
    font-size: 28px;
  }
  #post #present .image {
    max-width: 160px;
    margin: 0 auto 30px;
  }
  #post #present .text .maintext {
    padding: 0 0 25px;
  }
  #post #present .text .maintext span {
    letter-spacing: -1px;
    font-size: 1.6em;
    padding-top: 5px;
  }
  #post #present .text .notice {
    padding: 30px 0 0;
  }
}

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