@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

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

  Kodate Top PC Style

================================== */
* { box-sizing: border-box; }
::before, ::after { box-sizing: inherit; }
html {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 62.5%;
  font-size: 10px;
  overflow-y: scroll;
  animation: fadeInAll 3s ease-out;
}
body {
  position: relative;
  width: 100%;
  min-width: 1200px;
  max-width: 100%;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 11px;
  font-size: 1.1rem;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 100%;
  margin: 0;
  padding: 0;
}
div, p, span { font-family: "Noto Sans JP", sans-serif !important; }
figure {
  margin: 0;
  padding: 0;
}
img{ vertical-align:top; }
a {
  color: #000000;
  text-decoration: none;
}
a:hover { color: #000000; }

a img {
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -ms-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}
a:hover img {
  opacity: .5;
  -webkit-opacity: .5;
  -moz-opacity: .5;
}
.sp { display: none; }
#btn_top_pc { display: none; }

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

  Style From "v2_kodate_top.css"

---------------------------------- */
.wrap {
  position: relative;
  width: 1200px;
  margin: auto;
}

/* パンくず */
#bread ul{
  position: absolute;
  z-index: 2;
  top: 110px;
  display: flex;
  justify-content: flex-start;
  margin: 5px 0;
  color: #ffffff;
  text-shadow: 1px 1px 1px hsl(0deg 0% 0% / 60%);
}
#bread li { color: #ffffff; }
#bread li.txt_w a {
  margin-right: 5px;
  color: #ffffff;
}
#bread li:nth-last-child(n+2):after {
  content: ">";
  margin-right: 5px;
}

/* SP Menu
----------------------------- */
#spmanu { display: none; }

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

  Footer Style from "template-style.css" ＆ "v2_kodate_top.css"

-------------------------------------------------------------- */
#foot_info {
  width: 100%;
  height: 74px;
  background-color: #fff;
  background-image: none;
  border-top: none;
  color: #000000;
  border-top: solid 1px #ececec;
}
#foot_info ul {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
#foot_info ul li#foot_info01 { float: left; }
#foot_info ul li#foot_info02 {
  float: right;
  padding-right: 20px;
}
#footer_area {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  background-color: #ffffff;
  color: #000;
  font-size: 10px;
  line-height: 1.8;
  z-index: 999;
}
#footer_area #footer_menu {
  width: 1170px;
  margin: 0 auto;
  text-align: left;
}
#footer_area #footer_menu ul li {
  display: inline-block;
}
#footer_area #footer_menu ul li a {
  color: #000000;
}
#footer_area #footer_menu ul li a:hover {
  text-decoration: underline;
}
#footer_menu1 { float: left; }
#footer_menu1 li{ margin-right: 15px; }
#footer_menu2{ float: right; }
#footer_menu2 li{ margin-left: 15px; }
#footer_area #footer_copyright {
  clear: both;
  width: 1170px;
  margin: 0 auto;
  padding: 0 0 15px;
  color: #000000;
  text-align: right;
  line-height: normal;
  font-size: 9px;
}
#footer_menu:after, #foot_info:after {
  content: "";
  clear: both;
  display: block;
}
#footTelArea, #footer_area #lnk_opt_sp {
  display: none;
}
#footer_area #btn_top {
  position: absolute;
  bottom: 40px;
  width: 100%;
  z-index: 300;
}
#footer_area #btn_top a {
  position: fixed;
  bottom: 40px;
  left: 58%;
  width: 42px;
  height: 42px;
  margin-left: 458px;
  display: none;
}
#footer_area #btn_top a img{
  width: 42px;
  height: 42px;
}

/* -----------------------------
  Main
----------------------------- */
main { z-index: 1; }
.main {
  width: 100%;
  padding: 0;
  overflow: hidden;
}

/* BgSwitcher
----------------------------- */
.bgpc { display: none; }

/* ========== ▼ Modified 20240502 ▼ ========== */

