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

Style CSS

for yokohouse.co.jp
coded by d-spica at 2022-09-22

---------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");
/*---------------------------------------------

Set CSS

for yokohouse.co.jp
coded by d-spica at 2022-09-22
imported to "style.scss"

---------------------------------------------*/
/* Reset */
body, header, hgroup, main, section, article, aside, nav, footer, main, figure, figcaption, picture, div,
h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, hr,
blockquote, pre, table, caption, th, td, address,
form, fieldset, legend, object {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, pre, table, code, kbd, samp, acronym, time, input, textarea, select {
  font-size: 100%;
}

a, ins, u {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, strong, b {
  font-weight: inherit;
}

address, em, i, b, cite, dfn, var {
  font-style: normal;
}

fieldset {
  border: none;
}

input, textarea {
  font-family: inherit;
  font-weight: normal;
}

input, button {
  margin: 0;
  vertical-align: middle;
}

img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

picture, video {
  vertical-align: bottom;
}

mark {
  background: none;
}

a, input, button, textarea {
  outline: none;
}

[type=text], [type=email], [type=tel], [type=submit], [type=button], select, textarea, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: none;
  border-radius: 0;
  font-size: max(16px, 100%);
}

/* Setting */
ul {
  list-style-position: outside;
  list-style-type: none;
}

ol {
  list-style-position: outside;
}

table {
  border-collapse: collapse;
}

/* Set Var */
:root {
  --serif-font: "Noto Serif JP", serif;
  --sans-font: "Noto Sans JP", sans-serif;
  --latin-font: Georgia, Times, "Times New Roman", serif;
  --font-color: #000;
  --key-color: #000;
  --point-color: #78C3E6;
  --border-color: #CCC;
  --speed-fast: 0.5s;
  --speed-nomal: 1s;
  --speed-slow: 1.5s;
  --v-margin: min(10rem, calc(0.68376vw + 93.436px));
  --h-margin: max(6vw, calc(50vw - 60rem));
}

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

Base CSS

for yokohouse.co.jp
coded by d-spica at 2022-09-22
imported to "style.scss"

---------------------------------------------*/
html {
  background-color: #FFF;
  line-height: 1.4;
  font-family: var(--sans-font);
  font-size: min(10px, 0.34188vw + 6.7179px);
  font-weight: 400;
  color: var(--font-color);
}

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

#page {
  position: relative;
  overflow: hidden;
}

hr {
  visibility: hidden;
  height: 0;
  clear: both;
}

a {
  color: inherit;
  transition: var(--speed-fast);
}

[src*=".svg"] {
  width: 100%;
}

[src*=instagram] {
  padding: 0.15em;
  width: 0.9em;
}

[src*=facebook] {
  padding: 0.05em 0.32em;
  width: 0.55em;
}

[src*=twitter] {
  padding: 0.25em 0.2em;
  width: 0.8em;
}

.obp-S,
.obp-M,
.obp-L,
.obp-LL {
  display: none;
}

header.header {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8;
  box-sizing: border-box;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
  background-color: #FFF;
  padding: 0 min(6vw, 4rem);
  width: 100%;
  height: 6rem;
}
header.header h1 {
  width: 12rem;
  line-height: 1;
}
header.header h1 a {
  display: block;
}

nav.nav dt {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  transition: var(--speed-nomal);
}
nav.nav dt i {
  display: block;
  position: absolute;
  top: calc(50% - 1px);
  left: 1rem;
  background-color: var(--font-color);
  width: 2rem;
  height: 2px;
  transition: var(--speed-fast);
}
nav.nav dt i:nth-of-type(1) {
  transform: translateY(-0.6rem);
}
nav.nav dt i:nth-of-type(3) {
  transform: translateY(0.6rem);
}
nav.nav dd {
  position: fixed;
  top: 6rem;
  right: 0;
  z-index: 8;
  box-sizing: border-box;
  background-color: #FFF;
  padding: 2rem;
  width: 100%;
  height: calc(100vh - 6rem);
  height: calc(100dvh - 6rem);
  font-size: 1.4rem;
  transform: translateX(101%);
  transition: var(--speed-fast);
}
nav.nav ul {
  overflow: auto;
  padding: 2rem;
  height: 100%;
}
nav.nav li {
  margin: 0 auto;
  border-bottom: solid 1px var(--border-color);
  max-width: 30rem;
}
nav.nav li a {
  display: block;
  position: relative;
  padding: 0.8em;
}
nav.nav li a:hover, nav.nav li a.current {
  color: var(--point-color);
}
nav.nav li:last-child {
  border-bottom: none;
  padding-top: 1rem;
}
nav.nav li:last-child a img {
  width: 2.4rem;
  filter: grayscale(1) brightness(0);
  transition: var(--speed-fast);
}
nav.nav li:last-child a:hover img {
  filter: grayscale(0) brightness(1);
}
nav.nav .is-opened dt::before {
  transform: scale(0);
}
nav.nav .is-opened dt i:nth-of-type(1) {
  transform: translateY(0) rotate(135deg);
}
nav.nav .is-opened dt i:nth-of-type(3) {
  transform: translateY(0) rotate(-135deg);
}
nav.nav .is-opened dt i:nth-of-type(2) {
  transform: scaleX(0);
}
nav.nav .is-opened dd {
  transform: translateY(0);
}
nav.nav p {
  display: flex;
  align-items: center;
  gap: 4rem 1.5rem;
  position: fixed;
  top: 1.5rem;
  right: 6.4rem;
  z-index: 8;
  font-size: 2rem;
}
nav.nav p a {
  display: block;
}
nav.nav p a img {
  filter: grayscale(1) brightness(0);
  transition: var(--speed-fast);
}
nav.nav p a:hover img {
  filter: grayscale(0) brightness(1);
}

article.main {
  padding-top: 6rem;
}

footer.footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem;
  background-color: var(--key-color);
  padding: min(6vw, 4rem) var(--h-margin);
  color: #FFF;
}
footer.footer dl {
  max-width: 45rem;
  width: 100%;
}
footer.footer dt {
  font-size: 2rem;
  font-weight: 700;
}
footer.footer dd {
  margin-top: 1.5rem;
  line-height: 2;
  font-size: 1.2rem;
  color: #B2B2B2;
}
footer.footer dd:nth-of-type(2) {
  display: flex;
  gap: 0 1em;
  margin-top: 1rem;
  font-size: 1.5rem;
}
footer.footer dd:nth-of-type(2) img {
  filter: grayscale(1) brightness(3);
  transition: var(--speed-fast);
}
footer.footer dd:nth-of-type(2) :hover img {
  filter: grayscale(0) brightness(1);
}
footer.footer div {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-width: 45rem;
  max-height: 22em;
  width: 100%;
}
footer.footer ul:nth-of-type(1) {
  width: 60%;
}
footer.footer ul:nth-of-type(2) {
  width: 60%;
}
footer.footer ul:nth-of-type(3) {
  width: 40%;
}
footer.footer li {
  margin-bottom: 0.3em;
}
footer.footer li a {
  display: block;
  padding: 0.5em 0.3em;
}
footer.footer li a.current, footer.footer li a:hover {
  color: var(--point-color);
}
footer.footer li ul {
  margin-top: 0.3em;
  width: 100% !important;
}
footer.footer li li {
  padding-left: 1em;
}
footer.footer li li a::before {
  content: "-";
  margin-right: 0.5em;
}
footer.footer .copyright {
  margin-bottom: max(-3vw, -2rem);
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  color: #666;
}
footer.footer .nav-up {
  position: fixed;
  bottom: min(3vw, 3rem);
  right: min(3vw, 3rem);
  z-index: 8;
  opacity: 0;
  transition: var(--speed-fast);
}
footer.footer .nav-up a {
  display: block;
  border-radius: 9999rem;
  background-color: var(--key-color);
  width: 4.8rem;
  height: 4.8rem;
  opacity: 0.7;
}
footer.footer .nav-up a::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.5rem);
  left: calc(50% - 0.7rem);
  border-top: solid 1px #FFF;
  border-right: solid 1px #FFF;
  width: 1.5rem;
  height: 1.5rem;
  transform: rotate(-45deg);
}
footer.footer .nav-up a:hover {
  opacity: 1;
}

.is-scrolled footer.footer .nav-up {
  opacity: 1;
}

.page-contact footer.footer .nav-up {
  bottom: 10rem;
}

@media (min-width: 480px) {
  .obp-S {
    display: inline-block;
  }
  .ubp-S {
    display: none;
  }
  footer.footer div {
    flex-direction: row;
  }
  footer.footer ul:nth-of-type(1) {
    width: 40%;
  }
  footer.footer ul:nth-of-type(2) {
    width: 25%;
  }
  footer.footer ul:nth-of-type(3) {
    width: 35%;
  }
}
@media (min-width: 720px) {
  .obp-M {
    display: inline-block;
  }
  .ubp-M {
    display: none;
  }
}
@media (min-width: 960px) {
  .obp-L {
    display: inline-block;
  }
  .ubp-L {
    display: none;
  }
  header.header {
    height: 9rem;
  }
  header.header h1 {
    width: 15rem;
  }
  nav.nav dt {
    display: none;
  }
  nav.nav dd {
    top: 0;
    background-color: transparent;
    padding: 0;
    width: auto;
    height: auto;
    font-family: var(--sans-font);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--font-color);
    transform: translateY(0);
  }
  nav.nav ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0 2rem;
    position: fixed;
    top: 0;
    right: 0;
    padding: 0;
    height: 9rem;
  }
  nav.nav li {
    border-bottom: none;
  }
  nav.nav li a {
    padding: 0.3em;
    white-space: nowrap;
  }
  nav.nav li a.current, nav.nav li a:hover {
    color: var(--point-color);
  }
  nav.nav li:last-child {
    padding-top: 0;
  }
  nav.nav li:last-child a {
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: var(--key-color);
    padding: 0;
    width: 9rem;
    height: 9rem;
  }
  nav.nav li:last-child a img {
    filter: grayscale(1) brightness(3);
  }
  nav.nav p {
    flex-direction: column;
    top: 15rem;
    right: 1.2rem;
  }
  nav.nav p [src*=instagram] {
    width: 1.3333em;
  }
  article.main {
    padding-top: 9rem;
  }
  footer.footer {
    justify-content: space-between;
  }
  footer.footer dl {
    width: 30rem;
  }
}
@media all and (min-width: 1200px) {
  .obp-LL {
    display: inline-block;
  }
  .ubp-LL {
    display: none;
  }
}
/*---------------------------------------------

Parts CSS

for yokohouse.co.jp
coded by d-spica at 2022-09-23
imported to "style.scss"

---------------------------------------------*/
.button-B {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  border: solid 2px var(--key-color);
  padding: 1.2em;
  width: min(100% - 3rem, 26rem);
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--key-color);
  transition: var(--speed-fast);
  cursor: pointer;
}
.button-B::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.5px);
  left: -1.6rem;
  background-color: var(--font-color);
  width: 3rem;
  height: 1px;
  transition: var(--speed-fast);
}
.button-B::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.5px);
  right: -1.6rem;
  background-color: var(--font-color);
  width: 3rem;
  height: 1px;
  transition: var(--speed-fast);
}
.button-B:hover {
  background-color: var(--point-color);
}
.button-B:hover::before {
  left: -3rem;
}
.button-B:hover::after {
  right: -3rem;
}

