@charset "utf-8";

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

  Kodate Top SP Style

================================== */
body { min-width: 100%; }
a img {
  -webkit-transition: unset;
  -moz-transition: unset;
  -ms-transition: unset;
  transition: unset;
}
a:hover { text-decoration: none; }
a:hover img {
  opacity: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
}
.sp { display: inherit; }
.pc { display: none; }

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

  Style From "v2_kodate_top.css"

---------------------------------- */
.wrap { width: 100%; }

/* パンくず */
#bread ul {
  top: 60px;
  left: 20px;
}

/* SP Menu
----------------------------- */
#spmanu {
  margin: 0 0 20px !important;
  background: #cccccc;
  display: none !important;
}
#spmanu li a { border-top: 1px solid #ffffff; }
#spmanu li:nth-of-type(1) a, #spmanu li:nth-of-type(2) a { border-top: none; }
#spmanu li:nth-of-type(2n) a { border-left: none; }

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

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

-------------------------------------------------------------- */
#foot_info { display: none; }

#footer_area {
  padding: 0;
  background-color: #eeeeee;
}
#footer_area #btn_top {
  position: static;
  display: block;
  width: 100%;
  height: 48px;
  padding: 10px 0;
  background-color: #eeeeee;
}
#footer_area #btn_top a {
  position: fixed;
  bottom: 15px;
  right: 0;
  left: inherit;
  float: right;
  display: none;
  margin-right: 15px;
}
#footer_area #btn_top a img {
  width: 45px;
  height: 45px;
}
#footer_area #footer_menu { width: 100%; }
#footer_area #footer_copyright {
  width: auto !important;
  background-color: #ededed !important;
  color: #333333 !important;
  padding: 15px 0;
  text-align: center;
}
#footer_menu { display: none; }
#footer_area #lnk_opt_sp {
  display: block;
  height: 46px;
}
#footer_area #lnk_opt_sp ul {
  position: fixed;
  z-index: 100;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 46px;
  padding: 10px 0;
  background: url(../image/spnavi_bg.png) repeat 0 0 #000;
  background-size: 24px 24px;
  text-align: center;
}
#footer_area #lnk_opt_sp li {
  display: inline-block;
  margin: 0 3px;
}
#footer_area #lnk_opt_sp a.hbtn_eh,
#footer_area #lnk_opt_sp a.hbtn_ct,
#footer_area #lnk_opt_sp a.hbtn_so,
#footer_area #lnk_opt_sp a.hbtn_cl {
  display: block;
  width: 95px;
  height: 26px;
  text-indent: -9999px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: auto 26px;
}
#footer_area #lnk_opt_sp a.hbtn_eh { background-image: url(../image/hbtn_eh_sp.png); }
#footer_area #lnk_opt_sp a.hbtn_ct { background-image: url(../image/hbtn_ct_sp.png); }
#footer_area #lnk_opt_sp a.hbtn_so { background-image: url(../image/hbtn_so_sp.png); }
#footer_area #lnk_opt_sp a.hbtn_cl { background-image: url(../image/hbtn_cl_sp.png); }

/* -----------------------------
  Main
----------------------------- */
.main:first-child{ padding: 0 !important; }

/* Main Visual - Slider
----------------------------- */
.main-visual { top: 0; }

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

.main-visual h1.kodate_top {
  font-size: calc(22 / 750 * 100vw);
  padding: 0.25em 1.25em;
  /* top: 90px; /* Modified 202405 */
  left: 20px;
}
.mv01, .mv02, .mv03 { height: auto; /* Modified 20240530 */ }
.main-visual figure {
  height: auto; /* Modified 202405 */
  aspect-ratio: 1 / 1; /* Modified 202405 */
  /*
  padding: 0 0 calc(1000 / 750 * 100%);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  */
}
.mv02 figure img { top: 0; } /* Modified 202405 */

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

.mv03 figure img { height: auto; }

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

/* Page Heading */
.mv-heading {
  /* top: 90px; */
  bottom: initial;
  left: 20px;
}
/*
.mv-heading span {
  font-size: calc(22 / 750 * 100vw);
  padding-left: 8rem;
}
*/
.mv-heading p.ttl {
  font-size: calc(28 / 750 * 100vw);
  line-height: 1.666666;
  padding-left: 21vw;
}
/*
h1::before {
  top: -2.5em;
  font-size: calc(20 / 750 * 100vw);
  padding: 0.25em 1.25em;
}
*/

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

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