/* Main Visual - Slider
----------------------------- */
.main-visual {
  position: relative;
  top: 80px;
  width: 100%;
}
.main-visual h1.kodate_top {
  position: absolute;
  z-index: 2;
  top: 70px;
  left: calc((100% - 1200px) / 2);
  text-align: left;
  color: #ffffff;
  font-size: 18px;
  font-size: 1.8rem;
  background-color: #333333;
  padding: 0 1.25em;
  margin: 0 10px 0 0;
  text-shadow: none;
}
.mv01, .mv02, .mv03 {
  position: relative;
  height: auto;
  overflow: hidden;
  background-color: #ffffff;
}
.main-visual figure {
  position: relative;
  width: 100%;
  /*
  margin: 0 auto;
  padding: 0 0 calc(900 / 1500 * 100%);
  background-repeat: no-repeat;
  background-size: cover;
  */
}
.main-visual figure a:hover img { opacity: 1; }
.main-visual figure img {
  width: 100%;
  height: auto;
}
/*
.mv01 figure img {
  position: absolute;
  left: 0;
  bottom: 0;
}
.mv02 figure img {
  position: absolute;
  left: 0;
  top: 0;
}
.mv03 figure img { height: auto; }

@media screen and (min-width:1701px) {
  .mv01, .mv02, .mv03 {
    height: auto;
  }
}

@media screen and (max-width:1500px) {
  .mv03 figure img { height: 100%; }
}
.mv01 figure {
  background-image: url(../images/mv/kodate_main-visual_01b.png);
  background-position: 50% 50%;
}
.mv02 figure {
  background-image: url(../images/mv/kodate_main-visual_02b.png);
  background-position: 50% 50%;
}
.mv03 figure {
  background-image: url(../images/mv/kodate_main-visual_03b.png);
  background-position: 50% 50%;
}
*/

/* ========== ▲ Modified 20240502 ▲ ========== */

.mv-parallax { animation: parallax 12s ease 0s normal both; }
.mv-zoom-in { animation: zoomIn 12s ease 0s normal both; }

