@charset "UTF-8";
/*
Theme Name: spacewidestudio
Theme URI: https://space-wide.com
Author: Takashi Abo
Author URI: https://moritoneko.com
Description:Space Wide Studio is a first-class architectural firm in Gifu. We design and design houses, stores, interiors, products, etc.
Requires at least: 5.8
Tested up to: 5.8
Requires PHP: 5.6
Version: 1.0
License: Owned by Space Wide studio and moritoneko.com.
License URI: https://moritoneko.com
Tags:white, responsive-layout,
Text Domain: spacewidestudio
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

spacewidestudio WordPress Theme, (C) 2021 Space Wide studio and moritoneko.com.
spacewidestudio is owned by Space Wide studio and moritoneko.com.
*/
/*** 1.0.0 common ***/
/*** 1.1.0 contact ***/
/*** 2.0.0 header ***/
/*** 3.0.0 footer ***/
/*** 4.0.0 index page ***/
/*** 5.0.0 under page ***/
/*** 6.1.0 works page ***/
/*** 6.1.1 work details page ***/
/*** 7.0.0 blog page ***/
/*** 8.0.0 about page ***/
/*** 1.0.0 common ***/
/*color*/
/*layout*/
/*reCAPTCHA 非表示*/
.grecaptcha-badge {
  visibility: hidden;
}

/*allpage*/
body {
  font-family: "Quicksand", "Yu Gothic medium", "Yu Gothic", Verdana, "Hiragino Sans", Meiryo, "sans-serif";
}

body,
main,
ul,
li,
p {
  font-size: 12px;
  font-weight: 400;
  text-align: justify;
}

h1,
h2,
h3,
h4,
h5,
p {
  line-height: 1.5rem;
}

a {
  color: #000;
  transition: all 0.6s;
  text-align: justify;
}
a:hover {
  color: #ccc;
}

img {
  vertical-align: top;
}

/*loading*/
.loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  opacity: 1;
  visibility: visible;
}

.loading.is-active {
  opacity: 0;
  visibility: hidden;
}

.loading-animation {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: white;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}
.loading-animation .title {
  font-size: 24px;
  font-weight: 600;
  color: black;
  animation-name: loading;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

@keyframes loading {
  0% {
    opacity: 1;
    filter: blur(0px);
    color: #000;
  }
  60% {
    opacity: 1;
    font-size: 24px;
    filter: blur(0px);
    color: #000;
  }
  100% {
    opacity: 0;
    font-size: 36px;
    color: white;
    filter: blur(108px);
  }
}
.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}

/* img animation */
/*1.fadein common*/
.scrollanime {
  opacity: 0;
} /*Prevents momentary display*/
.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}

@keyframes fadeInDown {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
/*2.fade up & fade down*/
.updown {
  transform: translateY(-100px);
}

.downup {
  transform: translateY(100px);
  opacity: 0.2;
}

/*3.fade reft & right*/
.sect02 {
  overflow: hidden;
} /*None scroll bar*/
.slide-right {
  transform: translateX(200px);
}

.slide-left {
  transform: translateX(-200px);
}

/* parts */
.line_button {
  display: block;
  width: 136px;
  height: 44px;
  margin-bottom: 60px;
}
.line_button:hover {
  opacity: 0.375;
}
.line_button img {
  width: 136px;
  height: 44px;
}

.button {
  display: block;
  width: 136px;
  height: 44px;
  margin-bottom: 60px;
  text-decoration: none;
}
.button:hover {
  opacity: 0.375;
}
.button span {
  margin: 46px 0 0 0;
  padding: 16px 10px;
  display: block;
  background-color: black;
  color: white;
  text-align: center;
}

.send_button {
  text-decoration: none;
  margin-bottom: 128px;
  background: #000;
  color: #fff;
  text-align: center;
  display: inline-block;
  padding: 15px 30px;
  font-size: 12px;
  border: none;
  line-height: 1;
  transition: all 0.6s;
}
.send_button:hover {
  opacity: 0.375;
}
.send_button img {
  width: 136px;
  height: 44px;
}

.bread--nav {
  margin: 115px -10px 0 0;
}
@media screen and (max-width: 767px) {
  .bread--nav {
    right: calc(20px - 10px);
  }
}
.bread--nav .icon {
  position: absolute;
  width: 65px;
  height: 65px;
  left: -55px;
  top: -25px;
}
.bread--nav ul li {
  border-left: 1px solid #000;
  height: 13px;
  text-decoration: none;
  list-style: none;
  display: inline-block;
  padding: 1px 10px 0px;
}
.bread--nav ul li:nth-child(1) {
  border-left: none;
  font-weight: 600;
}
.bread--nav ul li a {
  text-decoration: none;
}

.under__page--header__s {
  position: relative;
  height: 144px;
}

.under__page--header__ss {
  position: relative;
  height: 105px;
}

.under_title {
  position: absolute;
  top: 52px;
  right: calc(30px - 10px);
}
@media screen and (max-width: 767px) {
  .under_title {
    right: calc(20px - 10px);
  }
}
.under_title .icon {
  position: absolute;
  width: 65px;
  height: 65px;
  left: -55px;
  top: -25px;
}
.under_title ul li {
  border-left: 1px solid #000;
  height: 13px;
  text-decoration: none;
  list-style: none;
  display: inline-block;
  padding: 1px 10px 0px;
}
.under_title ul li:nth-child(1) {
  border-left: none;
  font-weight: 600;
}
.under_title ul li a {
  text-decoration: none;
}

/*管理画面adminbar分調整*/
.customize-support header.header,
.customize-support header.header_w_l {
  margin-top: 32px;
}
.customize-support header.header .global-nav,
.customize-support header.header_w_l .global-nav {
  margin-top: 32px;
}
@media screen and (max-width: 767px) {
  .customize-support header.header,
  .customize-support header.header_w_l {
    margin-top: 46px;
  }
}

@media screen and (max-width: 782px) {
  html #wpadminbar {
    height: 46px;
    min-width: 240px;
    position: fixed;
  }
}
/* トップのフルスクリーンスライダー */
.mv-fullscreen {
  position: relative;
  width: 100%;
  height: calc(100vh - 65px); /* ヘッダー分を差し引き */
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .mv-fullscreen {
    height: calc(100vh - 50px);
  }
}
/* iOS / Android での 100vh 誤差対策 */
@media screen and (max-width: 767px) {
  @supports (height: 100dvh) {
    .mv-fullscreen {
      height: calc(100dvh - 50px);
    }
  }
}
.mv-fullscreen .slider-pro,
.mv-fullscreen .sp-slides-container,
.mv-fullscreen .sp-mask,
.mv-fullscreen .sp-slides,
.mv-fullscreen .sp-slide,
.mv-fullscreen .sp-image-container {
  width: 100%;
  height: 100% !important;
}

/* 画像を画面いっぱいにトリミング表示 */
.mv-fullscreen .sp-image {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
  display: block;
}

/*blog&works video contoroler castom*/
.mejs-container,
.mejs-container .mejs-controls,
.mejs-embed,
.mejs-embed body {
  background: none !important;
}

