@charset "utf-8";

/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("theme.css");
@import url("parts.css");
@import url("inview.css");
@import url("overwrite.css");

/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
  0% {
    right: -200px;
  }
  100% {
    right: 0px;
  }
}

/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*全体の設定
---------------------------------------------------------------------------*/
body * {
  box-sizing: border-box;
}
html {
  font-size: clamp(
    12px,
    0.293vw + 10.9px,
    15px
  ); /*画面幅約375px〜1400pxの間で、12px〜15pxに可変*/
  overflow-x: visible;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(
    --base-font
  ); /*フォント指定。theme.cssのbase-fontを読み込みます。*/
  -webkit-text-size-adjust: none;
  background: var(--bg-color); /*背景色。*/
  color: var(
    --bg-inverse-color
  ); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
  line-height: 2; /*行間*/
  overflow-x: hidden;
}

/*リセット*/
figure {
  margin: 0;
}
dd {
  margin: 0;
}
nav,
ul,
li,
ol {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
}

/*table全般の設定*/
table {
  border-collapse: collapse;
}

/*画像全般の設定*/
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*videoタグ*/
video {
  max-width: 100%;
}

/*iframeタグ*/
iframe {
  width: 100%;
}

/*他*/
input {
  font-size: 1rem;
}

/*section
---------------------------------------------------------------------------*/
section {
  padding: 0 var(--content-space-l); /*上下、左右へのsection内の余白。左右については、theme.cssの--content-space-lを読み込みます。*/
  margin: var(--content-space-l) 0; /*上下、左右へのsectionの外側にとるマージン。上下については、theme.cssの--content-space-lを読み込みます。*/
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
  color: inherit;
  transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
  filter: brightness(1.1); /*少しだけ明るくする*/
  text-decoration: none;
}

/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
  animation: opa1 0.2s 0.2s both; /*0.2(2つ目の数字)秒待機後、0.2(1つ目の数字)秒かけてフェードイン*/
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダー*/
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  height: 80px; /*ヘッダーの高さ。お好みで。*/
  padding-inline: var(
    --content-space-s
  ); /*左右の余白。theme.cssのcontent-space-sを読み込みます*/
}

@media (max-width: 1040px) {
  header {
    gap: 1rem;
  }
}

/*ロゴ画像*/
header .logo {
  display: flex;
  align-items: center;
  gap: 20px;
  rule: 1px solid var(--bg-border-color);
  margin: 0;
  flex-shrink: 0;
}

header .logo img {
  display: block;
}

header .logo img.sincol-ok-logo {
  width: 140px;
}

header .logo img.sincol-logo{
  width: 100px;
}

@media (max-width: 1040px) {
  header .logo img.sincol-ok-logo {
    width: 98px;
  }

  header .logo img.sincol-logo{
    width: 70px;
  }
}

/*アイコンブロック*/
header .icons {
  display: flex;
  gap: 1rem; /*アイコン同士の間に空けるスペース。1文字分。*/
}
header .icons a {
  text-decoration: none;
  font-size: 1.5rem; /*アイコンサイズ。1.5倍。*/
}

/*画面幅900px未満の追加指定*/
@media (max-width: 899px) {
  header .icons {
    margin-right: 50px; /*ハンバーガーアイコンが出てくるので、その分のスペースを確保。*/
  }
} /*追加指定ここまで*/

/*大きな端末で見たメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
.large-screen #menubar {
  font-size: 0.9rem; /*文字サイズ90%*/
}
.large-screen #menubar > nav > ul {
  display: flex;
  align-items: center;
  gap: 1.23rem;
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li a {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
}

.large-screen #menubar li a:hover {
  color: var(--light-border-color);
}

.large-screen #menubar li.btn.inverse a:hover {
  color: var(--light-inverse-color);
  border-color: var(--light-border-color);
}

.large-screen #menubar > nav > ul li:not(:last-of-type)::after{
  content: "/";
  margin-left: 1.23rem;
}

/*大きな端末で見た場合のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウン全体*/
.large-screen #menubar ul ul {
  text-shadow: none;
  position: absolute;
  z-index: 100;
  animation: opa1 0.5s 0.1s both; /*0.1秒待機後、0.5秒かけてフェードイン表示*/
}

/*メニュー１個あたり*/
.large-screen #menubar ul ul a {
  background: rgba(
    0,
    0,
    0,
    0.3
  ); /*背景色。0,0,0は黒のことで0.3は色が30%出た状態。*/
  color: #fff; /*文字色*/
  padding: 0.2rem 1rem; /*上下に0.2文字分、左右に1文字分の余白*/
  border-radius: 3px; /*角を少しだけ丸く。*/
  margin-top: 3px; /*メニュー同士の間に空けるスペース*/
}

/*マウスオン時の背景色*/
.large-screen #menubar ul ul a:hover {
  background: rgba(0, 0, 0, 0.5); /*背景色*/
}