/* Main Visual - For Slick Slider */
.main-visual.slick-slider { margin: 0; }
.slick-dots {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 20px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 70px;
  height: 20px;
  padding: 5px;
  cursor:pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.slick-dots li button:before {
  font-family: 'slick';
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 3.75px;
  background-color: #ffffff;
  content: '';
  text-align: center;
  opacity: 1;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  background-color: #205799;
  opacity: 1;
  color: black;
}

/* Main Visual - For Swiper Slider */

/* ========== ▼ Modified 20240502 ▼ ========== */
/*
.swiper-slide[data-swiper-slide-index="0"].swiper-slide-active figure img,
.swiper-slide[data-swiper-slide-index="0"].swiper-slide-duplicate-active figure img,
.swiper-slide[data-swiper-slide-index="0"].swiper-slide-prev figure img {
  animation: moveUp 12s ease 0s normal both;
}
.swiper-slide[data-swiper-slide-index="1"].swiper-slide-active figure img,
.swiper-slide[data-swiper-slide-index="1"].swiper-slide-duplicate-active figure img,
.swiper-slide[data-swiper-slide-index="1"].swiper-slide-prev figure img {
  animation: moveDown 12s ease 0s normal both;
}
.swiper-slide[data-swiper-slide-index="2"].swiper-slide-active figure img,
.swiper-slide[data-swiper-slide-index="2"].swiper-slide-duplicate-active figure img,
.swiper-slide[data-swiper-slide-index="2"].swiper-slide-prev figure img {
  animation: zoomIn 12s ease 0s normal both;
}
*/
/* ========== ▲ Modified 20240502 ▲ ========== */

.swiper-pagination {
  position: absolute !important;
  top: initial;
  bottom: 20px !important;
}
.swiper-pagination-bullet {
  width: 60px;
  height: 3px;
  border-radius: 0;
  background: #ffffff;
  opacity: 1;
  margin: 0 1px 0 0 !important;
}
.swiper-pagination-bullet-active {

  background: #205799;
  opacity: 1;
}

/* ========== ▼ Modified 20230427, 20240502 ▼ ========== */

/* Page Heading */
.mv-heading {
  position: absolute;
  z-index: 1;
  top: 70px;
  left: calc((100% - 1200px) / 2);
  text-align: left;
  color: #ffffff;
}
.mv-heading > div {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
}
/*
.mv-heading span {
  font-size: 18px;
  font-size: 1.8rem;
  color: #ffffff;
  display: inline-block;
  padding-left: 13rem;
}
*/
.mv-heading p.ttl {
  font-family: "Nobel-Book", sans-serif !important;
  font-size: 18px;
  font-size: 1.8rem;
  color: #ffffff;
  display: inline-block;
  padding: 0 0 0 13rem;
  margin: 0;
  /*
  font-size: 40px;
  font-size: 4.0rem;
  line-height: 1.75;
  text-shadow: 1px 1px 1px hsla(0,0%,0%,0.60);
  */
}

.mv-heading p.txt {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

/*
.mv01 .page-heading h1::after { content: "暮らしのシン･デザイン"; }
.mv02 .page-heading h1::after { content: "環境のシン･デザイン"; }
.mv03 .page-heading h1::after { content: "安全のシン･デザイン"; }
*/

/* ========== ▲ Modified 20230427, 20240502 ▲ ========== */

/* トピックス
--------------------------- */
#dmp {
  position: relative;
  display: inherit;
  padding: 180px 0 0;
  margin: 0 0 130px;
}
#dmp h2 {
  font-size: 38px;
  font-size: 3.8rem;
  font-weight: 400;
  color: #000000;
  text-align: left;
  text-shadow: none;
  padding: 0;
  margin: 0 0 20px;
  line-height: 1.5;
}
.bnr_dmp { 
  width: 288px;
  height: auto;
  margin: 0;
}
.bnr_dmp:last-child { margin-right: 0; }
.bnr_dmp p {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  text-align: center;
}
.bnr_dmp p img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.bnr_dmp p em {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 20px;
  text-align: center;
  line-height: 20px;
  display: block;
  font-size: 9px;
  color: #ffffff;
  background-color: #333333;
  padding: 0 1em;
}
.bnr_dmp:last-child p em { background: rgba(0,0,0,0.8); }
.bnr_dmp p a {
  position: static;
  display: block;
}
.bnr_dmp p a img {
  transition: all 0.25s linear;
  -webkit-transition: all 0.25s linear;
}
.bnr_dmp p a:hover img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
.bnr_dmp span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 33px;
  display: block;
}
.bnr_dmp span img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.bnr_dmp:first-child span { background: rgba(223,219,191,0.5); }
.bnr_dmp:nth-child(2) span { background: rgba(0,110,186,0.5); }
.bnr_dmp:nth-child(3) span { background: rgba(0,186,205,0.5); }
.bnr_dmp:last-child span { background: rgba(0,0,0,0.5); }
.bnr_dmp dl { text-align: left; }
.bnr_dmp dl dt {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: normal;
  margin: 1em 0 0.5em;
  color: #000000;
}
.bnr_dmp dt a {
  color: #000000;
  line-height: 1.2em;
}
.bnr_dmp dl dt a:hover {
  text-decoration: underline;
  text-decoration-color: #9a9a9a;
}
.bnr_dmp dl dd {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #313131;
}
.bnr_dmp dl dd a:hover { color: #555555; }

/* -----------------------------
  Section
----------------------------- */
section.block {
  position: relative;
  width: 100%;
  min-width: 1200px;
  padding: 80px 0 130px calc((100% - 1200px) / 2);
}

.inner {
  width: 1200px;
  margin: 0 auto !important;
}
.contents-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.df {
  display: flex;
  align-items: flex-start;
}

.sec-heading {
  position: relative;
  min-width: 390px;
  height: 475px;
  padding: 0 90px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.sec-heading h2 {
  font-size: 38px;
  font-size: 3.8rem;
  font-weight: 400;
  color: #167cba;
  line-height: 1.3;
  white-space: nowrap;
  text-shadow: none;
  margin: 0 0 45px;
}
.sec-heading dl dt {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  margin: 0 0 20px;
}
.sec-heading dl dd {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.666666;
}
.sec-link {
  position: relative;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  text-align: center;
  display: block;
  width: 100%;
  height: 80px;
  line-height: 80px;
  background-color: #f0f0f0;
  margin: 65px 0 0;
  transition: 0.2s ease;
}
.sec-link:hover {
  background-color: #ffffff;
  text-decoration: none;
}
.sec-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(221,235,244);
  background: -moz-linear-gradient(left,  rgba(221,235,244,1) 0%, rgba(167,213,242,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(221,235,244,1) 0%,rgba(167,213,242,1) 100%);
  background: linear-gradient(to right,  rgba(221,235,244,1) 0%,rgba(167,213,242,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddebf4', endColorstr='#a7d5f2',GradientType=1 );
  text-decoration: none;
  transition: transform .6s cubic-bezier(0.8,0,0.2,1) 0s;
  transform: scale(0,1);
  transform-origin: right top;
}
.sec-link:hover::before {
  transform: scale(1,1);
  transform-origin: left top;
}
.sec-link span {
  position: relative;
  z-index: 2;
}
.sec-link.sp { display: none !important; }

/* Section - Slider
--------------------------- */
.sec-slider h3 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 25px 0 0;
}
.sec-slider h3 p.newplan{
  color: #c00;
}
.sec-slider h3 a:hover {
  text-decoration: underline;
  text-decoration-color: #9a9a9a;
}
.sec-slider p {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.5;
  margin: 15px 0 0;
}
.sec-slider p a:hover {
  color: #555555;
  text-decoration: none;
}

/* For bxSlider */
.sec-slider-unit { overflow: hidden; }
/*
.sec-slider {
  position: relative;
  overflow: visible !important;
}
.sec-slider li { width: 360px; }
.sec-slider li h3 a { text-decoration-color: #9a9a9a; }
.sec-slider li p a:hover { text-decoration: none; }
.sec-slider li img {
  width: 100%;
  height: auto;
}
*/

/* For Slick Slider */
.dmp-slider,
.useful-slider {
  display: none;
}
.dmp-slider.slick-initialized,
.useful-slider.slick-initialized{
  display: block;
}

.slick-slider {
  margin: 0;
  padding: 0 0 calc(58px + 10px);
}
.slick-list { overflow: visible; }
.dmp-slider .slick-slide,
.useful-slider .slick-slide {
  width: 288px;
  margin: 0 15px 0 0;
}
.sec-slider .slick-slide {
  width: 360px;
  margin: 0 20px 0 0;
}

.dmp-slider .slick-slide img,
.sec-slider .slick-slide img,
.useful-slider .slick-slide img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
}

.dmp-slider, .useful-slider { margin: 0 0 0 15px; }
.dmp-slider, .useful-slider {
  max-width: 1200px;
  margin: 0 auto;
}

/* Introduction
--------------------------- */
#intro { margin: 0 0 120px; }
#intro h2 {
  font-size: 68px;
  font-size: 6.8rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-shadow: none;
  color: #000000;
  padding: 0;
  line-height: 1.5;
}
#intro p.lead {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.666666;
  letter-spacing: 0.05em;
}