.mejs-overlay-button {
  background: url(https://space-wide.com/image/common/mejs-controls.svg) no-repeat !important;
  height: 60px !important;
  width: 60px !important;
  opacity: 0;
  transition: all 0.6s;
}

.mejs-fullscreen-button > button {
  background-position: 0 !important;
  background: url(https://space-wide.com/image/common/mejs-full.svg) no-repeat !important;
}

.mejs-inner:hover .mejs-overlay-button {
  opacity: 1;
}

.mejs-time-buffering,
.mejs-time-current,
.mejs-time-float,
.mejs-time-float-corner,
.mejs-time-float-current,
.mejs-time-hovered,
.mejs-time-loaded,
.mejs-time-marker,
.mejs-time-total,
.mejs-time-rail {
  height: 3px !important;
}

.mejs-time-total {
  margin: 9px 0 0 !important;
}

.mejs-time-handle,
.mejs-time-handle-content {
  border-radius: 5px !important;
  margin-top: -1.5px;
}

/*** 1.1.0 contact ***/
.contact-h2 {
  font-size: 16px;
  line-height: 1.5rem;
}

.contact_p {
  text-align: left;
  font-size: 14px;
  line-height: 2em;
  height: 40px;
  display: block;
  max-width: 325px;
  width: 100%;
  margin: 35px 0 50px 0;
}
.contact_p label {
  font-size: 12px;
  display: block;
  position: relative;
  line-height: 0.9rem;
  height: 40px;
}
.contact_p label .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  height: 40px;
  position: absolute;
  top: -15px;
}
.contact_p label input[type=text],
.contact_p label input[type=tel],
.contact_p label input[type=email],
.contact_p label input[type=number] {
  border: none;
  background: none;
  outline: none;
  border-bottom: 1px solid #000;
  border-radius: 0;
  padding-left: 40px;
  padding-right: 10px;
  letter-spacing: 0.05em;
  height: 40px;
  max-width: 275px;
  width: calc(100% - 50px);
  font-size: 14px;
  font-weight: 400;
  transition: 1s;
  position: absolute;
  left: 0;
}
.contact_p label input[type=text]:focus,
.contact_p label input[type=tel]:focus,
.contact_p label input[type=email]:focus,
.contact_p label input[type=number]:focus {
  border-bottom: 1px solid #ccc;
}
.contact_p label .unit_of_money {
  position: absolute;
  right: 0;
  top: -5px;
}
.contact_p.two_step label .wpcf7-form-control-wrap {
  top: -9px;
}
.contact_p.two_step label .unit_of_money {
  top: 1px;
}

.contact_text {
  text-align: left;
  font-size: 14px;
  line-height: 2em;
  height: 200px;
  display: block;
  max-width: 325px;
  width: 100%;
  margin: 35px 0 50px 0;
}
.contact_text label {
  font-size: 12px;
  display: block;
  position: relative;
  line-height: 0.9rem;
}
.contact_text label .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  height: 200px;
  position: absolute;
}
.contact_text label textarea {
  border: none;
  background: none;
  outline: none;
  border-bottom: 1px solid #000;
  border-radius: 0;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.05em;
  height: 200px;
  max-width: 305px;
  width: calc(100% - 20px);
  font-size: 14px;
  font-weight: 400;
  transition: 1s;
  position: absolute;
  left: 0;
}
.contact_text label textarea:focus {
  border-bottom: 1px solid #ccc;
}
.contact_text label .unit_of_money {
  position: absolute;
  right: 0;
  top: -5px;
}
.contact_text label .wpcf7-not-valid-tip {
  margin: -33px 0px;
}
.contact_text.two_step label .wpcf7-form-control-wrap {
  top: -9px;
}
.contact_text.two_step label .unit_of_money {
  top: 1px;
}

.contact_check {
  text-align: left;
  font-size: 14px;
  line-height: 2em;
  display: block;
  max-width: 325px;
  width: 100%;
  margin: 35px 0 50px 0;
}
.contact_check label {
  font-size: 12px;
  display: block;
}
.contact_check label .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.contact_check label input[type=checkbox i] {
  margin: 3px 3px 3px 4px;
}
.contact_check label .unit_of_money {
  position: absolute;
  right: 0;
  top: -5px;
}
.contact_check .wpcf7-list-item {
  display: inline;
  margin: 0;
}

.screen-reader-response {
  margin: 20px 0 45px;
}
.screen-reader-response ul {
  display: none;
}

.wpcf7-not-valid-tip {
  position: absolute;
  color: crimson;
  margin: -10px 0;
}

.wpcf7 form.sent .wpcf7-response-output {
  border: none;
  padding: 2em 0;
  margin: 2em 0;
}

.link_privacy_policy {
  position: relative;
  display: block;
  border-bottom: 1px solid #000;
  margin: 0 0 40px;
  width: 173px;
  line-height: 1.5rem;
  text-decoration: none;
}
.link_privacy_policy:before {
  content: "";
  background-image: url(/image/common/icon_privacy.svg);
  position: absolute;
  height: 14px;
  width: 11px;
  right: 0;
  bottom: 5px;
}
.link_privacy_policy:hover {
  color: #000;
  opacity: 0.375;
}

/*** 2.0.0 header ***/
.header {
  position: fixed;
  z-index: 10000;
  height: 65px;
  width: 100%;
  left: 0;
  top: 0;
  background-color: #fff;
  transition: all 0.6s;
}
.header.scroll-nav {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
@media screen and (max-width: 767px) {
  .header {
    height: 50px;
  }
}
.header .inr {
  padding: 0 30px;
  display: flex;
  height: 65px;
  justify-content: space-between;
  background-color: #fff;
  opacity: 0.9;
}
@media screen and (max-width: 767px) {
  .header .inr {
    height: 50px;
    padding: 0 20px;
  }
}
.header .inr .nav--pc {
  line-height: 0;
  width: 240px;
  margin: 0;
}
.header .inr .nav--sp {
  display: none;
}
.header button.hamburger {
  position: relative;
  transition: all 0.4s;
  box-sizing: border-box;
  width: 28px;
  height: 26px;
  background: none;
  border: none;
  margin-top: 19px;
  outline: none;
}
@media screen and (max-width: 767px) {
  .header button.hamburger {
    margin-top: 12px;
  }
}
.header button.hamburger span {
  border-bottom: 1px solid #000;
  position: absolute;
  width: 28px;
}
.header button.hamburger span:nth-child(1) {
  top: 11px;
  left: 0;
}
.header button.hamburger span:nth-child(2) {
  top: 16px;
  left: 0;
}
.header .nav--sp {
  display: block;
  width: 100%;
  height: 100vh;
  opacity: 0.5s;
  background-color: #dddddd;
  color: #fff;
}

.header_w {
  position: fixed;
  z-index: 10000;
  height: 65px;
  width: 100%;
  left: 0;
  top: 0;
  transition: all 0.6s;
  background-color: white;
}
.header_w.scroll-nav {
  background: none;
}
.header_w.scroll-nav h1#logo a {
  color: white;
}
@media screen and (max-width: 767px) {
  .header_w.scroll-nav .hamburger .hamburger__line {
    background-color: white;
  }
}
@media screen and (max-width: 767px) {
  .header_w {
    height: 50px;
  }
}
.header_w .inr {
  padding: 0 30px;
  display: flex;
  height: 65px;
  justify-content: space-between;
  background-color: #fff;
  opacity: 0.9;
}
@media screen and (max-width: 767px) {
  .header_w .inr {
    height: 50px;
    padding: 0 20px;
  }
}
.header_w .inr .nav--pc {
  line-height: 0;
  width: 240px;
  margin: 0;
}
.header_w .inr .nav--sp {
  display: none;
}
.header_w button.hamburger {
  position: relative;
  transition: all 0.4s;
  box-sizing: border-box;
  width: 28px;
  height: 26px;
  background: none;
  border: none;
  margin-top: 19px;
  outline: none;
}
@media screen and (max-width: 767px) {
  .header_w button.hamburger {
    margin-top: 12px;
  }
}
.header_w button.hamburger span {
  border-bottom: 1px solid #000;
  position: absolute;
  width: 28px;
}
.header_w button.hamburger span:nth-child(1) {
  top: 11px;
  left: 0;
}
.header_w button.hamburger span:nth-child(2) {
  top: 16px;
  left: 0;
}
.header_w .nav--sp {
  display: block;
  width: 100%;
  height: 100vh;
  opacity: 0.5s;
  background-color: #dddddd;
  color: #fff;
}