/*小さな端末で見たメニュー（開閉メニュー）
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
.small-screen #menubar {
  animation: animation1 0.2s both;
  position: fixed;
  overflow: auto;
  z-index: 100;
  right: 0px;
  top: 0px;
  width: 50%; /*画面の半分の幅*/
  height: 100%;
  padding: 100px 50px 50px; /*上下に100px、左右にtheme.cssのcontent-space-lで指定しているサイズ、下に50pxの余白*/
  background: var(
    --bg-inverse-color
  ); /*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
  color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/
}

.small-screen #menubar {
  display: none;
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
  .small-screen #menubar {
    width: 100%; /*幅を100%に*/
  }
} /*追加指定ここまで*/

/*メニュー１個あたり*/
.small-screen #menubar a {
  display: block;
  text-decoration: none;
  margin-bottom: 1rem; /*下に１文字分のスペースを空ける*/
  padding: 1rem 2rem; /*メニュー内の余白。上下に１文字分、左右に２文字分。*/
  /* border-radius: 5px; */
  background: #fff; /*背景色*/
  color: #333; /*文字色*/
}

/*ボタンのテキストの太さを標準に*/
.small-screen #menubar .btn a {
  font-weight: normal;
}

/*子メニュー（ドロップダウンメニュー）*/
.small-screen #menubar ul ul a {
  margin-left: 2rem; /*左に２文字分のスペースを空ける*/
  padding: 0.5rem 1.5rem; /*メニュー内の余白。上下に0.5文字分、左右に1.5文字分。*/
}

/*ドロップダウンのアイコン*/
a.ddmenu::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f078"; /*このアイコンを使う*/
  margin-right: 1em; /*アイコンとメニューテキストとの間に空けるスペース。1文字分。*/
  font-size: 0.7em; /*アイコンサイズ。70%*/
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
}

/*ドロップダウン共通（デフォルトで非表示。チラつかないよう念の為。）
---------------------------------------------------------------------------*/
#menubar ul ul {
  display: none;
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
  display: none; /* デフォルトは非表示 */
  animation: opa1 0s 0.2s both;
  cursor: pointer;
  position: fixed;
  z-index: 101;
  right: 0px; /*右からの配置場所*/
  top: 0px; /*上からの配置場所*/
  width: 70px; /*ボタンの幅*/
  height: 70px; /*ボタンの高さ*/
  /* border-bottom-left-radius: 10px; */
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
  display: block;
  transition: 0.3s;
  position: absolute;
  left: 18px;
  width: 35px;
  height: 1px; /*線の高さ*/
  background: var(
    --bg-inverse-color
  ); /*線の色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
  background: var(
    --accent-color
  ); /*背景色。theme.cssのaccent-colorを読み込みます。*/
}
#menubar_hdr.ham span {
  background: var(
    --accent-inverse-color
  ); /*線の色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*以下変更不要*/
#menubar_hdr span:nth-of-type(1) {
  top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
  top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
  top: 44px;
}
#menubar_hdr.ham span:nth-of-type(1) {
  transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
  opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
  transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
  display: flex;
}

/*メイン画像のイントロ演出（シャッター開き）
---------------------------------------------------------------------------
.mainimg に下記クラスを足すと、ページ読み込み時に1回だけ動きます。
  .intro-vertical   … 天地中央から上下に開く
  .intro-horizontal … 左右中央から外へ開く
不要ならHTMLからクラスを外すだけ。
*/

/*天地中央から上下に開く*/
.mainimg.intro-vertical {
  animation: mainimg-intro-vertical 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1s both;
  /* 値の意味：duration（0.8s）→ easing → delay（1s）→ fill-mode
	   duration … 開ききるまでの時間。
	   delay    … スタートまでの待機時間。 */
}
@keyframes mainimg-intro-vertical {
  from {
    clip-path: inset(50% 0 50% 0);
  } /*上下からめいっぱい閉じる＝非表示*/
  to {
    clip-path: inset(0 0 0 0);
  } /*完全に開いた状態*/
}

/*左右中央から外側へ開く*/
.mainimg.intro-horizontal {
  animation: mainimg-intro-horizontal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1s
    both;
}
@keyframes mainimg-intro-horizontal {
  from {
    clip-path: inset(0 50% 0 50%);
  } /*左右からめいっぱい閉じる＝非表示*/
  to {
    clip-path: inset(0 0 0 0);
  }
}

/*アクセシビリティ配慮：OSで「動きを減らす」設定の人はアニメOFF*/
@media (prefers-reduced-motion: reduce) {
  .mainimg.intro-vertical,
  .mainimg.intro-horizontal {
    animation: none;
  }
}

/*メイン画像
---------------------------------------------------------------------------*/
.mainimg * {
  margin: 0;
  padding: 0;
}
.mainimg .slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

/*メイン画像全体を囲むブロック*/
.mainimg {
  width: 100%;
  height: calc(100vh - 80px); /*ヘッダー高さ分マイナス*/
  position: relative;
  overflow: hidden;
}

@media (max-width: 1280px) {
  .mainimg {
    height: 50vw;
  }
}