/* Shin Design */
.shin-design {
  position: relative;
  margin: 90px 0 0 !important;
  padding: 60px 0 0;
}
.shin-design::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 100px;
  left: 0;
  width: 100%;
  height: 0;
  padding: 0 0 calc(111 / 1497 * 100%);

  /*
  background-color: #f0f0f0;
  */
  background-image: url(../images/wave_a.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.shin-design::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -7.5%;
  left: 0;
  width: 100%;
  height: 0;
  padding: 0 0 calc(52 / 1497 * 100%);
  /*
  background-color: #f0f0f0;
  */
  background-image: url(../images/wave_b.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.sd-explanation {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 300;
  line-height: 1.666666;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 50px
}
.shin-design h3 {
  font-size: 40px !important;
  font-size: 4.0rem !important;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 100px !important;
}
.sd-unit {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.sd-item { width: calc((100% - 120px) / 3); }
.sd-item dl dt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-heading {
  position: absolute;
  width: 194px;
  height: 167px;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-heading h4 {
  font-size: 30px;
  font-size: 3.0rem;
  line-height: 1.6;
  color: #ffffff;
  text-align: center;
}
.sd-heading h4 span { font-size: 1.26666666em; }
.sd-heading h4 small {
  font-size: 0.666666em;
  display: block;
}
.sd-item dl dt img {
  width: 360px;
  height: 494px;
  object-fit: cover;
}
.sd-item dl dd {
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.5;
  margin: 5px 0 0;
}
.sd-item ul {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 40px 0 0;
}
.sd-item ul li { width: calc((100% - 30px) / 2); }
.sd-item ul li a:hover {
  color: #555555;
  text-decoration: none;
}
.sd-item ul li img {
  width: 100%;
  height: auto;
}
.sd-item ul li p {
  font-size: 20px;
  font-size: 2.0rem;
  line-height: 1.5;
  text-align: center;
}

/* 商品ラインアップ
--------------------------- */
#lineup { position: relative; }
#lineup .sec-heading h2 {
  position: relative;
  margin: 0 0 80px;
}
#lineup .sec-heading h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 60px;
  left: -150px;
  width: 453px;
  height: 48px;
  background: url(../images/wave_c.png) no-repeat 50% 50%;
  background-size: cover;
}
#lineup > figure.pc {
  position: absolute;
  left: calc((100% - 1200px) / 2);
  bottom: 20px;
  margin: 0 0 0 -100px;
}
@media screen and (max-width:1200px) {
  #lineup > figure.pc {
    left: 0;
    bottom: 50px;
    margin: 0;
    transform: scale(0.9);
    transform-origin: center left;
  }
}