.header_w_l {
  position: fixed;
  z-index: 10000;
  height: 65px;
  width: 100%;
  left: 0;
  top: 0;
  transition: all 0.6s;
  background-color: white;
}
.header_w_l.scroll-nav {
  background: none;
}
.header_w_l.scroll-nav h1#logo a {
  color: white;
}
@media screen and (max-width: 767px) {
  .header_w_l.scroll-nav .hamburger .hamburger__line {
    background-color: white;
  }
}
@media screen and (max-width: 767px) {
  .header_w_l {
    height: 50px;
  }
}
.header_w_l .inr {
  padding: 0 30px;
  display: flex;
  height: 65px;
  justify-content: space-between;
  background-color: #fff;
  opacity: 0.9;
}
@media screen and (max-width: 767px) {
  .header_w_l .inr {
    height: 50px;
    padding: 0 20px;
  }
}
.header_w_l .inr .nav--pc {
  line-height: 0;
  width: 240px;
  margin: 0;
}
.header_w_l .inr .nav--sp {
  display: none;
}
.header_w_l button.hamburger {
  position: relative;
  transition: all 0.4s;
  box-sizing: border-box;
  width: 28px;
  height: 26px;
  background: none;
  border: none;
  margin-top: 19px;
  outline: none;
}
@media screen and (max-width: 767px) {
  .header_w_l button.hamburger {
    margin-top: 12px;
  }
}
.header_w_l button.hamburger span {
  border-bottom: 1px solid #000;
  position: absolute;
  width: 28px;
}
.header_w_l button.hamburger span:nth-child(1) {
  top: 11px;
  left: 0;
}
.header_w_l button.hamburger span:nth-child(2) {
  top: 16px;
  left: 0;
}
.header_w_l .nav--sp {
  display: block;
  width: 100%;
  height: 100vh;
  opacity: 0.5s;
  background-color: #dddddd;
  color: #fff;
}

.global-nav {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  padding-top: 65px;
  transition: all 0.6s;
  z-index: 200;
  opacity: 0;
}

.hamburger {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
  margin: 12px calc(30px - 7px) 0 0;
}
@media screen and (max-width: 767px) {
  .hamburger {
    margin: 5px calc(20px - 7px) 0 0;
  }
}

.global-nav__list {
  padding: 0 30px;
}
.global-nav__list .global-nav__item {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
.global-nav__list .global-nav__item:nth-child(1) {
  border-top: 1px solid #c5c5c5;
}
.global-nav__list .global-nav__item a {
  display: block;
  padding: 19px 10px;
  border-bottom: 1px solid #c5c5c5;
  text-decoration: none;
  color: #fff;
}
.global-nav__list .global-nav__item a:hover {
  background-color: #ccc;
}
@media screen and (max-height: 685px) {
  .global-nav__list .global-nav__item a {
    padding: 12px 10px;
  }
  .global-nav__list .global-nav__item a p {
    font-size: 11px;
  }
}
@media screen and (max-width: 410px) {
  .global-nav__list .global-nav__item {
    font-size: 12px;
    font-weight: 400;
  }
}
@media screen and (max-width: 767px) {
  .global-nav__list {
    padding: 0 20px;
  }
}

.global-nav__block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 30px;
}
.global-nav__block .global-nav__item {
  box-sizing: border-box;
  text-align: center;
  width: 33.3333%;
  border-bottom: 1px solid #c5c5c5;
}
.global-nav__block .global-nav__item a {
  display: block;
  padding: 14px 0;
  height: 95px;
  text-decoration: none;
  color: #fff;
  border-right: 1px solid #c5c5c5;
}
@media screen and (max-height: 635px) {
  .global-nav__block .global-nav__item a {
    padding: 6px 0;
  }
}
.global-nav__block .global-nav__item a img {
  height: 50px;
  width: 50px;
  margin: 0 auto;
  display: block;
}
.global-nav__block .global-nav__item a p {
  font-size: 14px;
  text-align: center;
  margin: 5px 0 0;
  line-height: 1.2em;
}
@media screen and (max-width: 410px) {
  .global-nav__block .global-nav__item a p {
    font-size: 11px;
  }
}
.global-nav__block .global-nav__item a:hover {
  background-color: #ccc;
}
.global-nav__block .global-nav__item:nth-child(3n) a {
  border-right: none;
}
@media screen and (max-width: 767px) {
  .global-nav__block {
    padding: 0 20px;
  }
  .global-nav__block .global-nav__item a p {
    font-size: 12px;
  }
}

.global-nav--exp {
  max-width: 420px;
  width: calc(70% - 30px * 2);
  font-weight: 400;
  margin: 22px 30px 0;
}
@media screen and (max-width: 767px) {
  .global-nav--exp {
    margin: 22px 20px;
    width: calc(70% - 20px * 2);
  }
}
@media screen and (max-height: 1025px) {
  .global-nav--exp {
    display: none;
  }
}

.hamburger__line {
  position: absolute;
  left: 7px;
  width: 26px;
  height: 1px;
  background-color: #111;
  transition: all 0.6s;
}

.hamburger__line--1 {
  top: 18px;
}

.hamburger__line--3 {
  top: 22px;
}

.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s;
  cursor: pointer;
  z-index: 9999;
}

/* 表示された時用のCSS */
.nav-open h1#logo a {
  color: #fff;
}

.nav-open .header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

.nav-open .header_w_l {
  background-color: rgba(0, 0, 0, 0);
}

.nav-open .header_w {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

.nav-open .header_w {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

@keyframes global-nav-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.nav-open .global-nav {
  display: block;
  left: 0;
  top: 0;
  opacity: 1;
  color: #fff;
  animation-name: global-nav-animation;
  animation-duration: 0.8s;
}
@media screen and (max-width: 767px) {
  .nav-open .global-nav {
    padding: 50px 0 0 0;
  }
}

.nav-open .black-bg {
  opacity: 0.9;
  visibility: visible;
}

.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 20px;
  background-color: #fff;
}

.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 20px;
  background-color: #fff;
}

/* 高さで変えるCSS */
@media screen and (min-width: 1200px) {
  div#sidebar {
    width: 300px;
  }
}
h1#logo {
  margin: 21px 0 0 30px;
  width: 260px;
  font-weight: 600;
  font-size: 16px;
  font-family: "Raleway", sans-serif;
}
@media screen and (max-width: 767px) {
  h1#logo {
    margin: 14px 0 0 20px;
  }
}
h1#logo a {
  text-decoration: none;
}

/*** 3.0.0 footer ***/
footer {
  background-color: #fff;
  transition: all 0.6s;
}