/* トピックス
--------------------------- */
#dmp {
  width: 100%;
  padding: calc(60 / 750 * 100%) 0 0 calc(40 / 750 * 100%);
  margin: 0 0 calc(160 / 750 * 100%);
}
#dmp h2 {
  font-size: calc(34 / 750 * 100vw);
  margin: 0 0 20px;
}
/*
.dmp-slider {
  margin: 0 0 0 calc((100% - 288px) / 2);
}
*/
.bnr_dmp p a:hover img {
  transform: scale(1);
  -webkit-transform: scale(1);
}
.bnr_dmp dl dt {
  font-size: calc((24 * 1.42857143) / 750 * 100vw);
  margin: 0.75em 0 0.5em;
}
.bnr_dmp dl dd {
  font-size: calc(24 / 750 * 100vw);
}

/* -----------------------------
  Section
----------------------------- */
section.block {
  width: 100%;
  min-width: 100%;
  padding: 0 0 calc(150 / 750 * 100%);
}
section.block.df { flex-direction: column; }

.inner { width: calc(670 / 750 * 100%); }

.sec-heading {
  max-width: 100%;
  height: auto;
  padding: 0 5.33333335%;
  margin: 0 0 calc(30 / 750 * 100%);
}
.sec-heading h2 {
  font-size: calc(48 / 750 * 100vw);
  margin: 0 0 calc(30 / 750 * 100%);
}
.sec-heading dl dt {
  font-size: calc(30 / 750 * 100vw);
  margin: 0 0 calc(20 / 750 * 100%);
}
.sec-heading dl dd { font-size: calc(26 / 750 * 100vw); }

