@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap");
@import url("font/fontawesome/css/all.css");
/* ------------------------------
 Base
------------------------------ */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
}

* {
  border: none;
  margin: 0;
  padding: 0;
  letter-spacing: inherit;
  font-weight: inherit;
  font-size: inherit;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

section, article, aside, dialog, figure, footer, header, hgroup, nav, li {
  display: block;
}

body {
  font-size: 14px;
  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;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
  text-align: left;
  color: #1D1D1D;
  font-feature-settings: "palt";
}

a {
  color: #1D1D1D;
  transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  outline: none;
  text-decoration: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: inline-block;
}

a.hover {
  cursor: pointer;
}

li {
  list-style-type: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
img.objectfit {
  object-fit: cover;
  font-family: 'object-fit: cover;';
  width: 100%;
  height: 100%;
}

svg {
  max-width: 100%;
  height: auto;
}

::selection {
  background: #ddd;
}

::-moz-selection {
  background: #ddd;
}

.en {
  font-family: "Zen Kaku Gothic New", "游ゴシック", YuGothic, "游ゴシック体", "Yu Gothic";
}

.pctabnone {
  display: none;
}

.wrapper {
  margin-inline: 20px;
}

/* ---------- Animation-Setting ---------- */
.anime-fade {
  opacity: 0;
  transition: transform, opacity, .3s linear;
  filter: blur(20px);
  transform: scale(0.9);
}
.anime-fade.is-active {
  opacity: 1;
  transform: none;
  filter: none;
}

.anime-fade-up {
  transform: translateY(20px);
  opacity: 0;
  filter: blur(5px);
  transition: transform, opacity, 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.anime-fade-up.is-active {
  transform: translateY(0);
  opacity: 1;
  filter: none;
}

.anime-fade-down {
  transform: translateY(-20px);
  opacity: 0;
  filter: blur(5px);
  transition: transform, opacity, 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.anime-fade-down.is-active {
  transform: translateY(0);
  opacity: 1;
  filter: none;
}

.anime-fade-toright {
  transform: translateX(-20px);
  opacity: 0;
  filter: blur(5px);
  transition: transform, opacity, 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.anime-fade-toright.is-active {
  transform: translateX(0);
  opacity: 1;
  filter: none;
}

.anime-fade-toleft {
  transform: translateX(20px);
  opacity: 0;
  transition: transform, opacity, 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  filter: blur(5px);
}
.anime-fade-toleft.is-active {
  transform: translateX(0);
  opacity: 1;
  filter: none;
}

.anime-shutter {
  position: relative;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: transform, opacity, 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  filter: blur(8px);
}
.anime-shutter.is-active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  filter: none;
}

/* ------------------------------
 Base END
------------------------------ */
/* ------------------------------
 PC Header
------------------------------ */
#pc_header {
  position: fixed;
  top: 0;
  left: 7vw;
  bottom: 0;
  width: calc( ( 100% - 430px ) / 2 - 7vw + 215px );
}
#pc_header .logo {
  padding-top: 70px;
  width: 180px;
  filter: invert(100%);
}
#pc_header .textbox {
  margin-top: 180px;
}
#pc_header .textbox .catch {
  font-size: 28px;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 1;
}
#pc_header .textbox .mark {
  margin-block: 30px 20px;
  width: 436px;
}
#pc_header .textbox .mark a {
  display: block;
}
#pc_header .textbox .text {
  margin-top: 15px;
  background-color: #FFF;
  padding: 8px 20px;
  width: fit-content;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 19px;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 1;
}
#pc_header .textbox .text i {
  color: #DEDEDE;
  font-size: 110%;
  display: inline-block;
  margin-inline: 10px;
}

#navigation {
  position: fixed;
  right: 6vw;
  bottom: 160px;
  width: calc( ( 100% - 430px ) / 2 - 6vw - 215px );
  display: flex;
  justify-content: flex-end;
}
#navigation ul.globalnavi {
  margin-right: 4.7vw;
  text-align: left;
}
#navigation ul.globalnavi li + li {
  margin-top: .5em;
}
#navigation ul.globalnavi li a {
  display: block;
  width: fit-content;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#navigation ul.globalnavi li a::before {
  content: "";
  display: inline-block;
  vertical-align: 3px;
  margin-right: 10px;
  width: 20px;
  height: 2px;
  background-color: #1D1D1D;
  opacity: 0;
  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;
}
#navigation ul.globalnavi li a:hover, #navigation ul.globalnavi li a.current {
  opacity: .6;
}
#navigation ul.globalnavi li a:hover::before, #navigation ul.globalnavi li a.current::before {
  opacity: 1;
}

/* ------------------------------
 container
------------------------------ */
#container {
  padding-block: 35px 60px;
}
#container::before {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../img/bg.jpg") no-repeat center center;
  background-size: cover;
}
#container #content_inner {
  max-width: 430px;
  padding: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-inline: 50% auto;
  overflow: hidden;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  position: relative;
}

/* ------------------------------
 Fat-Navigation
------------------------------ */
.fat-nav {
  display: none;
}

/* ------------------------------
 Header
------------------------------ */
#header h1.logo {
  position: absolute;
  z-index: 99;
  left: 20px;
  top: 25px;
}
#header h1.logo a {
  display: block;
  width: 180px;
}
.thanks #header h1.logo {
  top: 35px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.thanks #header h1.logo a {
  filter: invert(100%);
}