/*３枚の画像の共通設定*/
.mainimg .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s; /*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。１枚が表示される時間はjsで指定できます。*/
  overflow: hidden;
}

/*１枚目画像（変更不要）*/
.mainimg .img1 {
  /* position: relative;width: 100%;height: auto; */
}

/*画像全般（変更不要）*/
.mainimg .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center left;
}

/*メイン画像上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロックの基本設定（中央配置がデフォルト）*/
.mainimg .slide .text {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 var(--content-space-l); /*上下、左右への余白*/
  color: #333; /*文字色*/
}

/*テキストを白にしたい場合（inverse）*/
.mainimg .slide .text.inverse {
  color: #fff;
}

/*テキストブロックを左に配置させたい場合*/
.mainimg .slide .text.left {
  align-items: flex-start;
  text-align: left;
}

/*テキストブロックを右に配置させたい場合*/
.mainimg .slide .text.right {
  align-items: flex-end;
  text-align: right;
}

/*h2（大きな文字）*/
.mainimg .text h2 {
  margin: 0;
  padding: 0;
  line-height: 1.5; /*行間を少し狭く*/
  font-weight: 400; /*テキストの太さ。300〜700まで指定可能。*/
  font-size: max(
    14px,
    3.8vw
  ); /*文字サイズ3.8vw。最小サイズは14pxでそれ以上小さくしない。*/
  display: flex;
  flex-direction: column-reverse; /*spanが先にくるように*/
}

/*p（説明テキスト部分）*/
.mainimg .text p {
  font-size: 0.9rem; /*文字サイズ90%*/
}

/*ボタンブロック*/
.mainimg .btn-container {
  display: flex;
  gap: 1rem; /*2個以上ボタンを並べた場合の、間に空けるスペース。*/
  font-size: 1.1rem; /*文字サイズ1.1倍*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
  .mainimg .btn a {
    transform: scale(0.8); /*80%のサイズに*/
    transform-origin: left top;
  }
} /*追加指定ここまで*/

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.mainimg .slide {
  pointer-events: none; /* デフォルトでクリックを無効にする */
}

.mainimg .slide.active {
  pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}

/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.mainimg .slide-indicators {
  text-align: center;
  position: absolute;
  z-index: 3;
  width: 100%;
  bottom: 2vw; /*ボタンの配置場所*/
  left: 0px;
}
/*１個あたり*/
.mainimg .indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ccc; /*未アクティブ時のボタン色*/
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}
.mainimg .indicator.active {
  background: #d00000; /*アクティブ時のボタン色*/
}

/*ボタン
---------------------------------------------------------------------------*/
.btn a {
  display: inline-flex; /*文字とSVG矢印を横並びにする*/
  align-items: center; /*縦位置を中央に揃える*/
  text-decoration: none;
  background: var(
    --primary-color
  ); /*背景色。theme.csのprimary-colorを読み込みます。*/
  color: var(
    --primary-inverse-color
  ); /*文字色。theme.csのprimary-inverse-colorを読み込みます。*/
  border: 1px solid var(--primary-color); /*枠線の幅、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
  padding: 0.4rem 2rem; /*上下に0.4文字分、左右に2文字分の余白*/
  font-weight: 500; /*文字の太さ*/
}

/*背景が白いタイプのボタン*/
.btn.inverse a {
  background: var(
    --primary-inverse-color
  ); /*背景色。theme.csのprimary-inverse-colorを読み込みます。*/
  color: var(
    --primary-color
  ); /*文字色。theme.csのprimary-colorを読み込みます。*/
}

/*背景がアクセントカラーのボタン*/
.btn.accent a {
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
  color: var(--accent-inverse-color);
}

/*矢印アイコン（SVG・共通）*/
.arrow {
  display: inline-block;
  width: 2em; /*矢印全体の長さ。文字サイズに連動*/
  height: 0.5em; /*矢印の高さ*/
  margin-left: 0.7em; /*テキストとの間隔*/
  margin-right: -1em; /*矢印の右側が少し広いので、右につめる*/
  vertical-align: middle;
  fill: none;
  stroke: currentColor; /*親の文字色を継ぐ*/
  stroke-width: 1; /*線の太さ。明朝・細字に合わせて細め*/
  stroke-linecap: square;
  stroke-linejoin: miter;
  overflow: visible;
  transition: transform 0.35s ease;
}

/*マウスオン時に矢印が右に動く*/
.btn a:hover .arrow {
  transform: translateX(6px);
}

/*contents
---------------------------------------------------------------------------*/
#contents {
  flex: 1;
  min-height: 0;
}

/*main
---------------------------------------------------------------------------*/
main {
  container-type: inline-size;
  background-image:
    url(../images/bg_bingata02-2.png), url(../images/bg_bingata02.png);
  background-position:
    right top 1rem,
    left 85vw;
  background-repeat: no-repeat;
  background-size: 25vw;
}

@media (max-width: 768px) {
  main {
    background-position:
      right top 1rem,
      left top 115vw;
  }
}