.nav-open footer {
  background-color: rgba(255, 255, 255, 0);
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 10000;
  width: 100%;
  color: #fff;
}
.nav-open footer .footer--under .left p:before {
  border-bottom: 1px solid #fff;
}

.footer--inr {
  height: 310px;
  width: calc(100% - 30px * 2);
  margin: 0 30px;
}
@media screen and (max-width: 767px) {
  .footer--inr {
    width: calc(100% - 20px * 2);
    margin: 0 20px;
  }
}
@media screen and (max-width: 339px) {
  .footer--inr {
    font-size: 11px;
  }
}
.footer--inr .footer--top {
  height: 100px;
  padding-top: 23px;
}
.footer--inr .footer--under {
  overflow: hidden;
}
.footer--inr .footer--under .left {
  float: left;
  position: relative;
}
.footer--inr .footer--under .left p {
  position: relative;
  padding-top: 12px;
}
.footer--inr .footer--under .left p:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  border-bottom: 1px solid #000;
}
.footer--inr .footer--under .right {
  float: right;
  text-align: right;
  margin: 11px 0 0;
}
.footer--inr .footer--under .right p {
  font-style: italic;
  padding: 0 1px 0;
}
.footer--inr .footer--under .right h2 {
  font-size: 16px;
  font-style: normal;
  margin: 4px 0 0;
}

@media screen and (max-height: 930px) {
  .nav-open .footer--inr {
    height: 187px;
  }
}
@media screen and (max-height: 840px) {
  .nav-open .footer--inr {
    height: 65px;
  }
}

@media screen and (max-height: 930px) {
  .nav-open .footer--top {
    display: none;
  }
}

@media screen and (max-height: 840px) {
  .nav-open .footer--under {
    display: none;
  }
}

.footer--fixNav {
  position: fixed;
  z-index: 9999;
  height: 65px;
  width: calc(100% - 8px);
  padding-left: 8px;
  background-color: #fff;
  bottom: 0;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
}
@media screen and (max-width: 767px) {
  .footer--fixNav {
    width: 100%;
    padding-left: 0;
  }
}
@media screen and (max-width: 767px) {
  .footer--fixNav {
    height: 50px;
  }
}
.footer--fixNav ul {
  display: flex;
  justify-content: flex-start;
}
.footer--fixNav ul li a {
  width: 65px;
  height: 65px;
  display: block;
}
.footer--fixNav ul li a:hover {
  opacity: 0.375;
}
@media screen and (max-width: 767px) {
  .footer--fixNav ul li a {
    width: 50px;
    height: 50px;
  }
}
.footer--fixNav ul li:nth-child(1) {
  display: none;
}
.footer--fixNav ul li:nth-child(1) a {
  background-image: url(/image/menu/icon_footer_nav_tel.svg);
}
@media screen and (max-width: 767px) {
  .footer--fixNav ul li:nth-child(1) a {
    background-image: url(/image/menu/icon_footer_nav_tel_s.svg);
  }
}
@media screen and (max-width: 767px) {
  .footer--fixNav ul li:nth-child(1) {
    display: block;
  }
}
.footer--fixNav ul li:nth-child(2) a {
  background-image: url(/image/menu/icon_footer_nav_mail.svg);
}
@media screen and (max-width: 767px) {
  .footer--fixNav ul li:nth-child(2) a {
    background-image: url(/image/menu/icon_footer_nav_mail_s.svg);
  }
}
.footer--fixNav ul li:nth-child(3) a {
  background-image: url(/image/menu/icon_footer_nav_map.svg);
}
@media screen and (max-width: 767px) {
  .footer--fixNav ul li:nth-child(3) a {
    background-image: url(/image/menu/icon_footer_nav_map_s.svg);
  }
}
.footer--fixNav ul li:nth-child(4) a {
  background-image: url(/image/menu/icon_footer_nav_ig.svg);
}
@media screen and (max-width: 767px) {
  .footer--fixNav ul li:nth-child(4) a {
    background-image: url(/image/menu/icon_footer_nav_ig_s.svg);
  }
}
.footer--fixNav ul li:nth-child(5) {
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .footer--fixNav ul li:nth-child(5) {
    margin-right: -10px;
  }
}
.footer--fixNav ul li:nth-child(5) a {
  background-image: url(/image/menu/icon_footer_nav_line.svg);
  width: 160px;
}
@media screen and (max-width: 767px) {
  .footer--fixNav ul li:nth-child(5) a {
    background-image: url(/image/menu/icon_footer_nav_line_s.svg);
    width: 125px;
  }
}

/* 表示された時用のCSS */
.nav-open footer {
  background: none;
  transition: 0s;
}

.nav-open .footer--fixNav {
  background: none;
  box-shadow: none;
}
.nav-open .footer--fixNav ul li:nth-child(1) a {
  background-image: url(/image/menu/icon_footer_nav_tel_white.svg);
}
@media screen and (max-width: 767px) {
  .nav-open .footer--fixNav ul li:nth-child(1) a {
    background-image: url(/image/menu/icon_footer_nav_tel_white_s.svg);
  }
}
.nav-open .footer--fixNav ul li:nth-child(2) a {
  background-image: url(/image/menu/icon_footer_nav_mail_white.svg);
}
@media screen and (max-width: 767px) {
  .nav-open .footer--fixNav ul li:nth-child(2) a {
    background-image: url(/image/menu/icon_footer_nav_mail_white_s.svg);
  }
}
.nav-open .footer--fixNav ul li:nth-child(3) a {
  background-image: url(/image/menu/icon_footer_nav_map_white.svg);
}
@media screen and (max-width: 767px) {
  .nav-open .footer--fixNav ul li:nth-child(3) a {
    background-image: url(/image/menu/icon_footer_nav_map_white_s.svg);
  }
}
.nav-open .footer--fixNav ul li:nth-child(4) a {
  background-image: url(/image/menu/icon_footer_nav_ig_white.svg);
}
@media screen and (max-width: 767px) {
  .nav-open .footer--fixNav ul li:nth-child(4) a {
    background-image: url(/image/menu/icon_footer_nav_ig_white_s.svg);
  }
}
.nav-open .footer--fixNav ul li:nth-child(5) a {
  background-image: url(/image/menu/icon_footer_nav_line_white.svg);
}
@media screen and (max-width: 767px) {
  .nav-open .footer--fixNav ul li:nth-child(5) a {
    background-image: url(/image/menu/icon_footer_nav_line_white_s.svg);
  }
}

/* トップのフルスクリーンスライダー */
.mv-fullscreen {
  position: relative;
  width: 100%;
  height: calc(100vh - 65px);
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .mv-fullscreen {
    height: calc(100vh - 50px);
  }
}

/*** 4.0.0 index page ***/
main {
  padding: 65px 0 0;
  position: relative;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  main {
    padding: 50px 0 0;
  }
}

.slider_wrap {
  position: relative;
}

.index__page--header {
  position: relative;
  margin: 77px 30px 77px;
  width: calc(100% - 60px);
}
@media screen and (max-width: 767px) {
  .index__page--header {
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 20px * 2);
  }
}

/* =====================================================
   Top News / Blog 共通エリア
===================================================== */
.top_news_blog {
  margin: 80px 0;
  padding: 0 0 0 20px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .top_news_blog {
    padding: 0;
  }
}

.top_news_blog__block {
  display: flex;
  margin-bottom: 90px;
}
@media screen and (max-width: 767px) {
  .top_news_blog__block {
    display: block;
  }
}