#fixbtn {
  display: none;
  position: fixed;
  z-index: 7777;
  left: 5px;
  right: 5px;
  bottom: -80px;
  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;
}
.is-scroll #fixbtn {
  bottom: 5px;
}
#fixbtn ul {
  display: flex;
  justify-content: space-between;
  background-color: rgba(29, 29, 29, 0.95);
  height: 45px;
}
#fixbtn ul li {
  width: calc( 100% / 3 );
  display: flex;
  align-items: center;
  justify-content: center;
}
#fixbtn ul li + li {
  position: relative;
}
#fixbtn ul li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 1px;
  background-color: #FFF;
}
#fixbtn ul li a {
  display: block;
  color: #FFF;
  font-size: 12px;
}

#navibutton {
  display: none;
  position: fixed;
  z-index: 9999;
  right: 15px;
  top: 20px;
}

/* ------------------------------
 Main Contents
------------------------------ */
#mainvisual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
  text-align: center;
  position: relative;
  z-index: 3;
}
#mainvisual .ph {
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#mainvisual .ph figure {
  height: 110%;
}
#mainvisual .textbox .catch {
  color: #FFF;
  font-size: 18px;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 1;
}
#mainvisual .textbox .mark {
  width: 300px;
  margin: 30px auto 15px;
  filter: brightness(0) invert(1);
}
#mainvisual .textbox .text {
  margin: 15px auto 0;
  background-color: #FFF;
  padding: 8px 10px;
  width: fit-content;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 1;
}
#mainvisual .textbox .text i {
  color: #DEDEDE;
  font-size: 110%;
  display: inline-block;
  margin-inline: 7px;
}

.btnarea {
  margin-top: -135px;
  text-align: center;
  padding-block: 110px 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
}
.btnarea::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: linear-gradient(0deg, black 0%, black 60%, rgba(255, 255, 255, 0) 100%);
}
.btnarea p:not([class]) {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 18px;
}
.btnarea p:not([class])::before, .btnarea p:not([class])::after {
  content: "";
  display: block;
  width: 78px;
  height: 1px;
  background-color: #FFF;
  margin-inline: 10px;
}
.btnarea ul:not([class]) {
  display: flex;
  justify-content: space-between;
  margin: 15px 40px 0;
}
.btnarea ul:not([class]) li {
  width: 48%;
}
.btnarea ul:not([class]) li a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  background-color: #54607A;
  font-size: 15px;
  line-height: 44px;
}
.btnarea .btn {
  margin-top: 10px;
}
.btnarea .btn a {
  color: #FFF;
  background-color: #3479AC;
  font-size: 15px;
  line-height: 44px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

#introduction {
  padding-block: 60px 70px;
  background: url("../img/introduction_bg.jpg") no-repeat center center;
  background-size: cover;
}
#introduction .text {
  line-height: 2;
}
#introduction .text > p {
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#introduction .text > p + p {
  margin-top: 1em;
}

#movie_block .block_head {
  background-color: #1D1D1D;
  padding-block: 15px;
  text-align: center;
}
#movie_block .block_head > p {
  color: #FFF;
  font-size: 18px;
  line-height: 1.6;
}
#movie_block .block_movie {
  width: 100%;
  height: 0;
  padding-top: 52.25%;
  position: relative;
  overflow: hidden;
}
#movie_block .block_movie .movie {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
#movie_block .block_movie .movie video {
  width: 100%;
  height: auto;
}

#place_block {
  background: url("../img/place_bg.jpg") no-repeat top right;
  background-size: contain;
  position: relative;
  z-index: 1;
}
#place_block .bgph {
  position: absolute;
  z-index: -1;
  right: 0;
  top: 0;
  width: 357px;
  height: 395px;
}
#place_block .block_btn {
  margin-top: 20px;
  text-align: center;
}
#place_block .block_btn a {
  display: block;
  margin-inline: auto;
  max-width: 290px;
  background-color: #54607A;
  color: #FFF;
  line-height: 46px;
  font-size: 15px;
}
#place_block .block_text {
  padding-top: 150px;
  text-align: justify;
}
#place_block .block_photo {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#place_block .block_photo .ph_left {
  width: 45%;
}
#place_block .block_photo .ph_left .ph1 {
  margin-top: 30px;
  width: 100%;
}
#place_block .block_photo .ph_right {
  width: 49%;
}
#place_block .block_photo .ph_right .ph2 {
  width: 100%;
}
#place_block .block_photo .ph_right .ph3 {
  margin: 20px 0 0 auto;
  width: 62.3%;
}

#sec_hat {
  margin-top: 40px;
}
#sec_hat .hat_top {
  position: relative;
  z-index: 1;
  padding: 80px 30px 70px;
  margin-bottom: 60px;
}
#sec_hat .hat_top .textbox {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 50px 15px;
  text-align: center;
}
#sec_hat .hat_top .textbox h3 {
  max-width: 250px;
  margin-inline: auto;
}
#sec_hat .hat_top .textbox h3::after {
  content: "";
  display: block;
  width: 160px;
  height: 1px;
  background-color: #CCC;
  margin: 35px auto 30px;
}
#sec_hat .hat_top .textbox .text > p {
  line-height: 2;
}
#sec_hat .hat_top .img {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#sec_hat .hat_body1 .textbox h4,
#sec_hat .hat_body2 .textbox h4 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 35px;
}
#sec_hat .hat_body1 .textbox .text > p + p,
#sec_hat .hat_body2 .textbox .text > p + p {
  margin-top: 1em;
}
#sec_hat .hat_photo {
  margin-block: 45px 35px;
  display: flex;
  justify-content: space-between;
}
#sec_hat .hat_photo .ph1 {
  max-width: 61.6%;
}
#sec_hat .hat_photo .ph2 {
  max-width: 33.7%;
}
#sec_hat .hat_photo .ph2 img {
  -webkit-transform: translateY(110px);
  transform: translateY(110px);
}
#sec_hat .hat_body2 {
  padding-bottom: 70px;
}
#sec_hat .hat_body2 .textbox h4 {
  margin: 0 140px 20px 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
