@charset "UTF-8";

/*
Theme Name: 有限会社柴田建設
Author: 一般社団法人SAVE TAKATA
Author URI: http://savetakata.org
Description: 
*/
/*-----------------------------------------------------------
>>> TABLE OF CONTENTS:
-------------------------------------------------------------
# normarize
# accessibility
# elements
# typography
# layouts
# contents
# navigation
# plugin

/* ----------−−−−−−−−−−--------------------
# normarize
---------------------------------------- */
/*!
* ress.css • v1.2.2
* MIT License
* github.com/filipelinhares/ress
*/
html {
  box-sizing: border-box;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%
}

*,
:after,
:before {
  background-repeat: no-repeat;
  box-sizing: inherit
}

:after,
:before {
  text-decoration: inherit;
  vertical-align: inherit
}

* {
  padding: 0;
  margin: 0
}

audio:not([controls]) {
  display: none;
  height: 0
}

hr {
  overflow: visible
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block
}

summary {
  display: list-item
}

small {
  font-size: 80%
}

[hidden],
template {
  display: none
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

a:active,
a:hover {
  outline-width: 0
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace
}

b,
strong {
  font-weight: bolder
}

dfn {
  font-style: italic
}

mark {
  background-color: #ff0;
  color: #000
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

input {
  border-radius: 0
}

[role=button],
[type=button],
[type=reset],
[type=submit],
button {
  cursor: pointer
}

[disabled] {
  cursor: default
}

[type=number] {
  width: auto
}

[type=search] {
  -webkit-appearance: textfield appearance;
  appearance: textfield appearance;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  overflow: auto;
  resize: vertical
}

button,
input,
optgroup,
select,
textarea {
  font: inherit
}

optgroup {
  font-weight: 700
}

button {
  overflow: visible
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: 0;
  padding: 0
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button;
  appearance: button;
}

button,
select {
  text-transform: none
}

button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

select::-ms-expand {
  display: none
}

select::-ms-value {
  color: currentColor
}

legend {
  border: 0;
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

[type=search] {
  -webkit-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px
}

img {
  border-style: none
}

progress {
  vertical-align: baseline
}

svg:not(:root) {
  overflow: hidden
}

audio,
canvas,
progress,
video {
  display: inline-block
}

@media screen {
  [hidden~=screen] {
    display: inherit
  }

  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important
  }
}

[aria-busy=true] {
  cursor: progress
}

[aria-controls] {
  cursor: pointer
}

[aria-disabled] {
  cursor: default
}

::-moz-selection {
  background-color: #b3d4fc;
  color: #000;
  text-shadow: none
}

::selection {
  background-color: #b3d4fc;
  color: #000;
  text-shadow: none
}

/* ----------−−−−−−−−−−--------------------
# accessibility
---------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/* ----------−−−−−−−−−−--------------------
# elements
---------------------------------------- */
html,
body {
  width: 100%;
  height: 100%;
  /* ★大事なのは「100%」 */
  margin: 0;
  padding: 0;
  border: none;
  font-size: 62.5%;
}

a {
  text-decoration: none;
}

a[href^="tel:"] {
  cursor: default;
  color: #fff;
}

li {
  list-style: none;
}

address {
  font-style: normal;
}

/* ----------−−−−−−−−−−--------------------
# typography
---------------------------------------- */
/* フォント指定 */
html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
  font-size: 1.5rem;
  /* ≒15px */
}

/* ゴシック体指定 */
/* Windows 用 Medium 指定の游ゴシック */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium");
}

/* font-weight: bold の時は通常どおり Bold 書体を使わせる */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