.top_news_blog__ttl {
  font-size: 14px;
  font-weight: 600;
  margin: -6px 30px 0 0;
}
@media screen and (max-width: 767px) {
  .top_news_blog__ttl {
    margin: -6px 0 7px 0;
  }
}

/* -----------------------------------------------------
   PC：4カラム
----------------------------------------------------- */
.top_news_list,
.top_blog_list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.top_news_item,
.top_blog_item {
  width: calc((100% - 90px) / 4); /* 30px × 3 の隙間で4等分 */
  max-width: 230px;
}
.top_news_item a,
.top_blog_item a {
  text-decoration: none;
}

/* 画像 */
.top_news_thumb img,
.top_blog_thumb img {
  width: 100%;
  height: 130px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* テキストボックス */
.top_news_box,
.top_blog_box {
  margin-top: 20px;
  box-sizing: border-box;
}
.top_news_box p,
.top_blog_box p {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  transition: all 0.6s;
}
.top_news_box p.reception,
.top_blog_box p.reception {
  color: #822420;
  font-weight: 600;
}
.top_news_box p.reception_end,
.top_blog_box p.reception_end {
  color: #666;
}

.top_news_h3,
.top_blog_h3 {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.top_news_text,
.top_blog_text {
  font-size: 12px;
  line-height: 1.8;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  font-weight: 400;
}

/* ボタン */
.top_news_btn,
.top_blog_btn {
  display: block;
  align-items: center;
  text-align: right;
  margin-top: 6px;
  padding: 6px 40px 6px 24px;
  font-size: 12px;
  position: relative;
  font-weight: 300;
}

.top_news_btn::after,
.top_blog_btn::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -3px;
  height: 21px;
  border-right: 1px solid #000;
  transform: rotate(-45deg);
  transition: 0.3s;
}

.top_news_btn::before,
.top_blog_btn::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 0;
  width: 100px;
  border-bottom: 1px solid #000;
  transition: 0.3s;
}

@media (hover: hover) {
  .top_news_link:hover,
  .top_blog_link:hover {
    transition: 0.3s;
    opacity: 0.3;
    color: #000;
  }
}
/* =====================================================
   スマホ（レスポンシブ）：
   タイトル左上 → 2列×2段 → 画像幅100%
===================================================== */
@media (max-width: 767.98px) {
  .top_news_list,
  .top_blog_list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* ★ 横2列 */
    gap: 50px 15px;
  }
  .top_news_item,
  .top_blog_item {
    width: 100%;
  }
  .top_news_thumb img,
  .top_blog_thumb img {
    width: 100%;
    height: 120px;
  }
  .top_news_box,
  .top_blog_box {
    margin-top: 12px;
  }
}
.indexWorksMenu {
  position: absolute;
  width: 100%;
  height: 36px;
  z-index: 9998;
}
.indexWorksMenu .works--menu--a {
  display: block;
  position: relative;
  width: calc(100% - 30px * 2 - 20px);
  padding: 12px 0 12px 20px;
  height: 12px;
  margin: 0 30px;
  font-size: 14px;
  font-weight: 600;
}
.indexWorksMenu .works--menu--a::before {
  content: "";
  position: absolute;
  width: 13px;
  border-bottom: 1px solid #000;
  top: 18px;
  left: 0;
  transition: all 0.6s;
}
.indexWorksMenu .works--menu--a::after {
  content: "";
  position: absolute;
  height: 13px;
  border-left: 1px solid #000;
  top: 12px;
  left: 6px;
  opacity: 1;
  transition: all 0.6s;
}
.indexWorksMenu .works--menu--a:hover {
  color: #ccc;
}
.indexWorksMenu .works--menu--a:hover::before {
  border-bottom: 1px solid #ccc;
}
.indexWorksMenu .works--menu--a:hover::after {
  border-left: 1px solid #ccc;
}
@media screen and (max-width: 767px) {
  .indexWorksMenu .works--menu--a {
    width: calc(100% - 20px * 2 - 20px);
    margin: 0 20px;
  }
}
.indexWorksMenu .works--menu--open {
  opacity: 0;
  position: absolute;
  visibility: hidden;
  width: 100%;
  max-width: 400px;
  top: 36px;
  transition: all 0.6s;
}
.indexWorksMenu .works--menu--open ul {
  background-color: #fff;
}
.indexWorksMenu .works--menu--open ul li {
  border-bottom: 1px solid #ccc;
}
.indexWorksMenu .works--menu--open ul li a {
  height: 12px;
  padding: 12px 0 12px 40px;
  display: block;
  text-decoration: none;
  cursor: default;
}
.indexWorksMenu .works--menu--open ul li:nth-child(1) {
  border-top: 1px solid #ccc;
}
.indexWorksMenu.open .works--menu--a::after {
  opacity: 0;
}
.indexWorksMenu.open .works--menu--open {
  opacity: 1;
  visibility: visible;
  transition: all 0.6s;
}
.indexWorksMenu.open .works--menu--open ul li a {
  cursor: pointer;
}

.slider--news {
  max-width: 770px;
  position: absolute;
  bottom: 80px;
  left: 30px;
  z-index: 9999;
}
.slider--news h2 {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 20px;
  color: white;
}
.slider--news a {
  text-decoration: none;
  display: block;
  color: white;
  transition: all 0.6s;
  margin-bottom: 0.6rem;
}
.slider--news a span {
  line-height: 2rem;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 1px solid white;
  line-height: 1.4rem;
  transition: all 0.6s;
}
@media screen and (max-width: 767px) {
  .slider--news a span {
    line-height: 1.4rem;
    font-size: 12px;
    font-weight: 300;
  }
}
.slider--news a:hover {
  color: #aaa;
}
.slider--news a:hover span {
  border-bottom: 1px solid #aaa;
}

.news {
  max-width: 770px;
}
.news h2 {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 20px;
}
.news a {
  text-decoration: none;
  display: block;
}
.news a span {
  line-height: 2rem;
  font-size: 12px;
  padding-bottom: 2px;
  border-bottom: 1px solid #000;
}
.news a:hover span {
  border-bottom: 1px solid #ccc;
}