@media (max-width: 425px) {
  main {
    background-position:
      right top 1rem,
      left top 340vw;
    background-size: 30vw;
  }
}

.home main {
  container-type: inline-size;
  background-image:
    url(../images/bg_bingata02.png), url(../images/bg_bingata02.png);
  background-position:
    left top 1rem,
    left 105rem;
  background-repeat: no-repeat;
  background-size: 20vw, 25vw;
}

@media (max-width: 768px) {
  .home main {
    background-position:
      left top 1rem,
      left 92rem;
  }
}

@media (max-width: 425px) {
  .home main{
    background-position:
      left top 1rem,
      left 440vw;
    background-size: 30vw;
  }
}

.company main{
  background-image:
    url(../images/bg_bingata02-2.png), url(../images/bg_bingata02.png), url(../images/bg_bingata09.png);
  background-position:
    right top 1rem,
    left 110rem,
    right bottom 60rem;
}

@media (max-width: 425px) {
  .company main{
    background-position:
      right top 1rem,
      left  top 520vw,
      right bottom 280vw;
  }
}

.download main{
  background-image:
    url(../images/bg_bingata02-2.png), url(../images/bg_bingata02-3.png);
  background-position:
    right top 1rem,
    left 40rem;
  background-size: 25vw, 15vw;
}

@media (max-width: 425px) {
  .download main{
    background-position:
      right top 1rem,
      left 50rem;
    background-size: 30vw;
  }
}

/* wpコンテンツページ-news */
.news main.news-post {
  background-image:
    url(../images/bg_bingata02-2.png), url(../images/bg_bingata02.png),
    url(../images/bg_bingata02-2.png), url(../images/bg_bingata02.png),
    url(../images/bg_bingata02-2.png), url(../images/bg_bingata02.png);
  background-position:
    right top 1rem,
    left 80rem,
    right top 160rem,
    left 240rem,
    right top 320rem,
    left 400rem;
  background-size: 25vw;
}

@media (max-width: 425px) {
  main {
    background-position:
      right top 1rem,
      left 140rem,
      right top 240rem,
      left 340rem,
      right top 440rem,
      left 540rem;
    background-size: 30vw;
  }
}

/* ---- mainの背景(赤)---- */
.works main {
  background-image:
    url(../images/bg_bingata05.png), url(../images/bg_bingata05-2.png);
  background-position:
    right top 1rem,
    left 75vw;
  background-size: 25vw, 15vw
}

@media (max-width: 425px) {
  .works main {
    background-position:
      right top 1rem,
      left 140vw;
    background-size: 30vw, 25vw;
  }
}

.catalog main {
  background-image:
    url(../images/bg_bingata05.png), url(../images/bg_bingata05-4.png),
    url(../images/bg_bingata05-2.png), url(../images/bg_bingata05-3.png);
  background-position:
    right top 1rem,
    left top 1rem,
    left 75vw,
    right 120vw;
  background-size: 20vw, 20vw, 15vw, 25vw;
}

@media (max-width: 425px) {
  .catalog main {
    background-position:
      right top 1rem,
      left top 1rem,
      left 140vw,
      right 300vw;
    background-size: 30vw, 30vw, 25vw, 35vw;
  }
}

.showroom main {
  background-image:
    url(../images/bg_bingata05.png), url(../images/bg_bingata05-4.png);
  background-position:
    right top 1rem,
    left top 1rem;
  background-size: 20vw;
}

@media (max-width: 425px) {
  .showroom main {
    background-size: 30vw;
  }
}

/* wpコンテンツページ-works */
.works main.works-post {
  background-image:
    url(../images/bg_bingata05.png), url(../images/bg_bingata05-2.png),
    url(../images/bg_bingata05.png), url(../images/bg_bingata05-2.png),
    url(../images/bg_bingata05.png), url(../images/bg_bingata05-2.png),
    url(../images/bg_bingata05.png), url(../images/bg_bingata05-2.png),
    url(../images/bg_bingata05.png), url(../images/bg_bingata05-2.png),
    url(../images/bg_bingata05.png), url(../images/bg_bingata05-2.png);
  background-position:
    right top 1rem,
    left 70rem,
    right top 140rem,
    left 210rem,
    right top 280rem,
    left 350rem,
    right top 480rem,
    left 560rem,
    right top 630rem,
    left 700rem,
    right top 770rem,
    left 840rem;
  background-size: 25vw, 15vw;
}

@media (max-width: 425px) {
  .works main.works-post {
    background-position:
      right top 1rem,
      left 140rem,
      right top 240rem,
      left 340rem,
      right top 440rem,
      left 540rem,
      right top 640rem,
      left 740rem,
      right top 840rem,
      left 940rem,
      right top 1040rem,
      left 11400rem;
    background-size: 30vw, 25vw;
  }
}