#sec_hat .hat_body2 .textbox h4::after {
  content: "";
  flex-grow: 1;
  display: block;
  margin-left: 15px;
  width: auto;
  height: 1px;
  background-color: #DEDEDE;
}
#sec_hat .hat_body2 .textbox .text {
  padding-left: 1em;
}
#sec_hat .hat_body2 .textbox .text > p {
  line-height: 2;
}

#buildlist_block {
  background-color: #EBEBEB;
  padding-block: 40px 60px;
  margin-bottom: 75px;
}
#buildlist_block .buildlist_top {
  text-align: center;
}
#buildlist_block .buildlist_top .hat_logo {
  max-width: 100px;
  margin-inline: auto;
}
#buildlist_block .buildlist_top > p:not([class]) {
  margin-top: 25px;
  font-size: 16px;
  font-weight: 500;
}
#buildlist_block .buildlist_top .land_map {
  margin: 20px auto;
}
#buildlist_block .buildlist_body {
  margin-right: -20px;
  overflow: hidden;
}
#buildlist_block .buildlist_body .list .slick-list {
  padding: 0 170px 0 0 !important;
}
#buildlist_block .buildlist_body .list .item {
  margin-right: 15px;
}
#buildlist_block .buildlist_body .list .item .inner {
  display: block;
  background-color: #FFF;
  padding: 10px 10px 15px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#buildlist_block .buildlist_body .list .item .inner .info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-weight: 500;
}
#buildlist_block .buildlist_body .list .item .inner .info .number {
  width: fit-content;
  padding-inline: 10px;
  background-color: #C5C5C5;
  color: #FFF;
  font-size: 13px;
}
#buildlist_block .buildlist_body .list .item .inner .info .pricebox {
  line-height: 1.2;
}
#buildlist_block .buildlist_body .list .item .inner .info .pricebox > p {
  display: flex;
  align-items: baseline;
  font-size: 11px;
  position: relative;
}
#buildlist_block .buildlist_body .list .item .inner .info .pricebox > p strong {
  display: block;
  margin-left: 10px;
  font-size: 18px;
}
#buildlist_block .buildlist_body .list .item .inner .info .pricebox > p small {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 7px;
  line-height: 1;
  letter-spacing: 0;
}
#buildlist_block .buildlist_body .list .item .inner .tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
#buildlist_block .buildlist_body .list .item .inner .tags > span {
  display: block;
  padding: 0 6px;
  font-size: 8px;
  color: #5A5A5A;
  border: #CFCFCF solid 1px;
  -webkit-border-radius: 66px;
  border-radius: 66px;
}
#buildlist_block .buildlist_body .list .item .inner .tags > span::before {
  content: "#";
  display: inline-block;
  margin-right: 2px;
}
#buildlist_block .buildlist_body .list .item .inner .thumb {
  margin-top: 10px;
  width: 100%;
}
#buildlist_block .buildlist_body .list .item .inner .floor {
  margin-top: 10px;
  width: 100%;
}
#buildlist_block .buildlist_body .list .item .inner .data dl dt {
  display: flex;
  align-items: center;
}
#buildlist_block .buildlist_body .list .item .inner .data dl dt::after {
  content: "";
  display: block;
  flex-grow: 1;
  width: auto;
  height: 1px;
  background-color: #C8C8C8;
}
#buildlist_block .buildlist_body .list .item .inner .data dl dt span {
  width: fit-content;
  font-size: 12px;
  margin-right: 10px;
}
#buildlist_block .buildlist_body .list .item .inner .data dl dd {
  text-align: center;
  font-size: 11px;
}
#buildlist_block .buildlist_body .list .item .inner .data dl dd b {
  display: inline-block;
  margin-left: 10px;
  font-weight: 500;
}
#buildlist_block .buildlist_body .list .item .inner .data dl dd small {
  display: block;
  margin-top: -3px;
  font-size: 10px;
}
#buildlist_block .dots-wrap {
  margin-top: 20px;
  display: flex;
}
#buildlist_block .dots-wrap li {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}
#buildlist_block .dots-wrap li:hover, #buildlist_block .dots-wrap li.slick-active {
  background: #959595;
}
#buildlist_block .dots-wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}

#sec_exterior .titlebox h3.title,
#sec_interior .titlebox h3.title {
  position: relative;
  z-index: 1;
}
#sec_exterior .titlebox h3.title span,
#sec_interior .titlebox h3.title span {
  font-weight: 500;
  line-height: 1;
}
#sec_exterior .titlebox h3.title span.en,
#sec_interior .titlebox h3.title span.en {
  display: block;
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 35%;
  font-size: 40px;
  color: #E6E6E6;
}
#sec_exterior .titlebox h3.title span.ja,
#sec_interior .titlebox h3.title span.ja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
}
#sec_exterior .titlebox h3.title span.ja::after,
#sec_interior .titlebox h3.title span.ja::after {
  content: "";
  display: block;
  width: 80%;
  height: 1px;
  background-color: #DEDEDE;
}