/* インテリア
--------------------------- */
#interior .sec-heading h2 {
  position: relative;
  margin: 0 0 80px;
}
#interior .sec-heading h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 60px;
  left: -150px;
  width: 453px;
  height: 48px;
  background: url(../images/wave_c.png) no-repeat 50% 50%;
  background-size: cover;
}

/* テクノロジー
--------------------------- */
#tech { position: relative; }
#tech > figure.pc {
  position: absolute;
  left: calc((100% - 1200px) / 2);
  bottom: 0;
  margin: 0 0 0 -145px;
}
@media screen and (max-width:1200px) {
  #tech > figure.pc {
    left: 0;
    bottom: -10px;
    margin: 0;
    transform: scale(0.9);
    transform-origin: center left;
  }
}

/* 資金計画
--------------------------- */
#shikin { position: relative; }
#shikin > figure.pc {
  position: absolute;
  left: calc((100% - 1200px) / 2);
  bottom: 0;
  margin: 0 0 0 -100px;
}

/* ライフスタイル
--------------------------- */
#lifestyle { position: relative; }
#lifestyle > figure.pc {
  position: absolute;
  left: calc((100% - 1200px) / 2);
  bottom: 0;
  margin: 0 0 0 -100px;
}

/* Designers Gallery
--------------------------- */
#designers {
  position: relative;
  background-color: #2d2d2d;
}
#designers .sec-heading h2 { color: #ffffff; }
#designers .sec-heading dl dt,
#designers .sec-heading dl dd { color: #a1a1a1; }
#designers .sec-link {
  color: #ffffff;
  background-color: #484848;
}
#designers .sec-link:hover {
  color: #484848;
}
#designers .sec-slider h3, #designers .sec-slider h3 a { color: #a1a1a1; }

/* お近くのミサワホーム
--------------------------- */
#nearby {
  position: relative;
  background-color: #dbd4d8;
  padding: 0 0 170px;
}
#nearby p img {
  width: 100%;
  height: auto;
}
#nearby .contents-area .inner {
  position: relative;
  height: 100%;
}
.nearby-heading {
  position: relative;
  top: calc(185 / 1500 * 100%);
}
.nearby-heading h2 {
  font-size: 38px;
  font-size: 3.8rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: none;
  margin: 0 0 30px;
}
.nearby-heading h3 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: none;
  margin: 0 0 20px;
}
.nearby-heading p {
  font-size: 14px;
  font-size: 1.4rem;
  color: #ffffff;
  line-height: 1.6666666;
  letter-spacing: 0.05em;
}

/* Clickable Map */
.map-unit {
  position: absolute;
  top: calc(80 / 1500 * 100%);
  right: 125px;
}
.map_japan {
  width: 100%;
  height: auto;
}
.map-attention {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.0;
  color: #ffffff;
  background: rgba(22,124,186,0.8);
  display: block;
  padding: 1em;
  white-space: nowrap;
  cursor: pointer;
}
#map_japan {
  width: 681px;
  height: 383px;
}
.area-map { cursor: pointer; }

/* For SVG - Not Use */
#map_japan .path_bg { fill: #ffffff; }
#map_japan a img { position: absolute; }
#map_japan a:hover .path_bg { fill: #155fa9; }

@media screen and (min-width:1921px) {
  .map-unit {
    transform: scale(1.2);
    transform-origin: right top;
  }
}

.pref-list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: auto;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 35px 25px 25px;
  box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
  display: none;
}
.pref-list h4 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  text-align: center;
  margin: 0 0 15px;
}
.pref-list ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.pref-list ul li {
  width: 150px;
  height: 42px;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 42px;
  margin: 0 0 10px;
}
.pref-list ul li:nth-of-type(odd) { margin: 0 10px 10px 0; }
.pref-list ul li a {
  display: block;
  border-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
  transition: all 0.3s;
}
.pref-list ul li a.is-current {
  color: #167cba;
  border-color: #167cba;
}
.pref-list ul li a:hover {
  text-decoration: none;
  color: #167cba;
  border-color: #167cba;
}
.close {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 5px;
  font-size: 3em;
  font-weight: 300;
  color: #a1a1a1;
  display: inline-block;
  cursor: pointer;
}

