@charset "utf-8";
html > body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
    "游ゴシック", Geneva, Arial, Verdana, sans-serif;
}
html {
  font-size: 62.5%; /* fontサイズ10px指定 */
}
body {
  font-size: 1.8rem; /* fontサイズ18px指定 */
  letter-spacing: 0.05em;
  scroll-behavior: smooth;
  background: rgb(34 34 34);
  color: #fff;
}

h1 {
  font-size: 4rem; /* fontサイズ40px指定 */
  line-height: 1.5;
  padding-bottom: 5px;
}
h2 {
  font-size: 3rem; /* fontサイズ30px指定 */
  line-height: 1.5;
  padding-bottom: 5px;
}
h3 {
  font-size: 2.4rem; /* fontサイズ24px指定 */
  line-height: 1.5;
}
h4,
h5 {
  font-size: 2rem; /* fontサイズ20px指定 */
  font-weight: bold;
  line-height: 1.5;
}
p {
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
a {
  color: #00bdff;
  transition-property: color;
  transition-duration: 0.5s;
}
a:hover {
  color: #fff;
}
.inner {
  max-width: 1200px;
  margin: 0 auto;
}
.smtxt {
  font-size: 1.6rem;
}
.att-ora {
  color: #f15a24;
}
#scrollTopButton {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 10px;
  font-size: 14px;
  font-weight: bold;
  background-color: #fff;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
}

#scrollTopButton:hover {
  opacity: 0.8;
}

/* ハンバーガーメニュー */
.toggle {
  appearance: none;
  display: block;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 101;
  margin: 0;
  padding: 0;
  width: 55px;
  height: 55px;
  border: none;
  background-color: #fff;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.toggle:focus {
  outline: 2px #0000ee solid;
}
.toggle > span,
.toggle:before,
.toggle:after {
  display: block;
  position: absolute;
  top: 40%;
  left: 50%;
  width: 30px;
  height: 4px;
  margin: -2px 0 0 -15px;
}
.toggle > span {
  background-color: #000;
  transition: opacity 0.3s ease;
  will-change: opacity;
}
.toggle::before,
.toggle::after {
  content: "";
  background-color: #000;
  transition: background-color 0.3s ease;
}
.toggle::before {
  transform: translateY(-10px);
}
.toggle::after {
  transform: translateY(10px);
}
.toggle[aria-expanded="true"] > span {
  opacity: 0;
}
.toggle[aria-expanded="true"]::before,
.toggle[aria-expanded="true"]::after {
  background-color: #000;
}
.toggle[aria-expanded="true"]::before {
  animation: 0.3s ease closeBar1 forwards;
}
.toggle[aria-expanded="true"]::after {
  animation: 0.3s ease closeBar2 forwards;
}
.toggle.-close::before {
  animation: 0.3s ease closeBar1Rev forwards;
}
.toggle.-close::after {
  animation: 0.3s ease closeBar2Rev forwards;
}
.toggle > p {
  color: #000;
  position: absolute;
  left: 50%;
  bottom: 0px;
  font-size: 1.1rem;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  margin-bottom: 0.2rem;
}

header nav#nav ul {
  display: block;
  list-style-type: none;
  padding: 0;
  margin-top: 20vw;
}
.nav_content {
  flex-direction: column;
  justify-content: center;
  align-content: top;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(34 34 34);
  color: #fff;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav_content[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.nav_content[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.nav_content li {
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 2.4;
  text-align: center;
}
.nav_content li a {
  color: #fff;
  font-size: 1.8rem;
}
.nav_content li + li {
  margin-top: rem;
}
@keyframes closeBar1 {
  0% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(45deg);
  }
}
@keyframes closeBar2 {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(-45deg);
  }
}
@keyframes closeBar1Rev {
  0% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(-10px);
  }
}
@keyframes closeBar2Rev {
  0% {
    transform: translateY(0) rotate(-45deg);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(10px);
  }
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  bottom: 0;
  /* メニューを画面に入れる */
}
/* ここまでハンバーガー */

/* ふわっと表示するJS用CSS */
/* .fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
} */
/* ふわっと表示するJS用CSS */

/* 共通項目ここから */
.l-size {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}
.m-size {
  font-size: 2rem;
  font-weight: bold;
}
.pats {
  padding: 0 34px 30px 34px;
}

/* お問い合わせボタンと電話番号 ここから */
a.but-inq {
  color: #fff;
  font-weight: bold;
  display: inline-flex;
  background-color: #d44300;
  border-radius: 10px;
  padding: 10px 30px;
  text-decoration: none;
}
a.but-inq:hover {
  color: #000;
  background-color: #ffbf48;
}
.phone a {
  color: #000;
  font-weight: bold;
  font-size: 4rem;
  text-decoration: none;
}
.phone a:hover {
  color: #00bdff;
}
/* お問い合わせボタンと電話番号 ここまで */
/* 共通項目ここまで */