#sec_exterior .photo_list li {
  margin-top: 35px;
  position: relative;
}
#sec_exterior .photo_list li:nth-child(odd) .item_title {
  left: auto;
  right: 0;
}
#sec_exterior .photo_list li:nth-child(odd) .item_img {
  margin-inline: -20px auto;
}
#sec_exterior .photo_list li:last-child .item_img figure figcaption {
  left: auto;
  right: 10px;
  color: #1D1D1D;
}
#sec_exterior .photo_list li .item_title {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
}
#sec_exterior .photo_list li .item_title h4 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#sec_exterior .photo_list li .item_title h4 span.ja {
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
  display: inline-block;
  letter-spacing: .1em;
  margin-inline: auto;
  font-size: 20px;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#sec_exterior .photo_list li .item_img {
  width: 85.36%;
  margin-inline: auto -20px;
}
#sec_exterior .photo_list li .item_img figure {
  position: relative;
  width: 100%;
}
#sec_exterior .photo_list li .item_img figure figcaption {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #FFF;
  font-size: 11px;
  line-height: 1;
}

#sec_interior {
  margin-top: 80px;
}
#sec_interior .photo_list {
  margin-top: 25px;
}
#sec_interior .photo_list li + li {
  margin-top: 35px;
}
#sec_interior .photo_list li figure {
  width: 100%;
}
#sec_interior .photo_list li dl {
  margin-top: 20px;
  display: flex;
}
#sec_interior .photo_list li dl dt {
  white-space: nowrap;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 20px;
}
#sec_interior .photo_list li dl dd {
  padding-left: 50px;
  text-align: justify;
}

.sec .titlebox h3.title {
  margin-bottom: 20px;
  text-align: center;
}
.sec .titlebox h3.title span {
  display: block;
  line-height: 1;
}
.sec .titlebox h3.title span.en {
  font-weight: 500;
  font-size: 24px;
}
.sec .titlebox h3.title span.ja {
  margin-top: 10px;
  font-size: 12px;
  color: #727272;
}

#sec_outline.sec {
  background-color: #F5F5F5;
  margin-top: 50px;
  padding-block: 40px 30px;
}
#sec_outline.sec table.data {
  border-collapse: collapse;
  font-size: 11px;
}
#sec_outline.sec table.data tr {
  border-bottom: #DEDEDE solid 1px;
}
#sec_outline.sec table.data th {
  padding-block: 5px;
  white-space: nowrap;
}
#sec_outline.sec table.data td {
  padding: 5px 0 5px 1.5em;
  font-weight: 500;
}
#sec_outline.sec table.data td span {
  font-size: 10px;
}

#sec_location.sec {
  padding-block: 60px 40px;
}
#sec_location.sec .around_list ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#sec_location.sec .around_list ul li {
  width: 47%;
  margin-bottom: 10px;
}
#sec_location.sec .around_list ul li figure {
  width: 100%;
}
#sec_location.sec .around_list ul li figure img {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
#sec_location.sec .around_list ul li figure figcaption {
  margin-top: 5px;
  display: block;
  text-align: justify;
  font-size: 11px;
}

#attractive_block {
  background-color: #54607A;
  color: #FFF;
  padding-block: 45px 30px;
}
#attractive_block .title {
  margin-bottom: 15px;
}
#attractive_block .title p.ja {
  font-size: 20px;
  text-indent: -.3em;
  margin-bottom: 5px;
}
#attractive_block .title p.en {
  color: #DEDEDE;
  font-size: 13px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
#attractive_block .title p.en::after {
  content: "";
  flex-grow: 1;
  display: block;
  margin-left: 15px;
  width: auto;
  height: 1px;
  background-color: #C5C5C5;
}
#attractive_block .text {
  text-align: justify;
  font-size: 13px;
}
#attractive_block .text > p + p {
  margin-top: 1em;
}
#attractive_block .phbox {
  margin: 20px -20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#attractive_block .phbox .ph {
  width: 30%;
}
#attractive_block .phbox .ph:nth-of-type(2) {
  margin-top: 20px;
}
#attractive_block #model .model_title {
  text-align: right;
}
#attractive_block #model .model_title span {
  display: block;
  line-height: 1;
}
#attractive_block #model .model_title span.en {
  font-weight: 500;
  font-size: 40px;
  color: #BBBEC4;
}
#attractive_block #model .model_main {
  margin: -10px 0 70px -20px;
  position: relative;
  z-index: 2;
}
#attractive_block #model .model_main figure {
  width: 94.8%;
  margin-right: auto;
}
#attractive_block #model .model_main p:not([class]) {
  position: absolute;
  left: 40px;
  bottom: -40px;
  line-height: 1.4;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 20px;
}
#attractive_block #model .model_main p:not([class]) small {
  display: block;
  font-size: 16px;
}
#attractive_block #model .model_gal {
  margin: 0 -20px 40px 0;
  display: flex;
  justify-content: space-between;
}
#attractive_block #model .model_gal .ph {
  width: 32%;
}
#attractive_block #model .model_text {
  margin-inlin: 20px;
}
#attractive_block #model .model_text .open {
  border: #DEDEDE solid 1px;
  padding: 15px 20px;
  text-align: justify;
  line-height: 2;
}
#attractive_block #model .model_text .comment {
  margin-top: 15px;
  text-align: center;
}

#sec_contact.sec {
  position: relative;
}
#sec_contact.sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #54607A;
}
#sec_contact.sec .wrapper {
  background-color: #FFF;
}