/* ---- mainの背景(紫)---- */
.recruit main {
  container-type: inline-size;
  background-image:
    url(../images/bg_bingata06.png), url(../images/bg_bingata07.png);
  background-position:
    right top 1rem,
    left 70vw;
  background-repeat: no-repeat;
  background-size: 25vw;
}

@media (max-width: 425px) {
  .recruit main {
    background-position:
      right top 1rem,
      left top 250vw;
    background-size: 40vw;
  }
}

.recruit.recruit-top main{
  background-image:
    url(../images/bg_bingata06.png), url(../images/bg_bingata07-2.png);
  background-position:
    right top 1rem,
    right bottom 65rem;
  background-size: 25vw, 20vw;
}

@media (max-width: 768px) {
  .recruit.recruit-top main {
    background-position:
      right top 1rem,
      right bottom 200vw;
  }
}

@media (max-width: 425px) {
  .recruit.recruit-top main {
    background-position:
      right top 1rem,
      right bottom 250vw;
  }
}

.recruit.recruit-message main{
  background-image: none, url(../images/bg_bingata07.png);
}

/*h2*/
main h2 {
  line-height: 1.5;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.8rem;
  letter-spacing: 0.1em;
  margin-top: 0;
}

/*上のライン*/
main h2::before {
  content: "";
  display: block;
  width: 2rem; /*幅。２文字分。お好みで。*/
  height: 2px; /*高さ。お好みで。*/
  background: currentColor; /*色は上のh2の色を引き継ぐ*/
  opacity: 0.4;
}

/*ライン無しにしたい場合*/
main h2.no-border::before {
  display: none;
}

/*センタリング時*/
main h2.c {
  width: fit-content;
  margin-inline: auto;
  text-align: center;
}

/*センタリング時のライン*/
main h2.c::before {
  margin-inline: auto;
}

/*h2内のspan*/
main h2 span {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/
}

/*p*/
main p {
  font-size: 1.1rem;
}

/*main内で使用するul,ol要素（リストタグ）*/
main ul,
main ol {
  margin-left: 2rem;
  margin-right: 2rem;
}

/*list1（カラムブロック）
---------------------------------------------------------------------------*/
.list1 * {
  margin: 0;
  padding: 0;
}
.list1 a {
  text-decoration: none;
}

/*ボックス全体*/
.list1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /*3列*/
  gap: 1.5rem; /*ボックス同士の間に空けるスペース。1.5文字分。*/
  font-size: 0.9rem; /*文字サイズ90%*/
}

/*bg1-light-partsの背景色を使った場合にだけ、余白をつける*/
.list1.bg1-light-parts {
  padding: 1.5rem; /*ボックス内の余白。1.5文字分。*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
  /*700px以下で1列に*/
  .list1 {
    grid-template-columns: 1fr;
  }
} /*追加指定ここまで*/

/*ボックス１個あたり*/
.list1 .list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

/*テキストボックス*/
.list1 .list .text {
  flex: 1;
  margin-top: 0.5rem;
}

/*h4見出し*/
.list1 .list h4 {
  display: flex;
  align-items: center;
  justify-content: space-between; /*タイトル左・矢印右に分ける*/
  gap: 1em;
  font-size: 1.1rem; /*文字サイズ1.1倍。*/
}

/*カード全体hoverで矢印が動く*/
.list1 .list a:hover h4 .arrow {
  transform: translateX(6px);
}

/*説明だけ小さめにする*/
.list1 .list p {
  line-height: 1.5; /*行間*/
}

/*flex1（テキスト＋写真の横ならび）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.flex1 {
  display: flex; /*横並びに*/
  margin-inline: calc(-1 * var(--content-space-l));
  background: var(
    --light-color
  ); /*背景色。thtme.cssのlight-colorを読み込みます。*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
  .flex1 {
    flex-direction: column; /*縦積みに*/
    padding: var(--content-space-l);
  }
} /*追加指定ここまで*/

/*画像ブロック*/
.flex1 .image {
  width: 50%; /*幅。お好みで。*/
  position: relative;
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
  .flex1 .image {
    width: 100%;
    position: static;
  }
} /*追加指定ここまで*/

.flex1 .image img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
  .flex1 .image img {
    position: static;
  }
} /*追加指定ここまで*/