.button-W {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  border: solid 2px #FFF;
  padding: 1.2em;
  width: min(100% - 3rem, 26rem);
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFF;
  transition: var(--speed-fast);
  cursor: pointer;
}
.button-W::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.5px);
  left: -1.6rem;
  background-color: #FFF;
  width: 3rem;
  height: 1px;
  transition: var(--speed-fast);
}
.button-W::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.5px);
  right: -1.6rem;
  background-color: #FFF;
  width: 3rem;
  height: 1px;
  transition: var(--speed-fast);
}
.button-W:hover {
  background-color: var(--point-color);
}
.button-W:hover::before {
  left: -3rem;
}
.button-W:hover::after {
  right: -3rem;
}

.no-link {
  color: #999;
  pointer-events: none;
}
.no-link:hover {
  color: #999;
}

.post-body {
  margin: var(--v-margin) 0;
  font-size: 1.6rem;
}
.post-body h1, .post-body h2, .post-body h3 {
  margin: 2.5em 0 1em;
  line-height: 1.6;
  font-size: 2rem;
  font-weight: 700;
}
.post-body h4 {
  margin: 2.5em 0 1em;
  line-height: 1.6;
  font-size: 2rem;
  font-weight: 700;
}
.post-body h5 {
  margin: 2em 0 1em;
  line-height: 1.6;
  font-weight: 700;
}
.post-body h6 {
  margin: 2em 0 0.5em;
  line-height: 1.6;
  font-weight: 700;
}
.post-body p {
  margin-bottom: 2em;
  line-height: 2;
  text-align: justify;
}
.post-body ul {
  margin-bottom: 2em;
  padding-left: 1.5em;
  list-style: disc;
  line-height: 1.8;
}
.post-body ul li {
  margin-bottom: 0.3em;
}
.post-body ol {
  margin-bottom: 2em;
  padding-left: 1.5em;
  line-height: 1.8;
}
.post-body ol li {
  margin-bottom: 0.3em;
}
.post-body blockquote {
  margin-bottom: 2em;
  border-left: solid 0.5em var(--border-color);
  padding-left: 1em;
}
.post-body .aligncenter, .post-body .alignleft, .post-body .alignright {
  display: block;
  margin: 0 auto 1em;
}
.post-body .wp-caption {
  max-width: 100%;
}
.post-body a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--point-color);
}
.post-body a:hover {
  text-decoration: none;
  opacity: 0.6;
}

p.none {
  margin: 6rem 0 12rem;
  text-align: center;
  line-height: 2;
  font-size: 1.6rem;
}

.animate {
  opacity: 0;
  transform: translateY(5rem);
  transition: var(--speed-nomal);
}

.animate.is-animated {
  opacity: 1;
  transform: translateY(0);
}

@media all and (min-width: 960px) {
  .post-body .alignleft {
    float: left;
    margin-right: 2em;
    max-width: 50%;
  }
  .post-body .alignright {
    float: right;
    margin-left: 2em;
    max-width: 50%;
  }
}
/*---------------------------------------------

Top Page Sections CSS

for yokohouse.co.jp
coded by d-spica at 2022-09-23
imported to "style.scss"

---------------------------------------------*/
aside.contact {
  position: relative;
  padding: 6rem var(--h-margin);
  color: #FFF;
}
aside.contact h3 {
  margin-bottom: 1em;
  text-align: center;
  font-size: 4rem;
  font-weight: 700;
}
aside.contact p {
  margin-bottom: 2em;
  text-align: justify;
  line-height: 2;
  font-size: 1.6em;
}
aside.contact ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem 4rem;
  margin: 0 auto;
  max-width: 36rem;
}
aside.contact li {
  position: relative;
  box-sizing: border-box;
  padding: 2rem;
  width: 100%;
  text-align: center;
}
aside.contact li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-top: solid 1px;
  border-left: solid 1px;
  width: 5rem;
  height: 5rem;
}
aside.contact li::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: solid 1px;
  border-right: solid 1px;
  width: 5rem;
  height: 5rem;
}
aside.contact li em {
  display: block;
  margin-bottom: 1em;
  font-size: 1.8rem;
  font-weight: 500;
}
aside.contact li b {
  display: block;
  white-space: nowrap;
  font-size: 3rem;
  font-weight: 500;
}
aside.contact li span {
  display: block;
  margin-top: 0.5em;
  line-height: 1.8;
  font-size: 1.2rem;
  color: #B2B2B2;
}
aside.contact li .button {
  display: inline-block;
  box-sizing: border-box;
  margin: 1rem 0;
  background-color: #FFF;
  padding: 1em;
  width: min(100%, 29rem);
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 1.8rem;
  color: var(--key-color);
}
aside.contact li .button::before {
  content: "";
  display: inline-block;
  margin-right: 0.8em;
  background: url("../img/ic-mail.svg") no-repeat 50% 50%/contain;
  width: 2.4rem;
  height: 1.6rem;
  vertical-align: -0.1em;
  filter: grayscale(1) brightness(0);
  transition: 0.3s;
}
aside.contact li .button:hover {
  background-color: var(--point-color);
}
aside.contact picture {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
aside.contact picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

header.top_hero {
  position: relative;
  overflow: hidden;
  margin: 0 min(6vw, 6rem);
  background-color: var(--key-color);
  height: 0;
  padding-top: calc((100% - min(12vw, 6rem)) * 0.66666);
}
header.top_hero h2 {
  position: absolute;
  top: calc(50% - 1rem);
  left: max(15%, 50% - 27.5rem);
  z-index: 2;
  width: min(70%, 55rem);
}
header.top_hero h2 img {
  filter: drop-shadow(0 0 0.3rem rgb(0, 0, 0));
}
header.top_hero ul {
  width: 100%;
  height: 100%;
}
header.top_hero li {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: var(--speed-nomal);
}
header.top_hero li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
header.top_hero li.before2 {
  z-index: 1;
  transform: translateX(-200%);
}
header.top_hero li.before {
  z-index: 1;
  transform: translateX(-100%);
}
header.top_hero li.current {
  z-index: 1;
}
header.top_hero li.after {
  z-index: 1;
  transform: translateX(100%);
}
header.top_hero li.after2 {
  z-index: 1;
  transform: translateX(200%);
}

section.top_news {
  position: relative;
  margin-top: -10rem;
  background-color: var(--key-color);
  padding: 16rem max(6vw, 50vw - 48rem) 6rem;
  color: #FFF;
}
section.top_news h3 {
  margin-bottom: 1em;
  text-align: center;
  font-size: 4rem;
  font-weight: 700;
}
section.top_news ul {
  font-size: 1.4rem;
}
section.top_news li {
  margin-bottom: 1.5em;
}
section.top_news li a, section.top_news li u {
  display: block;
}
section.top_news li a:hover {
  color: var(--point-color);
}
section.top_news li b {
  display: inline-block;
  margin-right: 1.5em;
  border: solid 1px;
  background-color: var(--key-color);
  padding: 0.3em;
  width: 10em;
  text-align: center;
  white-space: nowrap;
}
section.top_news li time {
  display: inline-block;
  width: 7em;
}
section.top_news li span {
  display: block;
  margin-top: 0.6em;
  line-height: 1.8;
}
section.top_news .nav-more {
  margin-top: 4rem;
  width: 100%;
  text-align: center;
}

section.top_designflow {
  padding: 6rem var(--h-margin);
}
section.top_designflow h3 {
  margin-bottom: 1.5em;
  text-align: center;
  line-height: 1.8;
  font-size: min(3rem, 6.8vw);
  font-weight: 700;
}
section.top_designflow .copy {
  margin-bottom: 5rem;
  text-align: justify;
  line-height: 2.2;
  font-size: 1.6rem;
}
section.top_designflow ul {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  position: relative;
  margin: 0 auto;
  max-width: 30rem;
}
section.top_designflow li em {
  display: block;
  margin-bottom: 0.5em;
  padding: 0.7em 0;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
}
section.top_designflow li em.lines {
  padding: 0;
}
section.top_designflow li i {
  display: block;
  margin: 0 auto;
  max-width: 20rem;
}
section.top_designflow li span {
  display: block;
  margin-top: 1.2em;
  line-height: 2;
  text-align: justify;
  font-size: 1.4rem;
}
section.top_designflow .nav-more {
  margin-top: 4rem;
  text-align: center;
}

section.top_story {
  padding: 6rem 0;
}
section.top_story h3 {
  position: relative;
  margin-bottom: -1em;
  background-color: var(--key-color);
  padding: 0.3em 6vw;
  width: clamp(25rem, 40%, 50rem);
  font-size: 4rem;
  font-weight: 700;
  color: #FFF;
}
section.top_story h3::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -1em;
  border-left: solid 1em var(--key-color);
  border-top: solid 1em transparent;
  width: 0;
  height: 0;
}

section.top_works {
  padding: 6rem var(--h-margin);
}
section.top_works h3 {
  margin-bottom: 1.5em;
  text-align: center;
  font-size: 4rem;
  font-weight: 700;
}