/* headerここから */
header {
  border-bottom: #fff solid 1px;
  text-align: center;
  width: 100%;
  background: rgb(0 0 0);
}
header h1 img {
  max-height: 54px;
  margin: 0 auto;
}
header .inner {
  position: relative;
  background-image: url(../img/wave.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  padding-top: 10px;
}
header p {
  position: absolute;
  left: 70px;
  bottom: 10px;
  font-size: 1.6rem;
}
/* headerここまで */

/* footerここから */
footer {
  background-color: #000;
  padding: 40px 0 0 0;
  text-align: center;
}
footer img {
  width: 150px;
  display: block;
  margin: 0 auto;
}
p.copy {
  font-size: 1.6rem;
  padding: 30px 0;
}
/* footerここまで */

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

/* #topimg関連ここから */
#topimg {
  background-image: url(../img/backimg_top.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 34px 1fr 1fr auto;
}
#own #topimg {
  background-image: url(../img/backimg-owner.jpg);
  grid-template-columns: 1fr;
  grid-template-rows: 34px 2fr 1fr auto;
}
#sha #topimg {
  background-image: url(../img/backimg-sharehouse.jpg);
  grid-template-columns: 1fr;
  grid-template-rows: 34px 1fr auto;
  background-size: contain;
  background-color: #fff;
}
#sha #topimg #pre {
  color: #000;
  padding: 0px 240px 40px;
}
#toi #topimg {
  background-image: none;
  background-color: #fff;
  grid-template-columns: 1fr;
  grid-template-rows: 34px auto;
}
#com #topimg {
  background-image: none;
}
/* #topimg関連ここまで */

/* nav関連ここから */
nav {
  grid-column: 1/3;
  grid-row: 1/2;
  background: rgb(38 38 38 / 0.6);
}
#own nav {
  grid-column: 1/2;
  grid-row: 1/2;
}
#sha nav {
  grid-column: 1/2;
  grid-row: 1/2;
}
nav ul {
  list-style-type: none;
  display: flex;
  column-gap: 20px;
  justify-content: center;
  margin: 0;
  padding: 0;
}
nav ul a {
  color: #fff;
  text-decoration: none;
  text-decoration-color: transparent;
  transition: text-decoration-color 1s ease;
}
nav ul a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 8px;
  text-decoration-thickness: 3px;
}
/* nav関連ここまで */

/* #catch関連ここから */
#catch {
  padding: 70px;
}
#own #catch {
  grid-column: 1/2;
  grid-row: 2/3;
  width: 47%;
  padding: 0;
  margin-top: 55px;
}
#sha #catch {
  grid-column: 1/2;
  grid-row: 2/3;
  padding: 300px 270px 20px 270px;
  display: flex;
}
#catch p {
  font-size: 3.7rem;
  text-shadow: #000 0 0 5px, #000 1px 1px 5px;
}
#own #catch h2 {
  background-color: #d42121;
  padding: 0 10px 0 70px;
}
#own #catch p {
  font-size: 5rem;
  font-weight: 300;
  color: #000;
  text-shadow: #fff 0 0 4px, #fff 0px 0px 4px;
  padding: 0 10px 20px 70px;
  line-height: 1.2;
  background-color: rgba(255, 255, 255, 0.7);
}
#own #catch p span {
  font-size: 70%;
}
#sha #catch #logo {
  width: 42%;
  padding: 15px 40px;
  background-color: #fff;
}
#sha #catch h2 {
  width: 58%;
  padding: 110px 0 0 10px;
}
#toi #catch {
  position: relative;
  padding: 0 312px 0 318px;
  display: grid;
  place-items: center;
  height: 292px;
}
#toi #catch div {
  margin: 0 auto;
  width: 96%;
}
#toi #catch p {
  color: #000;
  text-shadow: none;
  font-size: 2rem;
  text-align: center;
}
#toi #catch h2 {
  margin-bottom: 10px;
}
#toi #catch h2 img {
  margin: 0 auto;
  width: 300px;
}
#toi #catch #L-img {
  width: 306px;
  position: absolute;
  left: 22px;
  top: 21px;
}
#toi #catch #R-img {
  width: 300px;
  position: absolute;
  right: 18px;
  top: 12px;
}
/* #catch関連ここまで */

/* #sit5 #order関連（トップのみ）ここから */
#sit5 {
  padding: 0 30px 0 30px;
}
#order {
  grid-column: 2/3;
  grid-row: 2/4;
  padding: 60px 30px 0 0;
}
#order img {
  filter: drop-shadow(12px 12px 0 #000);
  width: 100%;
}
/* #sit5 #order関連ここまで */

/* #unit関連ここから */
#unit {
  grid-column: 1/3;
  grid-row: 4/5;
  background: rgb(0 0 0 / 0.8);
  position: relative;
  padding: 40px 450px 40px 40px;
}
#unit .unit-img {
  width: 400px;
  position: absolute;
  right: 30px;
  top: -60px;
}
#unit p.unit-img {
  font-size: 1.6rem;
  text-align: center;
}
#own #unit {
  grid-column: 1/2;
  grid-row: 3/4;
}
#own .unit-img {
  top: -200px;
}
/* #unit関連ここまで */

