@charset "UTF-8";
/************************* normalize *************************/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
div:last-child,
figure:last-child,
ul:last-child,
dl:last-child,
li:last-child,
p:last-child {
  margin-bottom: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
button,
[type="button"] {
  -webkit-appearance: none; /* iOS/Safari 特有のデフォルトの角丸やシャドウ、ボタンのスタイルを削除 */
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 大文字化などが勝手に行われるのを防ぎ親要素の設定を継承 */
  cursor: pointer;
}
video,
img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/************************* base *************************/
html {
  font-size: 3.125vw;
}
body {
  font-size: 1.4rem;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 2;
  letter-spacing: 0.05em;
}
main,
.site-header {
  overflow: hidden;
}
section {
  padding: 5rem 0;
}
.inner {
  width: calc(100% - 5rem);
  position: relative;
}
.inner,
.fix_nav ul {
  max-width: 90rem;
  margin: 0 auto;
}
section,
footer,
h1,
.view,
.brand_logo {
  overflow: hidden;
}
.flooring,
.water_area {
  /* 画像をはみ出すデザインのセクション */
  overflow: visible;
}

@media screen and (min-width: 768px) {
  html {
    font-size: 1.3vw;
  }
  body {
    font-size: 1.6rem;
  }
  section {
    padding: 12rem 0;
  }
  .inner {
    width: calc(100% - 12rem);
  }
  .fix_nav,
  .sec_top,
  .modal_cnt {
    /* フォントサイズ調整 */
    font-size: 1.3em;
  }
}
@media screen and (min-width: 1024px) {
  html {
    font-size: 10px;
  }
  body {
    font-size: 2.1rem;
  }
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    border-bottom: solid 0.1rem #d8d8d8;
  }
  section {
    padding: 15rem 0;
  }

  .fix_nav,
  .sec_top,
  .modal_cnt {
    /* フォントサイズ調整をトル*/
    font-size: 1em;
  }

  .intro,
  .case {
    display: flex;
    align-items: center;
  }
}

/* fonts */
h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  font-weight: 300;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: 0;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child {
  margin-top: 0;
}
h1,
.h1 {
  font-size: 2em;
  margin-bottom: 1.2em;
}

h2,
.h2 {
  font-size: 1.5em; /* 21/14 */
  margin-bottom: 1.2em; /* 25/21 */
}
.point h2,
.total h2,
.reviews h2,
.contact h2,
.tel_list dd {
  font-size: 1.7em; /* 24/14 */
}
h3,
.h3 {
  font-size: 1.3em; /* 18/14 */
  margin-bottom: 0.6em; /* 15/18 */
}
.contact h3,
.flooring .h_bg,
.water_area .h_bg,
.surprise {
  font-size: 1.15em; /* 16/14 */
}
h4,
.h4 {
  font-size: 1.1em;
  margin-bottom: 0.6em;
}
h5,
.h5 {
  font-size: 1em;
  margin-bottom: 0.6em;
}
p {
  margin-bottom: 1.4em; /* 25/14 */
}
.fs_sml {
  font-size: 0.85em; /* 12/14*/
}
.tags,
.annotation_list li,
.fs_min {
  font-size: 0.72em; /* 10/14 */
}
li {
  line-height: 1.5;
  margin-bottom: 0.7em; /* 15/14 */
}
figcaption {
  display: block;
  text-align: center;
  margin-bottom: 0.4em;
}
.point figcaption {
  /* figcaptionが画像下の場合 */
  margin-bottom: 0;
  margin-top: 0.4em;
}
ul,
dl {
  line-height: 1.5;
}

.h3_cnt,
.contact h3 {
  margin-top: 5rem;
}
.h3_cnt:first-child,
.contact h3:first-child {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .h3_cnt,
  .contact h3 {
    margin-top: 7rem;
  }
}
@media screen and (min-width: 1024px) {
  .h3_cnt,
  .contact h3 {
    margin-top: 10rem;
  }
}
/* block */
.fig_wrap,
figure,
ul,
dl {
  margin-bottom: 1.5rem;
}
.tags {
  margin-bottom: 1.4em;
}
/* bg-color */
.tel_list dt,
.qes .speech_bbl,
.h_bg,
.loading,
.fix_hamburger,
.h_vl::before,
.list li {
  background-color: #e5a136;
}
.water_area,
.contact {
  background-color: #fefaf4;
}
.modal,
.fix_nav,
section,
footer,
.recaptcha-message {
  background-color: #fff;
}
/* colors */
.band,
.tags > span,
.qes .speech_bbl,
.tel_list dt,
.h_bg,
.loading,
.list li {
  color: #fff;
}

/* text-align */
.total h2,
.total h3,
.case h2,
.point h2,
.surprise,
.bdr_copy,
.al_c {
  text-align: center;
}

/************************* modules *************************/
.full {
  position: relative;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  max-width: none;
}
@media screen and (min-width: 768px) {
  .case .full {
    margin: 0 auto;
    width: 100%;
    max-width: 48rem;
  }
}