section.top_columns {
  position: relative;
  background-color: var(--key-color);
  padding: 6rem var(--h-margin);
  color: #FFF;
}
section.top_columns h3 {
  margin-bottom: 1em;
  text-align: center;
  font-size: 4rem;
  font-weight: 700;
  color: #FFF;
}
section.top_columns ul {
  position: relative;
  padding-top: 35rem;
}
section.top_columns li {
  position: absolute;
  top: 0;
  left: calc(50% - 13rem);
  width: 26rem;
  z-index: -1;
  opacity: 0;
  transition: var(--speed-fast);
}
section.top_columns li.before2 {
  z-index: 1;
  transform: translateX(-230%);
  opacity: 0;
}
section.top_columns li.before {
  z-index: 1;
  transform: translateX(-115%);
  opacity: 1;
}
section.top_columns li.current {
  z-index: 1;
  opacity: 1;
}
section.top_columns li.after {
  z-index: 1;
  transform: translateX(115%);
  opacity: 1;
}
section.top_columns li.after2 {
  z-index: 1;
  transform: translateX(230%);
  opacity: 1;
}
section.top_columns li.after3 {
  z-index: 1;
  transform: translateX(345%);
  opacity: 0;
}
section.top_columns li i {
  display: block;
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  padding-top: 100%;
  height: 0;
}
section.top_columns li i img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: var(--speed-fast);
}
section.top_columns li i u {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--point-color);
  padding: 0.4rem 1.5rem;
  width: 3rem;
  text-align: center;
  color: #FFF;
}
section.top_columns li i u span {
  display: inline-block;
}
section.top_columns li i u span:nth-of-type(1) {
  font-size: 1.2rem;
}
section.top_columns li i u span:nth-of-type(2) {
  border-bottom: solid 1px;
  line-height: 1.6;
  font-size: 1.8rem;
}
section.top_columns li i u span:nth-of-type(3) {
  font-size: 1.8rem;
  line-height: 1.6;
}
section.top_columns li b {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: #666;
}
section.top_columns li em {
  display: block;
  padding: 0.5em 0;
  font-size: 1.4rem;
  font-weight: 700;
  transition: var(--speed-fast);
}
section.top_columns li a {
  display: block;
}
section.top_columns li a:hover i img {
  transform: scale(1.2);
}
section.top_columns li a:hover em {
  color: var(--point-color);
}
section.top_columns .buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 3rem;
  margin: 2rem 0 4rem;
}
section.top_columns .buttons .prev {
  position: relative;
  border-radius: 9999rem;
  background-color: #FFF;
  width: 5rem;
  height: 5rem;
  opacity: 0.7;
  transition: var(--speed-fast);
  cursor: pointer;
}
section.top_columns .buttons .prev::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.9rem);
  left: calc(50% - 0.5rem);
  border-top: solid 2px var(--key-color);
  border-left: solid 2px var(--key-color);
  width: 1.5rem;
  height: 1.5rem;
  transform: rotate(-45deg);
}
section.top_columns .buttons .prev:hover {
  opacity: 1;
}
section.top_columns .buttons .next {
  position: relative;
  border-radius: 9999rem;
  background-color: #FFF;
  width: 5rem;
  height: 5rem;
  opacity: 0.7;
  transition: var(--speed-fast);
  cursor: pointer;
}
section.top_columns .buttons .next::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.9rem);
  right: calc(50% - 0.5rem);
  border-top: solid 2px var(--key-color);
  border-right: solid 2px var(--key-color);
  width: 1.5rem;
  height: 1.5rem;
  transform: rotate(45deg);
}
section.top_columns .buttons .next:hover {
  opacity: 1;
}
section.top_columns .buttons .counter {
  letter-spacing: 0.2em;
  font-size: 1.2rem;
  color: #666;
}
section.top_columns .buttons .counter b {
  color: #FFF;
}
section.top_columns .nav-more {
  text-align: center;
}

section.top_company {
  padding: 6rem var(--h-margin);
}
section.top_company h3 {
  margin-bottom: 1em;
  text-align: center;
  font-size: 4rem;
  font-weight: 700;
}
section.top_company ul {
  display: flex;
  flex-direction: column;
  gap: 4rem 3rem;
  margin: 0 auto;
  max-width: 40rem;
}
section.top_company li {
  position: relative;
  width: 100%;
}
section.top_company li i {
  display: block;
  position: relative;
  overflow: hidden;
  padding-top: 50%;
}
section.top_company li i img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: var(--speed-fast);
}
section.top_company li em {
  display: block;
  padding: 0.5em 0;
  font-size: 1.8rem;
  font-weight: 700;
  transition: var(--speed-fast);
}
section.top_company li u {
  display: block;
  position: absolute;
  top: 32%;
  right: 0;
  z-index: 1;
  padding: 0.3em 0;
  width: 8rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
  color: #FFF;
  transition: var(--speed-fast);
}
section.top_company li u::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  width: 100%;
  height: 1px;
  transition: var(--speed-fast);
}
section.top_company li a {
  display: block;
}
section.top_company li a:hover i img {
  transform: scale(1.2);
}
section.top_company li a:hover em {
  color: var(--point-color);
}
section.top_company li a:hover u::after {
  left: 2rem;
}
section.top_company dl {
  margin: 6rem auto;
  max-width: 90rem;
}
section.top_company dt {
  margin-bottom: 4rem;
  text-align: center;
  font-size: 3rem;
  font-weight: 500;
}
section.top_company dd {
  margin: 0 auto;
}
section.top_company dd .sb_instagram_header {
  display: none;
}
section.top_company + section.top_company {
  padding-top: 0;
}
section.top_company + section.top_company dl {
  margin: 0 auto;
}

@media all and (min-width: 640px) {
  section.top_company ul {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    max-width: none;
  }
  section.top_company li {
    width: calc(50% - 1.5rem);
  }
}
@media all and (min-width: 720px) {
  section.top_news li a, section.top_news li u {
    display: flex;
    align-items: center;
  }
  section.top_news li span {
    flex: 1;
    margin-top: 0;
  }
  section.top_designflow .copy {
    text-align: center;
  }
  section.top_designflow ul {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 65rem;
  }
  section.top_designflow li {
    width: calc(50% - 2.5rem);
  }
  aside.contact p {
    margin-bottom: 5em;
    text-align: center;
  }
  aside.contact ul {
    flex-direction: row;
    align-items: stretch;
    max-width: none;
  }
  aside.contact li {
    width: calc(50% - 2rem);
    max-width: 36rem;
  }
}
@media all and (min-width: 960px) {
  section.top_news {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10%;
  }
  section.top_news h3 {
    white-space: nowrap;
  }
  section.top_news ul {
    flex: 1;
  }
  section.top_designflow {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  section.top_designflow h3 {
    font-size: 3.4rem;
  }
  section.top_designflow .copy {
    margin-bottom: 7rem;
  }
  section.top_designflow .nav-more {
    margin-top: 6rem;
  }
  section.top_columns {
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 14rem;
    padding-bottom: 16rem;
  }
  section.top_columns h3 {
    float: left;
    position: relative;
    margin-bottom: 8rem;
    width: 32rem;
    text-align: left;
    z-index: 2;
  }
  section.top_columns ul {
    flex: 1;
  }
  section.top_columns li {
    left: 32rem;
  }
  section.top_columns .buttons {
    position: absolute;
    top: 4rem;
    right: calc(var(--h-margin) - 2rem);
    width: 24rem;
    z-index: 2;
  }
  section.top_columns .nav-more {
    position: absolute;
    bottom: 6rem;
    left: 0;
    z-index: 2;
    width: 100%;
  }
  section.top_company li {
    width: calc(33.333% - 2rem);
  }
}
@media all and (min-width: 1280px) {
  header.top_hero h2 {
    left: min(50% - 27.5rem, 30%);
    width: max(55rem, 40%);
  }
  section.top_designflow ul {
    max-width: none;
  }
  section.top_designflow li {
    width: calc(25% - 3.75rem);
  }
  section.top_designflow li:nth-of-type(n+2) i {
    position: relative;
  }
  section.top_designflow li:nth-of-type(n+2) i::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 3px);
    right: calc(100% - 2px);
    z-index: -1;
    border-top: dotted 6px var(--border-color);
    width: 100%;
    height: 0;
  }
}
/*---------------------------------------------

Design Flow Page Sections CSS

for yokohouse.co.jp
coded by d-spica at 2022-10-03
imported to "style.scss"

---------------------------------------------*/
header.title {
  margin: 0 min(6vw, 6rem);
  color: #FFF;
}
header.title h2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  letter-spacing: 0.2em;
  height: clamp(16rem, 30vw, 30rem);
  font-size: 2.8rem;
  font-weight: 500;
}
header.title h2.black {
  background-color: var(--key-color);
}
header.title h2 span {
  display: block;
  margin-top: 0.5em;
  font-size: 1.4rem;
}
header.title h2 picture {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
header.title h2 picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
header.title p {
  margin: 1.5em 0;
  font-size: 1.2rem;
  color: #808080;
}
header.title p i {
  display: inline-block;
  margin: 0 0.5em 0 0.3em;
}
header.title p i::before {
  content: "";
  display: inline-block;
  border-top: solid 1px;
  border-right: solid 1px;
  width: 0.5em;
  height: 0.5em;
  vertical-align: 0.1em;
  transform: rotate(45deg);
}
header.title p a:hover {
  color: var(--font-color);
}

section.designflow {
  position: relative;
  padding: 6rem var(--h-margin);
  font-size: 1.6rem;
}
section.designflow h3 {
  margin-bottom: 1.5em;
  text-align: center;
  line-height: 1.6;
  font-size: min(5.2vw, 2.6rem);
  font-weight: 700;
}
section.designflow h3 b {
  display: block;
  margin-bottom: 1em;
  font-size: max(70%, 2.2rem);
  color: var(--point-color);
}
section.designflow p {
  margin-bottom: 3em;
  font-size: 1.6rem;
  line-height: 2;
  text-align: justify;
}
section.designflow div.items {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6rem, 8vw, 8rem);
  margin: 6rem auto 0;
  max-width: 56rem;
}
section.designflow dl {
  width: 100%;
}
section.designflow dt i {
  display: block;
  position: relative;
  margin-bottom: 1.5rem;
  padding-top: 66.666%;
}
section.designflow dt i img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.designflow dt em {
  display: block;
  margin-bottom: 0.5em;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--point-color);
}
section.designflow dd:nth-of-type(1) {
  line-height: 2;
  text-align: justify;
}
section.designflow dd:nth-of-type(2) {
  margin-top: 2rem;
}
section.designflow table {
  width: 100%;
  line-height: 1.6;
  font-size: min(3.2vw, 1.4rem);
  color: var(--font-color);
}
section.designflow caption {
  background-color: #4D4D4D;
  padding: 0.4em;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFF;
}
section.designflow th {
  border-top: solid 1px #DDD;
  background-color: #F2F2F2;
  padding: 0.6em 1em;
  width: 7em;
  text-align: center;
  white-space: nowrap;
  font-weight: 500;
}
section.designflow td {
  border-top: solid 1px #DDD;
  background-color: #FFF;
  padding: 0.6em 1em;
}