.sec-link:hover { background-color: #f0f0f0; }
.sec-link::before { content: none; }

.sec-link.sp {
  width: calc(100% - (5.33333335% * 2));
  display: block !important;
  margin: calc(60 / 750 * 100%) auto 0;
  background-color: #ffffff;
  border: solid 1px #e0e0e0;
  font-size: calc(30 / 750 * 100vw);
  height: auto;
  line-height: initial;
  padding: 1em 0;
}
.sec-link.sp span {
  position: relative;
  z-index: 2;
}

/* Section - Slider
--------------------------- */
.sec-slider-unit h3 {
  font-size: calc(30 / 750 * 100vw);
  margin: 10px 0 0;
}
.sec-slider-unit p {
  font-size: calc(26 / 750 * 100vw);
  margin: 5px 0 0;
}

/* For bxSlider */
/*
.slider-viewport { width: 100% !important; }
.sec-slider li {
  width: 82.5vw !important;
  margin: 0 15px 0 0;
}

@media screen and (max-width:320px) {
  .sec-slider li {
    width: 82.5vw !important;
    margin: 0 0 0 15px;
  }
}
*/

/* For Slick Slider */
.slick-slider { padding: 0; }
.sec-slider-unit {
  width: 100%;
  overflow: visible;
  padding: 0 0 0 5.333333vw;
}
.sec-slider .slick-slide {
  width: 82.5vw;
  margin: 0 20px 0 0;
}

@media screen and (max-width:375px) {
  .sec-slider .slick-slide {
    margin: 0 20px 0 0;
  }
}

/* Introduction
--------------------------- */
#intro { margin: 0 0 calc(130 / 750 * 100%); }
#intro h2 { font-size: calc(72 / 750 * 100vw); }
#intro p.lead { font-size: calc(26 / 750 * 100vw); }

/* Shin Design */
.shin-design {
  position: relative;
  margin: calc(120 / 750 * 100%) 0 0 !important;
  padding: 0;
}
.shin-design .inner { width: 100%; }
.shin-design::before {
  top: 7%;
  padding: 0 0 calc(103 / 750 * 100%);
  background-image: url(../images/wave_a_sp.png);
}
.shin-design::after {
  bottom: 0;
  padding: 0 0 calc(46 / 750 * 100%);
  background-image: url(../images/wave_b_sp.png);
}
.shin-design h3.pc + div {
  width: calc(100% - (90 / 750 * 100%));
  margin: 0 0 0 calc(90 / 750 * 100%);
  padding: calc(80 / 750 * 100%) calc(40 / 750 * 100%) calc(60 / 750 * 100%) calc(75 / 750 * 100%);
  /*
  background-color: #f0f0f0;
  */
}
.shin-design h3.pc + div h3 {
  font-size: calc(60 / 750 * 100vw) !important;
  text-align: left;
  padding: 0;
  margin: 0 0 calc(100 / 750 * 100%) !important;
  line-height: 1.2;
}
.shin-design h3.pc + div .sd-explanation {
  font-size: calc(26 / 750 * 100vw);
  text-align: left;
  margin: 0;
  padding: 0;
  white-space: normal;
}
.sd-unit { flex-direction: column; }
.sd-item {
  width: 100%;
  margin: 0 0 calc(80 / 750 * 100%);
}
.sd-item dl dt p.sp {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(250 / 750 * 100%);
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 65%,rgba(255,255,255,1) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 65%,rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
.sd-heading {
  z-index: 2;
  width: auto;
  height: auto;
  padding: 2em 1.5em;
}
.sd-heading h4 {
  font-size: calc(37.5 / 750 * 100vw);
}
.sd-heading h4.sp {
  display: none;
  /*
  font-size: calc(48 / 750 * 100vw);
  line-height: 1.6;
  color: #ffffff;
  letter-spacing: 0.05em;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  */
}
/*
.sd-heading h4 small {
  font-size: 0.5em;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  letter-spacing: 0.15em;
}
*/
.sd-item dl dt img {
  width: 100%;
  height: auto;
  object-fit: initial;
}
.sd-item dl dd {
  font-size: calc(26 / 750 * 100vw);
  margin: calc(40 / 750 * 100%) 0 0;
}
.sd-item ul {
  padding: ;
  margin: 15px 5.33333335% 0;
  padding: 0 5.33333335%;
}
.sd-item ul li p {
  font-size: calc(30 / 750 * 100vw);
  line-height: 1.2;
  margin: 10px 0 0;
}

/* 商品ラインナップ
--------------------------- */
#lineup {
  padding: 0 0 calc(340 / 750 * 100%);
  margin: 0 0 calc(35 / 750 * 100%);
}
#lineup .sec-heading h2::before {
  top: 50px;
  left: -10%;
  width: calc(453 / 750 * 100vw);
}
#lineup figure.sp {
  position: absolute;
  right: 4%;
  bottom: -1.5%;
  width: 100%;
  height: auto;
  transform: scale(0.56);
  transform-origin: center right;
}
@media screen and (max-width:414px) {
  #lineup figure.sp { bottom: -7.5%; }
}

/* 建築実例
--------------------------- */

/* インテリア
--------------------------- */
#interior .sec-heading h2::before {
  top: 50px;
  left: -10%;
  width: calc(453 / 750 * 100vw);
}

/* テクノロジー
--------------------------- */
#tech {
  padding: 0 0 calc(345 / 750 * 100%);
  margin: 0 0 calc(25 / 750 * 100%);
}
#tech figure.sp {
  position: absolute;
  right: -4%;
  bottom: -1.75%;
  width: 100%;
  height: auto;
  transform: scale(0.6);
  transform-origin: center right;
}
@media screen and (max-width:414px) {
  #tech figure.sp { bottom: -6.5%; }
}

/* Designers Gallery
--------------------------- */
#designers { padding: calc(90 / 750 * 100%) 0 calc(120 / 750 * 100%); }
#designers .sec-link { background: none; }

/* お近くのミサワホーム
--------------------------- */
#nearby {
  background-color: #dbd4d8;
  padding: 0 0 calc(110 / 750 * 100%);
}
.nearby-heading {
  top: calc(55 / 750 * 100%);
}
.nearby-heading h2 {
  font-size: calc(48 / 750 * 100vw);
  margin: 0 0 20px;
}
.nearby-heading h3 {
  font-size: calc(26 / 750 * 100vw);
  margin: 0 0 10px;
}
.nearby-heading p { font-size: calc(26 / 750 * 100vw); }