/* ------------------------------
 Footer
------------------------------ */
#footer {
  margin-top: 90px;
  box-sizing: border-box;
  padding-block: 120px 70px;
  background: url("../img/footer_bg.jpg") no-repeat center center;
  background-size: cover;
}
#footer .mark {
  width: 200px;
  margin-inline: auto;
}
#footer .mark a {
  display: block;
  filter: invert(100%);
}
#footer .text {
  margin: 15px auto 100px;
  background-color: #FFF;
  padding: 8px 10px;
  width: fit-content;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 12px;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 1;
}
#footer .text i {
  color: #DEDEDE;
  font-size: 110%;
  display: inline-block;
  margin-inline: 5px;
}
#footer #copyright {
  position: fixed;
  z-index: 5;
  right: 5vw;
  bottom: 25px;
  text-align: right;
  font-size: 11px;
  line-height: 1;
}

/* ------------------------------
 Mail-form
------------------------------ */
#formbox {
  padding-top: 30px;
  margin-inline: 10px;
}
#formbox #privacybox {
  border: #686868 1px solid;
  padding: 20px;
  margin-bottom: 10px;
  text-align: justify;
}
#formbox #privacybox .privacy-title {
  font-weight: bold;
  border-bottom: #686868 1px solid;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
#formbox #privacybox .privacy-body {
  height: 200px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.5;
}
#formbox #privacybox .privacy-body .title {
  font-weight: bold;
  font-size: 15px;
  margin: 15px 0 10px;
}
#formbox #privacybox .privacy-body ul li {
  margin: 5px 0;
  padding-left: 26px;
  text-indent: -26px;
}
#formbox #privacybox .privacy-body ul li span {
  display: inline-block;
  text-indent: 0;
  width: 26px;
  text-align: right;
  box-sizing: border-box;
  letter-spacing: 0;
  padding-right: 5px;
}
#formbox #privacybox .privacy-body dl dt {
  border-top: none;
  float: none;
  width: auto;
  text-align: left;
}
#formbox #privacybox .privacy-body dl dd {
  padding: 0;
  border-top: none;
}
#formbox #privacybox .privacy-body > dl {
  margin: 10px 0;
}
#formbox #privacybox .privacy-body > dl dt {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
}
#formbox #privacybox .privacy-body > dl dd {
  padding-left: 15px;
  text-indent: -15px;
}
#formbox #privacybox .privacy-body > dl dd::before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: #d8d8d8;
  border-radius: 50%;
  display: inline-block;
  margin-right: 7px;
  vertical-align: 1px;
}
#formbox #privacybox .privacy-body .madoguchi {
  border: #686868 1px solid;
  margin: 12px 0;
  padding: 0 20px 15px;
}
#formbox #privacybox .privacy-body .madoguchi dl dt {
  font-weight: bold;
  margin-top: 5px;
}
#formbox #privacybox .privacy-body .madoguchi a {
  color: #374360;
}

form#mailformpro {
  padding: 0;
}

.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea,
.mfp_element_file {
  box-shadow: none;
  border: 1px solid #EBEBEB;
  background-color: #EBEBEB;
  border-radius: 0;
  padding: 5px;
  box-sizing: border-box;
  margin: 2px 0;
}

table.inputform {
  width: 100%;
  clear: both;
  border-collapse: collapse;
  border-top: 1px solid #DEDEDE;
}
table.inputform tr {
  border-bottom: 1px solid #DEDEDE;
}
table.inputform tr th, table.inputform tr td {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
table.inputform tr th {
  padding: 15px 10px 0;
}
table.inputform tr td {
  padding: 5px 10px 15px;
}
table.inputform textarea {
  height: 110px !important;
  width: 100% !important;
}
table.inputform input[type="text"],
table.inputform input[type="tel"],
table.inputform input[type="email"],
table.inputform textarea {
  width: 100%;
  border: 1px solid #EBEBEB;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 0;
  font-size: .9em;
  vertical-align: middle;
  background-color: #EBEBEB;
  box-shadow: none;
}
table.inputform input[type="text"]:focus, table.inputform input[type="text"]:focus-visible,
table.inputform input[type="tel"]:focus,
table.inputform input[type="tel"]:focus-visible,
table.inputform input[type="email"]:focus,
table.inputform input[type="email"]:focus-visible,
table.inputform textarea:focus,
table.inputform textarea:focus-visible {
  border-color: #54607A;
  outline: none;
}
table.inputform input[type=radio],
table.inputform input[type=checkbox] {
  vertical-align: middle;
}
table.inputform select {
  border: 1px solid #EBEBEB;
  background-color: #EBEBEB;
  border-radius: 0;
  padding: 7px 10px;
  vertical-align: middle;
  box-shadow: none;
  letter-spacing: 1px;
  min-width: 35%;
  box-sizing: border-box;
}
table.inputform input.noborder {
  border: none;
}
table.inputform ul.float {
  overflow: hidden;
}
table.inputform ul.float li {
  float: left;
  padding-right: 15px;
  margin: 3px 0;
}
table.inputform .zipsearch {
  display: inline-block;
  font-size: 12px;
  text-decoration: underline;
  letter-spacing: 1px;
  vertical-align: middle;
  margin-left: 10px;
  font-weight: bold;
}
table.inputform .hissu, table.inputform .nini {
  padding: 5px;
  background-color: #1D1D1D;
  color: #fff;
  font-size: 10px;
  border-radius: 2px;
  letter-spacing: 0.2em;
  vertical-align: middle;
  margin-left: 10px;
  display: inline-block;
  line-height: 1;
  font-weight: normal;
}
table.inputform .nini {
  background-color: #959595;
}
table.inputform .togglebox {
  background-color: #F5F5F5;
  border: rgba(235, 235, 235, 0.6) solid 1px;
  margin-top: 10px;
  padding: 15px 20px 20px;
}
table.inputform .togglebox .toggle_title {
  margin-bottom: 5px;
}

:placeholder-shown {
  color: #bbb;
}

::-webkit-input-placeholder {
  color: #bbb;
}

:-moz-placeholder {
  color: #bbb;
  opacity: 1;
}

::-moz-placeholder {
  color: #bbb;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #bbb;
}

.mfp_err {
  clear: both;
}

table.inputform span.br {
  padding-left: 15px;
}

table.inputform br.spbr {
  display: none;
}

/* ---------- label override ---------- */
form#mailformpro label {
  white-space: normal;
  transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: block;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  cursor: pointer;
}
form#mailformpro label input[type="radio"],
form#mailformpro label input[type="checkbox"] {
  display: none;
}