section.regenerate {
  background-color: var(--key-color);
  color: #FFF;
}

section.consult {
  padding-bottom: 12rem;
}

@media all and (min-width: 720px) {
  section.designflow h3 {
    font-size: 3.4rem;
  }
}
@media all and (min-width: 800px) {
  section.designflow div.items {
    max-width: none;
  }
  section.designflow dl.typeA {
    width: calc(50% - clamp(3rem, 4vw, 4rem));
  }
  section.designflow dl.typeB {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 4.2rem auto;
    gap: 0 clamp(6rem, 8vw, 8rem);
    align-items: start;
  }
  section.designflow dl.typeB dt {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  section.designflow dl.typeB dd:nth-of-type(1) {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  section.designflow dl.typeB dd:nth-of-type(2) {
    grid-column: 2/3;
    grid-row: 1/3;
    margin-top: 0;
  }
  section.consult dl.typeB:nth-of-type(2n+1) dt {
    grid-column: 2/3;
  }
  section.consult dl.typeB:nth-of-type(2n+1) dd:nth-of-type(1) {
    grid-column: 2/3;
  }
  section.consult dl.typeB:nth-of-type(2n+1) dd:nth-of-type(2) {
    grid-column: 1/2;
  }
}
@media all and (min-width: 1200px) {
  section.designflow p {
    text-align: center;
  }
  section.designflow th {
    width: 10em;
  }
}
/*---------------------------------------------

Works Page Sections CSS

for yokohouse.co.jp
coded by d-spica at 2022-09-23
imported to "style.scss"

---------------------------------------------*/
section.works {
  padding: 6rem var(--h-margin);
}
section.works header {
  margin-bottom: 6rem;
}
section.works header h3 {
  margin-bottom: 1.5em;
  text-align: center;
  line-height: 1.6;
  font-size: 2.6rem;
  font-weight: 700;
}
section.works header p {
  margin-bottom: 3em;
  font-size: 1.6rem;
  line-height: 2;
  text-align: justify;
}
section.works header ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 1rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
}
section.works header li a {
  display: block;
  border-radius: 0.6rem;
  background-color: #EEE;
  padding: 0.5em 1em;
  color: var(--key-color);
}
section.works header li a::before {
  content: "#";
  margin-right: 0.3em;
}
section.works header li a:hover, section.works header li a.current {
  color: #FFF;
}
section.works header li.cat01 a:hover, section.works header li.cat01 a.current {
  background-color: #F6AD3C;
}
section.works header li.cat02 a:hover, section.works header li.cat02 a.current {
  background-color: #3274BB;
}
section.works header li.cat03 a:hover, section.works header li.cat03 a.current {
  background-color: #9077B4;
}
section.works header li.cat04 a:hover, section.works header li.cat04 a.current {
  background-color: #4FAB34;
}
section.works header li.cat05 a:hover, section.works header li.cat05 a.current {
  background-color: #EF8586;
}
section.works header li.cat06 a:hover, section.works header li.cat06 a.current {
  background-color: #B5D100;
}
section.works .nav-more button.is-opened {
  display: none;
}

section.top_works ul,
section.works section.posts ul {
  display: flex;
  flex-direction: column;
  gap: 6rem 3rem;
  margin: 0 auto;
  max-width: 40rem;
}
section.top_works li,
section.works section.posts li {
  width: 100%;
}
section.top_works li i,
section.works section.posts li i {
  display: block;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
  padding-top: 70%;
  height: 0;
}
section.top_works li i img,
section.works section.posts li i img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: var(--speed-fast);
}
section.top_works li b,
section.works section.posts li b {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #999;
}
section.top_works li em,
section.works section.posts li em {
  display: block;
  border-bottom: solid 1px #999;
  padding: 0.8em 0;
  font-size: 1.8rem;
  font-weight: 700;
  transition: var(--speed-fast);
}
section.top_works li span,
section.works section.posts li span {
  display: block;
  margin: 1em 0;
  font-size: 1.4rem;
  color: #666;
}
section.top_works li u,
section.works section.posts li u {
  display: inline-block;
  margin: 0 0.3em 0.3em 0;
  border: solid 1px var(--border-color);
  border-radius: 0.4rem;
  padding: 0.3em 0.5em;
  width: 5em;
  text-align: center;
  font-size: 1.2rem;
  color: #666;
}
section.top_works li a,
section.works section.posts li a {
  display: block;
}
section.top_works li a:hover em,
section.works section.posts li a:hover em {
  color: var(--point-color);
}
section.top_works li a:hover i img,
section.works section.posts li a:hover i img {
  transform: scale(1.2);
}
section.top_works li.cat01 b,
section.works section.posts li.cat01 b {
  color: #F6AD3C;
}
section.top_works li.cat01 em,
section.works section.posts li.cat01 em {
  border-bottom-color: #F6AD3C;
}
section.top_works li.cat02 b,
section.works section.posts li.cat02 b {
  color: #3274BB;
}
section.top_works li.cat02 em,
section.works section.posts li.cat02 em {
  border-bottom-color: #3274BB;
}
section.top_works li.cat03 b,
section.works section.posts li.cat03 b {
  color: #9077B4;
}
section.top_works li.cat03 em,
section.works section.posts li.cat03 em {
  border-bottom-color: #9077B4;
}
section.top_works li.cat04 b,
section.works section.posts li.cat04 b {
  color: #4FAB34;
}
section.top_works li.cat04 em,
section.works section.posts li.cat04 em {
  border-bottom-color: #4FAB34;
}
section.top_works li.cat05 b,
section.works section.posts li.cat05 b {
  color: #EF8586;
}
section.top_works li.cat05 em,
section.works section.posts li.cat05 em {
  border-bottom-color: #EF8586;
}
section.top_works li.cat06 b,
section.works section.posts li.cat06 b {
  color: #B5D100;
}
section.top_works li.cat06 em,
section.works section.posts li.cat06 em {
  border-bottom-color: #B5D100;
}
section.top_works .nav-more,
section.works section.posts .nav-more {
  margin-top: 6rem;
  text-align: center;
}

section.work {
  padding: 6rem var(--h-margin);
}
section.work h3 {
  text-align: center;
  font-size: 3.4rem;
  font-weight: 700;
}
section.work h3 b {
  display: block;
  margin-bottom: 1.5em;
  font-size: 1.8rem;
  color: #999;
}
section.work section.data {
  margin: 6rem 0;
}
section.work section.data ul {
  position: relative;
  padding: 6rem 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFF;
}
section.work section.data ul::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc(-1 * var(--h-margin));
  z-index: -1;
  background-color: var(--key-color);
  width: 100vw;
  height: calc(100% + 30vw);
}
section.work section.data li {
  line-height: 1.8;
}
section.work section.data li:nth-of-type(n+2) {
  margin-top: 1.5em;
}
section.work section.data li em {
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
  color: #666;
}
section.work section.data li u {
  display: inline-block;
  margin: 0 0.3em 0.3em 0;
  border-radius: 0.4rem;
  background-color: #FFF;
  padding: 0.3em 0.5em;
  width: 5.5em;
  line-height: 1.4;
  text-align: center;
  font-size: 1.3rem;
  color: var(--font-color);
}
section.work section.data picture {
  display: block;
}
section.work section.data picture img {
  width: 100%;
}
section.work section.detail {
  margin: 6rem 0;
}
section.work section.detail p {
  text-align: justify;
  line-height: 2;
  font-size: 1.6rem;
}
section.work section.detail ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 5rem;
}
section.work section.detail li {
  width: calc(50% - 1rem);
}
section.work section.detail li a, section.work section.detail li i {
  display: block;
  position: relative;
  background-color: #EEE;
  padding-top: 100%;
}
section.work section.detail li a img, section.work section.detail li i img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.work section.detail p.tags {
  margin-top: 5rem;
}
section.work section.detail p.tags u {
  margin-right: 1.5em;
  font-size: 1.4rem;
}
section.work aside {
  margin: 6rem 0;
}
section.work aside dt {
  margin-bottom: 1em;
  font-size: 1.8rem;
  font-weight: 700;
}
section.work aside dd a {
  display: inline-block;
  margin: 0 0.4em 0.4em 0;
  border: solid 1px var(--border-color);
  border-radius: 0.4rem;
  padding: 0.3em 0.8em;
  font-size: 1.2rem;
  color: #666;
}
section.work.cat01 h3 b {
  color: #F6AD3C;
}
section.work.cat02 h3 b {
  color: #3274BB;
}
section.work.cat03 h3 b {
  color: #9077B4;
}
section.work.cat04 h3 b {
  color: #4FAB34;
}
section.work.cat05 h3 b {
  color: #EF8586;
}
section.work.cat06 h3 b {
  color: #B5D100;
}

section.error {
  padding: 12rem var(--h-margin) 14rem;
}
section.error p {
  margin-bottom: 2em;
  text-align: center;
  line-height: 2;
  font-size: 1.6rem;
}

#layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.85);
  width: 100%;
  height: 100%;
}