.gothic {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* 明朝体指定 */
.mincho {
  font-family: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;
}

/* aタグリンク */
.link-uline {
  text-decoration: underline;
}

/*----- 縦書き指定 -----*/
.vrl {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

h2,
h3,
h4,
h5,
h6 {
  font-size: 2rem;
}

/*----- 文字組み -----*/
.align-center {
  text-align: center;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

/* ----------−−−−−−−−−−--------------------
# layouts
---------------------------------------- */
body {
  margin: 0 auto;
  max-width: 1920px;
}

.page-top {
  position: relative;
  background-color: #fff;
  z-index: 0;
}

.page-lower {
  position: relative;
  z-index: 0;
}

.page-lower .container {
  position: relative;
  width: calc(100% - 40px);
  max-width: 1600px;
  margin: 0 auto;
}

.site-width {
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.flex {
  align-items: center;
  align-content: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.btn {
  display: block;
  width: 261px;
  height: 60px;
}

.tile-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

@media screen and (max-width:1219px) {
  .tile-container {
    flex-direction: column;
    flex-wrap: wrap;
  }
}

.tile-left,
.tile-right {
  width: 50vw;
  max-width: 50%;
  height: 500px;
}

@media screen and (max-width:1219px) {

  .tile-left,
  .tile-right {
    width: 100%;
    max-width: 100%;
    height: 500px;
  }
}

@media screen and (min-width:1220px) {
  .tile-left-wrap {
    float: right;
    width: 450px;
    margin-top: 75px;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
  }

  .tile-right-wrap {
    float: left;
    width: 450px;
    margin-top: 75px;
    flex-direction: column;
    justify-content: flex-end;
    align-content: flex-end;
    align-items: flex-end;
  }
}

@media screen and (max-width:1219px) {

  .tile-left-wrap,
  .tile-right-wrap {
    float: none;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0 auto 100px;
  }
}

.tile-left-wrap p,
.tile-right-wrap p {
  width: 100%;
  margin-bottom: 50px;
}

@media screen and (max-width:1219px) {

  .tile-left-wrap p,
  .tile-right-wrap p {
    width: calc(100% - 40px);
    margin: 0 auto 50px;
  }
}

.tile-left a,
.tile-right a {
  margin-bottom: 50px;
}

@media screen and (max-width:1219px) {

  .tile-left a,
  .tile-right a {
    margin: 0 auto 50px;
  }
}

.tile-img {
  width: 100vw;
  max-width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
}

.lower-odd {
  background-color: #fff;
}

.lower-odd-bg {
  position: absolute;
  background-color: #efefef;
  min-width: 100%;
  min-height: 30px;
}

.lower-even {
  background-color: #efefef;
}

.lower-even-bg {
  position: absolute;
  background-color: #fff;
  min-width: 100%;
  min-height: 30px;
}

.lower-top {
  margin-top: 0;
}

.lower-container {
  margin: 30px auto 0;
  ;
}

.top-mainimg {
  /*to layout*/
  width: 100%;
  max-width: 1600px;
  padding-top: 56.25%;
  max-height: 800px;
  margin-top: 300px;
  margin-bottom: 100px;
}

.top-mainimg-large {
  /*to layout*/
  width: 100%;
  max-width: 1600px;
  padding-top: 55%;
  max-height: 880px;
  margin-top: 300px;
  margin-bottom: 100px;
}

.top-catchcopy {
  /*to layout*/
  min-width: 165px;
  min-height: 352px;
  margin-right: 100px;
}

@media screen and (max-width:1219px) {
  .top-catchcopy {
    /*to layout*/
    margin: 0 auto 100px;
  }
}

.lower-top-wrap {
  /*to layout*/
  flex-direction: row;
  width: 100%;
  min-height: 352px;
  align-items: flex-start;
  margin: 0 auto 200px;
}

@media screen and (max-width:1219px) {
  .lower-top-wrap {
    /*to layout*/
    flex-direction: column;
    align-content: center;
    margin: 0 auto 100px;
    max-width: 100%;
  }
}

.lower-top-textweap {
  /*to layout*/
  flex-direction: column;
  width: 100%;
}

.lower-top-textwrap p {
  /*to layout*/
  display: block;
  font-size: 2.0rem;
  width: 100%;
  max-width: 1300px;
  margin-bottom: 2rem;
}

.lower-top-textwrap a {
  color: #000;
  text-decoration: underline;
  transition: all .3s;
}

.lower-top-textwrap a:hover {
  opacity: .5;
}

@media screen and (max-width:1219px) {
  .lower-top-textwrap p {
    /*to layout*/
    max-width: 95vw;
  }
}

.lower-heading {
  /*to layout*/
  display: block;
  height: 422px;
  overflow: hidden;
  text-indent: 5000%;
  width: 100%;
  white-space: nowrap;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-position: top center
}

@media screen and (min-width:1600px) {
  .lower-mainimg {
    /*to layout*/
    min-width: 1600px;
    min-height: 800px;
    margin: 0 auto 100px;
    background-size: contain;
    background-position: center center;
  }
}

@media screen and (max-width:1599px) {
  .lower-mainimg {
    /*to layout*/
    width: 100%;
    height: 0;
    margin: 0 auto 100px;
    padding-top: 50%;
    background-size: contain;
    background-position: center center;
  }
}

@media screen and (min-width:1600px) {
  .lower-subimg {
    /*to layout*/
    min-width: 1600px;
    min-height: 450px;
    margin: 0 auto 185px;
    /* バナー設置後90 */
    background-size: contain;
    background-position: center center;
  }
}

@media screen and (max-width:1599px) {
  .lower-subimg {
    /*to layout*/
    width: 100%;
    height: 0;
    margin: 0 auto 100px;
    padding-top: 28%;
    background-size: contain;
    background-position: center center;
  }
}

.lower-copy {
  width: 100%;
  font-size: 4.0rem;
  font-weight: bold;
  line-height: 5rem;
  margin-bottom: 100px;
}

@media screen and (max-width:1219px) {
  .lower-copy {
    font-size: 3.0rem;
    line-height: 4rem;
  }
}

.lower-container p {
  /*to layout*/
  width: 100%;
  font-size: 1.5rem;
  margin-bottom: 100px;
}

.lower-container p.lower-strong {
  /*to layout*/
  font-size: 2rem;
  margin-bottom: 100px;
}

.ggmap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.top-ggmap {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.top-ggmap iframe,
.top-ggmap object,
.top-ggmap embed {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
}

@media screen and (max-width:1219px) {

  .top-ggmap iframe,
  .top-ggmap object,
  .top-ggmap embed {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 400px;
  }
}

/* ヘッダー */
header {
  width: 100%;
  margin: 0 auto 100px;
  position: relative;
  z-index: 10000;
}

.logo {
  background-image: url(img/logo.png);
  display: block;
  height: 90px;
  left: 0px;
  overflow: hidden;
  position: absolute;
  text-indent: 5000%;
  top: 0px;
  width: 90px;
  white-space: nowrap;
}

@media screen and (max-width:1219px) {
  .logo {
    display: none;
  }
}

/* safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

  _::-webkit-full-page-media,
  _:future,
  :root .page-lower .logo,
  .our-works .logo {
    top: -80px;
  }
}

/* フッター */
footer {
  position: relative;
  width: 100%;
  height: 300px;
  padding-top: 1px;
}

.sns {
  width: max-content;
  margin: 0 auto;
}

.sns-icon {
  display: flex;
  gap: 0 30px;
  justify-content: center;
}

.sns-icon img {
  width: 100%;
  max-width: 60px;
  height: auto;
  display: block;
}

.sns p {
  text-align: center;
  margin: 20px 0 0 0;
  font-size: 18px;
  font-weight: 700;
  text-decoration: underline;
}

.sns p a {
  color: inherit;
}

.fb {
  background-image: url(img/icon_fb.png);
  display: block;
  height: 60px;
  width: 60px;
  text-indent: 5000%;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.footer-heading {
  background-image: url(img/heading_footer.png);
  display: block;
  height: 60px;
  overflow: hidden;
  text-indent: 5000%;
  width: 159px;
  white-space: nowrap;
  margin: 0 auto;
  /* position: absolute; */
  /* top: 80px; */
  position: relative;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 1000;
}

.footer {
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 240px;
  margin: 110px auto 0;
  background-color: #efefef;
}

@media screen and (max-width:767px) {
  .footer {
    height: 240px;
    align-content: center;
    align-items: center;
  }
}

.footer-wrap {
  width: 340px;
  height: 80px;
  flex-direction: row;
  justify-content: space-between;
  font-size: 14px;
  margin: 0 auto 0;
}

@media screen and (max-width:767px) {
  .footer-wrap {
    width: 90%;
    height: auto;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    margin: 120px 0 10px -10px;
  }
}

.footer-logo {
  background-image: url(img/logo.png);
  display: block;
  height: 80px;
  overflow: hidden;
  text-indent: 5000%;
  width: 80px;
  white-space: nowrap;
  background-size: contain;
}

@media screen and (max-width:767px) {
  .footer-logo {
    margin-right: 20px;
  }
}

.footer ul {
  /* width:calc (100% - 100px); */
  width: calc(100% - 100px);
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 20px auto 30px;
}

@media screen and (max-width:767px) {
  .footer ul {
    width: 90vw;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
  }
}

.footer li {
  margin-right: 1em;
}

.footer ul a:last-child {
  margin: 0;
}

.footer a {
  color: #000;
  text-decoration-line: underline;
}

/* inview.js フェード効果はmain.js */
.fade {
  opacity: 0;
  transition: 1.2s;
}

.fade_on {
  opacity: 1.0;
}

/* ----------−−−−−−−−−−--------------------
# contents
---------------------------------------- */
.top-movie {
  position: relative;
  max-width: 1920px;
  background-color: #fff;
  z-index: -5000;
}

.top-logo {
  background-image: url(img/logo.png);
  display: block;
  height: 80px;
  left: 30px;
  overflow: hidden;
  position: absolute;
  text-indent: 5000%;
  top: 30px;
  width: 80px;
  white-space: nowrap;
}

.logo {
  background-image: url(img/logo.png);
  display: block;
  height: 80px;
  left: 10px;
  overflow: hidden;
  position: absolute;
  text-indent: 5000%;
  top: 10px;
  width: 80px;
  white-space: nowrap;
}

.bg-movie {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  z-index: -1000;
  /* parent */
  /* background-image: url(img/overlayer.jpg); */
  background-position: center center;
  overflow: hidden;
}

@media screen and (max-width: 1219px) {
  .bg-movie {
    background-image: url(img/overlayer.jpg);
  }
}

.catchcopy-wrap {
  position: absolute;
  flex-direction: row;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
  width: 320px;
  margin: 0 auto;
  top: 35%;
  right: 0;
  bottom: 0;
  left: 0;
}

.catchcopy-wrap p {
  font-size: 2rem;
  line-height: 2em;
  color: #fff;
}

.catchcopy-top {
  background-image: url(img/catchcopy_top.png);
  min-width: 132px;
  min-height: 286px;
  z-index: -500;
  margin-top: -10px;
}

@media all and (-ms-high-contrast:none) {

  *::-ms-backdrop,
  .catchcopy-top {
    margin-left: 20px;
  }

  /* IE11 */
}

.youtube-overlayer {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: -900;
}

.youtube {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -900;
}

@media screen and (max-width:1219px) {
  .youtube {
    display: none;
  }
}

.banner {
  width: 90%;
  margin: 0 0 36px 0;
}

.banner>div {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.banner>div img {
  width: 100%;
}

.koukimitsu {
  width: 90%;
  margin: 0 0 80px 0;
}

.koukimitsu>div {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 150px;
  background-color: rgba(193, 158, 14, 0.18);
  border-radius: 30px;
}

.koukimitsu h2 img {
  width: 100%;
  max-width: max-content;
  margin: 0 auto 40px auto;
  display: block;
}

.koukimitsu p {
  font-size: 20px;
}

.koukimitsu .detail {
  margin: 40px 0 0 0;
}

.koukimitsu .detail a {
  width: fit-content;
  margin: 0 auto;
  display: block;
}

.koukimitsu .detail a img {
  display: block;
}

@media screen and (max-width:1219px) {
  .koukimitsu>div {
    padding: 70px 40px;
  }
}

.top-event {
  position: relative;
  width: 1600px;
  min-height: 520px;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  margin-top: 150px;
}

@media screen and (max-width:1649px) {
  .top-event {
    width: 980px;
  }
}

@media screen and (max-width:979px) {
  .top-event {
    width: 98%;
    max-width: 500px;
  }
}

@media all and (-ms-high-contrast:none) and (max-width:1649px) {

  *::-ms-backdrop,
  .top-event #albumList {
    flex-direction: column;
  }

  *::-ms-backdrop,
  .top-event figure:nth-child(odd),
  .top-event figure:nth-child(even) {
    margin-right: 0px;
    margin-left: 0;
  }
}

.event-heading {
  background-image: url(img/heading_event.png);
  display: block;
  width: 60px;
  height: 201px;
  overflow: hidden;
  text-indent: 5000%;
  white-space: nowrap;
  position: absolute;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -150px auto 0;
  z-index: 1000;
}

.top-event figure {
  margin: 0 0 50px !important;
  padding: 0 !important;
}

@media screen and (min-width:1650px) {

  .top-event figure:nth-child(2),
  .top-event figure:nth-child(3) {
    margin: 0 0 0 20px !important;
  }
}

@media screen and (min-width:980px) {
  .top-event figure:nth-child(2n) {
    margin: 0 0 0 20px !important;
  }
}

.top-wrap {
  width: 100%;
  flex-direction: row;
  position: relative;
}

@media screen and (max-width:1219px) {
  .top-wrap {
    width: 100%;
    flex-direction: column;
  }
}

/* ===============================
バーチャル内覧
=============================== */
.virtual-preview {
  width: 100%;
  padding: 90px 0;
  background-color: #EFEFEF;
}

.virtual-preview .inner {
  width: 90%;
  margin: 0 auto !important;
}

.virtual-preview h2 {
  margin: 0 0 40px 0;
  text-align: center;
}

.virtual-preview h2 img {
  max-width: 600px;
}

.virtual-preview h3.subtitle {
  margin: 0 0 60px 0;
  font-size: 24px;
  font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
  font-weight: 400;
  text-align: center;
  line-height: normal;
}

.virtual-preview .flex {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 30px;
}

.virtual-preview .flex-item {
  width: calc(100%/3 - 20px);
  display: flex;
  flex-direction: column;
  gap: 20px 0;
  position: relative;
}

.virtual-preview .flex-item h3 {
  margin: 0 0 20px 0;
  position: absolute;
  top: -20px;
  right: 20px;
}

.virtual-preview .flex-item h3 img {
  max-width: 55px;
}

.virtual-preview .flex-item div {
  display: flex;
  flex-direction: column;
  gap: 20px 0;
}

.virtual-preview .flex-item .eyecatch {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: block;
  object-fit: cover;
  object-position: 0 -60px;
  aspect-ratio: 210 / 113;
}

.virtual-preview .flex-item .link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px 0;
}

.virtual-preview .flex-item .link .button img {
  width: 100%;
  max-width: 216px;
  display: block;
}

.virtual-preview .flex-item .link .text {
  color: #4D4D4D;
  text-decoration: underline;
}

.virtual-preview .flex-item .link .text:visited {
  color: #303030;
}

.virtual-preview .joy-kos {
  width: 90%;
  max-width: 1300px;
  margin: 60px auto 0 auto;
  display: flex;
  flex-direction: column;
}

.virtual-preview .joy-kos a {
  margin: 0 auto;
}

.virtual-preview .joy-kos a img {
  display: block;
}

@media screen and (max-width:767px) {
  .virtual-preview h2 img {
    max-width: 280px;
  }

  .virtual-preview h3.subtitle {
    font-size: 16px;
  }

  .virtual-preview .flex {
    flex-direction: column;
    gap: 80px 0;
  }

  .virtual-preview .flex-item {
    width: 100% !important;
    max-width: max-content !important;
  }
}

@media screen and (max-width:1219px) {
  .virtual-preview .flex {
    gap: 80px 20px;
  }

  .virtual-preview .flex-item {
    width: calc(100%/2 - 14px);
    max-width: max-content;
  }
}

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

.top-build {
  background-image: url(img/build-main.jpg);
  background-position: top center;
  position: relative;
  width: 100%;
  min-height: 1060px;
  z-index: 0;
}

@media screen and (max-width:1219px) {
  .top-build {
    margin-bottom: 800px;
  }
}

.top-renovation {
  background-image: url(img/renovation-main.jpg);
  background-position: top center;
  position: relative;
  width: 100%;
  min-height: 1060px;
}

@media screen and (max-width:1219px) {
  .top-renovation {
    margin-bottom: 800px;
  }
}

@media screen and (max-width:767px) {

  .top-build,
  .top-renovation {
    background-size: 960px 530px;
    width: 100%;
    min-height: 1100px;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
  }
}

.top-bgall-wrap {
  position: absolute;
  flex-direction: row;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 350px;
  margin: -50px auto 0;
  order: -1;
  top: 350px;
  right: 0;
  left: 0;
  bottom: 0;
}

@media screen and (max-width:1219px) {
  .top-bgall-wrap {
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 100%;
    margin: 0 auto;
  }
}

@media screen and (max-width:767px) {
  .top-bgall-wrap {
    margin: -250px auto;
  }
}

.top-bgall-wrap h2 {
  order: 0;
}

.top-bgall-wrap p {
  font-size: 2rem;
  line-height: 2em;
  color: #fff;
  order: 1;
}

@media screen and (min-width:1220px) {

  .catchcopy-wrap p,
  .top-bgall-wrap p {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }
}

@media screen and (max-width:1219px) {
  .catchcopy-wrap p {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }

  .top-bgall-wrap p {
    order: 1;
    color: #000;
    text-align: center;
    font-size: 2.0rem;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .top-build .top-bgall-wrap p {
    top: 850px;
  }

  .top-renovation .top-bgall-wrap p {
    top: 850px;
  }
}


@media screen and (max-width:767px) {
  .top-build .top-bgall-wrap p {
    top: 500px;
  }

  .top-renovation .top-bgall-wrap p {
    top: 500px;
  }
}

@media all and (-ms-high-contrast:none) {

  *::-ms-backdrop,
  .catchcopy-wrap p {
    margin-right: 20px;
  }

  /* IE11 */
}

.catchcopy-build,
.catchcopy-renovation {
  min-width: 170px;
  min-height: 352px;
  margin-left: 50px;
  order: 2;
}

.catchcopy-build {
  background-image: url(img/catchcopy_build.png);
}

.catchcopy-renovation {
  background-image: url(img/catchcopy_renovation.png);
}

@media screen and (max-width:1219px) {

  .catchcopy-build,
  .catchcopy-renovation {
    order: -1;
    margin: 0 auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 170px;
    height: 352px;
  }
}

.btn-build {
  position: absolute;
  top: 800px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  background-image: url(img/btn_build.png);
}

.btn-renovation {
  position: absolute;
  top: 800px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  background-image: url(img/btn_renovation.png);
}

@media screen and (max-width:1219px) {

  .btn-build,
  .btn-renovation {
    top: 1600px;
  }
}

@media screen and (max-width:767px) {
  .btn-build {
    top: 950px;
  }

  .btn-renovation {
    top: 900px;
  }
}

#top-info {
  position: relative;
  width: 100%;
}

.top-info {
  position: relative;
  max-width: 100%;
  overflow-x: hidden;
  z-index: 0;
  width: 100%;
  background-color: #efefef;
}

.top-info-heading {
  background-image: url(img/heading_top-info.png);
  display: block;
  height: 201px;
  overflow: hidden;
  text-indent: 5000%;
  width: 60px;
  white-space: nowrap;
  margin: 200px auto 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.top-info-list-wrap {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 110px 0 100px;
}

.top-info-list {
  width: 100%;
  margin: 300px auto 200px;
  max-width: 900px;
}

.top-info-list li {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  border-bottom: 1px solid #b3b3b3;
  height: 70px;
  margin: 0 auto 18px;
  max-width: 900px;
  width: 90%;
  padding-bottom: 10px;
  color: #000;
  line-height: 20px;
}

.top-about {
  position: relative;
  width: 100%;
  padding-top: 30px;
  margin-bottom: 100px;
  background-color: #efefef;
}

.top-about-heading {
  background-image: url(img/heading_top_about.png);
  display: block;
  height: 201px;
  overflow: hidden;
  text-indent: 5000%;
  width: 60px;
  white-space: nowrap;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.tile-about {
  background-color: #ede9d9;
}

.tile-about a {
  color: #000;
}


@media screen and (max-width:1219px) {
  .tile-about {
    height: 100%;
    padding-top: 200px;
  }

  .tile-about p {
    text-align: center;
  }
}

.btn-about {
  background-image: url(img/btn_about.png);
}

.btn-contact {
  background-image: url(img/btn_contact.png);
}

.top-tieup {
  position: relative;
  margin-bottom: 100px;
}

.tieup-heading {
  background-image: url(img/heading_tieup.png);
  display: block;
  height: 60px;
  overflow: hidden;
  text-indent: 5000%;
  width: 82px;
  white-space: nowrap;
  margin: 0 auto 50px;
}

.tieup-wrap {
  margin: 0 auto;
  max-width: 723px;
  justify-content: space-between;
}

.btn-joycos {
  width: 183px;
  height: 65px;
  background-image: url(img/joykoslogo.png);
}

/* 下層 */
.build-heading {
  background-image: url(img/heading_build.png);
  display: block;
  height: 201px;
  overflow: hidden;
  text-indent: 5000%;
  width: 60px;
  white-space: nowrap;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.top-mainimg-build {
  position: relative;
  /*background-image:url(img/build-main.jpg);*/
  background-size: contain;
  background-position: center center;
}

.top-mainimg-build iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;

}

.catchcopy-build-top {
  background-image: url(img/catchcopy_build_top.png);
}

.build-01-heading {
  background-image: url(img/catchcopy_build_01.png);
}

@media screen and (max-width:1219px) {
  .build-01-heading {
    background-image: url(img/catchcopy_build_01_m.png);
  }
}

.lower-mainimg-build-01 {
  background-image: url(img/build-01-main.jpg);
}

.lower-subimg-build-01 {
  background-image: url(img/build-01-sub.jpg);
}

.build-02-heading {
  background-image: url(img/catchcopy_build_02.png);
}

@media screen and (max-width:1219px) {
  .build-02-heading {
    background-image: url(img/catchcopy_build_02_m.png);
  }
}

.lower-mainimg-build-02 {
  background-image: url(img/build-02-main.jpg);
}

@media screen and (max-width:1219px) {
  .lower-mainimg-build-02 {
    margin-top: 130px;
  }
}

.lower-subimg-build-02 {
  background-image: url(img/build-02-sub.jpg);
}

.build-03-heading {
  background-image: url(img/catchcopy_build_03.png);
}

@media screen and (max-width:1219px) {
  .build-03-heading {
    background-image: url(img/catchcopy_build_03_m.png);
  }
}

.lower-mainimg-build-03 {
  background-image: url(img/build-03-main.jpg);
}

.lower-subimg-build-03 {
  background-image: url(img/build-03-sub.jpg);
}

.build-05 {
  padding-top: 30px;
  margin-bottom: 100px;
}

.build-05-heading {
  background-image: url(img/catchcopy_build_05.png);
  width: 110px;
}

@media screen and (max-width:1219px) {
  .build-05-heading {
    background-image: url(img/catchcopy_build_05_m.png);
    width: 100%;
  }
}

.lower-mainimg-build-05 {
  background-image: url(img/build-05-main.jpg);
}

.lower-subimg-build-05 {
  background-image: url(img/build-05-sub.jpg);
}

.btn-hph {
  background-image: url(img/btn_hph.png);
}

.tile-build {
  background-image: url(img/tile-build.jpg);
}

.renovation-heading {
  background-image: url(img/heading_renovation.png);
  display: block;
  height: 242px;
  overflow: hidden;
  text-indent: 5000%;
  width: 60px;
  white-space: nowrap;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

@media screen and (max-width:1219px) {
  .renovation-heading {
    background-image: url(img/heading_renovation_m.png);
    height: 245px;
  }
}

.top-mainimg-renovation {
  background-image: url(img/renovation-main.jpg);
  background-size: contain;
  background-position: center center;
  margin-top: 20px;
}

@media screen and (max-width:1219px) {
  .top-mainimg-renovation {
    margin-top: 300px;
  }
}

@media screen and (max-width:1219px) {
  .lower-mainimg-renovation-02 {
    margin-top: 150px;
  }
}

@media screen and (max-width:1219px) {
  .renovation-03 {
    padding-top: 200px;
  }
}

@media screen and (max-width:1219px) {
  .renovation-04 {
    padding-top: 200px;
  }
}

.catchcopy-renovation-top {
  background-image: url(img/catchcopy_renovation_top.png);
  min-width: 170px;
}

.renovation-01-heading {
  background-image: url(img/catchcopy_renovation_01.png);
}

@media screen and (max-width:1219px) {
  .renovation-01-heading {
    background-image: url(img/catchcopy_renovation_01_m.png);
  }
}

.lower-mainimg-renovation-01 {
  background-image: url(img/renovation-01-main.jpg);
}

.lower-subimg-renovation-01 {
  background-image: url(img/renovation-01-sub.jpg);
}

.renovation-02-heading {
  background-image: url(img/catchcopy_renovation_02.png);
}

@media screen and (max-width:1219px) {
  .renovation-02-heading {
    background-image: url(img/catchcopy_renovation_02_m.png);
  }
}

.lower-mainimg-renovation-02 {
  background-image: url(img/renovation-02-main.jpg);
}

.lower-subimg-renovation-02 {
  background-image: url(img/renovation-02-sub.jpg);
}

.renovation-03-heading {
  background-image: url(img/catchcopy_renovation_03.png);
}

@media screen and (max-width:1219px) {
  .renovation-03-heading {
    background-image: url(img/catchcopy_renovation_03_m.png);
  }
}

.lower-mainimg-renovation-03 {
  background-image: url(img/renovation-03-main.jpg);
}

.lower-subimg-renovation-03 {
  background-image: url(img/renovation-03-sub01.png),
    url(img/renovation-03-sub02.png);
  background-position: top left, top right;
}

@media screen and (max-width:999px) {
  .lower-subimg-renovation-03 {
    height: 0;
    padding-top: 125%;
    background-size: 100% auto, 100% auto;
    background-position: top center, bottom center;
  }
}

.renovation-04-heading {
  background-image: url(img/catchcopy_renovation_04.png);
}

@media screen and (max-width:1219px) {
  .renovation-04-heading {
    background-image: url(img/catchcopy_renovation_04_m.png);
  }
}

.lower-mainimg-renovation-04 {
  background-image: url(img/renovation-04-main.jpg);
}

.lower-subimg-renovation-04 {
  background-image: url(img/renovation-04-sub.jpg);
}

.hph-heading {
  background-image: url(img/heading_hph.png);
  display: block;
  height: 265px;
  overflow: hidden;
  text-indent: 5000%;
  width: 60px;
  white-space: nowrap;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.top-mainimg-hph {
  background-image: url(img/hph-main.jpg);
  background-size: contain;
  background-position: center center;
  margin: 30px auto 80px;
}

@media screen and (max-width:1219px) {
  .top-mainimg-hph {
    background-image: url(img/hph-main.jpg);
    background-size: contain;
    background-position: center center;
    margin: 300px auto 100px;
  }
}

.catchcopy-hph-top {
  background-image: url(img/catchcopy_hph_top.png);
  min-width: 170px;
}

.hph-01-heading {
  background-image: url(img/catchcopy_hph_01.png);
}

@media screen and (max-width:1219px) {
  .hph-01-heading {
    height: 170px;
    background-image: url(img/catchcopy_hph_01_m.png);
    position: relative;
  }
}

.lower-mainimg-hph-01 {
  background-image: url(img/hph-01-main01.jpg);
}

.lower-mainimg-hph-02 {
  background-image: url(img/hph-01-main02.jpg);
}

.lower-subimg-hph-01 {
  background-image: url(img/hph-01-sub01.png),
    url(img/hph-01-sub02.png);
  background-position: top left, top left 65%;

}

@media screen and (max-width:999px) {
  .lower-subimg-hph-01 {
    height: 0;
    padding-top: 125%;
    background-size: 100% auto, 100% auto;
    background-position: top center, bottom center;
  }
}

.hph-01 {
  margin-bottom: 100px;
}

.hph-01 p.lower-strong {
  margin: 0 0 1em 0;
}

.hph-01 p.lower-strong:last-of-type {
  margin: 0 0 100px 0;
}

/* 高気密・高断熱 - ジョイ・コス */
.hph-joykos {
  padding: 0 0 100px 0;
  position: relative;
}

.hph-joykos>div {
  margin: 0 0 100px 0;
}

.hph-joykos>div:last-of-type {
  margin: 0;
}

.hph-joykos img {
  display: block;
  box-sizing: border-box;
}

.hph-joykos_main-visual {
  margin: 0 0 100px 0;
}

.hph-joykos_main-visual_photo {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.hph-joykos_main-visual_title {
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
}

.hph-joykos_main-visual_title img {
  width: max-content;
}

.hph-joykos_text {
  width: calc(100% - 40px);
  max-width: 1600px;
  margin: 0 auto;
}

.hph-joykos_text h4 {
  margin: 0 0 100px 0;
  font-size: 4.0rem;
  font-weight: bold;
  line-height: 5rem;
}

.hph-joykos_text p {
  font-size: 20px;
}

.hph-joykos_chart_flex {
  width: calc(100% - 40px);
  max-width: 1600px;
  margin: 100px auto 0 auto;
  display: flex;
  gap: 0 30px;
}

.hph-joykos_chart_flex img {
  width: 100%;
  max-width: max-content;
  min-width: 0;
}

.hph-joykos_supplement {
  width: calc(100% - 40px);
  max-width: 1600px;
  margin: 40px auto 0 auto;
}

.hph-joykos_button {
  width: calc(100% - 40px);
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 899px) {
  .hph-joykos_chart_flex {
    flex-direction: column;
    gap: 30px 0;
  }

  .hph-joykos_button a {
    margin: 0 auto;
  }
}

@media screen and (max-width: 1219px) {
  .hph-joykos_main-visual_title {
    position: relative;
  }
}

/* 高気密・高断熱 - ジョイ・コス ここまで */

.about-heading {
  background-image: url(img/heading_about.png);
  display: block;
  height: 201px;
  overflow: hidden;
  text-indent: 5000%;
  width: 60px;
  white-space: nowrap;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.top-mainimg-about {
  background-image: url(img/about-main.jpg);
  background-size: contain;
  background-position: center center;
  margin: 30px auto 80px;
}

@media screen and (max-width:1219px) {
  .top-mainimg-about {
    background-image: url(img/about-main.jpg);
    background-size: contain;
    background-position: center center;
    margin: 250px auto 100px;
  }
}

.catchcopy-about-top {
  background-image: url(img/catchcopy_about_top.png);
  min-width: 170px;
}

.about-02-heading {
  background-image: url(img/heading_about.png);
}

@media screen and (max-width:899px) {
  .about-02-heading {
    background-image: url(img/heading_about_m.png);
  }
}

@media screen and (min-width:900px) {
  .about-table {
    width: 900px;
    height: 420px;
    margin-top: 250px;
  }
}

@media screen and (max-width:899px) {
  .about-table {
    width: 100%;
    max-width: 900px;
    height: 840px;
    margin-top: 100px;
  }
}

.about-table dl:nth-child(even) {
  background-color: #fff;
}

.about-table dl:nth-child(odd) {
  background-color: #efefef;
}

@media screen and (min-width:900px) {
  .about-table dl {
    display: flex;
    align-items: center;
    height: 60px;
  }
}

@media screen and (max-width:899px) {
  .about-table dl {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 120px;
    padding-top: 35px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width:364px) {
  .about-table dl:nth-child(6) {
    padding-top: 20px;
  }
}

@media screen and (max-width:429px) {
  .about-table dl:last-child {
    padding-top: 20px;
    margin-bottom: 100px;
  }
}

.about-table dl dt {
  width: 200px;
  padding-left: 1em;
  font-weight: bold;
}

@media screen and (min-width:900px) {
  .about-table dl dt {
    width: 200px;
    padding-left: 1em;
  }
}

.about-ggmap {
  width: 100%;
  max-width: 900px;
  min-height: 400px;
  margin-top: 60px;
  margin-bottom: 100px;
}

.contact-heading {
  background-image: url(img/heading_contact.png);
  display: block;
  height: 287px;
  overflow: hidden;
  text-indent: 5000%;
  width: 60px;
  white-space: nowrap;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.contact .container {
  margin-top: 400px;
  text-align: center;
}

.contact-type {
  font-size: 20px;
  font-weight: bold;
}

.contact-tel {
  font-size: 30px;
  font-weight: bold;
  color: #000;
}

.contact p.tel {
  margin-bottom: 250px;
}

.wpcf7 {
  width: 100%;
  max-width: 900px;
  margin-top: -50px;
  margin-bottom: 100px;
  text-align: left;
}

.wpcf7 p {
  font-weight: bold;
  margin-bottom: 50px;
}

.wpcf7-list-item-label {
  font-weight: normal;
}

.wpcf7-form-control-wrap label {
  display: block;
  margin-bottom: 15px;
}

.wpcf7-form-control-wrap .genre {
  display: block;
  margin-bottom: 15px;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
  width: 100%;
  height: 40px;
  background-color: #efefef;
  margin-top: 10px;
}

textarea {
  width: 100%;
  background-color: #efefef;
  margin-top: 10px;
}

input[type="submit"] {
  background-image: url(img/btn_submit.png);
  display: block;
  margin: 0 auto;
  text-indent: 5000%;
  width: 260px;
  height: 61px;
  white-space: nowrap;
}

input[type="checkbox"] {
  margin-right: 10px;
}

.wpcf7-checkbox {
  display: block;
  padding-top: 10px;
}

.req {
  color: #808080;
}

/* 施工事例 */
.global_nav {
  display: flex;
  margin: 20px auto;
}

.global_nav li a {
  font-size: 20px;
}

.global_nav li a:hover {
  text-decoration: none;
}

.inner {
  margin: 20px auto;
}

@media screen and (max-width: 1030px) {
  .inner:first-child {
    margin: 100px auto 20px;
  }
}

.our_works-heading {
  background: url(img/heading-our_works.png);
  display: block;
  height: 201px;
  overflow: hidden;
  text-indent: 5000%;
  width: 60px;
  white-space: nowrap;
  margin: 0 auto 70px auto;
}

.our_works-link {
  text-align: center;
}

.our_works-link a {
  color: #000;
  text-decoration: underline;
  transition: all .3s;
}

.our_works-link a:hover {
  opacity: .5;
}


.info-heading {
  background: url(img/heading_info.png);
  display: block;
  height: 191px;
  overflow: hidden;
  text-indent: 5000%;
  width: 60px;
  white-space: nowrap;
  margin: 0 auto 70px auto;
}

.container,
.single-container {
  width: calc(100% - 40px);
  max-width: 1600px;
  margin: 0 auto 100px;
}

@media screen and (max-width: 1660px) {
  .container {
    max-width: 1040px;
  }
}

@media screen and (max-width: 1100px) {
  .container {
    max-width: 480px;
  }
}

.works-nav li,
.info-nav li {
  list-style: none;
  text-align: center;
  margin-bottom: 130px;
}

.works-nav li a,
.info-nav li a {
  color: #000;
  font-size: 25px;
  line-height: 50px;
  letter-spacing: 5px;
  text-decoration: none;
  padding-right: 20px;
}

@media screen and (max-width: 1100px) {

  .works-nav li a,
  .info-nav li a {
    display: block;
  }
}

.works-nav li a:hover,
.info-nav li a:hover {
  text-decoration: underline;
}

#albumList {
  display: flex;
  flex-wrap: wrap;
}

.albumList-bac {
  height: 0;
  /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
  padding-top: 56.25%;
  background-position: center center;
  background-size: cover;
  margin-bottom: 5px;
}

figure {
  position: relative;
  margin: 0 80px 155px 0;
  width: 480px;
}

@media screen and (max-width: 550px) {
  figure {
    width: 90vw;
    max-width: 480px;
    margin: 0 auto;
  }
}

figure:nth-child(3n) {
  margin-right: 0;
}

@media screen and (max-width: 1660px) {
  figure:nth-child(odd) {
    margin-right: 80px;
  }

  figure:nth-child(even) {
    margin-right: 0;
  }
}

@media screen and (max-width: 1100px) {
  figure:nth-child(n) {
    margin: 0 0 155px 0;
  }
}

@media screen and (max-width: 550px) {
  #albumList .albumList-bac {
    width: 100%;
  }
}

#albumList a {
  text-decoration: none;
}

#albumList .new-construction {
  position: absolute;
  top: -30px;
  left: 10px;
}

.new-construction {
  display: block;
  background: url(img/new-heading.png);
  width: 86px;
  height: 68px;
}

#albumList .reform {
  position: absolute;
  top: -30px;
  left: 10px;
}

.reform {
  display: block;
  background: url(img/reform-heading.png);
  width: 176px;
  height: 68px;
}

#albumList .joykos {
  position: absolute;
  top: -30px;
  left: 10px;
}

.joykos {
  display: block;
  background: url(img/joykos-heading.png);
  width: 176px;
  height: 68px;
}

#albumList .public {
  position: absolute;
  top: -30px;
  left: 10px;
}

.public {
  display: block;
  background: url(img/public-heading.png);
  width: 86px;
  height: 68px;
}

#albumList .shop {
  position: absolute;
  top: -30px;
  left: 10px;
}

.shop {
  display: block;
  background: url(img/shop-heading.png);
  width: 86px;
  height: 68px;
}

#albumList .event,
#albumList .whatsnew,
#albumList .etc {
  position: absolute;
  top: -30px;
  left: 10px;
}

.event {
  display: block;
  background: url(img/category_event.png);
  width: 139px;
  height: 50px;
}

.whatsnew {
  display: block;
  background: url(img/category_update.png);
  width: 85px;
  height: 50px;
}

.etc {
  display: block;
  background: url(img/category_etc.png);
  width: 115px;
  height: 50px;
}

.title {
  font-size: 20px;
  color: #000;
}

.single-container h2,
h3 {
  font-size: 40px;
  line-height: 60px;
  margin-bottom: 30px;
  font-weight: 400;
}

@media screen and (max-width: 640px) {

  .single-container h2,
  h3 {
    font-size: 30px;
    line-height: 40px;
  }
}

.single-container p {
  margin-bottom: 100px;
}

.date {
  text-align: left;
}

.mainVisual {
  width: 100%;
  height: 0;
  padding-top: calc(900/ 1600 * 100%);
  background: url(img/mainVisual.jpg) center center / cover no-repeat;
  margin-bottom: 40px;
}

.content__text {
  margin-bottom: 200px;
}

.link {
  color: #000;
}

.case-data {
  max-width: 900px;
  margin: 0 auto 200px;
}

.case-data dl {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.case-data dl>dt {
  font-weight: bold;
  margin-bottom: 15px;
}

.empty {
  text-align: center;
}

@media screen and (min-width: 660px) {}

.under-line {
  display: block;
  border-top: 2px solid #ccc;
  margin: 20px 0;
}

@media screen and (max-width: 940px) {
  .case-data img {
    width: 100%;
  }
}

.img-box {
  width: 100%;
  margin: 0 auto;
}

.thumb {
  width: 1610px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
}

.thumb li {
  margin-bottom: 30px;
}


@media screen and (max-width: 1655px) {
  .img-box {
    width: 85%;
    margin: 0 auto;
  }

  .thumb {
    width: 960px;
  }
}

@media screen and (max-width: 1160px) {
  .img-box {
    width: 100%;
    margin: 0 auto;
  }

  .thumb {
    width: 640px;
  }
}

@media screen and (max-width: 767px) {
  .img-box {
    width: 100%;
    margin: 0 auto;
  }

  .thumb {
    width: 320px;
  }
}

.back-button {
  display: block;
  background: url(img/back-button.png);
  width: 260px;
  height: 61px;
  margin: 188px auto 200px;
}

.single-img {
  max-width: 100%;
  height: auto;
  margin-bottom: 30px;
}

/* ----------−−−−−−−−−−--------------------
# navigation
---------------------------------------- */
/* グローバルナビ */
.main-nav {
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  height: 90px;
}

.main-menu {
  flex-direction: row;
  height: 20px;
  line-height: 3.5rem;
  width: 100%;
}

.main-nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 833px;
  margin: 10px auto;
}

.main-nav a {
  min-width: 60px;
  min-height: 60px;
  padding-top: 20px;
}

.main-nav a:hover {
  background-position: center center;
  background-repeat: no-repeat;
}

.main-nav a li {
  display: block;
  overflow: hidden;
  text-indent: 5000%;
  white-space: nowrap;
  height: 20px;
}

@media screen and (min-width:1220px) {
  .menu01:hover {
    background-image: url(img/menu01_bg.png);
  }

  .menu02:hover {
    background-image: url(img/menu01_bg.png);
  }

  .menu03:hover {
    background-image: url(img/menu03_bg.png);
  }

  .menu04:hover {
    background-image: url(img/menu04_bg.png);
  }

  .menu05:hover {
    background-image: url(img/menu01_bg.png);
  }

  .menu06:hover {
    background-image: url(img/menu03_bg.png);
  }

  .menu07:hover {
    background-image: url(img/menu01_bg.png);
  }

  .menu08:hover {
    background-image: url(img/menu04_bg.png);
  }
}

.menu01 li {
  background-image: url(img/menu_01.png);
  width: 60px;
}

.menu02 li {
  background-image: url(img/menu_02.png);
  width: 74px;
}

.menu03 li {
  background-image: url(img/menu_03.png);
  width: 93px;
}

.menu04 li {
  background-image: url(img/menu_04.png);
  width: 139px;
}

.menu05 li {
  background-image: url(img/menu_05.png);
  width: 80px;
}

.menu06 li {
  background-image: url(img/menu_06.png);
  width: 78px;
}

.menu07 li {
  background-image: url(img/menu_07.png);
  width: 79px;
}

.menu08 li {
  background-image: url(img/menu_08.png);
  width: 118px;
}

.logo_m {
  display: none;
}

@media screen and (min-width:1220px) {
  .main-menu li:after {
    content: '\00a0/\00a0'
      /* \00a0 =半角スペース */
  }

  .main-menu li:last-child:after {
    content: ''
  }
}

@media screen and (max-width:1219px) {

  /* 携帯版メニュー ここから */
  /* ロゴ */
  .logo_m {
    background-image: url(img/logo_m.png);
    display: block;
    height: 50px;
    left: 30px;
    overflow: hidden;
    position: absolute;
    text-indent: 5000%;
    top: 25px;
    width: 50px;
    white-space: nowrap;
    z-index: 3000;
  }

  /* ハンバーガーメニュー */
  .main-nav__toggle span {
    z-index: 20000;
    display: block;
    position: absolute;
    /*to div*/
    width: 100%;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    border-bottom: solid 1px #C19E0E;
  }

  .main-nav__toggle span:nth-child(1) {
    top: 0
  }

  .main-nav__toggle span:nth-child(2) {
    top: 8px
  }

  .main-nav__toggle span:nth-child(3) {
    top: 16px
  }

  .main-nav__open .main-nav__toggle {
    background-image: url(img/menu_button_on.png);
    /*画像の場合*/
    z-index: 20000;
  }

  /*---------- メニュー部 ----------*/
  .main-nav {
    background-image: none;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: -100vh;
    /* heightぶんマイナス */
    right: 0;
    margin: 0 auto;
    padding-top: 60px;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    z-index: 1000;
  }

  .main-nav ul {
    -webkit-writing-mode: initial;
    -ms-writing-mode: initial;
    writing-mode: initial;
    flex-direction: column;
    width: auto;
  }

  .main-nav li {
    list-style: none;
    max-width: 320px;
    height: 40px;
    font-size: 2.5rem;
  }

  .main-nav a {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    color: #000;
    margin: 0;
    padding: 0;
    min-height: 40px;
  }

  /* 切り替えスイッチ */
  .main-nav__toggle {
    position: fixed;
    display: block;
    top: 30px;
    right: 30px;
    width: 30px;
    /*menu_buttonのサイズ*/
    height: 30px;
    background-image: url();
    background-position: bottom center;
    background-size: contain;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
  }

  .main-nav__toggle div {
    position: relative;
  }

  .main-nav__toggle {
    display: block;
  }

  /* ハンバーガー切り替え変形処理 */
  .main-nav__open .main-nav__toggle span:nth-child(1) {
    border-bottom: solid 1px #C19E0E;
    top: 13px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg)
  }

  .main-nav__open .main-nav__toggle span:nth-child(2),
  .main-nav__open .main-nav__toggle span:nth-child(3) {
    border-bottom: solid 1px #C19E0E;
    top: 13px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg)
  }

  /* クリック時スクロール量・高さ */
  .main-nav__open .main-nav {
    -moz-transform: translateY(100vh);
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
  }

}

@media screen and (max-width:1219px) and (max-height:550px) {
  .main-nav {
    height: 550px;
    top: -550px;
    /* heightぶんマイナス */
    position: absolute;
  }

  .main-nav__open .main-nav {
    -moz-transform: translateY(550px);
    -webkit-transform: translateY(550px);
    transform: translateY(550px);
  }

  .page-top .main-nav {
    height: 550px;
    top: calc(-550px + -200vh);
    /* heightぶんマイナス */
    position: absolute;
  }

  .page-top .main-nav__open .main-nav {
    -moz-transform: translateY(200vh);
    -webkit-transform: translateY(200vh);
    transform: translateY(200vh);
  }

  .page-top .main-nav__toggle {
    position: fixed;
  }

  .main-nav__open .bg-movie {
    visibility: hidden;
  }

}

/* 携帯版メニュー ここまで */

/* 施工実績メニュー */
.work-nav,
.info-nav {
  width: 100%;
  max-width: 770px;
  margin: 100px auto 100px;
}

@media screen and (max-width:1099px) {

  .work-nav,
  .info-nav {
    width: 100%;
    max-width: 770px;
    margin: 100px auto 50px;
  }
}

.work-nav ul,
.info-nav ul {
  flex-direction: row;
  justify-content: space-between;
}

@media screen and (max-width:1099px) {

  .work-nav ul,
  .info-nav ul {
    flex-direction: column;
    justify-content: center;
  }
}

.work-nav a li,
.info-nav a li {
  display: block;
  background-position: center center;
  overflow: hidden;
  text-indent: 5000%;
  white-space: nowrap;
  height: 25px;
  margin-bottom: 30px;
  border-bottom: 2px #fff solid;
}

.work-nav li:hover,
.info-nav li:hover {
  border-bottom: 2px #000 solid;
}

.work-menu01 li {
  background-image: url(img/work_nav01.png);
  width: 86px;
}

.work-menu02 li {
  background-image: url(img/work_nav02.png);
  width: 57px;
}

.work-menu03 li {
  background-image: url(img/work_nav03.png);
  width: 146px;
}

.work-menu04 li {
  background-image: url(img/work_nav04.png);
  width: 148px;
}

.work-menu05 li {
  background-image: url(img/work_nav05.png);
  width: 56px;
}

.work-menu06 li {
  background-image: url(img/work_nav06.png);
  width: 57px;
}

.info-menu01 li {
  background-image: url(img/info_nav01.png);
  width: 85px;
}

.info-menu02 li {
  background-image: url(img/info_nav02.png);
  width: 114px;
}

.info-menu03 li {
  background-image: url(img/info_nav03.png);
  width: 57px;
}

.info-menu04 li {
  background-image: url(img/info_nav04.png);
  width: 86px;
}

/* ----------−−−−−−−−−−--------------------
# plugin
---------------------------------------- */
.wp-pagenavi {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 175px;
  height: 100%;
  margin: 0 auto;
  font-size: 20px;
}

.wp-pagenavi .current {
  border-bottom: 1px #000 solid;
}

.wp-pagenavi a {
  color: #000;
}

.wp-pagenavi a:hover {
  border-bottom: 1px #000 solid;
}


/* Instagram */
.top-instagram-heading {
  font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
  font-size: 2.8rem;
  margin: 0 auto 52px;
}