form#mailformpro label.mfp_checked {
  padding: 6px 12px 6px 35px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  text-decoration-color: rgba(84, 96, 122, 0.2);
  text-decoration-line: underline;
  text-decoration-thickness: 7px;
  text-underline-offset: -2px;
}
form#mailformpro label.mfp_checked::before {
  border-color: rgba(84, 96, 122, 0.5);
}
form#mailformpro label.mfp_checked::after {
  translate: 0;
  scale: 1;
  opacity: 1;
}

form#mailformpro label,
form#mailformpro label.mfp_not_checked {
  padding: 6px 12px 6px 35px;
  border: none;
  background-color: transparent;
  border-radius: 0;
}
form#mailformpro label::before,
form#mailformpro label.mfp_not_checked::before {
  content: "";
  width: 26px;
  height: 26px;
  border: #EBEBEB 2px solid;
  border-radius: 0;
  background-color: #EBEBEB;
  margin-top: -16px;
  position: absolute;
  top: 50%;
  left: 1px;
  transition: all 0.4s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.4s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
form#mailformpro label::after,
form#mailformpro label.mfp_not_checked::after {
  content: "\f00c";
  width: 30px;
  height: 30px;
  line-height: 1;
  font-size: 26px;
  font-family: "Font Awesome 6 free", "Font Awesome 6 Brands";
  font-weight: 900;
  color: #54607A;
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -16px;
  translate: 0 -5px;
  scale: .9;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

form#mailformpro ul.radio label::before {
  border-radius: 50%;
}

/* ---------- button override ---------- */
.mfp_element_all {
  max-width: none;
}

#mfp_buttons p {
  margin-top: 30px;
}

#mfp_buttons button#btn_confirm {
  border: none;
  border-radius: 0;
  background: #54607A;
  color: #fff;
  display: block;
  margin: 0 auto;
  width: 280px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  transition: all 0.5s ease;
  padding: 0;
  overflow: hidden;
  text-shadow: none;
  transform: translateY(-3px);
  font-size: 1.2em;
}
#mfp_buttons button#btn_confirm:hover {
  background-color: #E07600;
  transform: none;
  box-shadow: none;
}

/* ---------- confirm.css override ---------- */
div#mfp_phase_confirm {
  margin: 0;
}
div#mfp_phase_confirm h4 {
  font-size: clamp(17px, 2.4vw, 24px);
  padding: 0;
  text-align: center;
  margin: 40px auto 40px;
}

div#mfp_overlay_inner {
  padding: 30px;
  box-sizing: border-box;
  width: 840px;
  max-width: 90%;
  box-shadow: none;
  margin-bottom: 60px;
}
div#mfp_overlay_inner h4 {
  font-size: clamp(17px, 2.4vw, 24px);
  padding: 0;
  text-align: center;
  margin: 20px auto 30px;
}

div#mfp_overlay_background {
  background-color: #1D1D1D;
}

table#mfp_confirm_table {
  border-bottom: #DEDEDE 1px solid;
  width: 90%;
  margin: 0 auto;
}
table#mfp_confirm_table tr.mfp_colored {
  background-color: transparent;
}
table#mfp_confirm_table tr.mfp_achroma {
  background-color: transparent;
}
table#mfp_confirm_table tr th, table#mfp_confirm_table tr td {
  text-align: left;
  border-top: #DEDEDE 1px solid;
  font-size: 15px;
}
table#mfp_confirm_table tr th {
  width: 30%;
  font-weight: 700;
  white-space: nowrap;
  padding: 15px 10px 15px 30px;
}
table#mfp_confirm_table tr td {
  padding: 15px 30px;
}

div.mfp_buttons {
  margin: 25px auto 0;
  vertical-align: middle;
}
div.mfp_buttons button {
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  border-radius: 0;
  cursor: pointer;
  margin: 0 10px;
  text-align: center;
  text-shadow: none;
  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;
  overflow: hidden;
  vertical-align: middle;
  padding: 15px 0;
}
div.mfp_buttons button:hover {
  border: none;
  box-shadow: none;
}
div.mfp_buttons button#mfp_button_send {
  width: 280px;
  background: #54607A;
}
div.mfp_buttons button#mfp_button_send:hover {
  background-color: rgba(84, 96, 122, 0.8);
}
div.mfp_buttons button#mfp_button_cancel {
  width: 160px;
  font-size: 15px;
  letter-spacing: 0;
  background: #1D1D1D;
}
div.mfp_buttons button#mfp_button_cancel:hover {
  background-color: #ccc;
}

/* ---------- Guide override ---------- */
div.mfp_guide div {
  border-radius: 0;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2);
  background-color: #51A6B8;
}

div.mfp_err {
  color: #ff6060;
  background-image: none;
  padding-left: 0;
}