section.modal {
  box-sizing: border-box;
  padding: 5rem 1rem;
  height: 100%;
  color: #FFF;
}
section.modal ul {
  position: relative;
  width: 100%;
  height: 100%;
}
section.modal li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: var(--speed-fast);
}
section.modal li.before {
  z-index: 0;
  opacity: 0;
}
section.modal li.current {
  z-index: 1;
  opacity: 1;
}
section.modal li.after {
  z-index: 0;
  opacity: 0;
}
section.modal li em {
  display: block;
  position: absolute;
  top: -3rem;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1.4rem;
}
section.modal li i {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
section.modal li i img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
section.modal .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 6rem;
  height: 6rem;
  cursor: pointer;
}
section.modal .close::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 1px);
  right: calc(50% - 2rem);
  background-color: #FFF;
  width: 4rem;
  height: 2px;
  transform: rotate(45deg);
}
section.modal .close::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 1px);
  right: calc(50% - 2rem);
  background-color: #FFF;
  width: 4rem;
  height: 2px;
  transform: rotate(-45deg);
}
section.modal .prev {
  position: absolute;
  top: calc(50% - 3rem);
  left: 0;
  z-index: 3;
  width: 6rem;
  height: 6rem;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
section.modal .prev::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 1.2rem);
  left: calc(50% - 0.6rem);
  border-top: solid 2px #FFF;
  border-left: solid 2px #FFF;
  width: 2rem;
  height: 2rem;
  transform: rotate(-45deg);
}
section.modal .next {
  position: absolute;
  top: calc(50% - 3rem);
  right: 0;
  z-index: 3;
  width: 6rem;
  height: 6rem;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
section.modal .next::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 1.2rem);
  right: calc(50% - 0.6rem);
  border-top: solid 2px #FFF;
  border-right: solid 2px #FFF;
  width: 2rem;
  height: 2rem;
  transform: rotate(45deg);
}
section.modal .counter {
  display: none;
  position: absolute;
  bottom: 2rem;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1.4rem;
  color: #999;
}
section.modal .counter b {
  color: #FFF;
}
section.modal .dots {
  position: absolute;
  bottom: 2rem;
  left: 0;
  width: 100%;
  text-align: center;
}
section.modal .dots i {
  display: inline-block;
  padding: 0.5rem;
  opacity: 0.4;
  transition: var(--speed-fast);
}
section.modal .dots i::before {
  content: "";
  display: block;
  border-radius: 9999rem;
  background-color: #FFF;
  width: 0.8rem;
  height: 0.8rem;
}
section.modal .dots i.current {
  opacity: 1;
}

@media all and (min-width: 640px) {
  section.top_works ul,
  section.works section.posts ul {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 80rem;
  }
  section.top_works li,
  section.works section.posts li {
    width: calc(50% - 1.5rem);
  }
  section.work section.data {
    display: flex;
    align-items: center;
    gap: 0 3rem;
  }
  section.work section.data ul {
    width: clamp(24rem, 40%, 30rem);
  }
  section.work section.data ul::before {
    height: 100%;
  }
  section.work section.data picture {
    flex: 1;
  }
}
@media all and (min-width: 720px) {
  section.works header h3 {
    font-size: 3.4rem;
  }
  section.works header p {
    text-align: center;
  }
  section.work section.detail li {
    width: calc(33.333% - 1.3333rem);
  }
}
@media all and (min-width: 960px) {
  section.top_works ul,
  section.works section.posts ul {
    max-width: 1200rem;
  }
  section.top_works li,
  section.works section.posts li {
    width: calc(33.333% - 2rem);
  }
  section.work::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
  }
  section.work section.detail {
    float: left;
    margin-top: 0;
    width: 68%;
  }
  section.work aside {
    float: right;
    margin-top: 0;
    width: 25%;
  }
}
/*---------------------------------------------

Stories Page Sections CSS

for yokohouse.co.jp
coded by d-spica at 2022-10-03
imported to "style.scss"

---------------------------------------------*/
section.stories {
  padding: 6rem 0;
}
section.stories header {
  margin-bottom: 6rem;
  padding: 0 var(--h-margin);
}
section.stories header h3 {
  margin-bottom: 1.5em;
  text-align: center;
  line-height: 1.6;
  font-size: 2.6rem;
  font-weight: 700;
}
section.stories header p {
  margin-bottom: 3em;
  font-size: 1.6rem;
  line-height: 2;
  text-align: justify;
}

section.top_story dl,
section.stories section.posts dl {
  position: relative;
  padding: 10rem var(--h-margin) 0;
}
section.top_story dl::before,
section.stories section.posts dl::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: var(--point-color);
  width: 100%;
  height: calc(100% - 20vw);
}
section.top_story dt,
section.stories section.posts dt {
  text-align: center;
  max-width: 40rem;
}
section.top_story dt b,
section.stories section.posts dt b {
  display: block;
  margin: 0 auto;
  border-top: solid 2px;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 3;
  font-size: 1.8rem;
  color: #FFF;
}
section.top_story dt em,
section.stories section.posts dt em {
  display: block;
  margin-bottom: 1em;
  font-size: 3rem;
  font-weight: 700;
}
section.top_story dd:nth-of-type(1),
section.stories section.posts dd:nth-of-type(1) {
  max-width: 40rem;
}
section.top_story dd:nth-of-type(1) i,
section.stories section.posts dd:nth-of-type(1) i {
  display: block;
}
section.top_story dd:nth-of-type(1) span,
section.stories section.posts dd:nth-of-type(1) span {
  display: block;
  margin-top: 3rem;
  line-height: 2;
  text-align: justify;
  font-size: 1.4rem;
}
section.top_story dd:nth-of-type(1) em,
section.stories section.posts dd:nth-of-type(1) em {
  display: block;
  margin-top: 3rem;
  line-height: 2;
  text-align: center;
  font-size: 2rem;
}
section.top_story dd:nth-of-type(2),
section.stories section.posts dd:nth-of-type(2) {
  position: relative;
  margin: 3rem -6vw 0 auto;
  max-width: 60rem;
  width: calc(100% - 8rem + 6vw);
}
section.top_story dd:nth-of-type(2) i,
section.stories section.posts dd:nth-of-type(2) i {
  display: block;
}
section.top_story dd:nth-of-type(2) a,
section.stories section.posts dd:nth-of-type(2) a {
  display: block;
  position: absolute;
  top: 20%;
  left: -8rem;
  padding: 0.8em 3rem;
  width: 12rem;
  letter-spacing: 0.2em;
  font-size: 1.2rem;
  font-weight: 500;
  color: #FFF;
}
section.top_story dd:nth-of-type(2) a::after,
section.stories section.posts dd:nth-of-type(2) a::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  width: 100%;
  height: 1px;
  transition: var(--speed-fast);
}
section.top_story dd:nth-of-type(2) a:hover::after,
section.stories section.posts dd:nth-of-type(2) a:hover::after {
  left: 2rem;
}

section.stories section.posts dl {
  margin: 6rem 0;
}
section.stories section.posts dl:nth-of-type(2n)::before {
  left: auto;
  right: 0;
}
section.stories section.posts dl:nth-of-type(2n) dt {
  margin-left: auto;
}
section.stories section.posts dl:nth-of-type(2n) dd:nth-of-type(1) {
  margin-left: auto;
}
section.stories section.posts dl:nth-of-type(2n) dd:nth-of-type(2) {
  margin: 3rem auto 0 -6vw;
}
section.stories section.posts dl:nth-of-type(2n) dd:nth-of-type(2) a {
  left: auto;
  right: -8rem;
  text-align: right;
}
section.stories section.posts dl:nth-of-type(2n) dd:nth-of-type(2) a::after {
  left: auto;
  right: 0;
}
section.stories section.posts dl:nth-of-type(2n) dd:nth-of-type(2) a:hover::after {
  right: 2rem;
}

section.story {
  padding-bottom: 8rem;
}
section.story > header {
  margin: 0 auto;
  padding: 0 6vw;
  max-width: 132rem;
}
section.story > header picture {
  display: block;
}
section.story > header picture img {
  width: 100%;
}
section.story > header h3 {
  margin-top: 2rem;
  margin-bottom: 1em;
  font-size: 3.2rem;
  font-weight: 700;
}
section.story > header h3 b {
  display: block;
  margin-bottom: 0.8em;
  font-size: 2rem;
  font-weight: 500;
  color: var(--point-color);
}
section.story > header p {
  text-align: justify;
  line-height: 1.8;
  font-size: 2rem;
  font-weight: 700;
}
section.story > header p span {
  display: block;
  margin-top: 1.5em;
  font-size: 1.7rem;
}
section.story > header dl {
  position: relative;
  margin-top: 3rem;
}
section.story > header dl::before {
  content: "";
  display: block;
  position: absolute;
  top: 1.1rem;
  left: 0;
  z-index: -1;
  background-color: var(--key-color);
  width: 100%;
  height: 1px;
}
section.story > header dt {
  border-radius: 9999rem;
  background-color: var(--key-color);
  padding: 0.2em 1em;
  width: 3em;
  text-align: center;
  font-size: 1.2rem;
  color: #FFF;
}
section.story > header dd {
  margin-top: 1em;
  line-height: 2;
  font-size: 1.3rem;
}
section.story section.members {
  position: relative;
  margin: 10rem auto;
  box-sizing: border-box;
  padding: 0 min(6vw, 12rem) 10rem;
  max-width: 132rem;
}
section.story section.members::before {
  content: "";
  display: block;
  position: absolute;
  top: 1.5rem;
  left: 0;
  z-index: -1;
  background-color: #F9F0EC;
  width: 100%;
  height: calc(100% - 1.5rem);
}
section.story section.members h4 {
  margin: 0 auto;
  background-color: #F2A098;
  padding: 0.3em 1em;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1.4;
  letter-spacing: 0.05em;
  font-size: 2rem;
  font-weight: 500;
  color: #FFF;
}
section.story section.members li {
  margin-top: 7rem;
  font-size: 1.6rem;
}
section.story section.members li i {
  display: block;
  margin-bottom: 3rem;
  width: min(20rem, 50%);
}
section.story section.members li em {
  display: block;
  margin-bottom: 3rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-size: 2.4rem;
  font-weight: 700;
  color: #F2A098;
}
section.story section.members li b {
  display: block;
  margin-bottom: 0.5em;
  line-height: 2;
  font-weight: 700;
}
section.story section.members li span {
  display: block;
  line-height: 2;
  text-align: justify;
}
section.story section.members li:nth-of-type(1) i {
  width: min(24rem, 75%);
}
section.story section.phase {
  padding: 8rem var(--h-margin);
  font-size: 1.6rem;
}
section.story section.phase h4 {
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--point-color);
}
section.story section.phase h4 b {
  display: block;
  margin-bottom: 2em;
  font-size: 2rem;
  color: var(--font-color);
}
section.story section.phase dl {
  margin-top: 8rem;
}
section.story section.phase dl dt {
  margin-bottom: 1em;
  letter-spacing: 0.05em;
  font-size: 2.4rem;
  font-weight: 700;
}
section.story section.phase dl dd p {
  margin-bottom: 2em;
  line-height: 2;
  text-align: justify;
}
section.story section.phase dl dd:nth-of-type(2) {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 60rem;
}
section.story section.phase dl dd:nth-of-type(2)::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: -1;
  background-color: #9FA0A0;
  width: 100%;
  height: 100%;
}
section.story section.phase dl dd:nth-of-type(2) img {
  width: 100%;
}
section.story section.phase.with-background {
  background-color: #D1E3EF;
}
section.story section.phase.with-background h4 {
  color: var(--font-color);
}
section.story .nav-gallery {
  margin-top: 6rem;
  text-align: center;
}
section.story .nav-gallery a {
  display: inline-block;
  border: solid 2px var(--point-color);
  background-color: var(--point-color);
  padding: 0.7em min(2em, 5vw);
  font-size: min(2.6rem, 4vw);
  font-weight: 700;
  color: #FFF;
}
section.story .nav-gallery a::after {
  content: "";
  display: inline-block;
  margin-left: 0.5em;
  border-left: solid 0.5em;
  border-top: solid 0.4em transparent;
  border-bottom: solid 0.4em transparent;
  width: 0;
  height: 0;
}
section.story .nav-gallery a:hover {
  background: #FFF;
  color: var(--point-color);
}