/* section 関連ここから */
section h1 {
  border-left: #f15a24 solid 34px;
  line-height: 1;
  padding: 0 0 0 25px;
  margin-bottom: 30px;
}
section h2 {
  text-align: center;
  line-height: 1;
  background-color: #4d4034;
  color: #fff;
  padding: 4px 0 6px 0;
  margin-bottom: 10px;
}
#own section h2 {
  text-align: initial;
  line-height: 1.2;
  background-color: initial;
  color: #fff;
  padding: 4px 0 6px 0;
  margin-bottom: 10px;
}
#sha section h2 {
  text-align: initial;
  line-height: 1.2;
  background-color: initial;
  color: #fff;
  padding: 4px 0 6px 0;
  margin-bottom: 10px;
}
#toi section h2 {
  background-color: initial;
  text-align: initial;
  margin: 30px 34px 10px 34px;
  border-bottom: solid 3px #fff;
}
#com section h1 {
  text-align: center;
  border: none;
  font-size: 2.4rem;
  padding: 40px 0;
  margin-bottom: 0;
}

section#abt {
  background-color: #313131;
  padding: 100px 0 50px 0;
}
section#rab {
  background-color: #000;
  padding: 100px 0 50px 0;
}
section#merit {
  background-color: #313131;
  padding: 100px 0 50px 0;
}
section#flow {
  background-color: #000;
  padding: 100px 0 50px 0;
}
section#inq {
  background-color: #fff;
  padding: 50px 0 50px 0;
  color: #000;
  text-align: center;
}
section#inq ul {
  list-style-type: none;
  padding: 0;
}
#inq p {
  font-size: 3rem;
  font-weight: bold;
}

section#sp-mrt {
  background-color: #313131;
  padding: 100px 0 50px 0;
}
section#sp-ptn {
  background-color: #000;
  padding: 100px 0 50px 0;
}
section#rb-shouse {
  background-color: #000;
  padding: 100px 0 50px 0;
}
section#mov {
 background-color: #313131;
 padding: 100px 0 50px 0;
}

section#gal {
  background-color: #000;
  padding: 100px 0 50px 0;
}
/* section#ten {
  background-color: #313131;
  padding: 100px 0 50px 0;
} */
section#qanda {
  background-color: #313131;
  padding: 100px 0 50px 0;
}
section#qanda h1 {
  position: relative;
}
section#qanda h1 img {
  width: 230px;
  position: absolute;
  right: 30px;
  top: -30px;
}
section#form {
  background-color: #fff;
  padding: 100px 0 50px 0;
  color: #000;
}
section#form h2 {
  color: #000;
  margin: 20px 0 0 0;
  border: none;
}

section#gaiyo {
  background-color: #000;
  padding: 40px 0 40px 0;
}
/* section 関連ここまで */

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

/* トップページ関連ここから */
.box3 {
  display: flex;
  justify-content: center;
  padding: 0 34px 34px;
  gap: 30px;
}