/* 住まいのご相談
--------------------------- */
#consultation {
  position: relative;
  top: -15px;
  margin: 0 0 -15px;
  /*
  background-color: #dbd4d8;
  padding: 0 0 170px;
  */
}
#consultation h2 {
  font-size: 38px;
  font-size: 3.8rem;
  font-weight: 400;
  color: #000000 !important;
  line-height: 1.3;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: none;
}
#consultation ul {
  margin: 40px 0 0;
  justify-content: space-between;
}
#consultation ul li { width: calc((100% - 40px) / 2); }
#consultation ul li img {
  width: 100%;
  height: auto;
}
#consultation ul li span {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 400;
  display: inline-block;
  margin: 0 0 15px;
}
#consultation ul li a {
  display: block;
  background-color: #ffffff;
}
#consultation ul li.sp { display: none !important; }

/* お役立ち情報
--------------------------- */
#useful {
  position: relative;
  margin: 115px 0 125px;
}
#useful .inner { padding: 0 0 55px; }
#useful h2 {
  font-size: 38px;
  font-size: 3.8rem;
  font-weight: 400;
  color: #167cba;
  line-height: 1.3;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: none;
}
#useful h2 span {
  font-size: 14px;
  font-size: 1.4rem;
  color: #000000;
  padding: 0;
  margin: 0 0 0 20px;
  vertical-align: bottom;
  background: none;
}
.bnr_useful {
  width: 288px;
  height: auto;
  margin: 0;
}
.bnr_useful h3 {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: normal;
  margin: 1em 0 0.5em;
}
.bnr_useful h3 a:hover {
  text-decoration: underline;
  text-decoration-color: #9a9a9a;
}
.bnr_useful p {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
}
.bnr_useful p a:hover {
  color: #555555;
  text-decoration: none;
}
.useful-slider {  /*margin: 0 0 0 calc((100% - 288px) / 2);*/ }


/* トレンドワード
--------------------------- */
#trend {
  position: relative;
  margin: 100px 0;
}
#trend h2 {
  font-size: 3.6rem;
  font-weight: 400;
  color: #000 !important;
  line-height: 1.3;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: none;
  margin-bottom: 35px;
}
#trend ul {
  margin: 0;
  font-size: 0;;
}
#trend li {
  display: inline-block;
  border-left: solid 1px #000000;
 	border-right: solid 1px #000000;
  padding: 0 0.5em;
  margin: 0 0 1em -1px;
  font-size: 1.3rem;
  font-weight: 400;
}
#trend li a:hover {
  color: #555;
}

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

  DIRECTION CONTROLS (NEXT / PREV) Overwrite

---------------------------------- */
.bx-wrapper .bx-prev {
  right: calc(10px + 27px);
  background: url(../images/prev_r.png) no-repeat 50% 50%;
  background-size: cover;
  transition: all 0.3s;
}

.bx-wrapper .bx-next {
  right: 10px;
  background: url(../images/next_r.png) no-repeat 50% 50%;
  background-size: cover;
  transition: all 0.3s;
}

.bx-wrapper .bx-prev:hover { background-position: 50% 50%; }
/*
.bx-wrapper .bx-next:hover {
  background-position: 50% 50%;
  opacity: 1;
}
*/

.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 37.5%;
  margin-top: 0;
  width: 27px;
  height: 54px;
  text-indent: -9999px;
  z-index: 9999;
}
#dmp .bx-wrapper .bx-controls-direction a {
  top: 62.5%;
  width: calc(27px * 0.8);
  height: calc(54px * 0.8);
}
#dmp .bx-wrapper .bx-prev,
#useful .bx-wrapper .bx-prev {
  right: calc((10px + 27px) * 0.8);
}
#useful .bx-wrapper .bx-controls-direction a {
  top: 45%;
  width: calc(27px * 0.8);
  height: calc(54px * 0.8);
}

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

  "slick-theme.css" Overwrite

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