.flex1 .text {
  flex: 1;
  padding: 5rem 2rem 4rem var(--content-space-l); /*テキストの余白。上に5文字分、右に2文字分、下に4文字分、左はtheme.cssのcontent-space-lを読み込みます。*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
  .flex1 .text {
    padding: 0;
  }
} /*追加指定ここまで*/

/*サムネイルの横スライドショー（おすすめ商品ブロック）
---------------------------------------------------------------------------*/
.list-auto1 * {
  margin: 0;
  padding: 0;
}
.list-auto1 a {
  text-decoration: none;
}

/*スライドショー全体を囲むブロック*/
.list-auto1 {
  overflow-x: hidden;
  padding-bottom: 50px; /*下に空けるスペース。インジケーター分の確保です。*/
  position: relative;
  line-height: 1.5; /*行間をデフォルトより狭く*/
}

/*１個あたりのボックスの設定と、4列配置する為の指示*/
.list-auto1 .img > div {
  flex: 0 0 23%; /*４枚表示する為には25%指定だが、左右のマージン分（計2%）を差し引く。*/
  max-width: 23%; /*上記と同じ内容だが念の為追加*/
  margin: 0 1%; /*上下、左右へのマージン*/
}

/*画面幅800px以下の追加指定*/
@media screen and (max-width: 800px) {
  /*2列配置に変更する*/
  .list-auto1 .img > div {
    flex: 0 0 48%;
    max-width: 48%;
  }
} /*追加指定ここまで*/

/*画像たちを囲むブロック*/
.list-auto1 .img {
  display: flex;
}

/*画像*/
.list-auto1 .img img {
  width: 100%;
}

/*h4見出し*/
.list-auto1 h4 {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem; /*下に0.2文字分スペースを空ける*/
}

/*段落タグ(p)*/
.list-auto1 p {
  font-size: 0.85rem; /*文字サイズを85%に*/
}

/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.list-auto1 .slide-indicators {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 0px; /*下からのボタンの配置場所*/
  left: 0px;
}

/*１個あたり*/
.list-auto1 .indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ccc; /*未アクティブ時のボタン色*/
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

/*アクティブボタン色*/
.list-auto1 .indicator.active {
  background: var(
    --primary-color
  ); /*アクティブ時のボタン色。theme.cssのprimary-colorを読み込みます。*/
}

/*list-yoko-scroll1（お客様の声ブロック）
---------------------------------------------------------------------------*/
.list-yoko-scroll1 * {
  margin: 0;
  padding: 0;
}

/*横スクロールブロック全体*/
.list-yoko-scroll1 {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none; /*Firefox用*/
  scroll-snap-type: x mandatory; /*スナップスクロールを有効にする*/
}
.list-yoko-scroll1::-webkit-scrollbar {
  display: none; /*Chrome, Safari, Edge用*/
}

/*ブロック内の１個あたり*/
.list-yoko-scroll1 .list {
  width: 60%; /*ブロック１個の幅。お好みで変更して下さい。*/
  flex-shrink: 0;
  scroll-snap-align: start;
  padding-left: 1rem; /*ブロック内の左側に余白。1文字分。*/
  position: relative;
  display: flex;
  flex-direction: column;
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width: 600px) {
  /*ブロック内の１個あたり*/
  .list-yoko-scroll1 .list {
    width: 28%; /*ブロック１個の幅。お好みで変更して下さい。*/
    padding-left: 2rem; /*ブロック内の左側に余白。２文字分。*/
  }
} /*追加指定ここまで*/

/*テキストブロック*/
.list-yoko-scroll1 .list .text {
  flex: 1;
  line-height: 1.5; /*行間*/
  position: relative;
  padding-top: 2rem; /*上に空ける余白*/
}

/*「 " 」の記号 */
.list-yoko-scroll1 .list::before {
  content: "\201C";
  font-family: "Georgia", "游明朝", serif;
  font-size: 3rem; /*サイズ*/
  opacity: 0.3; /*透明度。色を30%だけ出した状態。*/
  position: absolute;
  top: 1rem; /*上からの配置場所*/
  left: 0.5rem; /*左からの配置場所*/
  line-height: 1;
}

/*名前*/
.list-yoko-scroll1 .list .name {
  display: block;
  margin-top: 1rem; /*上に1文字分のスペースを空ける*/
}

/*bg-image1（フッターの上にあるショールーム案内ブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.bg-image1 {
  display: flex;
  justify-content: flex-end; /*テキストブロックを最後に配置*/
  position: relative;
  margin-inline: calc(-1 * var(--content-space-l));
  padding: var(--content-space-l) 1.5rem; /*ブロック内の余白。1.5文字分。*/
  background: #000; /*背景は黒。下のopacity（透明度）を設定することでこの色が出てきます。*/
  color: #fff; /*文字色は白。*/
}

/*テキストブロック*/
.bg-image1 .text {
  width: 50%; /*幅*/
  position: relative;
  z-index: 1;
}

/*画像ブロック*/
.bg-image1 .image {
  position: absolute;
  inset: 0;
}
.bg-image1 .image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5; /*透明度50%。数値が小さくなるほど黒っぽくなります。*/
}

/*free1（色々なレイアウト用）
---------------------------------------------------------------------------*/
/*ボックス内のh4*/
.free1 h4 {
  margin: 0;
  font-size: 1.1rem;
}

/*画像の影をつける場合*/
.shadow {
  box-shadow: 4vw 4vw rgba(0, 0, 0, 0.05); /*右へ、下へ、0,0,0は黒のことで0.05は5%だけ色が出た状態。*/
}

/*画像と文字を囲むブロック*/
.free1 .list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); /* 12等分 */
  gap: 5vw; /*要素間の隙間。画面幅100% = 100vwです。お好みで。*/
  margin-bottom: 5vw; /*下に空けるスペース。お好みで。*/
  grid-auto-flow: dense;
}
.free1 .list:last-child {
  margin-bottom: 0; /*最後のブロックの下マージンをなくす*/
}