@media all and (min-width: 560px) {
  section.story section.members li {
    display: grid;
    grid-template-columns: 20% 75%;
    grid-template-rows: auto 1fr;
    gap: 0 5%;
  }
  section.story section.members li i {
    grid-column: 1/2;
    grid-row: 1/3;
    margin-bottom: 0;
    width: 100%;
  }
  section.story section.members li:nth-of-type(1) {
    grid-template-columns: 25% 70%;
    grid-template-rows: auto auto 1fr;
  }
  section.story section.members li:nth-of-type(1) i {
    grid-row: 1/4;
    width: 100%;
  }
  section.story .nav-gallery a {
    padding-left: 2em;
    padding-right: 2em;
  }
}
@media all and (min-width: 720px) {
  section.stories header h3 {
    font-size: 3.4rem;
  }
  section.stories header p {
    text-align: center;
  }
  section.top_story dl::before,
  section.stories section.posts dl::before {
    width: max(50rem, 70%);
  }
}
@media all and (min-width: 960px) {
  section.top_story dl,
  section.stories section.posts dl {
    display: grid;
    grid-template-columns: min(40%, 40rem) 1fr;
    grid-template-rows: auto auto;
    gap: 0 min(6vw, 7rem);
    padding-bottom: 18rem;
  }
  section.top_story dl::before,
  section.stories section.posts dl::before {
    height: calc(100% - 8rem);
  }
  section.top_story dt,
  section.stories section.posts dt {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  section.top_story dd:nth-of-type(1),
  section.stories section.posts dd:nth-of-type(1) {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  section.top_story dd:nth-of-type(2),
  section.stories section.posts dd:nth-of-type(2) {
    grid-column: 2/3;
    grid-row: 1/3;
    align-self: end;
    margin-bottom: -18rem;
    width: calc(100% + 6vw);
    max-width: none;
  }
  section.top_story dd:nth-of-type(2) a,
  section.stories section.posts dd:nth-of-type(2) a {
    top: auto;
    bottom: 13rem;
  }
  section.top_story dl.no-link {
    padding-bottom: 0;
  }
  section.stories section.posts dl:nth-of-type(2n) {
    grid-template-columns: 1fr min(40%, 40rem);
  }
  section.stories section.posts dl:nth-of-type(2n) dt {
    grid-column: 2/3;
  }
  section.stories section.posts dl:nth-of-type(2n) dd:nth-of-type(1) {
    grid-column: 2/3;
  }
  section.stories section.posts dl:nth-of-type(2n) dd:nth-of-type(2) {
    grid-column: 1/2;
    margin-bottom: -18rem;
  }
  section.story > header {
    display: grid;
    grid-template-columns: min(40%, 50rem) 1fr;
    grid-template-rows: auto auto auto 1fr;
    gap: 0 4rem;
  }
  section.story > header picture {
    grid-column: 2/3;
    grid-row: 1/5;
    margin-top: -5.2rem;
  }
  section.story > header h3 {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  section.story > header p {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  section.story > header dl {
    grid-column: 1/2;
    grid-row: 3/4;
  }
  section.story section.members ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 7rem;
  }
  section.story section.members li {
    grid-template-columns: 30% 65%;
  }
  section.story section.members li:nth-of-type(1) {
    border-bottom: dotted 3px #999;
    padding-bottom: 7rem;
    width: 100%;
    grid-template-columns: 20% 75%;
  }
  section.story section.members li:nth-of-type(n+2) {
    width: calc(50% - 3.5rem);
  }
  section.story section.phase dl {
    display: grid;
    grid-template-columns: 53% 42%;
    grid-template-rows: auto 1fr;
    gap: 0 5%;
  }
  section.story section.phase dl dt {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  section.story section.phase dl dd:nth-of-type(1) {
    grid-column: 1/2;
    grid-row: 2/3;
    margin-bottom: -2em;
  }
  section.story section.phase dl dd:nth-of-type(2) {
    grid-column: 2/3;
    grid-row: 1/4;
    margin-bottom: auto;
  }
  section.story section.phase dl:nth-of-type(2n) {
    grid-template-columns: 42% 53%;
  }
  section.story section.phase dl:nth-of-type(2n) dt {
    grid-column: 2/3;
  }
  section.story section.phase dl:nth-of-type(2n) dd:nth-of-type(1) {
    grid-column: 2/3;
  }
  section.story section.phase dl:nth-of-type(2n) dd:nth-of-type(2) {
    grid-column: 1/2;
  }
}
/*---------------------------------------------

Columns Page Sections CSS

for yokohouse.co.jp
coded by d-spica at 2022-10-04
imported to "style.scss"

---------------------------------------------*/
section.columns {
  padding: 6rem var(--h-margin);
}
section.columns header {
  margin-bottom: 6rem;
}
section.columns header h3 {
  margin-bottom: 1.5em;
  text-align: center;
  line-height: 1.6;
  font-size: 2.6rem;
  font-weight: 700;
}
section.columns header p {
  margin-bottom: 3em;
  font-size: 1.6rem;
  line-height: 2;
  text-align: justify;
}
section.columns header ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 0 auto;
  max-width: 96rem;
  text-align: center;
  font-size: min(3.6vw, 1.6rem);
  font-weight: 700;
}
section.columns header li {
  display: inline-block;
}
section.columns header li a {
  display: block;
  border-radius: 9999rem;
  border: solid 1px #BBB;
  padding: 0.7em 2em;
}
section.columns header li a:hover {
  background-color: #EEE;
}
section.columns section.posts {
  padding-bottom: 6rem;
}
section.columns section.posts ul {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  margin: 0 auto;
  max-width: 32rem;
}
section.columns section.posts li i {
  display: block;
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  padding-top: 100%;
  height: 0;
}
section.columns section.posts li i img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: var(--speed-fast);
}
section.columns section.posts li i u {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--point-color);
  padding: 0.4rem 1.5rem;
  width: 3rem;
  text-align: center;
  color: #FFF;
}
section.columns section.posts li i u span {
  display: inline-block;
}
section.columns section.posts li i u span:nth-of-type(1) {
  font-size: 1.2rem;
}
section.columns section.posts li i u span:nth-of-type(2) {
  border-bottom: solid 1px;
  line-height: 1.6;
  font-size: 1.8rem;
}
section.columns section.posts li i u span:nth-of-type(3) {
  font-size: 1.8rem;
  line-height: 1.6;
}
section.columns section.posts li b {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: #666;
}
section.columns section.posts li em {
  display: block;
  padding: 0.5em 0;
  font-size: 1.4rem;
  font-weight: 700;
  transition: var(--speed-fast);
}
section.columns section.posts li a {
  display: block;
}
section.columns section.posts li a:hover i img {
  transform: scale(1.2);
}
section.columns section.posts li a:hover em {
  color: var(--point-color);
}
section.columns section.posts .nav-more {
  margin-top: 6rem;
  text-align: center;
}
section.columns section.posts .nav-more button.is-opened {
  display: none;
}

section.column {
  padding: 6rem max(6vw, 50vw - 50rem);
}
section.column h3 {
  margin-bottom: 1.5em;
  font-size: 3.4rem;
  font-weight: 700;
}
section.column .meta {
  display: flex;
  align-items: center;
  gap: 0 2rem;
  margin-bottom: 1.5em;
  font-size: 1.6rem;
}
section.column .meta u {
  display: inline-block;
  background-color: var(--point-color);
  padding: 0.4rem 1.5rem;
  width: 3rem;
  text-align: center;
  color: #FFF;
}
section.column .meta u span {
  display: inline-block;
}
section.column .meta u span:nth-of-type(1) {
  font-size: 1.2rem;
}
section.column .meta u span:nth-of-type(2) {
  border-bottom: solid 1px;
  line-height: 1.6;
  font-size: 1.8rem;
}
section.column .meta u span:nth-of-type(3) {
  font-size: 1.8rem;
  line-height: 1.6;
}
section.column .meta b {
  display: inline-block;
  border-radius: 9999rem;
  border: solid 1px #BBB;
  padding: 0.7em 2em;
}
section.column picture {
  display: block;
  margin-bottom: 3rem;
  text-align: center;
}
section.column .post-body {
  font-size: 1.6rem;
}
section.column .nav-index {
  margin-top: 6rem;
  text-align: center;
}

section.relation-columns {
  padding: 6rem max(6vw, 50vw - 50rem);
}
section.relation-columns h3 {
  margin-bottom: 1em;
  border-bottom: solid 1px var(--border-color);
  padding-bottom: 0.2em;
  font-size: 2.4rem;
  font-weight: 700;
}
section.relation-columns ul {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  margin: 0 auto 6rem;
  max-width: 32rem;
}
section.relation-columns li i {
  display: block;
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  padding-top: 100%;
  height: 0;
}
section.relation-columns li i img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: var(--speed-fast);
}
section.relation-columns li i u {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--point-color);
  padding: 0.4rem 1.5rem;
  width: 3rem;
  text-align: center;
  color: #FFF;
}
section.relation-columns li i u span {
  display: inline-block;
}
section.relation-columns li i u span:nth-of-type(1) {
  font-size: 1.2rem;
}
section.relation-columns li i u span:nth-of-type(2) {
  border-bottom: solid 1px;
  line-height: 1.6;
  font-size: 1.8rem;
}
section.relation-columns li i u span:nth-of-type(3) {
  font-size: 1.8rem;
  line-height: 1.6;
}
section.relation-columns li b {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: #666;
}
section.relation-columns li em {
  display: block;
  padding: 0.5em 0;
  font-size: 1.4rem;
  font-weight: 700;
  transition: var(--speed-fast);
}
section.relation-columns li a {
  display: block;
}
section.relation-columns li a:hover i img {
  transform: scale(1.2);
}
section.relation-columns li a:hover em {
  color: var(--point-color);
}