/* hタグ内の小文字 */
.sub {
  display: block;
  font-size: 0.75em;
  margin-bottom: 0.2em;
}

.case .sub {
  font-size: 0.6em;
  margin-top: 0.4em;
  margin-bottom: 0;
}
/* 帯 */
.band {
  background-color: #36abb5;
  padding: 0.3em;
  margin-bottom: 0.5em;
}
/* アンダーライン */
.border {
  text-decoration: underline;
  text-decoration-color: #e5a136;
  text-decoration-thickness: 2px; /* safariではpx単位が安定する */
  text-underline-offset: 0.45em;
}

/* flex */
.flex {
  display: flex;
  justify-content: space-between;
}
.flex > figure {
  margin: 0;
  width: 48%;
}
/* こめじるしリスト */

.annotation_list li {
  position: relative;
  padding-left: 1.2em;
}
.annotation_list li::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
.ib {
  display: inline-block;
}

/************************* common *************************/
/* fixed */
.modal,
.loading,
.fix_hamburger,
.fix_nav,
.fix_sec {
  position: fixed;
}
.modal,
.loading,
.fix_nav,
.fix_sec {
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

/* active,off */
.loading,
.fix_nav {
  transition: opacity 0.5s 0s ease, z-index 0s 0.5s linear;
  pointer-events: none;
}

.fix_nav.active {
  opacity: 1;
}

.fix_nav {
  opacity: 0;
}
/* 重なり順 */
.loading {
  z-index: -1;
}
.fix_sec {
  z-index: 1;
}
section,
footer,
.recaptcha-message {
  position: relative;
  z-index: 2;
}
.fix_nav,
.fix_hamburger {
  z-index: 3;
}
.modal,
.loading {
  z-index: 4;
}
.section_wrap::after {
  content: "";
  position: relative;
  pointer-events: none;
  display: block;
  width: 100%;
  height: 200vh;
  height: 200svh;
}

/* 疑似要素で画像を配置する要素 */
footer .cnt,
.h_img,
.bfr_fig,
.afr_star h2 {
  position: relative;
}
.nav_close::after,
.hamburger::after,
.fl_cnt::after,
.afr_star h2::after,
.bfr_fig::before,
.h_img::before {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* figure左上画像 */
.bfr_fig::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 18.5%;
  padding-top: 18.5%;
  transform: translate(-30%, -30%);
}
.y10::before {
  background-image: url(../img/bf_year10.png);
}
.y30::before {
  background-image: url(../img/bf_year30.png);
}
.y5::before {
  background-image: url(../img/bf_year5.png);
}
.y3::before {
  background-image: url(../img/bf_year3.png);
}
.y3to5::before {
  width: 21%;
  background-image: url(../img/bf_year3_5.png);
}
/* 星の疑似要素 */
.afr_star {
  text-align: center;
}
.afr_star h2 {
  display: inline-block;
}
.afr_star h2::after {
  position: absolute;
  top: -0.4em;
  right: -1em;
  width: 0.9em;
  height: calc(0.9em * 1.4);
  background-image: url(../img/star.png);
}
/* オレンジのタテ棒のhタグ */
.h_vl {
  padding-left: 0.6em;
  position: relative;
}
.h_vl::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;
  bottom: 0;
  display: block;
  width: 0.25em;
  height: 1em;
}
.h_vl span {
  font-size: 0.7em;
  vertical-align: middle;
}
/* オレンジベタ塗りのhタグ */
.h_bg {
  padding: 0.3em 0.7em;
  text-align: center;
  border-radius: 1.1em;
  margin-bottom: 1.1em;
}
/* オレンジ背景のリスト */
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list li {
  font-size: 0.75em;
  margin: 1.4em 0 0 0;
  width: 48%;
  padding: 0.9em;
  display: flex;
  align-items: center;
  text-align: center;
  border-radius: 1em;
  min-height: 4.2em;
  line-height: 1.3;
}
.list li div {
  width: 100%;
}
.list li:nth-of-type(1),
.list li:nth-of-type(2) {
  margin-top: 0;
}
.list sup {
  margin-right: -1em;
}
@media screen and (min-width: 768px) {
  .list li {
    width: 23.5%;
  }
  .list li:nth-of-type(3),
  .list li:nth-of-type(4) {
    margin-top: 0;
  }
}
/* 下線を持つコピーテキスト */
.bdr_copy {
  line-height: 1.5;
  margin-bottom: 1.85em;
}
/* オレンジ色のコピーテキスト */
.copy {
  color: #e5a136;
  font-size: 0.9em;
  letter-spacing: 0;
  line-height: 1.3;
  margin-bottom: 1.1em;
}
/* タグデザイン */
.tags > span {
  display: inline-block;
  background-color: #908b89;
  padding: 0 0.3em;
  text-align: center;
  letter-spacing: 0;
  margin-left: 0.5em;
}
.tags > span:first-child {
  margin-left: 0;
}

/* 背景白の箱要素 */
.white_box {
  background-color: #fff;
  padding: 2rem;
}
.flex .wb_cnt {
  width: 48%;
}
.white_box h4 {
  line-height: 1;
  height: 0.8em;
}
.white_box h4 div {
  height: 100%;
}
.white_box h4 img {
  display: block;
  height: 100%;
  width: auto;
  margin: 0 auto;
}