/* Clickable Map */
.map-unit {
  position: relative;
  top: 2.5%;
  right: 0;
}
.map-attention {
  font-size: calc(22 / 750 * 100vw);
  top: 45%;
  transform: translate(-50%, -45%);
}
#map_japan {
  transform: scale(0.65);
  transform-origin: -5% 0;
}
.pref-list {
  top: 70%;
  left: initial;
  right: 0;
  transform: translate(0, -70%);
}
@media screen and (max-width:414px) {
  .map-attention {
    top: 30%;
    transform: translate(-50%, -30%);
  }
  #map_japan {
    transform: scale(0.575);
    transform-origin: -5% 0;
  }
  .pref-list {
    top: 50%;
    transform: scale(0.9) translate(0, -50%);
    transform-origin: top right;
  }
}
@media screen and (max-width:375px) {
  .map-attention {
    top: 30%;
    transform: translate(-50%, -30%);
  }
  #map_japan {
    transform: scale(0.525);
    transform-origin: -5% 0;
  }
  .pref-list {
    top: 35%;
    transform: scale(0.8) translate(0, -35%);
  }
}
@media screen and (max-width:320px) {
  #map_japan {
    transform: scale(0.45);
    transform-origin: -4.5% 0;
  }
  .pref-list {
    top: 25%;
    transform: scale(0.7) translate(0, -25%);
  }
}

/* 住まいのご相談
--------------------------- */
#consultation {
  top: 0;
  margin: 0;
  /*
  padding: 0 0 calc(110 / 750 * 100%);
  */
}
#consultation h2 { font-size: calc(48 / 750 * 100vw); }
#consultation ul {
  margin: calc(40 / 750 * 100%) 0 0;
  flex-direction: column;
}
#consultation ul li { width: 100%; }
#consultation ul li:not(:last-of-type) { margin: 0 0 calc(55 / 750 * 100%); }
#consultation ul li span {
  font-size: calc(30 / 750 * 100vw);
  margin: 0 0 10px;
}
#consultation ul li.pc { display: none !important; }
#consultation ul li.sp { display: block !important; }

/* お役立ち情報
--------------------------- */
#useful {
  margin: calc(125 / 750 * 100%) 0 calc(180 / 750 * 100%);
  padding: 0 0 0 5.333333vw;
}
#useful .inner { padding: 0 0 calc(35 / 750 * 100%); }
#useful h2 { font-size: calc(48 / 750 * 100vw); }
#useful h2 span {
  font-size: calc(24 / 750 * 100vw);
  display: block;
  margin: 4% 0 0;
  white-space: normal;
  line-height: 1.3;
}
.bnr_useful h3 {
  font-size: calc((24 * 1.42857143) / 750 * 100vw);
  margin: 0.75em 0 0.5em;
}
.bnr_useful p { font-size: calc(24 / 750 * 100vw); }

/* トレンドワード
--------------------------- */
#trend h2 {font-size: calc(48 / 750 * 100vw); }
#trend li {font-size: calc(24 / 750 * 100vw);}

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

  DIRECTION CONTROLS (NEXT / PREV) Overwrite

---------------------------------- */
.bx-wrapper .bx-next { opacity: 1; }
#dmp .bx-wrapper .bx-controls-direction a {
  top: 47.5%;
  width: calc(27px * 0.8);
  height: calc(54px * 0.8);
}
#lineup .bx-wrapper .bx-controls-direction a { top: 40%; }
#example .bx-wrapper .bx-controls-direction a { top: 35%; }
#interior .bx-wrapper .bx-controls-direction a { top: 40%; }
#tech .bx-wrapper .bx-controls-direction a { top: 35%; }
#designers .bx-wrapper .bx-controls-direction a { top: 45%; }
#useful .bx-wrapper .bx-controls-direction a { top: 40%; }

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

  "slick-theme.css" Overwrite

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

/* Arrows */
.sec-slider .slick-prev { left: -29px }
.sec-slider .slick-next {
  left: 70vw;
  right: 0;
}
.slick-prev, .slick-next { display: none; }
.slick-prev:before, .slick-next:before { content: none; }