/* ------------------------------
 Thanks
------------------------------ */
body.thanks #bodyarea {
  padding-top: 12vh;
}
body.thanks #footer {
  margin-top: 0;
}
body.thanks .tel_area {
  margin-top: 40px;
  padding: 50px 0 40px;
  background-color: #F5F5F5;
  text-align: center;
}
body.thanks .tel_area .logo {
  width: 160px;
  margin: 0 auto 20px;
}
body.thanks .tel_area .logo a {
  display: block;
}
body.thanks .tel_area .logo svg * {
  fill: #1D1D1D;
}
body.thanks .tel_area dl {
  line-height: 1.3;
}
body.thanks .tel_area dl .tel {
  font-size: 36px;
  font-weight: 600;
}

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

 Responsive-Breakpoint-1 (1600px)

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1600px) {
  /* ------------------------------
   PC Header
  ------------------------------ */
  #pc_header {
    left: 5vw;
    width: calc( 40% - 5vw );
  }
  #pc_header .logo {
    width: 160px;
  }
  #pc_header .textbox {
    margin-top: 120px;
  }
  #pc_header .textbox .catch {
    font-size: 24px;
  }
  #pc_header .textbox .mark {
    width: 380px;
  }
  #pc_header .textbox .text {
    font-size: 16px;
  }

  #navigation {
    right: 5vw;
    width: calc( 100% - ( 40% + 430px ) - 5vw );
  }
  #navigation ul.globalnavi {
    margin-right: 3vw;
  }
  #navigation ul.globalnavi li a {
    font-size: 12px;
  }
  #navigation ul.globalnavi li a::before {
    margin-right: 7px;
    width: 18px;
  }

  /* ------------------------------
   container
  ------------------------------ */
  #container #content_inner {
    margin-inline: 40% auto;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  /* ------------------------------
   PC Header
  ------------------------------ */
  #pc_header {
    left: 3vw;
    width: calc( ( 100% - 430px ) / 2 - 3vw );
  }
  #pc_header .logo {
    padding-top: 30px;
    width: 160px;
  }
  #pc_header .textbox {
    margin-top: 170px;
  }
  #pc_header .textbox .catch {
    font-size: 14px;
  }
  #pc_header .textbox .mark {
    margin-block: 20px 15px;
    width: 220px;
  }
  #pc_header .textbox .text {
    padding: 6px 10px;
    font-size: 10px;
  }
  #pc_header .textbox .text i {
    margin-inline: 4px;
  }

  #navigation {
    right: 3vw;
    bottom: 100px;
    width: calc( ( 100% - 430px ) / 2 - 3vw );
  }
  #navigation ul.globalnavi {
    margin-right: 30px;
  }
  #navigation ul.globalnavi li a::before {
    width: 14px;
  }

  /* ------------------------------
   container
  ------------------------------ */
  #container {
    padding-block: 30px 50px;
  }
  #container #content_inner {
    margin-inline: auto;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  /* ------------------------------
   PC Header
  ------------------------------ */
  #pc_header .logo {
    width: 110px;
  }
  #pc_header .textbox {
    display: none;
  }

  #navigation {
    display: none;
  }

  /* ------------------------------
   container
  ------------------------------ */
  #container {
    padding-block: 80px 60px;
  }

  /* ------------------------------
   Header
  ------------------------------ */
  /* ------------------------------
   Fat-Navigation
  ------------------------------ */
  #navibutton {
    display: block;
    position: fixed;
    right: 3vw;
    top: 20px;
    z-index: 6000;
  }

  .hamburger {
    width: 60px;
    height: 60px;
    background-color: transparent;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    box-sizing: border-box;
    touch-action: manipulation;
    padding: 30px 0 0;
    display: block;
    text-align: center;
    position: relative;
    z-index: 5800;
  }
  .hamburger::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    line-height: 1.2;
    width: 100%;
    letter-spacing: 1px;
    font-family: "Zen Kaku Gothic New", "游ゴシック", YuGothic, "游ゴシック体", "Yu Gothic";
    color: #1D1D1D;
    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: 10px;
  }

  .hamburger__icon {
    position: relative;
    width: 30px;
    margin: 0 auto;
    height: 2px;
    display: block;
    background-color: transparent;
    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;
  }

  .hamburger__icon:before,
  .hamburger__icon:after {
    position: absolute;
    content: "";
    right: 0;
    display: block;
    width: 30px;
    height: 2px;
    background-color: #1D1D1D;
    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;
  }

  .hamburger__icon:before {
    top: -7px;
  }

  .hamburger__icon:after {
    top: 7px;
  }

  .hamburger.active::after {
    content: "close";
  }
  .hamburger.active .hamburger__icon {
    background-color: transparent;
  }
  .hamburger.active .hamburger__icon:before {
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger.active .hamburger__icon:after {
    transform: translateY(-7px) rotate(-45deg);
  }

  .fat-nav {
    top: 0;
    left: 0;
    z-index: 999;
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    text-align: left;
    box-sizing: border-box;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .thanks .fat-nav {
    display: none;
  }
  .fat-nav.active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: rgba(29, 29, 29, 0.4);
  }
  .fat-nav.active .fat-nav__inner {
    width: 400px;
  }

  .fat-nav__inner {
    display: block;
    background-color: #FFF;
    margin-left: auto;
    width: 0;
    height: 100%;
    z-index: 999;
    position: relative;
    overflow: auto;
    transition: all 0.4s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
    -webkit-transition: all 0.4s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .fat-nav__inner .fat-nav__menu {
    width: 400px;
    min-height: 100%;
    padding: 120px 45px 60px;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
  }
  .fat-nav__inner .fat-nav__menu .fat-nav__menu_inner {
    width: 100%;
    transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
    -webkit-transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition-delay: .6s;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
  }
  .fat-nav.active .fat-nav__inner .fat-nav__menu .fat-nav__menu_inner {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .fat-nav__inner .fat-nav__menu .fat-nav__menu_inner .menulist li a {
    display: block;
    padding: 12px 0;
    font-size: 16px;
    font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  }
  .fat-nav__inner .fat-nav__menu .fat-nav__menu_inner .menulist li a::before {
    content: "";
    display: inline-block;
    vertical-align: 5px;
    margin-right: 15px;
    width: 12px;
    height: 1px;
    background-color: #1D1D1D;
    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;
  }
  .fat-nav__inner .fat-nav__menu .fat-nav__menu_inner .menulist li a:hover {
    opacity: .6;
  }

  .fatnav-cover {
    position: fixed;
    background: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
    -webkit-transition: all 0.3s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    opacity: 0;
    visibility: hidden;
    z-index: 888;
  }
  .fatnav-cover.active {
    visibility: visible;
    opacity: 1;
  }

  /* ------------------------------
   Footer
  ------------------------------ */
  #footer #copyright {
    position: static;
    text-align: center;
    margin-top: 15px;
    color: #FFF;
  }

  /* ---------- confirm.css override ---------- */
  table#mfp_confirm_table {
    width: 100%;
  }
  table#mfp_confirm_table tr th, table#mfp_confirm_table tr td {
    font-size: 14px;
    display: table-cell;
    width: auto;
    white-space: normal;
  }
  table#mfp_confirm_table tr th {
    padding: 15px 10px 15px 15px;
  }
  table#mfp_confirm_table tr td {
    padding: 15px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #container {
    padding: 0;
  }
  #container #content_inner {
    padding: 0;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }

  .pctabnone {
    display: inherit;
  }

  .spnone {
    display: none;
  }

  /* ------------------------------
   Header
  ------------------------------ */
  /* ------------------------------
   Fat-Navigation
  ------------------------------ */
  #navibutton {
    right: 3vw;
    top: 10px;
  }

  .hamburger {
    width: 50px;
    height: 50px;
    padding-top: 25px;
  }
  .hamburger::after {
    bottom: 4px;
    letter-spacing: 0;
    color: #FFF;
  }
  .is-scroll .hamburger {
    background-color: #1D1D1D;
  }
  .hamburger.active {
    background-color: #1D1D1D;
  }

  .hamburger__icon:before,
  .hamburger__icon:after {
    background-color: #FFF;
  }

  .fat-nav__inner {
    background-color: rgba(255, 255, 255, 0.9);
  }
  .fat-nav__inner .fat-nav__menu .fat-nav__menu_inner .menulist li a {
    padding: 10px 0;
    font-size: 13px;
  }
  .fat-nav__inner .fat-nav__menu .fat-nav__menu_inner .menulist li a::before {
    vertical-align: 4px;
    margin-right: 8px;
    width: 12px;
  }

  .fatnav-cover {
    display: none;
  }

  /* ------------------------------
   Main Contents
  ------------------------------ */
  #mainvisual {
    height: 90svh;
  }

  .btnarea p:not([class])::before, .btnarea p:not([class])::after {
    width: 74px;
    margin-inline: 7px;
  }

  #sec_hat .hat_body2 {
    padding-bottom: 70px;
  }
  #sec_hat .hat_body2 .textbox .text {
    padding-left: .6em;
  }

  #buildlist_block .buildlist_body .list .slick-list {
    padding: 0 120px 0 0 !important;
  }
  #buildlist_block .buildlist_body .list .item .inner .info .number {
    padding-inline: 10px 7px;
  }
  #buildlist_block .buildlist_body .list .item .inner .info .pricebox > p strong {
    margin-left: 6px;
  }

  #attractive_block .title p.ja {
    font-size: 19px;
  }
  #attractive_block #model .model_main p:not([class]) {
    left: 30px;
    bottom: -30px;
  }

  /* ------------------------------
   Mail-form
  ------------------------------ */
  table.inputform tr th, table.inputform tr td {
    font-size: .9em;
    padding-inline: 5px;
  }
  table.inputform .zipsearch {
    font-size: 11px;
    margin-left: 8px;
  }
  table.inputform .hissu, table.inputform .nini {
    margin-left: 8px;
  }

  /* ---------- button override ---------- */
  #mfp_buttons button#btn_confirm {
    width: 80%;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
  }

  /* ---------- confirm.css override ---------- */
  div#mfp_phase_confirm {
    margin: 0;
  }
  div#mfp_phase_confirm h4 {
    margin: 20px auto 20px;
    font-size: 19px;
    letter-spacing: 1px;
  }

  div#mfp_overlay_inner {
    padding: 15px;
  }
  div#mfp_overlay_inner h4 {
    margin: 20px auto;
  }

  table#mfp_confirm_table tr th tr th, table#mfp_confirm_table tr th tr td {
    font-size: 13px;
  }
  table#mfp_confirm_table tr th tr th {
    width: 40%;
    padding: 10px;
    white-space: normal;
  }
  table#mfp_confirm_table tr th tr td {
    padding: 10px 10px;
  }

  div.mfp_buttons {
    margin: 10px 0 0;
  }
  div.mfp_buttons button {
    margin-inline: 5px;
  }
  div.mfp_buttons button#mfp_button_send {
    width: 50%;
    font-size: 15px;
  }
  div.mfp_buttons button#mfp_button_cancel {
    width: 40%;
    font-size: 13px;
  }

  /* ------------------------------
   Thanks
  ------------------------------ */
  body.thanks #bodyarea {
    padding-top: 15vh;
  }
}