.white_box p {
  margin-bottom: 1em;
}
.white_box p:last-child {
  margin-bottom: 0;
}
.point .white_box {
  border-radius: 1.5rem;
}
.flooring .white_box {
  padding: 1em 0.7em;
  line-height: 1.4;
  letter-spacing: 0;
}

/* 正方形のボタン要素 */
.modal__close-btn,
.fix_hamburger,
.nav_close {
  width: 4.7em; /* 66/14 */
  height: 4.7em;
}
.hamburger::after {
  width: 100%;
  height: 100%;
}
/* 閉じるボタン */
.modal__close-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 4.7em;
  height: 4.7em;
  cursor: pointer;
  z-index: 2;
}
.nav_close::before,
.nav_close::after,
.modal__close-btn::before,
.modal__close-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 60%;
}
.nav_close::before,
.modal__close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav_close::after,
.modal__close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.nav_close::before,
.nav_close::after {
  background-color: #000;
}
.modal__close-btn::before,
.modal__close-btn::after {
  background: #fff;
}
.loading .logo,
footer .logo {
  /* max-widthをモバイル表示のコンテンツエリア（270px）でem指定 */
  max-width: 19.3em;
  margin-left: auto;
  margin-right: auto;
}
/************************* loading *************************/
.loading {
  display: flex;
  align-items: center;
}
.loading .logo,
.loading .indicator {
  margin-bottom: 3rem;
}
.loading .indicato,
.loading .txt {
  line-height: 1;
}
.loading .txt {
  text-align: center;
  letter-spacing: 0;
}
.loading .indicator {
  height: 0.11em; /*320*568の時のsvgの高さをemで指定*/
  width: 11em;
  margin-left: auto;
  margin-right: auto;
  background-color: #ecb969;
}
/************************* header *************************/
/* hamburger */
.fix_hamburger {
  right: 1.5rem;
  bottom: 1.5rem;
  border-radius: 50%;
}
.hamburger {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.hamburger::after {
  background-image: url(../img/hgr_line.png);
  background-size: 54% 43%;
  position: absolute;
  top: 0;
}
/* nav */
.fix_nav.active {
  pointer-events: auto;
}
.fix_nav {
  padding: 4.7em 2.5rem;
}
.nav_close {
  position: absolute;
  top: 0;
  right: 0;
}
.fix_nav ul {
  margin-bottom: 1.4em;
}
.btns > div {
  height: 3.2em;
  border-radius: 0.7em;
  margin: 0 0 1em 0;
}
.btns > div:last-child {
  margin: 0;
}
.btns a {
  color: #fff;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.btns .icon {
  display: block;
  width: 1.5em;
  margin-right: 0.3em;
}
.btns .txt {
  width: 11em;
  text-align: center;
}
.btns > div:nth-of-type(1) {
  background-color: #3eb2e6;
}
.btns > div:nth-of-type(2) {
  background-color: #80bf24;
}
@media screen and (min-width: 768px) {
  .fix_nav {
    padding: 4.7em 6rem;
  }
  .fix_nav ul {
    margin-bottom: 2.8em;
  }
  .btns {
    display: flex;
    justify-content: center;
  }
  .btns > div {
    font-size: 0.9em;
    width: 19em;
    margin: 0 1em 0 0;
  }
}
@media screen and (min-width: 1024px) {
  /* reset */
  .fix_hamburger,
  .nav_close {
    display: none;
  }
  .fix_nav {
    position: relative;
    height: auto;
    opacity: 1;
    transition: none;
    pointer-events: auto;
    padding: 0;
  }

  .site-header {
    background-color: #fff;
  }
  .site-header .inner {
    width: 100%;
    height: 100%;
    max-width: 192rem;
    display: flex;
    align-items: center;
  }
  .site-header .site_logo {
    height: 67%;
    margin-bottom: 0;
  }
  .site-header .site_logo a,
  .site-header .site_logo img {
    display: block;
    height: 100%;
    width: auto;
  }
  .fix_nav {
    display: flex;
    justify-content: flex-end;
  }
  .fix_nav ul {
    margin: 0;
    max-width: none;
    display: flex;
    margin-right: 1.1em;
  }
  .fix_nav li {
    text-align: center;
    margin: 0;
    line-height: 1.15;
    letter-spacing: 0;
    color: #6e6e6e;
  }
  .fix_nav li a {
    display: flex;
    align-items: center;
    padding: 0 1.2em;
    height: 100%;
  }

  .btns > div {
    font-size: 1em; /*フォントサイズ調整をトル*/
    margin: 0;
    border-radius: 0;
  }
  .btns .icon {
    display: block;
    width: 43.5%;
    margin: 0;
  }
  .btns .txt {
    display: none;
  }
}

/************************* モーダル *************************/
.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.3s;

  background-color: rgba(0, 0, 0, 0.7);

  pointer-events: none;
  opacity: 0;
}

.modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
.modal__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* モーダルのコンテンツ */
.modal__content {
  position: relative;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
}
.modal_inner {
  position: relative;
  width: 100%;
}

.modal_cnt {
  color: #fff;
  line-height: 1.3;
  padding: 5rem 2.5rem;
}
.modal_cnt .inner {
  width: 100%;
}

.modal_cnt h2 {
  font-size: 1em;
  margin-bottom: 0.6em;
  letter-spacing: 0.2em;
}
.modal_cnt p,
.modal_cnt figcaption {
  letter-spacing: 0;
}
.modal_cnt .date {
  font-size: 0.7em;
  margin-bottom: 0.9em;
}
.modal_cnt figcaption,
.modal_cnt .desc {
  font-size: 0.85em;
}
.modal_cnt figure {
  position: relative;
  width: 50%;
  height: 0;
  padding-top: 100%;
}
.modal_cnt img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal_cnt figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 1;
  padding: 0.4em;
  background-color: #fff;
  color: #000;
  margin: 0;
}
.swiper {
  overflow: visible; /* 矢印を飛び出して表示するため*/
}
.swiper-button-next,
.swiper-button-prev {
  background-color: rgba(255, 255, 255, 0.3);
  text-align: center;
  display: block;
  height: 4.4rem;
  line-height: 4.4rem;
  width: 2rem;
  margin: 0;

  /* 下から正方形の画像の中心に位置させる */
  top: auto;
  bottom: 18.5rem; /* 正方形の高さの半分 + padding-bottom */
  transform: translateY(50%);
}
.swiper-button-next:after,
.swiper-button-prev:after {
  position: relative;
  display: block;

  font-size: 0.6em;
  color: #fff;
  font-family: inherit;
  font-family: inherit;
  line-height: inherit;
}
.swiper-button-next {
  right: 0;
}
.swiper-button-next:after {
  content: "▶︎";
}
.swiper-button-prev {
  left: 0;
}
.swiper-button-prev:after {
  content: "◀︎";
}
@media screen and (min-width: 768px) {
  .modal_cnt {
    padding: 12rem;
  }
  .swiper-button-next,
  .swiper-button-prev {
    height: 10rem;
    line-height: 10rem;
    width: 10rem;

    bottom: 38.5rem; /* 正方形の高さの半分 + padding-bottom */
  }
}
@media screen and (min-width: 1024px) {
  /* 1280*800を基準 */
  .modal_cnt {
    /* 約120px/800px */
    padding: 15vh;
  }
  .modal__close-btn {
    /* 約66px/800px */
    width: 8.3vh;
    height: 8.3vh;
  }
  .modal__content {
    /* 18px/800px */
    font-size: 2.3vh;
  }
  .modal_cnt .inner {
    /* 405/800px */
    max-width: 50vh;
  }
  .swiper-button-next,
  .swiper-button-prev {
    /* 66/800px */
    height: 8.3vh;
    line-height: 8.3vh;
    width: 8.3vh;
    bottom: 40vh;
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    /* 約12px/800px */
    font-size: 1.5vh;
  }
}