/* Arrows
---------------------------------- */
.slick-prev, .slick-next {
  z-index: 2;
  top: 99%;
  transform: translate(0, -99%);
  width: 58px;
  height: 58px;
}
.slick-prev { left: 0; }
.slick-next { right: 0; }
/*
.slick-next.slick-disabled { right: 20px; }
*/
.slick-prev:before,
.slick-next:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  width: 58px;
  height: 11px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 1;
  display: block;
}
.slick-prev:before { background-image: url(../images/prev.png); }
.slick-next:before { background-image: url(../images/next.png); }
/*
.slick-next.slick-disabled::before {
  width: 58px;
  height: 29px;
  background-image: url(../images/prev2.png);
  opacity: 1;
}
*/
.slick-prev.slick-disabled,
.slick-next.slick-disabled,
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before { pointer-events: none; }

.sec-slider .slick-prev { left: 0; }
.sec-slider .slick-next { right: 20px; }

.dmp-slider .slick-prev, .useful-slider .slick-prev { left: 20px; }
.dmp-slider .slick-next, .useful-slider .slick-next { right: 20px; }


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

  Effect Styles

---------------------------------- */
.fadeIn {
  opacity: 0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transition: all 1.0s;
  -webkit-transition: all 1.0s;
}
.fadeInLeft {
  opacity: 0;
  transform: translate(19px, 0);
  -webkit-transform: translate(19px, 0);
  transition: all .2s;
  -webkit-transition: all .2s;
}
.fadeInUp {
  opacity: 0;
  transform: translate(0, 50px);
  -webkit-transform: translate(0, 50px);
  transition: all 1.0s;
  -webkit-transition: all 1.0s;
}

@media screen and (max-width:480px) {
  /*
  .fadeInUp {
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }
  */
}

.fadeIn.scrollIn {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}
.fadeInLeft.scrollIn {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}
.fadeInUp.scrollIn {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}
.delay01 {
  transition-delay: .3s;
  -webkit-transition-delay: .3s;
}
.delay02 {
  transition-delay: .6s;
  -webkit-transition-delay: .6s;
}
.delay03 {
  transition-delay: .9s;
  -webkit-transition-delay: .9s;
}
.delay04 {
  transition-delay: 1.2s;
  -webkit-transition-delay: 1.2s;
}
.delay05 {
  transition-delay: 1.5s;
  -webkit-transition-delay: 1.5s;
}

/*
.delay001 {
  transition-delay: .3s;
  -webkit-transition-delay: .3s;
}
.delay002 {
  transition-delay: .6s;
  -webkit-transition-delay: .6s;
}
.delay003 {
  transition-delay: .9s;
  -webkit-transition-delay: .9s;
}
.delay004 {
  transition-delay: 1.2s;
  -webkit-transition-delay: 1.2s;
}
.delay005 {
  transition-delay: 1.5s;
  -webkit-transition-delay: 1.5s;
}
.delay006 {
  transition-delay: 1.8s;
  -webkit-transition-delay: 1.8s;
}
*/



@media screen and (max-width:750px) {
.delay001 {
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}
.delay002 {
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}
.delay003 {
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}
.delay004 {
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}
.delay005 {
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}
.delay006 {
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}
}



@media screen and (max-width:480px) {
  .delay01 {
    transition-delay: .3s;
    -webkit-transition-delay: .3s;
  }
  .delay02 {
    transition-delay: .6s;
    -webkit-transition-delay: .6s;
  }
  .delay03 {
    transition-delay: .15s;
    -webkit-transition-delay: .15s;
  }
  .delay04 {
    transition-delay: .45s;
    -webkit-transition-delay: .45s;
  }
  .delay05 {
    transition-delay: .75s;
    -webkit-transition-delay: .75s;
  }
}



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

  Annimation Styles

---------------------------------- */
@keyframes fadeInAll {
  0% {
     opacity: 0
  }
  100% {
     opacity: 1
  }
}
@keyframes parallax {
  0% {
    transform: scale(1.15) translate3d(0, -30px, 0);
  }

  100% {
    transform: scale(1.15) translate3d(0, 0, 0);
  }
}
@keyframes parallax2 {
  0% {
    transform: scale(1.15) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.15) translate3d(0, -30px, 0);
  }
}
@keyframes moveUp {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, 30px, 0);
  }
}
@keyframes moveDown {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, -30px, 0);
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(1.0);
  }

  100% {
    transform: scale(1.15);
  }
}