#abt .box3 dl {
  width: 33%;
  text-align: center;
}
#abt .box3 dl ul {
  list-style-type: none;
  text-align: left;
  padding: 10px 0 20px 20px;
  letter-spacing: 0;
}
#abt .box3 dl.yel dt {
  background-color: #b39116;
  color: #fff;
}
#abt .box3 dl.yel dd {
  background-color: #d8c479;
  color: #000;
  padding-bottom: 10px;
}
#abt .box3 dl.red dt {
  background-color: #895777;
  color: #fff;
}
#abt .box3 dl.red dd {
  background-color: #c1b4bc;
  color: #000;
  padding-bottom: 10px;
}
#abt .box3 dl.blu dt {
  background-color: #5b78b0;
  color: #fff;
}
#abt .box3 dl.blu dd {
  background-color: #b2c0da;
  color: #000;
  padding-bottom: 10px;
}
.pre {
  text-align: center;
  padding-top: 4vw;
}
.pre br:nth-child(2) {
  display: none;
}
#onkyo {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-template-rows: 40px auto auto;
  row-gap: 20px;
  column-gap: 40px;
  padding: 0 34px;
}
#onkyo #live-dead {
  grid-column: 1/2;
  grid-row: 2/4;
}
#onkyo #more {
  grid-column: 2/3;
  grid-row: 1/3;
}
#bnr {
  margin: 0 34px;
  overflow: hidden;
}
#bnr a {
  display: inline-block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#bnr a:hover {
  transform: scale(1.1, 1.1);
}
.box2 {
  display: flex;
}
.box2 .bx {
  padding: 0 34px;
  width: 48%;
}
.box2 .bx:first-child {
  width: 52%;
  border-right: #fff 2px dotted;
}
.syaon {
  background-color: #fff;
  color: #4d4034;
  text-align: center;
  font-weight: bold;
  margin: 30px 20px 20px 20px;
  border-radius: 10px;
  padding: 5px 0;
  font-size: 120%;
}
#kawai {
  display: flex;
  justify-content: space-around;
  gap: 40px;
}
#kawai .tp {
  width: 50%;
  text-align: center;
}
#daiken {
  width: 50%;
  text-align: center;
  display: block;
  margin: 0 auto;
}
#rab .com {
  width: 60%;
}
#merit .box2 picture {
  width: 35%;
  padding: 0 0 0 60px;
}
#merit .box2 ul {
  width: 65%;
  padding: 0 2vw;
}
#merit .box2 ul li {
  margin: 0 0 40px 40px;
}
span.un-yel {
  background: linear-gradient(transparent 75%, #ffe0a4 75%);
  padding-bottom: 0.5rem;
}
span.un-bul {
  background: linear-gradient(transparent 75%, #b0e0ff 75%);
  padding-bottom: 0.5rem;
}
span.un-gre {
  background: linear-gradient(transparent 75%, #b0e0a4 75%);
  padding-bottom: 0.5rem;
}
span.un-red {
  background: linear-gradient(transparent 75%, #bd84a4 75%);
  padding-bottom: 0.5rem;
}
#flow ol {
  list-style-type: none;
  margin: 0 auto;
  width: 75%;
  padding: 0;
}
#flow dt {
  font-size: 3.6rem;
  font-weight: bold;
  background: linear-gradient(to right, #dbffbd 50%, #000 100%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 10%;
  padding: 0 0 0.5rem 1rem;
  margin-bottom: 1rem;
}
#flow a.but-inq {
  font-size: max(1.6vw, 1rem);
  padding: 4px 5px 6px;
  line-height: 1;
  border-radius: 4px;
  margin-top: 5px;
}
#flow dd {
  display: flex;
  gap: 20px;
}
#flow dd p:first-child {
  width: 20%;
  margin-left: 1.5rem;
}
#flow dd p {
  width: 80%;
}
#flow ol dl {
  padding: 0 0 30px 70px;
}
#flow ol li#no1 {
  background-image: url(../img/no1.svg);
  background-repeat: no-repeat;
  background-position: 0 25px;
  background-size: 55px;
}
#flow ol li#no2 {
  background-image: url(../img/no2.svg);
  background-repeat: no-repeat;
  background-position: 0 25px;
  background-size: 55px;
}
#flow ol li#no3 {
  background-image: url(../img/no3.svg);
  background-repeat: no-repeat;
  background-position: 0 25px;
  background-size: 55px;
}
#flow ol li#no4 {
  background-image: url(../img/no4.svg);
  background-repeat: no-repeat;
  background-position: 0 25px;
  background-size: 55px;
}
#flow ol li#no5 {
  background-image: url(../img/no5.svg);
  background-repeat: no-repeat;
  background-position: 0 25px;
  background-size: 55px;
}
#flow ol li#no6 {
  background-image: url(../img/no6.svg);
  background-repeat: no-repeat;
  background-position: 0 25px;
  background-size: 55px;
}
#flow ol li#no7 {
  background-image: url(../img/no7.svg);
  background-repeat: no-repeat;
  background-position: 0 25px;
  background-size: 55px;
}
#flow .consul {
  padding: 0 0 0 5vw;
}
/* トップページ関連ここまで */

/* オーナーページ関連ここから */
#sp-mrt .merits {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0 34px;
}
#sp-mrt .merits dl {
  width: 33%;
}
#sp-mrt .merits dl dt {
  padding-top: 180px;
  font-size: 2.6rem;
  font-weight: bold;
  margin-bottom: 10px;
}
#sp-mrt #fir dt {
  background-image: url(../img/merit1.png);
  background-repeat: no-repeat;
  background-position: center bottom 40px;
  background-size: contain;
}
#sp-mrt #sec dt {
  background-image: url(../img/merit2.png);
  background-repeat: no-repeat;
  background-position: center bottom 40px;
  background-size: contain;
}
#sp-mrt #thi dt {
  background-image: url(../img/merit3.png);
  background-repeat: no-repeat;
  background-position: center bottom 40px;
  background-size: contain;
}
#sp-ptn .pats p {
  margin-bottom: 40px;
}
#sp-ptn #ptn-img {
  margin: 0 auto;
  width: 60%;
  padding: 0 0 20px 0;
}
#sp-ptn .ye {
  color: #fff100;
}
#sp-ptn .gr {
  color: #70b92c;
}
#sp-ptn .num {
  font-size: 160%;
}
#rb-shouse .col2 {
  display: flex;
}
#rb-shouse .col2 .l-img {
  width: 45%;
  padding-left: 40px;
}
#rb-shouse .col2 div {
  width: 55%;
  padding: 20px 40px;
}
#rb-shouse h2 {
  font-size: 2.6rem;
}
#rb-shouse ul {
  list-style-type: none;
  padding: 0;
}
/* オーナーページ関連ここまで */

/* シェアハウスページ関連ここから */
#gal p {
  text-align: center;
}
#gal .imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4vw;
  justify-content: center;
}
#gal .imgs a {
  width: 30%;
}
.in {
 padding: 0 40px;
}
.video {
 position: relative;
 width: 100%;
 padding-top: 56.25%; /* 16:9のアスペクト比 */
 height: 0;
}
.video iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
/* シェアハウスページ関連ここまで */