@media all and (min-width: 480px) {
  section.columns header p {
    text-align: center;
  }
}
@media all and (min-width: 560px) {
  section.columns section.posts ul {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
  }
  section.columns section.posts li {
    width: calc(50% - 2.5rem);
  }
  section.relation-columns ul {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
  }
  section.relation-columns li {
    width: calc(50% - 2.5rem);
  }
}
@media all and (min-width: 720px) {
  section.columns header h3 {
    font-size: 3.4rem;
  }
}
@media all and (min-width: 800px) {
  section.columns section.posts li {
    width: calc(33.333% - 3.3333rem);
  }
  section.relation-columns li {
    width: calc(33.333% - 3.3333rem);
  }
}
@media all and (min-width: 1200px) {
  section.columns section.posts li {
    width: calc(25% - 3.75rem);
  }
}
/*---------------------------------------------

News Page Sections CSS

for yokohouse.co.jp
coded by d-spica at 2023-01-04
imported to "style.scss"

---------------------------------------------*/
section.news {
  padding: 6rem var(--h-margin);
}
section.news h3 {
  margin-bottom: 2em;
  text-align: center;
  font-size: 2.6rem;
  font-weight: 700;
}
section.news ul {
  margin: 0 auto;
  max-width: 80rem;
  font-size: 1.4rem;
}
section.news li {
  margin-bottom: 2em;
}
section.news li a, section.news li u {
  display: block;
}
section.news li a:hover {
  color: var(--point-color);
}
section.news li b {
  display: inline-block;
  margin-right: 1.5em;
  border: solid 1px;
  padding: 0.3em;
  width: 10em;
  text-align: center;
  white-space: nowrap;
}
section.news li time {
  display: inline-block;
  width: 7em;
}
section.news li span {
  display: block;
  margin-top: 0.6em;
  line-height: 1.8;
}
section.news .nav-more {
  margin-top: 4rem;
  width: 100%;
  text-align: center;
}
section.news .nav-more button.is-opened {
  display: none;
}

@media all and (min-width: 720px) {
  section.news li a, section.news li u {
    display: flex;
    align-items: center;
  }
  section.news li span {
    flex: 1;
    margin-top: 0;
  }
}
/*---------------------------------------------

Company Page Sections CSS

for yokohouse.co.jp
coded by d-spica at 2022-10-05
imported to "style.scss"

---------------------------------------------*/
span[id] {
  position: absolute;
  top: -6rem;
  left: 0;
  height: 0;
}

section.company,
section.sdgs,
section.recruit {
  padding: 6rem max(6vw, 50vw - 50rem);
}
section.company header h3,
section.sdgs header h3,
section.recruit header h3 {
  margin: 0 -1em 1.5em;
  text-align: center;
  line-height: 1.6;
  font-size: min(2.6rem, 5vw);
  font-weight: 700;
}
section.company header p,
section.sdgs header p,
section.recruit header p {
  margin-bottom: 3em;
  font-size: 1.6rem;
  line-height: 2;
  text-align: justify;
}
section.company header .date,
section.sdgs header .date,
section.recruit header .date {
  text-align: right;
  font-size: 1.4rem;
}
section.company .logo,
section.sdgs .logo,
section.recruit .logo {
  margin: 5rem auto;
  max-width: 42rem;
}
section.company .mark,
section.sdgs .mark,
section.recruit .mark {
  margin: 5rem auto 0;
  width: 8rem;
}
section.company section.data,
section.sdgs section.data,
section.recruit section.data {
  position: relative;
  margin: 6rem 0;
}
section.company section.data h4,
section.sdgs section.data h4,
section.recruit section.data h4 {
  margin-bottom: 1em;
  font-size: 1.8rem;
  font-weight: 700;
}
section.company section.data dl,
section.sdgs section.data dl,
section.recruit section.data dl {
  border-bottom: solid 1px var(--border-color);
  padding: 1em 0;
  line-height: 1.8;
  font-size: 1.4rem;
}
section.company section.data dl:nth-of-type(1),
section.sdgs section.data dl:nth-of-type(1),
section.recruit section.data dl:nth-of-type(1) {
  border-top: solid 1px var(--border-color);
}
section.company section.data dt,
section.sdgs section.data dt,
section.recruit section.data dt {
  font-weight: 700;
}
section.company section.data dd,
section.sdgs section.data dd,
section.recruit section.data dd {
  padding-left: 1em;
}
section.company section.data dd span,
section.sdgs section.data dd span,
section.recruit section.data dd span {
  display: inline-block;
  width: 24em;
}
section.company section.data figure,
section.sdgs section.data figure,
section.recruit section.data figure {
  margin-top: 2rem;
}
section.company section.data figure iframe,
section.sdgs section.data figure iframe,
section.recruit section.data figure iframe {
  width: 100%;
  height: 40rem;
}
section.company section.action,
section.sdgs section.action,
section.recruit section.action {
  position: relative;
  margin: 6rem 0;
  font-size: 1.6rem;
}
section.company section.action h4,
section.sdgs section.action h4,
section.recruit section.action h4 {
  margin-bottom: 1.2em;
  text-align: center;
  line-height: 1.8;
  font-size: 2.6rem;
  font-weight: 700;
}
section.company section.action h4 b,
section.sdgs section.action h4 b,
section.recruit section.action h4 b {
  display: block;
  margin-bottom: 1em;
  font-size: 1.8rem;
}
section.company section.action p,
section.sdgs section.action p,
section.recruit section.action p {
  line-height: 2;
  margin-bottom: 2em;
  text-align: justify;
}
section.company section.action .image-left,
section.sdgs section.action .image-left,
section.recruit section.action .image-left {
  display: block;
  margin-bottom: 1.5em;
  margin-right: auto;
}
section.company section.action .image-right,
section.sdgs section.action .image-right,
section.recruit section.action .image-right {
  display: block;
  margin-bottom: 1.5em;
  margin-left: auto;
}
section.company section.action .image-center,
section.sdgs section.action .image-center,
section.recruit section.action .image-center {
  display: block;
  margin: 0 auto 1.5em;
}
section.company section.action ol,
section.sdgs section.action ol,
section.recruit section.action ol {
  display: flex;
  gap: 0 6rem;
  position: relative;
  margin: 3rem auto 4rem;
  max-width: 34rem;
  list-style: none;
}
section.company section.action ol::before,
section.sdgs section.action ol::before,
section.recruit section.action ol::before {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  left: 20%;
  z-index: -1;
  border-top: dotted 6px var(--point-color);
  width: 60%;
  height: 0;
  opacity: 0.6;
}
section.company section.action ol li,
section.sdgs section.action ol li,
section.recruit section.action ol li {
  border-radius: 9999rem;
  background-color: var(--point-color);
  width: 14rem;
  height: 14rem;
  text-align: center;
  line-height: 14rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: #FFF;
}
section.company section.action .contact,
section.sdgs section.action .contact,
section.recruit section.action .contact {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem 4rem;
  text-align: center;
}
section.company section.action .contact a,
section.sdgs section.action .contact a,
section.recruit section.action .contact a {
  display: inline-block;
  box-sizing: border-box;
  border: solid 1px var(--key-color);
  background-color: var(--key-color);
  padding: 1.5em 1em;
  width: min(100%, 29rem);
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.1em;
  vertical-align: bottom;
  font-size: 1.8rem;
  color: #FFF;
}
section.company section.action .contact a::before,
section.sdgs section.action .contact a::before,
section.recruit section.action .contact a::before {
  content: "";
  display: inline-block;
  margin-right: 0.8em;
  background: url("../img/ic-mail.svg") no-repeat 50% 50%/contain;
  width: 2.4rem;
  height: 1.6rem;
  vertical-align: -0.1em;
  filter: grayscale(1) brightness(5);
  transition: 0.3s;
}
section.company section.action .contact a:hover,
section.sdgs section.action .contact a:hover,
section.recruit section.action .contact a:hover {
  background-color: #FFF;
  color: var(--key-color);
}
section.company section.action .contact a:hover::before,
section.sdgs section.action .contact a:hover::before,
section.recruit section.action .contact a:hover::before {
  filter: grayscale(1) brightness(0);
}
section.company section.action .contact u,
section.sdgs section.action .contact u,
section.recruit section.action .contact u {
  display: inline-block;
  box-sizing: border-box;
  border: solid 1px var(--key-color);
  padding: 0.52em 0.5em;
  width: min(100%, 29rem);
  text-align: center;
  line-height: 1.4;
  vertical-align: bottom;
  font-size: 1.8rem;
}
section.company section.action .contact u b,
section.sdgs section.action .contact u b,
section.recruit section.action .contact u b {
  font-size: 166.66%;
}
section.company section.action .contact u i,
section.sdgs section.action .contact u i,
section.recruit section.action .contact u i {
  display: block;
  font-size: 72.222%;
}
section.company section.action dl,
section.sdgs section.action dl,
section.recruit section.action dl {
  margin-top: 4rem;
  text-align: center;
  line-height: 2;
}
section.company section.action dt,
section.sdgs section.action dt,
section.recruit section.action dt {
  margin-bottom: 1em;
  font-size: 1.8rem;
  font-weight: 700;
}
section.company section.goal,
section.sdgs section.goal,
section.recruit section.goal {
  margin: 5rem 0;
  font-size: 1.4rem;
}
section.company section.goal h4,
section.sdgs section.goal h4,
section.recruit section.goal h4 {
  margin-bottom: 0.6em;
  font-size: 1.6rem;
  font-weight: 700;
}
section.company section.goal h4 b,
section.sdgs section.goal h4 b,
section.recruit section.goal h4 b {
  display: inline-block;
  margin-right: 0.6em;
  background-color: var(--key-color);
  width: 1.4em;
  text-align: center;
  vertical-align: -0.1em;
  font-size: 2rem;
  color: #FFF;
}
section.company section.goal .summary,
section.sdgs section.goal .summary,
section.recruit section.goal .summary {
  margin-left: 4rem;
  margin-bottom: 1.6em;
  line-height: 1.8;
}
section.company section.goal .marks,
section.sdgs section.goal .marks,
section.recruit section.goal .marks {
  margin-left: 3.5rem;
  margin-bottom: 1.6em;
  text-align: right;
}
section.company section.goal .marks img,
section.sdgs section.goal .marks img,
section.recruit section.goal .marks img {
  margin-left: 0.5rem;
  width: calc(25% - 0.5rem);
  max-width: 10rem;
}
section.company section.goal dl,
section.sdgs section.goal dl,
section.recruit section.goal dl {
  background-color: #E6E6E6;
}
section.company section.goal dt,
section.sdgs section.goal dt,
section.recruit section.goal dt {
  display: inline-block;
  background-color: var(--key-color);
  padding: 0.2em 0.5em;
  color: #FFF;
}
section.company section.goal dd,
section.sdgs section.goal dd,
section.recruit section.goal dd {
  padding: 1em 1.5em;
  line-height: 1.8;
}