.index--works--image--wrap {
  background-color: #fff;
  padding-top: 36px;
  width: calc(100% - 85px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.index--works--image--wrap a {
  width: 33.3333%;
  margin-bottom: 8px;
}
.index--works--image--wrap a figure {
  position: relative;
  max-width: 800px;
}
.index--works--image--wrap a figure:before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.index--works--image--wrap a figure .image {
  transition: all 0.6s;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  max-width: 800px;
  height: 100%;
  z-index: 2;
  background-color: #fff;
  color: #000;
}
.index--works--image--wrap a figure figcaption {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 16px;
  text-align: center;
  line-height: 0.8em;
}
.index--works--image--wrap a figure figcaption span {
  font-size: 12px;
  display: block;
}
@media screen and (max-width: 767px) {
  .index--works--image--wrap a figure figcaption {
    font-size: 16px;
  }
  .index--works--image--wrap a figure figcaption span {
    font-size: 12px;
  }
}
.index--works--image--wrap a:hover figure .image {
  opacity: 0.1;
}
.index--works--image--wrap a:hover figure figcaption {
  opacity: 1;
  visibility: inherit;
  transition: all 0.6s;
  color: #000;
}
@media screen and (max-width: 767px) {
  .index--works--image--wrap {
    display: block;
    width: 100%;
  }
  .index--works--image--wrap a {
    width: 100%;
  }
  .index--works--image--wrap a figure:before {
    content: none;
    padding-top: 56.25%;
  }
  .index--works--image--wrap a figure .image {
    position: static;
    -o-object-fit: cover;
       object-fit: cover;
    height: auto;
  }
}
@media screen and (min-width: 1835px) {
  .index--works--image--wrap a {
    width: 25%;
  }
}
@media screen and (min-width: 2265px) {
  .index--works--image--wrap a {
    width: 20%;
  }
}
@media screen and (min-width: 2695px) {
  .index--works--image--wrap a {
    width: 16.6666%;
  }
}
@media screen and (min-width: 3125px) {
  .index--works--image--wrap a {
    width: 14.2857%;
  }
}
@media screen and (min-width: 3555px) {
  .index--works--image--wrap a {
    width: 12.5%;
  }
}

/*** 5.0.0 under page ***/
.under__page--header {
  position: relative;
  height: 345px;
  transition: all 0.6s;
}
.works__page--header {
  margin: 0 30px;
  position: relative;
  transition: all 0.6s;
  z-index: 9998;
}
@media screen and (max-width: 767px) {
  .works__page--header {
    margin: 0 20px;
  }
}
.works__page--header nav {
  display: flex;
  justify-content: space-between;
}
.works__page--header.nav_right nav {
  justify-content: flex-end;
  margin: 0 0 100px;
}

.under--contents--wrap {
  width: calc(100% - 30px * 2);
  margin: 0 30px;
}
.under--contents--wrap .precautions {
  margin: 0 0 24px;
}
@media screen and (max-width: 767px) {
  .under--contents--wrap {
    width: calc(100% - 20px * 2);
    margin: 0 20px;
  }
}

.intro {
  position: relative;
  margin-bottom: 44px;
}
.intro .tel {
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.intro .mail {
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.finish_text {
  position: relative;
  margin-bottom: 44px;
  max-width: 480px;
  width: 100%;
}

.form_finish_toppage_return {
  padding-bottom: 5px;
  border-bottom: 1px solid #000;
}
.form_finish_toppage_return:hover {
  color: #000;
  opacity: 0.375;
}

.newsContents_wrap {
  margin: 0 0 20px;
}

.newsContents {
  bottom: 0;
  width: 100%;
}
.newsContents .news--contents--a {
  display: block;
  position: relative;
  width: calc(100% - 30px * 2 - 20px);
  padding: 12px 0 12px 20px;
  margin: 0 30px;
  font-size: 14px;
  font-weight: 600;
}
.newsContents .news--contents--a::before {
  content: "";
  position: absolute;
  width: 13px;
  border-bottom: 1px solid #000;
  top: 37px;
  left: 0;
  transition: all 0.6s;
}
.newsContents .news--contents--a::after {
  content: "";
  position: absolute;
  height: 13px;
  border-left: 1px solid #000;
  top: 31px;
  left: 6px;
  opacity: 1;
  transition: all 0.6s;
}
.newsContents .news--contents--a h2 {
  font-size: 14px;
  font-weight: 600;
  margin: -5px 0 0 0;
}
.newsContents .news--contents--a p {
  font-size: 12px;
  height: 24px;
  font-weight: 400;
  margin: -5px 0 0 -20px;
  color: #666;
  transition: all 0.6s;
}
.newsContents .news--contents--a p.reception {
  color: #822420;
  font-size: 12px;
  font-weight: 600;
}
.newsContents .news--contents--a p.reception_end {
  color: #666;
  font-size: 12px;
  font-weight: 600;
}
.newsContents .news--contents--a:hover {
  color: #000;
}
.newsContents .news--contents--a:hover h2 {
  opacity: 0.3;
}
.newsContents .news--contents--a:hover p {
  opacity: 0.3;
}
.newsContents .news--contents--a:hover::before {
  border-bottom: 1px solid #ccc;
}
.newsContents .news--contents--a:hover::after {
  border-left: 1px solid #ccc;
}
@media screen and (max-width: 767px) {
  .newsContents .news--contents--a {
    width: calc(100% - 20px * 2 - 20px);
    margin: 0 20px;
  }
}
.newsContents .news--contents--open {
  display: none;
  width: calc(100% - 30px * 2 - 40px);
  margin: 0 calc(30px + 20px);
  top: 36px;
}
@media screen and (max-width: 767px) {
  .newsContents .news--contents--open {
    width: calc(100% - 20px * 2 - 40px);
    margin: 0 calc(20px + 20px);
  }
}
.newsContents .news--contents--open p {
  margin: 0 0 24px;
  max-width: 325px;
}
.newsContents .news--contents--open figure .image {
  width: 100%;
  max-width: 325px;
  height: auto;
}
.newsContents:nth-child(1) .news--contents--open {
  display: block;
}

.privacy--contents--wrap {
  width: calc(100% - 30px * 2);
  max-width: 420px;
  margin: 0 30px;
}
@media screen and (max-width: 767px) {
  .privacy--contents--wrap {
    width: calc(100% - 20px * 2);
    margin: 0 20px;
  }
}
.privacy--contents--wrap p {
  margin-bottom: 20px;
}
.privacy--contents--wrap p + ul {
  margin-top: -18px;
}
.privacy--contents--wrap p.address {
  border-left: 2px solid #000;
  padding-left: 20px;
  margin: 80px 0 120px;
}
.privacy--contents--wrap ul {
  line-height: 1.5rem;
  margin: 0 0 18px 18px;
  list-style-type: circle;
}

/*** 6.1.0 works page ***/
.worksMenu {
  width: 100%;
  height: 36px;
  z-index: 9998;
}
.worksMenu .works--menu--a {
  display: block;
  position: relative;
  z-index: 9999;
  width: 100%;
  padding: 12px 0 12px 20px;
  height: 12px;
  font-size: 14px;
  font-weight: 600;
}
.worksMenu .works--menu--a::before {
  content: "";
  position: absolute;
  width: 13px;
  border-bottom: 1px solid #000;
  top: 18px;
  left: 0;
  transition: all 0.6s;
}
.worksMenu .works--menu--a::after {
  content: "";
  position: absolute;
  height: 13px;
  border-left: 1px solid #000;
  top: 12px;
  left: 6px;
  opacity: 1;
  transition: all 0.6s;
}
.worksMenu .works--menu--a:hover {
  color: #ccc;
}
.worksMenu .works--menu--a:hover::before {
  border-bottom: 1px solid #ccc;
}
.worksMenu .works--menu--a:hover::after {
  border-left: 1px solid #ccc;
}
.worksMenu .works--menu--b {
  display: block;
  position: relative;
  width: calc(100% - 30px * 2 - 20px);
  padding: 12px 0 12px 20px;
  height: 12px;
  margin: 0 30px;
  font-size: 14px;
  font-weight: 600;
}
.worksMenu .works--menu--b::before {
  content: "";
  position: absolute;
  width: 13px;
  border-bottom: 1px solid #000;
  top: 18px;
  left: 0;
  transition: all 0.6s;
}
.worksMenu .works--menu--b::after {
  content: "";
  position: absolute;
  height: 13px;
  border-left: 1px solid #000;
  top: 12px;
  left: 6px;
  opacity: 1;
  transition: all 0.6s;
}
.worksMenu .works--menu--b:hover {
  color: #ccc;
}
.worksMenu .works--menu--b:hover::before {
  border-bottom: 1px solid #ccc;
}
.worksMenu .works--menu--b:hover::after {
  border-left: 1px solid #ccc;
}
@media screen and (max-width: 767px) {
  .worksMenu .works--menu--b {
    width: calc(100% - 20px * 2 - 20px);
    margin: 0 20px;
  }
}
.worksMenu .works--menu--open {
  opacity: 0;
  visibility: hidden;
  width: 100%;
  max-width: 400px;
  z-index: 9999;
  opacity: 0;
  transition: all 0.6s;
  margin: 0 0 0 -30px;
}
@media screen and (max-width: 767px) {
  .worksMenu .works--menu--open {
    margin: 0 0 0 -20px;
  }
}
.worksMenu .works--menu--open ul {
  background-color: #fff;
  list-style: none;
}
.worksMenu .works--menu--open ul li {
  border-bottom: 1px solid #ccc;
}
.worksMenu .works--menu--open ul li a {
  height: 12px;
  padding: 12px 0 12px 50px;
  display: block;
  text-decoration: none;
  cursor: default;
}
@media screen and (max-width: 767px) {
  .worksMenu .works--menu--open ul li a {
    padding: 12px 0 12px 40px;
  }
}
.worksMenu .works--menu--open ul li:nth-child(1) {
  border-top: 1px solid #ccc;
}
.worksMenu.open .works--menu--a::after {
  opacity: 0;
}
.worksMenu.open .works--menu--open {
  opacity: 1;
  visibility: visible;
  transition: all 0.6s;
}
.worksMenu.open .works--menu--open ul li a {
  cursor: pointer;
}

.works--image--wrap {
  background-color: #fff;
  width: calc(100% - 85px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.works--image--wrap.concept a figure figcaption {
  opacity: 1;
  visibility: inherit;
}
.works--image--wrap.concept a:hover figure figcaption {
  opacity: 0.5;
}
.works--image--wrap a {
  width: 33.3333%;
  margin-bottom: 8px;
}
.works--image--wrap a figure {
  position: relative;
  max-width: 800px;
}
.works--image--wrap a figure:before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.works--image--wrap a figure .image {
  position: absolute;
  transition: all 0.6s;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  max-width: 800px;
  height: 100%;
  z-index: 2;
  background-color: #fff;
  color: #000;
}
.works--image--wrap a figure figcaption {
  z-index: 3;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  top: 50%;
  left: 50%;
  line-height: 1.2em;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 16px;
  text-align: center;
}
.works--image--wrap a figure figcaption span {
  font-size: 12px;
  display: block;
  line-height: 2.8em;
}
@media screen and (max-width: 767px) {
  .works--image--wrap a figure figcaption {
    font-size: 16px;
  }
  .works--image--wrap a figure figcaption span {
    font-size: 12px;
  }
}
.works--image--wrap a:hover figure .image {
  opacity: 0.1 !important;
}
.works--image--wrap a:hover figure figcaption {
  opacity: 1;
  visibility: inherit;
  transition: all 0.6s;
  color: #000;
}
@media screen and (max-width: 767px) {
  .works--image--wrap {
    display: block;
    width: 100%;
  }
  .works--image--wrap a {
    width: 100%;
  }
  .works--image--wrap a figure:before {
    content: none;
    padding-top: 56.25%;
  }
  .works--image--wrap a figure .image {
    position: static;
    -o-object-fit: cover;
       object-fit: cover;
    height: auto;
  }
}
@media screen and (min-width: 1835px) {
  .works--image--wrap a {
    width: 25%;
  }
}
@media screen and (min-width: 2265px) {
  .works--image--wrap a {
    width: 20%;
  }
}
@media screen and (min-width: 2695px) {
  .works--image--wrap a {
    width: 16.6666%;
  }
}
@media screen and (min-width: 3125px) {
  .works--image--wrap a {
    width: 14.2857%;
  }
}
@media screen and (min-width: 3555px) {
  .works--image--wrap a {
    width: 12.5%;
  }
}

/*** 6.1.1 work details page ***/
.work--image--wrap {
  width: 100%;
}
.work--image--wrap figure {
  width: calc(100% - 85px);
  max-width: 800px;
  margin-bottom: 3px;
}
.work--image--wrap figure .image {
  top: 0;
  left: 0;
  width: 100%;
  max-width: 800px;
  height: 100%;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .work--image--wrap figure {
    width: 100%;
  }
}
.work--image--wrap p.text {
  max-width: 640px;
  width: calc(100% - 30px * 2);
  margin: 0 30px;
}
@media screen and (max-width: 767px) {
  .work--image--wrap p.text {
    margin: 0 20px;
    width: calc(100% - 20px * 2);
  }
}
.work--image--wrap .wp-video {
  max-width: 800px;
  width: 100%;
  aspect-ratio: 16/9;
  margin-bottom: 22px;
}
.work--image--wrap .wp-video iframe {
  width: 100%;
  height: 100%;
}

.work--arrow {
  width: 75px;
  display: flex;
  margin: 115px 0 0 0;
  justify-content: space-between;
}
.work--arrow a {
  transition: all 0.4s;
  opacity: 0.2;
}
.work--arrow a .left {
  width: 24px;
  height: 46px;
  background-image: url("/image/arrow_left.svg");
  background-repeat: no-repeat;
}
.work--arrow a .right {
  width: 24px;
  height: 46px;
  background-image: url("/image/arrow_right.svg");
  background-repeat: no-repeat;
}
.work--arrow a:hover {
  opacity: 1;
}

.work--exp {
  margin: 40px 0 40px;
  line-height: 1.8em;
}
@media screen and (max-width: 767px) {
  .work--exp {
    left: 20px;
  }
}
.work--exp .text {
  position: relative;
  max-width: 480px;
  margin: 120px 0 0 0;
}
.work--exp .text:before {
  position: absolute;
  content: "";
  border-bottom: 1px solid #707070;
  width: 13px;
  top: -60px;
}
.work--exp .text h1,
.work--exp .text h2,
.work--exp .text h3,
.work--exp .text h4,
.work--exp .text h5 {
  max-width: 420px;
  font-size: 14px;
  line-height: 1.5rem;
}
.work--exp .text p {
  margin: 0 0 22px;
  max-width: 420px;
  width: 100%;
}
.work--exp .text .blog_video {
  width: 100%;
  aspect-ratio: 16/9;
}
.work--exp .text .blog_video iframe {
  width: 100%;
  height: 100%;
}
.work--exp .text .wp-video {
  margin-bottom: 22px;
}
.work--exp .text figure .image {
  width: 100%;
  max-width: 420px;
  margin: 0 0 20px;
}
.work--exp .text table {
  max-width: 420px;
  margin: 0 0 18px;
}
.work--exp .text table tr td {
  border-bottom: 1px solid #000;
  padding: 8px 10px;
  line-height: 1rem;
}
.work--exp .text table tr:nth-child(1) {
  border-top: 1px solid #000;
}
.work--exp .text a {
  text-decoration: none;
  border-bottom: 1px solid;
  padding: 0 0 3px 0;
}
.work--exp .text a.non-underline_img {
  border-bottom: none;
}
.work--exp .text img {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 0 20px;
}
.work--exp .text ul,
.work--exp .text ol {
  line-height: 1.5rem;
  margin: 0 0 18px 12px;
  text-align: justify;
  max-width: 408px;
}
.work--exp .text ul {
  list-style: none;
}
.work--exp .text ul li {
  position: relative;
}
.work--exp .text ul li::before {
  content: "•"; /* 任意のマーカー（6pt相当） */
  font-size: 6pt;
  position: absolute;
  left: -1em;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
.work--exp .text blockquote {
  border-left: solid 2px #888;
  padding-left: 12px;
  max-width: 406px;
}
.work--exp .text hr {
  width: 13px;
  border-top: 1px solid #000;
  margin: 3em 0 2.7em;
}
.work--exp .house__name--ja {
  font-size: 14px;
  margin: 1px 0;
}
.work--exp .structure {
  color: #ccc;
}

/*** 7.0.0 blog page ***/
.blog__page--header {
  margin: 0 30px;
  position: relative;
  transition: all 0.6s;
  z-index: 9998;
}
@media screen and (max-width: 767px) {
  .blog__page--header {
    margin: 0 20px;
  }
}
.blog__page--header nav {
  display: flex;
  justify-content: space-between;
}
.blog__page--header.nav_right nav {
  justify-content: flex-end;
  margin: 0 0 50px;
}

.blogContents_wrap {
  margin: 0 0 20px;
}

.blogContents {
  bottom: 0;
  width: 100%;
}
.blogContents .blog--contents--a {
  display: block;
  position: relative;
  width: calc(100% - 30px * 2 - 20px);
  padding: 12px 0 12px 20px;
  margin: 0 30px;
  font-size: 14px;
  font-weight: 600;
}
.blogContents .blog--contents--a::before {
  content: "";
  position: absolute;
  width: 13px;
  border-bottom: 1px solid #000;
  top: 37px;
  left: 0;
  transition: all 0.6s;
}
.blogContents .blog--contents--a::after {
  content: "";
  position: absolute;
  height: 13px;
  border-left: 1px solid #000;
  top: 31px;
  left: 6px;
  opacity: 1;
  transition: all 0.6s;
}
.blogContents .blog--contents--a h2 {
  font-size: 14px;
  font-weight: 600;
  margin: -5px 0 0 0;
  transition: all 0.6s;
}
.blogContents .blog--contents--a p {
  font-size: 12px;
  height: 24px;
  font-weight: 400;
  color: #666;
  margin: -5px 0 0 -20px;
  transition: all 0.6s;
}
.blogContents .blog--contents--a p.reception {
  color: #822420;
  font-weight: 600;
}
.blogContents .blog--contents--a:hover {
  color: #000;
}
.blogContents .blog--contents--a:hover h2 {
  opacity: 0.3;
}
.blogContents .blog--contents--a:hover p {
  opacity: 0.3;
}
.blogContents .blog--contents--a:hover::before {
  border-bottom: 1px solid #ccc;
}
.blogContents .blog--contents--a:hover::after {
  border-left: 1px solid #ccc;
}
@media screen and (max-width: 767px) {
  .blogContents .blog--contents--a {
    width: calc(100% - 20px * 2 - 20px);
    margin: 0 20px;
  }
}
.blogContents .blog--contents--open {
  display: block;
  max-width: 420px;
  width: calc(100% - 30px * 2 - 40px);
  margin: 0 calc(30px + 20px);
  top: 36px;
}
@media screen and (max-width: 767px) {
  .blogContents .blog--contents--open {
    width: calc(100% - 20px * 2 - 40px);
    margin: 0 calc(20px + 20px);
  }
}
.blogContents .blog--contents--open h1,
.blogContents .blog--contents--open h2,
.blogContents .blog--contents--open h3,
.blogContents .blog--contents--open h4,
.blogContents .blog--contents--open h5 {
  max-width: 420px;
  font-size: 14px;
  line-height: 1.5rem;
}
.blogContents .blog--contents--open p {
  margin: 0 0 22px;
  max-width: 420px;
  width: 100%;
}
.blogContents .blog--contents--open .blog_video {
  width: 100%;
  aspect-ratio: 16/9;
}
.blogContents .blog--contents--open .blog_video iframe {
  width: 100%;
  height: 100%;
}
.blogContents .blog--contents--open .wp-video {
  margin-bottom: 22px;
}
.blogContents .blog--contents--open figure .image {
  width: 100%;
  max-width: 420px;
  margin: 0 0 20px;
}
.blogContents .blog--contents--open table {
  max-width: 420px;
  margin: 0 0 18px;
}
.blogContents .blog--contents--open table tr td {
  border-bottom: 1px solid #000;
  padding: 8px 10px;
  line-height: 1rem;
}
.blogContents .blog--contents--open table tr:nth-child(1) {
  border-top: 1px solid #000;
}
.blogContents .blog--contents--open ul,
.blogContents .blog--contents--open ol {
  margin: 0 0 18px 12px;
  line-height: 1.5rem;
}
.blogContents .blog--contents--open a {
  text-decoration: none;
  border-bottom: 1px solid;
  padding: 0 0 3px 0;
}
.blogContents .blog--contents--open a.non-underline_img {
  border-bottom: none;
}
.blogContents .blog--contents--open img {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 0 20px;
}
.blogContents .blog--contents--open ul,
.blogContents .blog--contents--open ol {
  line-height: 1.5rem;
  padding: 0 0 0 24px;
  text-align: justify;
}
.blogContents .blog--contents--open blockquote {
  border-left: solid 2px #888;
  padding-left: 12px;
}
.blogContents:nth-child(1) .blog--contents--open {
  display: block;
}

.blog_button {
  display: block;
  width: 80px;
  margin-bottom: 60px;
  text-decoration: none;
  border-bottom: none !important;
}
.blog_button:hover {
  opacity: 0.375;
}
.blog_button span {
  position: relative;
  margin: 0;
  padding: 0 20px 7px 0;
  display: block;
  color: black;
  border-bottom: 1px solid #000;
  text-align: center;
}
.blog_button span::before {
  content: "";
  position: absolute;
  transform: rotate(-45deg);
  height: 13px;
  bottom: -3px;
  right: 3px;
  border-left: 1px solid #000;
}

ul.page-numbers {
  width: calc(100% - 30px * 2);
  margin: 0 30px 65px;
}
ul.page-numbers li {
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  margin: 0px 26px 25px 0;
}
ul.page-numbers li a {
  text-decoration: none;
}
ul.page-numbers li span.current {
  color: #aaa;
}

/*** 8.0.0 about page ***/
.arch_intro {
  position: relative;
  margin-bottom: 120px;
}
.arch_intro:before {
  position: absolute;
  content: "";
  border-bottom: 1px solid #707070;
  width: 13px;
  bottom: -45px;
}

.arch_image {
  max-width: 180px;
  width: 100%;
  margin-bottom: 10px;
}

.arch_name {
  margin-bottom: 24px;
}
.arch_name strong {
  font-size: 16px;
  font-weight: 600;
}

.career {
  margin-bottom: 72px;
}
.career tr {
  line-height: 1.5rem;
}
.career tr td:nth-child(1) {
  width: 45px;
  text-align: right;
  padding: 0 10px 0 0;
}

.office_overview_p {
  margin-bottom: 24px;
}

.business_content_p {
  position: relative;
  margin-bottom: 120px;
}
.business_content_p:before {
  position: absolute;
  content: "";
  border-bottom: 1px solid #707070;
  width: 13px;
  bottom: -60px;
}

.about-nav--exp {
  max-width: 420px;
  width: 70%;
  margin-bottom: 90px;
}

.atelier_image {
  max-width: 420px;
  width: 100%;
  margin-bottom: 30px;
}/*# sourceMappingURL=style-test.css.map */