/* お問い合わせページ関連ここから */
#qanda .qa-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 11px;
  padding: 0 34px;
}
details summary::-webkit-details-marker,
details summary::marker {
  display: none;
}
#qanda .qa-box details {
  width: 365px;
  margin-bottom: 2vw;
  position: relative;
}
.qa-box summary {
  font-size: 2.6rem;
  line-height: 1.4;
  font-weight: bold;
  background-color: #3f3f3f;
  padding: 10px 10px 10px 30px;
  min-height: 90px;
}

/* summaryの三角アイコンを非表示にする */
summary {
  cursor: pointer;
  list-style: none;
}

/* 独自の三角アイコンを設定する */
summary::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 20px;
  border: solid 10px transparent;
  border-left-color: #fff; /* 三角形の色 */
  transition: transform 0.3s ease;
}

/* detailsが開かれたときの三角アイコンの回転 */
details[open] summary::before {
  transform: rotate(90deg);
}

.qa-box p {
  padding: 10px;
}
#form .exp {
  padding: 0 30px 30px;
}
#form .inner {
  position: relative;
}
#form .inner #ph-box {
  position: absolute;
  right: 30px;
  top: 0;
}
.scroll {
  padding: 10px 20px;
  height: 200px;
  overflow-y: scroll;
  border: #ccc 1px solid;
  background-color: #fff;
  margin-bottom: 5px;
}
.scroll h4 {
  padding: 2vw 0 0 0;
}
ul.phone {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#ph-box ul.phone {
  line-height: 1;
}
.form-back {
  background-color: #f6f5f5;
  padding: 30px;
  margin-bottom: 30px;
}
form h3 {
  margin: 0 0 20px 30px;
}
form th {
  text-align: left;
}
form th,
form td {
  padding: 10px;
  vertical-align: top;
}
form input {
  width: 300px;
}
form input#searchBox {
  width: 240px;
}
form input[type="checkbox"] {
  width: initial;
}
form textarea {
  width: 600px;
}
/* フォーム送信ボタン */
form button {
  color: #fff;
  font-weight: bold;
  display: block;
  margin: 0 auto;
  background-color: #d44300;
  border-radius: 10px;
  padding: 10px 100px;
  text-decoration: none;
  border: none;
}
form button:hover {
  color: #000;
  background-color: #ffbf48;
}
form span,
form .mst {
  font-size: 80%;
  line-height: 1;
  font-weight: normal;
  background-color: #d44300;
  color: #fff;
  border-radius: initial;
  padding: 0 4px 2px 4px;
  margin-left: 6px;
}
form .mst {
  line-height: 1.5;
  padding: 4px 8px 6px 8px;
  white-space: nowrap;
}
form .tmp {
  padding-top: 40px;
}
form .lng {
  width: 600px;
}
form label {
  margin-right: 10px;
}
form table {
  border-spacing: 0;
}
#form .inner #ph-box {
  border: solid 1px #ccc;
  padding: 10px;
}
#form .inner #ph-box p {
  margin-bottom: 0;
  line-height: 1;
}
/* お問い合わせページ関連ここまで */

/* 会社概要ページ関連ここから */
#gaiyo p {
  padding: 0 34px;
}
#gaiyo table {
  width: 500px;
  margin: 0 auto;
  padding: 0;
}
#gaiyo table th,
#gaiyo table td {
  padding: 5px 10px;
  vertical-align: top;
}
#gaiyo table th {
  text-align: right;
}
#wht {
  background-color: #313131;
  padding: 40px 0 40px 0;
}
#wht strong {
  font-size: 200%;
}
/* 会社概要ページ関連ここまで */

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