section.terms {
  padding: 6rem max(6vw, 50vw - 50rem);
}
section.terms section {
  margin: 6rem 0;
}
section.terms h4 {
  margin-bottom: 1em;
  font-size: 1.8rem;
  font-weight: 700;
}
section.terms p {
  margin-bottom: 2em;
  line-height: 2;
  font-size: 1.4rem;
}
section.terms p.signature {
  margin-left: auto;
  width: -moz-fit-content;
  width: fit-content;
}
section.terms p.address {
  margin-right: auto;
  border: solid 1px var(--border-color);
  padding: 1em 2em;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
}
section.terms p + ol {
  margin-top: -1em;
}
section.terms ol {
  margin-bottom: 2em;
  padding-left: 1.5em;
  line-height: 1.8;
  font-size: 1.4rem;
}
section.terms ol li {
  margin-bottom: 0.5em;
}

@media all and (min-width: 640px) {
  section.company section.data dl,
  section.recruit section.data dl {
    display: flex;
  }
  section.company section.data dt,
  section.recruit section.data dt {
    width: 10em;
  }
  section.company section.data dd,
  section.recruit section.data dd {
    flex: 1;
  }
  section.company section.action::after,
  section.recruit section.action::after {
    content: "";
    display: block;
    clear: both;
    margin-top: -2em;
    height: 0;
  }
  section.company section.action .image-left,
  section.recruit section.action .image-left {
    float: left;
    margin-right: 3.6%;
    max-width: 50%;
  }
  section.company section.action .image-right,
  section.recruit section.action .image-right {
    float: right;
    margin-left: 3.6%;
    max-width: 50%;
  }
  section.company section.action .contact,
  section.recruit section.action .contact {
    flex-direction: row;
  }
}
@media all and (min-width: 720px) {
  section.company header h3,
  section.sdgs header h3 {
    font-size: 3.4rem;
  }
  section.company header p,
  section.sdgs header p {
    text-align: center;
  }
  section.company section.goal,
  section.sdgs section.goal {
    display: grid;
    grid-template-columns: 56% 44%;
    grid-template-rows: auto auto auto;
  }
  section.company section.goal h4,
  section.sdgs section.goal h4 {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  section.company section.goal .summary,
  section.sdgs section.goal .summary {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  section.company section.goal .marks,
  section.sdgs section.goal .marks {
    grid-column: 2/3;
    grid-row: 1/3;
    align-self: self-end;
    margin-left: 1.5rem;
    margin-bottom: 1.2em;
  }
  section.company section.goal dl,
  section.sdgs section.goal dl {
    grid-column: 1/3;
    grid-row: 3/4;
  }
  section.company section.goal:nth-of-type(1),
  section.sdgs section.goal:nth-of-type(1) {
    grid-template-columns: 67% 33%;
  }
  section.company section.goal:nth-of-type(1) .marks img,
  section.sdgs section.goal:nth-of-type(1) .marks img {
    width: calc(33.333% - 0.5rem);
  }
  section.company section.goal:nth-of-type(2),
  section.sdgs section.goal:nth-of-type(2) {
    grid-template-columns: 78% 22%;
  }
  section.company section.goal:nth-of-type(2) .marks img,
  section.sdgs section.goal:nth-of-type(2) .marks img {
    width: calc(50% - 0.5rem);
  }
  section.recruit header h3 {
    font-size: 3.4rem;
  }
  section.recruit section.action .attention {
    text-align: center;
  }
}
@media all and (min-width: 960px) {
  span[id] {
    top: -9rem;
  }
}
/*---------------------------------------------

Contact Page Sections CSS

for yokohouse.co.jp
coded by d-spica at 2022-10-05
imported to "style.scss"

---------------------------------------------*/
section.contact {
  padding: 6rem max(6vw, 50vw - 50rem);
}
section.contact header p {
  margin-bottom: 3em;
  font-size: 1.6rem;
  line-height: 2;
  text-align: justify;
}
section.contact header h3 {
  margin: 6rem 0 3rem;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}
section.contact header ol {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 0 auto 1.5em;
  max-width: 32rem;
  width: 80%;
  list-style: none;
  font-size: 2.6rem;
}
section.contact header ol::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(1.3em - 1px);
  left: 1.3em;
  z-index: -1;
  background-color: var(--border-color);
  width: calc(100% - 2.6em);
  height: 2px;
}
section.contact header ol li {
  text-align: center;
}
section.contact header ol li i {
  display: block;
  border-radius: 9999rem;
  background-color: var(--border-color);
  width: 2.4em;
  height: 2.4em;
  line-height: 2.4em;
  font-weight: 500;
  color: #FFF;
}
section.contact header ol li em {
  display: block;
  margin-top: 0.4em;
  letter-spacing: 0.1em;
  font-size: 1.6rem;
  font-weight: 700;
}
section.contact header ol li.current i {
  background-color: var(--key-color);
}
section.contact .attention {
  text-align: center;
  font-size: 1.5rem;
}
section.contact form {
  margin: 6rem auto 0;
  font-size: 1.6rem;
}
section.contact form b {
  display: inline-block;
  border-radius: 0.4rem;
  background-color: #C32C26;
  padding: 0.1em 0.7em;
  letter-spacing: 0.1em;
  font-size: 1.2rem;
  font-weight: 400;
  color: #FFF;
}
section.contact form dl {
  border-top: solid 1px var(--border-color);
  padding: 1.5em 0;
}
section.contact form dt {
  margin-bottom: 1em;
  font-weight: 700;
}
section.contact form dd span.note {
  line-height: 1.6;
  font-size: 1.2rem;
}
section.contact form dd label {
  display: inline-block;
}
section.contact [type=text], section.contact [type=email], section.contact [type=tel], section.contact select, section.contact textarea {
  box-sizing: border-box;
  border: solid 1px #808080;
  border-radius: 0.4rem;
  background-color: #F2F2F2;
  padding: 0.4em 0.8em;
  width: 100%;
}
section.contact [type=radio], section.contact [type=checkbox] {
  margin: 0.5em 1em 0.5em 0.5em;
  vertical-align: middle;
  transform: scale(2);
}
section.contact select {
  background: #F2F2F2 url("../img/bg-select.svg") no-repeat top 50% right 0.5em/0.6em auto;
  padding: 0.7em 2.5em 0.7em 0.8em;
}
section.contact .inquirer label {
  margin-right: 2em;
}
section.contact .address [type=text]:nth-of-type(n+2) {
  margin-top: 0.5em;
}
section.contact .way label {
  margin-right: 2em;
}
section.contact .email span, section.contact .tel span {
  display: block;
  margin-top: 0.5em;
}
section.contact .agree {
  padding: 2.5em 0 1.5em;
  text-align: center;
}
section.contact .agree dt {
  margin-bottom: 2em;
  line-height: 2;
  font-weight: 400;
}
section.contact .agree dd {
  line-height: 1.8;
}
section.contact .agree dd label {
  display: block;
  margin-top: 1em;
}
section.contact .agree a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--point-color);
}
section.contact .agree a::after {
  content: "";
  display: inline-block;
  margin-left: 0.3em;
  background: url("../img/mk-blank.svg") no-repeat 50% 50%/80% auto;
  width: 1em;
  height: 1em;
}
section.contact .agree a:hover {
  text-decoration: none;
}
section.contact .button {
  margin: 4rem 0 6rem;
  text-align: center;
}
section.contact .button [type=submit], section.contact .button button {
  display: inline-block;
  position: relative;
  border-radius: 0.4rem;
  box-sizing: border-box;
  background-color: var(--key-color);
  padding: 1em;
  width: min(100%, 50rem);
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 1.6rem;
  color: #FFF;
  transition: var(--speed-fast);
}
section.contact .button [type=submit]::after, section.contact .button button::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.5rem);
  right: 2rem;
  border-bottom: solid 1px;
  border-right: solid 2px;
  width: 2.4rem;
  height: 0.6rem;
  transform: skewX(45deg);
  transition: 0.3s;
}
section.contact .button [type=submit]:hover, section.contact .button button:hover {
  filter: brightness(2);
}
section.contact .button [type=submit]:hover::after, section.contact .button button:hover::after {
  right: 1rem;
}
section.contact .mw_wp_form_confirm dd span.note {
  display: none;
}
section.contact .mw_wp_form_confirm .agree > * {
  display: none !important;
}
section.contact .mw_wp_form_confirm .button {
  margin-top: 3rem;
}
section.contact .thanks {
  padding: 6rem 0;
  text-align: center;
  font-size: 1.6rem;
}

@media all and (min-width: 480px) {
  section.contact .button [type=submit], section.contact .button button {
    font-size: 1.8rem;
  }
}
@media all and (min-width: 720px) {
  section.contact header p {
    margin-left: auto;
    margin-right: auto;
    width: -moz-fit-content;
    width: fit-content;
  }
  section.contact .inquirer dt, section.contact .way dt {
    margin-top: 0 !important;
  }
  section.contact .mw_wp_form_confirm dt {
    margin-top: 0 !important;
  }
}
@media all and (min-width: 960px) {
  section.contact form > dl:not(.agree) {
    display: flex;
  }
  section.contact form > dl:not(.agree) dt {
    margin-bottom: 0;
    margin-top: 0.8em;
    width: 20em;
  }
  section.contact form > dl:not(.agree) dd {
    flex: 1;
  }
}/*# sourceMappingURL=style.css.map */