/************************* top *************************/
.sec_top {
  padding: 0;
}
.view {
  padding: 5rem 0;
  height: calc(100vh - 4.7em);
}
.view {
  background-image: url(../img/top_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.view h1 {
  font-size: 1em;
  width: 4.5em;
  margin: 0 auto;
}
.brand_logo {
  height: 4.7em;
}
.brand_logo figure {
  height: 100%;
  padding: 0.7em 0;
}
.brand_logo figure img {
  display: block;
  height: 100%;
  width: auto;
  margin: auto;
}
@media screen and (min-width: 1024px) {
  .view {
    /* 1280*800を基準 */
    /* 50px/800px */
    padding: 6.3vh 0;
    background-image: url(../img/top_bg_pc.jpg);
  }
  .view h1 {
    width: auto;
    /* 1280*800を基準 */
    /* 300px/800px */
    height: 37.5vh;
  }
  .view h1 img {
    display: block;
    height: 100%;
    width: auto;
    margin: 0 auto;
  }
  .brand_logo {
    display: none;
  }
}

/************************* intro *************************/
.intro {
  padding-bottom: 0;
}
.intro p {
  letter-spacing: 0.2em;
  line-height: 2.5;
}
.intro p > span {
  display: inline-block;
}
.intro .afr_star {
  text-align: left;
}
.intro .afr_star h2 {
  width: 10.4em;
  position: relative;
}
.intro .afr_star h2::after {
  top: -0.8em;
  right: -2.3em;
  width: 1.4em;
  height: calc(1.4em * 1.4);
}
@media screen and (min-width: 768px) {
  .intro,
  .intro .afr_star {
    text-align: center;
  }
}
/************************* case *************************/
.case_list {
  display: flex;
  flex-wrap: wrap;
}
.case_list li {
  margin: 0;
  width: 25%;
  cursor: pointer;
}
.case_list figure {
  height: 0;
  padding-top: 100%;
  position: relative;
}
.case_list figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.under_4 li {
  flex: 1 1 25%;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .case_list li:hover {
    opacity: 0.7;
  }
}

/************************ news *************************/
.news {
  height: 100vh;
}
.news h2 {
  margin-bottom: 9.5rem;
}
.news .img_wrap {
  width: 10.2em;
  margin: 0 auto;
}
.news_box {
  text-align: center;
}
.news_box h3,
.news_box li {
  font-size: 0.85em; /* 12/14 */
  margin-bottom: 1.7em;
}
.news_box h3 {
  letter-spacing: 0.2em;
}
.news_box li {
  letter-spacing: 0;
}
.news_box .date::after {
  content: "：";
  display: inline;
}
@media screen and (min-width: 768px) {
  .news {
    display: flex;
    align-items: center;
  }
}
@media screen and (min-width: 1024px) {
  .news {
    font-size: 1.4rem;
    padding: 0;
  }
}
/************************* merit *************************/
.merit {
  min-height: calc(100vh + 5rem); /*次セクションの画像がはみ出している分を足す*/
  display: flex;
  align-items: center;

  border-top: solid 1px #ddd;
}
.merit .inner {
  padding-bottom: 5rem;
}
@media screen and (min-width: 768px) {
  .merit {
    min-height: calc(100vh + 12.5rem);
  }
  .merit .inner {
    max-width: 40.5rem;
  }
}
/************************* flooring, warter_area 共通*************************/
.flooring h3,
.water_area h3 {
  font-size: 1.5em;
}
.part_cnt,
.white_box,
.flow {
  margin-bottom: 1.8em; /* 25/14 */
}
/* 矢印 */
.flow {
  line-height: 1.5;
}
.flow figure {
  margin-bottom: 0.7em;
}
.flow p {
  font-size: 0.8em;
}
.fl_cnt::after {
  height: 4em;
  background-image: url(../img/arrow.png);
  background-size: 1.4em calc(1.4em * 1.15);
}
.fl_cnt:last-child::after {
  display: none;
}
.h2_cnt p {
  text-align: justify;
}
@media screen and (min-width: 768px) {
  .flooring .inner,
  .w_full_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .h3_cnt,
  .part_cnt {
    width: 47.5%;
  }
  .h2_cnt,
  .w_full_flex,
  .w_full_flex .h_wrap,
  .w_full_flex .surprise,
  .w_full_flex .annotation_list {
    width: 100%;
  }
  .part_cnt {
    margin: 0;
  }
  .w_full_flex .annotation_list {
    margin-top: 1.5rem;
  }
}
/* セクションはみ出し画像 */
.h_img::before {
  width: 24.5rem;
  height: calc(24.5rem * 0.77);
  position: absolute;
  top: -10rem;
  right: -2.5rem;
}
.h_img span {
  /* 疑似要素の背景画像より上にする */
  position: relative;
}
.flooring .h_img::before {
  background-image: url(../img/flooring_bf_250502.png);
}
.water_area .h_img::before {
  background-image: url(../img/water_bf_250502.png);
}
@media screen and (min-width: 768px) {
  .h_img::before {
    width: 42rem;
    height: calc(42rem * 0.77);
    top: auto;
    bottom: 0;
    right: -6rem;
  }
}
@media screen and (min-width: 1024px) {
  .flooring,
  .water_area {
    padding: 18rem 0;
  }
  .h_img {
    padding-right: 52rem;
    text-align: right;
  }
  .h_img span {
    display: inline-block;
    text-align: left;
  }
  .h_img::before {
    right: 0;
    width: 49rem;
    height: calc(49rem * 0.77);
  }
}
/************************* flooring *************************/
.flooring {
  background-color: #f0ede6;
  padding-bottom: 15rem;
}

@media screen and (min-width: 768px) {
  .flooring {
    padding-bottom: 25rem;
  }
  .what_fl_c {
    text-align: center;
  }
  .what_fl_c .bdr_copy {
    line-height: 2;
    margin-bottom: 1.45em;
  }
  .h_wrap .h_bg {
    display: inline-block;
    width: auto;
  }
  .repair p {
    margin-bottom: 0.3em;
  }
}

/************************* water_area *************************/
.water_area {
  padding-bottom: 10rem;
}
.water_area .annotation_list {
  margin-top: 1.4em;
}
@media screen and (min-width: 768px) {
  .water_area .list li {
    width: 18.4%;
  }
  .water_area .list li:nth-of-type(5) {
    margin-top: 0;
  }
}
/************************* point *************************/
.point {
  background-color: #d6eeef;
}
.point h3 {
  display: inline-block;
}
.point h3 {
  font-size: 1.15em;
}
.point p {
  font-size: 0.85em;
  line-height: 1.5;
}
.point .white_box {
  padding: 1.4em;
}
.point .bfr_fig::before {
  transform: translate(-20%, -20%);
}

@media screen and (min-width: 768px) {
  .point .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .point h2 {
    width: 100%;
  }
  .point .white_box {
    width: 48.5%;
  }
  .point .white_box:nth-last-of-type(2) {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1024px) {
  .point .white_box figure + p,
  .point .white_box .fig_wrap + p {
    font-size: 0.73em;
  }
  .point .annotation_list li {
    font-size: 0.7em;
  }
}
/************************* total *************************/
.total {
  background-color: #f0ede6;
}
.total .white_box {
  background-color: #f8f6f3;
  margin-top: 2.5rem;
}
.total .white_box p {
  line-height: 1.5;
}
.stone_master {
  width: 72%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .total .white_box {
    margin-top: 6rem;
  }
  .flex_cnt {
    display: flex;
    justify-content: space-between;
  }
  .flex_cnt > figure,
  .flex_cnt .white_box {
    width: 48.5%;
    margin: 0;
  }
  .flex_cnt .white_box {
    font-size: 0.85em;
    padding: 1.4em;
  }
  .stone_master {
    width: 57%;
  }
}
@media screen and (min-width: 1024px) {
  .flex_cnt .white_box {
    font-size: 0.9em;
  }
}
/************************* reviews *************************/
/* 吹き出しの三角の共通 */
.speech_bbl {
  position: relative;
}
.speech_bbl:before,
.speech_bbl::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  border: solid transparent;

  position: absolute;
  top: 100%;

  border-width: 0;
}
.qes .speech_bbl::after,
.ans .speech_bbl::before {
  border-top-color: #e5a136;
}
/* 質問の三角 */
.qes .speech_bbl::after {
  left: 3em; /* 左端からの位置 */
  border-top-width: 1.2em; /* 高さ */
  border-right-width: 0.7em; /* 幅 */
}
/* 回答の三角 */
.ans .speech_bbl:before,
.ans .speech_bbl::after {
  right: 1.7em; /* 左端からの位置 */
  border-top-width: 1.7em; /* 高さ */
  border-left-width: 1.1em; /* 幅 */
}
.ans .speech_bbl:after {
  border-top-color: #fff;
  transform: scale(0.7);
  transform-origin: top center;
}
.qa_list {
  letter-spacing: 0;
}
.qa_list > div {
  margin-bottom: 2.5rem;
}
.qa_list > div:last-child {
  margin-bottom: 0;
}
.qes {
  padding-right: 1.1em;
  padding-bottom: 1.2em; /* 質問の吹き出し三角の高さと揃える */
  margin-bottom: -3.4em; /* 回答のテキスト上部に大体揃う位置 */
  z-index: 1;
  position: relative;
}
.qes .speech_bbl {
  border-radius: 2.1em;
  padding: 0.7em 2.1em;
  margin-bottom: 0;
}
.qes .speech_bbl::before {
  display: none;
}
.ans {
  padding-left: 1.8em;
  position: relative;
  padding-bottom: 1.7em; /* 吹き出し三角の高さ分 */
}
.ans .speech_bbl {
  padding: 1em;
  padding-top: 2.8em; /* 上余白 */
  border: solid 0.2rem #e5a136;
  border-radius: 1em;
}

.clearfix {
  overflow: hidden;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.clearfix figure {
  float: right;
  width: 3.1em;
  margin: 0 0 0 0.7em;
}
@media screen and (min-width: 768px) {
  .qa_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .qa_list > div {
    width: 47%;
    display: flex;
    flex-direction: column;
  }
  .qa_list > div:nth-last-of-type(1),
  .qa_list > div:nth-last-of-type(2) {
    margin-bottom: 0;
  }
  .ans {
    flex: 1 1 auto;
  }
  .ans .speech_bbl {
    height: 100%;
  }
  .ans .speech_bbl:after {
    transform: scale(0.8);
  }
}
@media screen and (min-width: 1024px) {
  .qes {
    padding-right: 3.4em;
  }
}
/************************* contact *************************/
.contact h3 {
  text-align: center;
  margin-bottom: 1.2em;
}
.contact .white_box {
  border: solid 0.1rem #e5a136;
  margin-bottom: 0;
  padding: 1.5em;
}
.tel_list {
  margin-bottom: 1.1em;
}
.tel_list > div {
  line-height: 1;
  display: flex;
  margin-bottom: 1.1em;
}
.tel_list > div:last-child {
  margin-bottom: 0;
}
.tel_list dt {
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.1em;
  flex: 0 0 3.8em;
  margin-right: 0.4em;
}
.tel_list dd {
  color: #e5a136;
  letter-spacing: 0;
  flex: 0 1 auto;
}
.white_box .tel_info {
  margin-bottom: 0;
}
.tel_info {
  line-height: 1.8;
}
.tel_info span {
  display: inline-block;
}
#contact_form {
  /* ページ内遷移のスクロール位置を調整する */
  padding-top: 5rem;
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .caontact_desc {
    text-align: center;
  }
  .contact .white_box {
    padding: 1.4em;
  }

  .tel_list {
    display: flex;
    justify-content: center;
  }
  .tel_list > div {
    margin: 0;
    width: 17em;
  }
  .tel_list > div:nth-of-type(2) {
    justify-content: flex-end;
  }
  .tel_list + p {
    text-align: center;
  }
  .tel_info {
    text-align: center;
  }
}

/************************* footer *************************/
footer {
  padding: 13rem 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

footer .logo {
  display: inline-block;
  margin-bottom: 5rem;
}
footer h2 {
  margin-bottom: 1.3em;
}

footer dl > div {
  font-size: 0.85em;
  line-height: 1.3;
  margin-bottom: 1.3em;
  letter-spacing: 0;
}
footer dl > div:last-child {
  margin-bottom: 0;
}
footer dt {
  margin-bottom: 0.6em;
}
.copyright {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 12px;
  line-height: 1.3;
  padding-bottom: 1rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  footer {
    text-align: center;
  }
}
@media screen and (min-width: 1024px) {
  footer {
    font-size: 1.4rem;
  }
}

/************************* form *************************/
/* フォーム全体のスタイル */
.wpcf7-form {
}

/* ラベルのスタイル */
.wpcf7-form p label {
  display: block;
}

/* 入力フィールドのスタイル */
[type="text"],
[type="email"],
[type="tel"],
textarea,
select {
  background-color: #fff;
  width: 100%;
  border: solid 0.1rem rgba(229, 161, 54, 0.5);
  padding: 0.4em 0.7em;
}
.post {
  width: 50%;
}
.post-result [type="text"] {
  border-color: transparent;
}
/* 入力フィールドの項目名 */
.form_ttl {
  font-size: 0.85em;
}

/* ラジオボタン,チェックボックス共通 */
[type="checkbox"],
[type="radio"] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
.wpcf7-list-item-label {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 1.5;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
  content: "";
  display: block;
}
.wpcf7-list-item-label::before {
  width: 2.3rem;
  height: 2.3rem;
  border: solid 0.1rem #e5a136;
  background-color: #fff;
  margin-right: 0.7em;
  flex-shrink: 0;
}
.wpcf7-list-item-label::after {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
[type="checkbox"]:checked + .wpcf7-list-item-label::after,
[type="radio"]:checked + .wpcf7-list-item-label::after {
  display: block; /*ラジオボタンがチェックされたとき表示*/
}
/* ラジオボタン */
.wpcf7-radio .wpcf7-list-item-label::before,
.wpcf7-radio .wpcf7-list-item-label::after {
  border-radius: 50%;
}
.wpcf7-radio .wpcf7-list-item-label::after {
  width: calc(2.3rem * 0.65);
  height: calc(2.3rem * 0.65);
  left: calc(2.3rem / 2);
  transform: translateX(-50%);
  background-color: #e5a136;
}
/* チェックボックス */
.wpcf7-acceptance .wpcf7-list-item-label::before,
.wpcf7-checkbox .wpcf7-list-item-label::before {
  border-radius: 0.5rem;
}
.wpcf7-acceptance .wpcf7-list-item-label::after,
.wpcf7-checkbox .wpcf7-list-item-label::after {
  width: calc(2.3rem / 4);
  height: calc(2.3rem / 2);
  border: solid 0.2rem #e5a136;
  border-left: transparent;
  border-top: transparent;
  transform: translate(-50%, -15%) rotate(50deg);
  left: calc(2.3rem / 2);
}
.wpcf7-acceptance .wpcf7-list-item {
  margin-left: 0;
}
.wpcf7-acceptance a {
  text-decoration: underline;
}
/* セレクトボックス */
.select .wpcf7-form-control-wrap {
  display: block;
  position: relative;
}
.select .wpcf7-form-control-wrap::after {
  content: "";
  border-right: 0.7em solid transparent;
  border-left: 0.7em solid transparent;
  border-top: 0.7em solid #e5a136;
  border-bottom: 0;
  position: absolute;
  top: 1.1em;
  right: 1.1em;
  pointer-events: none;
}

/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
}

.wpcf7-form input[type="submit"]:hover {
}

/* conditional fields */
.wpcf7cf_multistep .wpcf7cf_steps-dots {
  display: none; /* ステップ表示を使用しない */
}
.wpcf7cf_step_controls {
  position: relative;
  flex-direction: column-reverse;
}
.wpcf7-spinner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

/* button */
.wpcf7cf_step_controls {
  margin-top: 2.5em;
}
.wpcf7cf_prev-container,
.wpcf7cf_next-container {
  display: block;
  width: 100%;
}
.wpcf7cf_prev-container {
  margin-top: 1rem;
}
[data-current_step="1"] .wpcf7cf_prev-container {
  display: none;
}

.wpcf7cf_prev,
.wpcf7-submit,
.wpcf7cf_next {
  border: 0;

  display: block;
  width: 100%;
  height: 3.2em;
  max-width: calc(3.2em * 6);
  margin: 0 auto;

  background-color: #e5a136;
  color: #fff;
  text-align: center;
  border-radius: 0.7em;
}

/* 確認画面 */
.wpcf7cf-summary {
  line-height: 1.5;
}
.wpcf7cf-summary dl > div {
  margin-bottom: 1em;
}
.wpcf7cf-summary dt {
  letter-spacing: 0;
  font-size: 0.8em;
  margin-bottom: 0.3em;
}

/* recapctha */
.grecaptcha-badge {
  visibility: hidden;
}
.recaptcha-message {
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0;
  padding: 0.5em 1em;
  color: #aaa;
}
.recaptcha-message a {
  text-decoration: underline;
}

.img_error {
  font-size: 10px;
  padding: 0.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: gray;
  color: #fff;
  height: 100%;
  overflow: hidden;
}

/* 固定ページ */
.entry-content h2:first-child,
.entry-content .h2:first-child,
.entry-content h3:first-child,
.entry-content .h3:first-child,
.entry-content h4:first-child,
.entry-content .h4:first-child,
.entry-content h5:first-child,
.entry-content .h5:first-child {
  margin-top: 0;
}
.entry-content {
  line-height: 1.8;
}
.entry-content h2,
.entry-content .h2 {
  font-size: 1.3em;
  margin-top: 1.9em; /* 1.2em*1.618 */
}
.entry-content h3,
.entry-content .h3 {
  font-size: 1.13em;
}
.entry-content h3,
.entry-content .h3,
.entry-content h4,
.entry-content .h4,
.entry-content h5,
.entry-content .h5 {
  margin-top: 1em; /* 0.6em*1.618 */
}
.entry-content li {
  padding-left: 1.2em;
  position: relative;
}
.entry-content li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}
.entry-title {
  /* h1 */
  font-size: 1.7em;
}
.entry-title span {
  display: inline-block;
}
/* 戻るボタン */
.back-btn {
  margin-top: 5rem;
}
.back-btn a {
  display: block;
  width: 100%;
  height: 3.2em;
  max-width: calc(3.2em * 6);
  line-height: 3.2em;
  margin: 0 auto;
  background-color: #e5a136;
  color: #fff;
  text-align: center;
  border-radius: 0.7em;
  letter-spacing: 0;
}
/* privacy-policy */
.policy_date {
  margin-top: 4.7em;
  text-align: right;
}
.policy_date li {
  padding-left: 0;
}
.policy_date li::before {
  display: none;
}
/* 完了ページ */
@media screen and (min-width: 768px) {
  .contact_thanks .entry-title,
  .contact_thanks .entry-content {
    text-align: center;
  }
}

/* PC表示、header大きさ調整 */
@media screen and (min-width: 1024px) {
  .site-header {
    /* 1280px*800px基準 */
    height: 6.6rem; /* 100px/21px */
  }
  .site-header .inner {
    padding-left: 5rem;
  }
  main {
    margin-top: 6.6rem;
  }
  .intro,
  .case,
  footer {
    min-height: calc(100vh - 6.6rem);
  }
  .fix_nav ul {
    font-size: 0.6em;
  }
  .fix_nav li:hover {
    background-color: #f0ede6;
  }
  .btns > div {
    height: 6.6rem;
    width: 6.6rem;
  }

  .view {
    height: calc(100vh - 6.6rem);
  }
  .news {
    top: 6.6rem;
    height: calc(100vh - 6.6rem);
  }
  .merit {
    /* header高さ（-6.6rem）、下padding（+10rem）=> + 4.4rem */
    min-height: calc(100vh + 4.4rem);
  }
  .merit .inner {
    padding-bottom: 10rem;
  }
}
@media screen and (min-width: 1280px) {
  .site-header {
    /* 1920px*1080px基準 */
    height: 5.2vw; /* 100px/21px */
  }
  .site-header .inner {
    padding-left: 4vw; /*50px/1920px*/
  }
  main {
    margin-top: 5.2vw;
  }
  .intro,
  .case,
  footer {
    min-height: calc(100vh - 5.2vw);
  }
  .fix_nav ul {
    font-size: 1.1vw; /* 21px/1920px */
  }
  .btns > div {
    height: 5.2vw;
    width: 5.2vw;
  }

  .view {
    height: calc(100vh - 5.2vw);
  }
  .news {
    top: 5.2vw;
    height: calc(100vh - 5.2vw);
  }
  .merit {
    /* header高さ（-5.2vw）、下padding（+10rem） */
    min-height: calc(100vh - 5.2vw + 10rem);
  }
}
@media screen and (min-width: 1920px) {
  .site-header {
    height: 10rem;
  }
  .site-header .inner {
    padding-left: 5rem;
  }
  main {
    margin-top: 10rem;
  }
  .intro,
  .case,
  footer {
    min-height: calc(100vh - 10rem);
  }
  .btns > div {
    height: 10rem;
    width: 10rem;
  }
  .fix_nav ul {
    font-size: 1em;
  }
  .view {
    height: calc(100vh - 10rem);
  }
  .news {
    top: 10rem;
    height: calc(100vh - 10rem);
  }
  .merit {
    /* header高さ（-5.2vw）、下padding（+10rem） */
    min-height: 100vh;
  }
}
.pc768,
.pc1024 {
  display: none;
}
@media screen and (min-width: 768px) {
  .sp768 {
    display: none;
  }
  .pc768 {
    display: block;
  }
}
@media screen and (min-width: 1024px) {
  .sp1024 {
    display: none;
  }
  .pc1024 {
    display: block;
  }
}