/* 1200px未満 ここからがメディアクエリー画面幅による制御　*/
@media (max-width: 1199px) {
  body {
    font-size: max(1.5vw, 1.4rem);
  }
  h1 {
    font-size: max(3.2vw, 2rem);
    padding-bottom: 0.5vw;
  }
  h2 {
    font-size: max(2.5vw, 1.6rem);
    padding-bottom: 0.5vw;
  }
  h3 {
    font-size: max(2vw, 1.6rem);
  }
  h4,
  h5 {
    font-size: max(1.5vw, 1.4rem);
  }
  p {
    margin-bottom: 0.5vw;
  }
  .smtxt {
    font-size: max(1.35vw, 1.2rem);
  }
  header p {
    font-size: max(1.3vw, 1.2rem);
    left: 6vw;
    bottom: 0.7vw;
  }
  #topimg {
    background-size: 100% auto;
    grid-template-rows: 2.8vw 1fr 1fr auto;
  }
  #own #topimg {
    grid-template-rows: 2.8vw 32vw 1fr auto;
  }
  #sha #topimg {
    grid-template-rows: 2.8vw 1fr auto;
  }
  #sha #topimg #pre {
    padding: 0 20vw 3.3vw;
  }
  #toi #topimg {
    grid-template-rows: 2.8vw auto;
  }
  #catch {
    padding: 6vw;
  }
  #catch p {
    font-size: 3vw;
    text-shadow: #000 0 0 5px, #000 1px 1px 5px;
  }
  #own #catch {
    margin-top: 4.6vw;
  }
  #own #catch p {
    font-size: 4.15vw;
    padding: 0 1vw 1.8vw 6vw;
  }
  #own #catch h2 {
    font-size: 2.5vw;
    padding: 0 1vw 0 6vw;
  }
  #sha #catch {
    padding: 25.1vw 22.5vw 1.65vw 22.5vw;
  }
  #sha #catch h2 {
    padding: 9vw 0 0 1vw;
  }
  #sha #catch #logo {
    padding: 1.25vw 3.3vw;
  }
  #toi #catch {
    padding: 0 26vw 0 26.5vw;
    height: 24.4vw;
  }
  #toi #catch p {
    font-size: max(1.6vw, 1.4rem);
  }
  #toi #catch h2 {
    margin-bottom: 0.82vw;
  }
  #toi #catch h2 img {
    margin: 0 auto;
    width: 25vw;
    min-width: 120px;
  }
  #toi #catch #L-img {
    width: 25vw;
    position: absolute;
    left: 2vw;
    top: 1.9vw;
  }
  #toi #catch #R-img {
    width: 25vw;
    position: absolute;
    right: 1.5vw;
    top: 1vw;
  }
  #sit5 {
    padding: 0 3vw 0 3vw;
  }
  #order {
    padding: 5vw 2vw 0 0;
  }
  #order img {
    filter: drop-shadow(1vw 1vw 0 #000);
  }
  #unit {
    padding: 4vw 40vw 4vw 4vw;
  }
  #unit .unit-img {
    width: 32vw;
    right: 3vw;
    top: -6vw;
  }
  #unit p.unit-img {
    font-size: min(1.6vw, 1.4rem);
  }
  #own #unit {
    padding: 3vw 36vw 3vw 3vw;
  }
  #own .unit-img {
    top: -17vw;
    width: 33.5vw;
    right: 2.5vw;
  }

  section h1 {
    border-left: #f15a24 solid 3vw;
    padding: 0 0 0 2vw;
    margin-bottom: 2.5vw;
  }
  section h2 {
    margin-bottom: 1vw;
  }
  #own section h2 {
    padding: 0.4vw 0 0.6vw 0;
    margin-bottom: 1vw;
  }
  #toi section h2 {
    margin: 3vw 3vw 1vw 3vw;
  }
  #toi section .exp h2 {
    margin: 1.6vw 0 0 0;
    line-height: 1.2;
    line-break: strict;
  }
  #toi section .exp h2 span {
    display: inline-block;
  }
  #com section h1 {
    font-size: max(2vw, 1.6rem);
    padding: 3.3vw 0;
  }

  section#abt {
    padding: 8.3vw 0 4.1vw 0;
  }
  section#rab {
    padding: 8.3vw 0 4.1vw 0;
  }
  section#merit {
    padding: 8.3vw 0 4.1vw 0;
  }
  section#flow {
    padding: 8.3vw 0 4.1vw 0;
  }
  section#gal {
    padding: 8.3vw 0 4.1vw 0;
  }
  section#sp-mrt,
  section#sp-ptn,
  section#rb-shouse,
  section#mov {
    padding: 8.3vw 0 4.1vw 0;
  }
  section#qanda,
  section#form {
    padding: 8.3vw 0 4.1vw 0;
  }
  section#gaiyo {
    padding: 3.3vw 0;
  }

  section#inq {
    padding: 4vw 0 4vw 0;
  }
  #inq p {
    font-size: max(2.5vw, 2.5rem);
  }
  .phone a {
    font-size: max(3vw, 2rem);
  }

  .box3 {
    display: flex;
    justify-content: center;
    padding: 0 3vw 3vw;
    gap: 3vw;
  }
  .box2 .bx {
    padding: 0 3vw;
  }
  .syaon {
    margin: 2.6vw 1.6vw 1.6vw 1.6vw;
    padding: 0.4vw 0;
  }

  .l-size {
    font-size: max(2.4vw, 1.4rem);
  }
  .m-size {
    font-size: max(1.6vw, 1.4rem);
  }

  #abt .box3 dl ul {
    padding: 1vw 0 2vw 2vw;
  }
  #onkyo {
    grid-template-rows: 3.4vw auto auto;
    row-gap: 2vw;
    column-gap: 4vw;
    padding: 0 3vw;
  }
  #bnr {
    margin: 0 3vw;
  }
  #merit .box2 picture {
    padding: 0 0 0 6vw;
  }
  #merit .box2 ul li {
    margin: 0 0 3vw 3vw;
  }

  #flow dt {
    font-size: max(3.2vw, 1.6rem);
    padding: 0 0 0.5rem 1rem;
    margin-bottom: 1rem;
  }
  #flow dt a {
    font-size: max(1.6vw, 1rem);
  }
  #flow ol dl {
    padding: 0 0 3vw 6vw;
  }
  #flow ol li#no1,
  #flow ol li#no2,
  #flow ol li#no3,
  #flow ol li#no4,
  #flow ol li#no5,
  #flow ol li#no6,
  #flow ol li#no7 {
    background-position: 0 2vw;
    background-size: 5vw 5vw;
  }

  #sp-mrt dt {
    background-position: center bottom 3.5vw !important;
  }
  #sp-mrt .merits dl dt {
    padding-top: 15.4vw;
    font-size: max(2.1vw, 1.5rem);
    margin-bottom: 1vw;
  }
  #sp-mrt .merits {
    gap: 2vw;
    padding: 0 3vw;
  }
  .pats {
    padding: 0 2.8vw 2.5vw 2.8vw;
  }
  #sp-ptn .pats p {
    margin-bottom: 4vw;
  }
  #sp-ptn #ptn-img {
    padding: 0 0 2vw 0;
  }

  #rb-shouse h2 {
    font-size: max(2.5vw, 1.6rem);
  }
  #rb-shouse .col2 .l-img {
    padding-left: 3vw;
  }
  #rb-shouse .col2 div {
    padding: 2vw 3vw;
  }
  .in {
   padding: 0 3vw;
  }

  section#qanda h1 img {
    width: 19.1vw;
    right: 2.5vw;
    top: 0;
  }
  #qanda .qa-box {
    gap: 1vw;
    padding: 0 3vw;
  }
  #qanda .qa-box details {
    width: 30vw;
  }
  .qa-box summary {
    font-size: max(2.1vw, 1.5rem);
    padding: 0.8vw 0.8vw 0.8vw 2.5vw;
    min-height: 7.5vw;
  }

  summary::before {
    content: "";
    position: absolute;
    left: 0.6vw;
    top: 1.6vw;
    border: solid 0.8vw transparent;
    border-left-color: #fff; /* 三角形の色 */
    transition: transform 0.3s ease;
  }

  .qa-box p {
    padding: 1vw;
  }
  #form .exp {
    padding: 0 3vw 3vw;
  }
  form table {
    width: 76.5vw;
  }
  #form .lng,
  form textarea {
    width: 100%;
  }
  .form-back {
    padding: 3vw;
    margin-bottom: 3vw;
  }
  form h3 {
    margin: 0 0 1.6vw 3vw;
  }
  form .tmp {
    padding-top: 3.6vw;
  }
  .scroll {
    padding: 1.6vw;
    margin-bottom: 1vw;
  }
  #wht {
    padding: 3.3vw 0 3.3vw 0;
  }
  #gaiyo p {
    padding: 0 3vw;
  }
  #gaiyo table {
    width: 48vw;
  }
  #gaiyo table th,
  #gaiyo table td {
    padding: 0.41vw 0.83vw;
  }
  .nwp {
    white-space: nowrap;
  }
  p.copy {
    font-size: max(1.35vw, 1.2rem);
    padding: 3vw 0;
  }
}
/* ==============================================================================================

/* 850px未満 */
@media (max-width: 849px) {
  header h1 img {
    max-height: 40px;
  }
  header p {
    position: inherit;
    left: inherit;
    margin-bottom: 0;
  }
  #topimg {
    grid-template-rows: 23px 1fr 1fr auto;
  }
  #sp-ptn #ptn-img {
    width: 509px;
    /* padding: 0 0 20px 0; */
  }
  form table {
    width: 93vw;
  }
}
/* ==============================================================================================

/* 770px未満 */
@media (max-width: 769px) {
  #own #unit {
    padding: 2vw 2vw 2vw 3vw;
  }
  #own .unit-img {
    top: -30vw;
  }
  #qanda .qa-box details {
    width: 45vw;
  }
  #form .inner #ph-box {
    position: initial;
    display: inline-block;
  }
  .qa-box summary {
    min-height: 9vw;
  }
}
/* ==============================================================================================

/* 640px以上 */
@media (min-width: 640px) {
  header button#toggle {
    display: none;
  }
}
/* ==============================================================================================

/* 640px未満 */
@media (max-width: 639px) {
  #topimg nav {
    display: none;
  }
  #topimg {
    grid-template-columns: 1fr 1.2fr;
    grid-template-rows: 1fr 1.2fr auto;
  }
  #catch {
    padding: 0 1vw 0 4vw;
    grid-column: 1/2;
    grid-row: 1/2;
    place-content: center;
  }
  #sit5 {
    grid-column: 1/2;
    grid-row: 2/3;
    justify-items: center;
  }
  #sit5 img {
    max-width: 100%;
  }
  #order {
    grid-column: 2/3;
    grid-row: 1/3;
    padding: 3vw 12vw 9vw 0;
  }
  #unit {
    grid-column: 1/3;
    grid-row: 3/4;
    padding: 5.4vw 3vw 3vw 3vw;
  }
  #unit .unit-img {
    width: 24vw;
    top: -21vw;
  }
  #own #unit .unit-img {
    width: 33.5vw;
    top: -32vw;
  }

  #sha #topimg {
    grid-template-rows: 1fr auto;
  }
  #sha #catch {
    grid-column: 1/2;
    grid-row: 1/2;
    padding: 27.9vw 10vw 1vw 10vw;
  }
  #sha #pre {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  #sha #topimg #pre {
    padding: 0 3vw 3.3vw;
  }

  #toi #topimg {
    grid-template-rows: auto;
  }
  #toi #catch {
    grid-column: 1/2;
    grid-row: 1/2;
    padding: 0 24vw 2vw 0;
    height: initial;
  }
  #toi #catch #L-img {
    width: 25vw;
    right: 1vw;
    top: 50%;
    transform: translateY(-50%);
    left: initial;
  }
  #toi #catch #R-img {
    display: none;
  }
  #toi #catch h2 {
    margin-bottom: 0;
  }
  #toi #catch h2 img {
    margin: initial;
    margin: 10px 0 0;
  }
  #toi #catch p {
    text-align: initial;
  }
  .box3 {
    overflow-x: auto;
    justify-content: start;
  }
  .box3 dl {
    flex-grow: 1;
    min-width: 220px;
    max-width: calc(50% - 3vw);
  }

  #onkyo {
    grid-template-rows: 2.6rem auto auto auto;
  }
  #onkyo h2 {
    grid-column: 1/3;
    grid-row: 1/2;
    margin-top: 0;
  }
  #onkyo #live-dead {
    grid-column: 1/3;
    grid-row: 2/3;
  }
  #onkyo #more {
    grid-column: 1/3;
    grid-row: 3/4;
  }
  #onkyo #bad-good {
    grid-column: 1/3;
    grid-row: 4/5;
  }
  .pre br:nth-child(2) {
    display: initial;
  }
  #rab .box2 {
    flex-flow: column;
    padding: 0 0 0 0 !important;
  }
  #rab .box2 .bx {
    width: 100%;
    padding: 4vw 3vw 0;
  }
  .box2 .bx:first-child {
    border-right: none;
  }
  #rab .com {
    width: 100%;
    padding: 4vw 3vw 2vw 3vw;
  }
  #kawai {
    gap: 4vw;
  }
  .syaon {
    margin: 10px 20px 10px 20px;
  }

  #merit .box2 {
    flex-flow: column;
  }
  #merit .box2 picture {
    width: 100%;
    padding: 0 3vw;
    margin-bottom: 2vw;
  }
  #merit .box2 ul {
    width: 100%;
    padding: 0 3vw;
    margin: 0;
  }

  #flow ol {
    width: 90%;
  }
  #flow dd {
    gap: 10px;
  }

  #flow dd p:first-child {
    margin-left: 10px;
  }
  #flow .consul {
    padding: 3vw 3vw 0;
  }

  #sp-mrt .merits {
    overflow-x: auto;
    justify-content: start;
    gap: 12px;
    padding: 0 19px;
  }
  #sp-mrt .merits dl {
    flex-grow: 1;
    min-width: 210px;
    max-width: calc(50% - 3vw);
  }
  #sp-mrt .merits dl dt {
    padding-top: 98px;
    font-size: 1.5rem;
    margin-bottom: 6.4px;
    background-position: center bottom 22.4px !important;
  }
  #sp-ptn .pats {
    padding: 0 3vw 3vw 3vw;
  }

  #rb-shouse .col2 {
    flex-direction: column;
  }
  #rb-shouse .col2 .l-img {
    width: 100%;
    padding-right: 3vw;
  }
  #rb-shouse .col2 div {
    width: 100%;
  }
  #rb-shouse ul {
    text-align: center;
  }
  #inq p {
    font-size: 2rem;
  }

  summary::before {
    content: "";
    position: absolute;
    left: 0.6vw;
    top: 11px;
    border: solid 4px transparent;
    border-left-color: #fff; /* 三角形の色 */
    transition: transform 0.3s ease;
  }

  form table th,
  form table td {
    display: block;
    width: 100%;
  }
  form table th {
    padding-bottom: 5px;
  }
  form table td {
    padding-top: 0;
  }
  form input {
    width: 100%;
  }
  form input#searchBox {
    width: 60%;
  }
  #gaiyo table {
    width: 100%;
  }
  #gaiyo table th,
  #gaiyo table td {
    display: block;
    width: 100%;
    text-align: center;
  }
  #gaiyo table th {
    padding: 4px 0 0;
  }
  #gaiyo table td {
    padding: 0 0 4px;
  }
  #toi #catch p br {
    display: none;
  }
}
/* ==============================================================================================

/* 540px未満 */
@media (max-width: 539px) {
  #own #catch {
    width: 220px;
  }
  #own #catch h2 {
    font-size: 12px;
    padding: 0 0 0 4vw;
  }
  #own #catch p {
    font-size: 20px;
    padding: 0 0 10px 4vw;
  }
  #sp-ptn #ptn-img {
    width: 94%;
  }
  #toi #catch #L-img {
    right: 0;
  }
  /* #toi #catch {
   padding: 0;
  }
  #toi #catch p {
   text-align: center;
  }*/

  #qanda .qa-box details {
    width: 100%;
  }
  #toi #catch h2 img {
    margin: 10px 0 0;
  }
  .qa-box summary {
    min-height: 6vw;
  }
}