/*imageとtextの設定*/
.free1 .image,
.free1 .text {
  align-self: center;
  position: relative;
}

/*画像をグリッド幅いっぱいに広げる*/
.free1 img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

/*imageのみの設定*/
.free1 .image {
  grid-column: 1 / -1;
}

/*textのみの設定*/
.free1 .text {
  grid-column: 1 / -1;
}

/*image-wide（横長で使う場合）*/
.free1 .image-wide {
  grid-column: 1 / -1;
}

/*image-01*/
.free1 .image-01 {
  grid-column: 8 / -1;
}
/*.text-01*/
.free1 .text-01 {
  grid-column: 1 / 8;
}
/*image-01（左右入れ替え用）*/
.free1 .list.reverse .image-01 {
  grid-column: 1 / 6;
}
/*text-01（左右入れ替え用）*/
.free1 .list.reverse .text-01 {
  grid-column: 6 / -1;
}

/*image-02*/
.free1 .image-02 {
  grid-column: 1 / 10;
}
/*text-02*/
.free1 .text-02 {
  grid-column: 1 / 10;
}
/*image-02（左右入れ替え用）*/
.free1 .list.reverse .image-02 {
  grid-column: 4 / -1;
}
/*text-02（左右入れ替え用）*/
.free1 .list.reverse .text-02 {
  grid-column: 4 / -1;
}

/*画面幅500px以下の追加指定*/
@media screen and (max-width: 500px) {
  /*画像と文字を囲むブロック*/
  .free1 .list {
    display: block;
    margin-bottom: 3rem;
  }
} /*追加指定ここまで*/

/*news（お知らせ）
---------------------------------------------------------------------------*/
dl.news * {
  margin: 0;
  padding: 0;
}

/*日付*/
dl.news dt {
  display: flex;
}

/*画面幅900px以上の追加指定*/
@media (min-width: 900px) {
  dl.news {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr); /*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/
    gap: 0 2rem; /*2remが、日付とテキストとの間に空けるスペース。お好みで。*/
    align-items: start;
  }
} /*追加指定ここまで*/

@media screen and (max-width: 768px) {
  dl.news dt:not(:first-of-type){
    margin-top: 1rem;
  }
}

/*フッター
---------------------------------------------------------------------------*/
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer p {
  margin: 0;
}
footer a {
  text-decoration: none;
}

footer a:hover {
  color: var(--light-border-color);
}

/*フッターボックス全体*/
footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem; /*左右のボックスの間に空けるスペース。２文字分。*/
  font-size: 0.8rem; /*文字サイズ80%*/
  padding: var(--content-space-s) var(--content-space-s); /*ボックス内の余白。上下にはtheme.cssのcontent-space-sを、左右にはcontent-space-lを読み込みます。*/
}

/*ロゴの最大幅*/
footer .logo {
  max-width: 150px;
}

/*フッター直下の各ブロック（縦積みコンテナ化）<small>に margin-top: auto を効かせて下に配置するために必要*/
footer > div {
  display: flex;
  flex-direction: column; /*縦積み*/
}

/*メニューブロック*/
footer .menu {
  display: flex; /*フッターメニューを横並びに*/
  gap: 5vw; /*メニュー（ul）同士の間に空けるスペース。*/
  align-items: flex-start;
}


footer .menu{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3vw;
}

@media (max-width: 600px){
  footer .menu{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1240px) {
  footer {
    flex-direction: column;
  }
}

/*画面幅700px以下の追加指定*/
@media (max-width: 768px) {
  /*フッターボックス全体*/
  footer {
    /* flex-direction: column; */
  }
} /*追加指定ここまで*/

/*Copyright部分*/
footer small {
  display: block;
  margin-top: auto;
}

/*SNSアイコン
---------------------------------------------------------------------------*/
.sns1-parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /*アイコン同士のマージン的な要素。１文字分。*/
}

/*画面幅900px以上の追加指定*/
@media (min-width: 900px) {
  .sns1-parts {
    /* justify-content: flex-end; */
  }
} /*追加指定ここまで*/

.sns1-parts i {
  font-size: 20px; /*アイコンサイズ*/
}

footer .menu ul li ul.sns1-parts a{
  margin-left: 0;
}

.sns1-parts img{
  max-width: 20px;
}

/*メニューオーバーレイ（メニュー領域外クリックで閉じる用）
---------------------------------------------------------------------------*/
#menubar-overlay {
  display: none;
  position: fixed;
  z-index: 99; /*#menubar(100)の下、ページの上*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /*半透明の黒。お好みで濃さを調整。*/
}

/*noscroll（メニュー表示中のスクロール禁止用）*/
body.noscroll {
  overflow: hidden;
}

/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
  text-decoration: none;
  display: block;
  background: rgba(0, 0, 0, 0.5);
  color: #ccc;
  text-align: right;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}
.pr a::before {
  font-family: "Font Awesome 6 Free";
  content: "\e2ca";
  font-weight: 900;
  margin-right: 0.5em;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
  display: block;
}

/*ボタンの設定*/
.pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  z-index: 99;
  animation: opa1 1s 0.4s both;
  position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/
  right: 20px; /*右からの配置場所指定*/
  bottom: 20px; /*下からの配置場所指定*/
  color: #fff; /*文字色*/
  font-size: 1.5rem; /*文字サイズ*/
  background: rgba(
    0,
    0,
    0,
    0.2
  ); /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
  width: 60px; /*幅*/
  line-height: 60px; /*高さ*/
  border-radius: 50%; /*円形にする*/
}

/*bg1-border-parts
---------------------------------------------------------------------------*/
.bg1-border-parts {
  border-top: 1px solid var(--bg-border-color); /*上の線の幅、線種、var以降は色の事でtheme.cssのbg-border-colorを読み込みます。*/
  border-bottom: 1px solid var(--bg-border-color); /*下の線の幅、線種、var以降は色の事でtheme.cssのbg-border-colorを読み込みます。*/
}

/*bg1-parts
---------------------------------------------------------------------------*/
.bg1-parts {
  background: var(
    --bg-inverse-color
  ); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
  color: var(--bg-color); /*背景色。theme.cssのbg-colorを読み込みます。*/
}

/*bg1-primary
---------------------------------------------------------------------------*/
.bg1-primary-parts {
  background: var(
    --primary-color
  ); /*背景色。theme.cssのprimary-colorを読み込みます。*/
  color: var(
    --primary-inverse-color
  ); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*bg1-light
---------------------------------------------------------------------------*/
.bg1-light-parts {
  background: var(
    --light-color
  ); /*背景色。theme.cssのlight-colorを読み込みます。*/
  color: var(
    --light-inverse-color
  ); /*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*bg1-accent
---------------------------------------------------------------------------*/
.bg1-accent-parts {
  background: var(
    --accent-color
  ); /*背景色。theme.cssのaccent-colorを読み込みます。*/
  color: var(
    --accent-inverse-color
  ); /*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*bg-parts（bg1-primary-parts、bg1-light-parts、bg1-accent-partsとセットで使います）
---------------------------------------------------------------------------*/
.bg-parts {
  padding-top: var(
    --content-space-l
  ); /*ボックス内の上に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
  padding-bottom: var(
    --content-space-l
  ); /*ボックス内の下に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
}

/*背景色が続く場合に隙間を空けない*/
.bg-parts + .bg-parts {
  margin-top: calc(-1 * var(--content-space-l)) !important;
}

/*section内で画面両サイドいっぱいまで広げる場合（marginのみでもいいが安定版に）
---------------------------------------------------------------------------*/
.bleed-x-parts {
  --bleed-x: var(--content-space-l); /*エイリアスに*/
  width: calc(
    100% + (var(--bleed-x) * 2)
  ); /*section内容の幅＋両サイドpadding（対象要素の幅）*/
  margin-left: calc(var(--bleed-x) * -1);
  margin-right: calc(var(--bleed-x) * -1);
  max-width: none;
}

/*左右によせる専用
---------------------------------------------------------------------------*/
.bleed-left-parts {
  width: calc(100% + var(--content-space-l));
  margin-left: calc(-1 * var(--content-space-l));
}
.bleed-right-parts {
  width: calc(100% + var(--content-space-l));
  margin-right: calc(-1 * var(--content-space-l));
}

/*その他
---------------------------------------------------------------------------*/
.color-check,
.color-check a {
  color: #ff0000 !important;
}
.l {
  text-align: left !important;
}
.c {
  text-align: center !important;
}
.r {
  text-align: right !important;
}
.ws {
  width: 100%;
  display: block;
}
.wl {
  width: 100%;
  display: block;
}
.padding-x {
  padding: 0 var(--content-space-l);
}
.mt0 {
  margin-top: 0px !important;
}
.mt1rem {
  margin-top: 1rem !important;
}
.mt3rem {
  margin-top: 3rem !important;
}
.mb0 {
  margin-bottom: 0px !important;
}
.mb1rem {
  margin-bottom: 1rem !important;
}
.mb3rem {
  margin-bottom: 3rem !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.look {
  display: inline-block;
  padding: 0px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 3px;
  margin: 5px 0;
  word-break: break-all;
}
.small {
  font-size: 0.85em;
}
.large {
  font-size: 2em;
  letter-spacing: 0.1em;
}
.pc {
  display: none;
}
.dn {
  display: none !important;
}
.block {
  display: block !important;
}
.is-clip {
  overflow: hidden;
}
.readme-font {
  font-family:
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,
    Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/*大きな画面の場合*/
.large-screen .ws {
  width: 50%;
}
.large-screen .sh {
  display: none;
}
.large-screen .pc {
  display: block;
}

/* テキスト色 */
.color-primary {
  color: var(--primary-color);
}