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

:root {
  --primary-color: #D70C19;
  --text-color: #333333;
  --bg-color: #FFFFFF;
  --light-bg: #ECECEC;
  --contact-bg: #D9D9D9;
  --main-bg-color: #F5F5F5;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans JP', sans-serif !important;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--main-bg-color) !important;
  padding-top: 60px !important; /* ヘッダーの高さ分、bodyにpaddingを追加 */
}

p, table, td {
  font-family: 'Noto Sans JP', sans-serif !important;
  color: #363433 !important;
}

div.j-text ol li, div.j-text ul li {
  right: -1.2em !important;
}

#cc-matrix- > div:nth-child(1) {
  display: none;
}

#cc-m-7043960151, 
#cc-m-15297005923,
#cc-m-7768164451,
#cc-m-15297671323,
#cc-m-15297711623 {
  background-color: var(--bg-color); /* 背景色を白に設定 */
}

/* ナビゲーションのスタイル */
#navigation {
  position: fixed; /* ヘッダーを固定 */
  top: 0; /* 画面上部に固定 */
  left: 0; /* 画面左端に固定 */
  width: 100%; /* 横幅を画面いっぱいに */
  z-index: 1000; /* 他の要素よりも前面に表示 */
  background: var(--bg-color); /* 背景色を維持 */
  padding: 1rem 2rem; /* paddingを維持 */
}

.logo-image {
  height: 20px;  /* ロゴの高さを20pxに設定 */
  width: auto;   /* 幅は自動調整 */
}

.header-nav {
    display: flex;
    justify-content: space-between; /* ロゴとメニューを左右に配置 */
    align-items: center;
}

#mainNav1 {
    margin-left: auto; /* メニューを右寄せにする */
}

#mainNav1 li {
  display: inline-block;
  margin-right: 20px;
}

#mainNav1 a {
  text-decoration: none;
  color: var(--text-color);
}

#mainNav1 li:last-child a {
  background-color: black;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
}

.works-heading {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: left;
}

/* ハンバーガーメニューのスタイル */
.hamburger {
  display: none;
  position: absolute; /* position: absolute; に変更 */
  top: 10px; /* 上からの距離 */
  right: 20px; /* 右からの距離 */
  width: 30px;
  height: 24px;
  cursor: pointer;
  z-index: 1000; /* 他の要素よりも前面に表示 */
}

.hamburger span {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: var(--text-color);
  border-radius: 2px;
  transition: 0.3s;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }

.hamburger.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hamburger.active span:nth-child(2) { opacity: 0; }

.hamburger.active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

#content_area {
  margin: 0 auto; /* 中央寄せにする場合 */
}

#cc-m-15297005923,
#cc-m-15297007623 {
  width: 100%; /* 横幅いっぱいに */
  max-width: none; /* max-widthを解除 */
  margin-left: auto;   /* 中央寄せのための設定 */
  margin-right: auto;
  display: block;
}

/* Heroブロックのスタイル */
#cc-m-15297005923,
#cc-m-15297671323,
#cc-m-15297711623 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
}

#cc-m-textwithimage-15297005923 p:nth-child(1),
#cc-m-textwithimage-15297671323 p:nth-child(1),
#cc-m-textwithimage-15297711623 p:nth-child(1) {
  padding-bottom: 15px;
}

#cc-m-textwithimage-15297005923 p:nth-child(2),
#cc-m-textwithimage-15297671323 p:nth-child(2),
#cc-m-textwithimage-15297711623 p:nth-child(2) {
  padding-bottom: 10px;
}

#cc-m-textwithimage-15297005923 a[title="お問い合わせ"],
#cc-m-textwithimage-15297671323 a[title="お問い合わせ"],
#cc-m-textwithimage-15297711623 a[title="お問い合わせ"],
#cc-m-15297698023 a[title="お問い合わせ"],
#cc-m-15297722223 a[title="お問い合わせ"] {
  display: inline-block;
  padding: 0.5rem 2rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--primary-color);
  background-color: #fff !important;
  border: 2px solid var(--primary-color);
  background: none;
  box-shadow: 4px 4px 5px #ccc; /* 影を追加 */
}

#cc-m-15297007623,
#cc-m-7767848351 {
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: var(--primary-color); /* 背景色を赤色に設定 */
  color: #fff; /* テキストの色を白色に設定 */
}

#cc-m-15297008523 p,
#cc-m-7767848551 p,
#cc-m-15297695823 p,
#cc-m-15297720323 p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#cc-m-textwithimage-15297008823 > p:nth-child(4) > span,
#cc-m-textwithimage-15297009123 > p:nth-child(4) > span,
#cc-m-textwithimage-15297009323 > p:nth-child(4) > span,
#cc-m-textwithimage-15297009723 > p:nth-child(4) > span,
#cc-m-textwithimage-15297696623 > p:nth-child(3) > span,
#cc-m-textwithimage-15297696823 > p:nth-child(3) > span,
#cc-m-textwithimage-15297697123 > p:nth-child(3) > span,
#cc-m-textwithimage-15297720623 p span,
#cc-m-textwithimage-15297721023 > p:nth-child(3) > span > span,
#cc-m-textwithimage-15297722023 > p:nth-child(4) > span {
  line-height: 1.3;
}

#cc-m-15297008523 em,
#cc-m-7767848551 em,
#cc-m-15297695823 em,
#cc-m-15297720323 em {
  background-color: #D9D9D9; /* より濃い灰色の背景色を設定 */
  padding: 2px 5px; 
  font-style: normal !important; /* イタリックの指定を削除 */
}

#cc-m-15297008523 .j-textWithImage,
#cc-m-7767848551 .j-textWithImage,
#cc-m-15297695823 .j-textWithImage,
#cc-m-15297720323 .j-textWithImage {
  display: flex; /* Flexboxレイアウトを使用 */
  flex-direction: column; /* 要素を縦方向に並べる */
  align-items: center; /* 要素を中央揃え */
  text-align: left; /* テキストを中央揃え */
}

#cc-m-15297008523 p,
#cc-m-7767848551 p,
#cc-m-15297695823 p,
#cc-m-15297720323 p {
  line-height: 1.3; /* 行の高さを調整 */
}

#cc-m-15297008523,
#cc-m-15297010623,
#cc-m-7767849051,
#cc-m-15297695823,
#cc-m-7768566051,
#cc-m-15297718723,
#cc-m-15297720323 {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

#cc-m-15297693723,
#cc-m-15297015323,
#cc-m-15297016223,
#cc-m-15297686123,
#cc-m-15297717223,
#cc-m-15297717623,
#cc-m-15297718223,
#cc-m-15297689223,
#cc-m-15359034723,
#cc-m-15196991323,
#cc-m-15185830523,
#cc-m-15271366923,
#cc-m-15271367123,
#cc-matrix-4310627323,
#cc-m-15297043823 {
  width: 80%;
  margin: 0 auto !important;
  justify-content: center;
}

#cc-m-15297010623 .cc-m-hgrid-column .j-text,
#cc-m-7767849051 .cc-m-hgrid-column .j-text,
#cc-m-7768566051 .cc-m-hgrid-column .j-text,
#cc-matrix-4310632823,
#cc-matrix-4310632923,
#cc-m-15297686123,
#cc-m-15297717623,
#cc-m-15297717223,
#cc-m-15297718223,
#cc-m-15297689223,
#cc-matrix-4310627323,
#cc-m-15297720323 .cc-m-hgrid-column .j-text,
#cc-m-15297693723 {
  background-color: #fff;
  border-radius: 10px; /* 角を丸くする */
  padding: 17px !important;
}

#cc-m-15297010623 .cc-m-hgrid-column li {
  right: -1.2em;
}

#cc-m-15297010623 .j-calltoaction-link,
#cc-m-7767849051 .j-calltoaction-link,
#cc-m-7768566051 .j-calltoaction-link {
  border: 2px solid var(--primary-color);
  background-color: #fff;
  color: var(--primary-color) !important;
}

#cc-m-15297043823 table,
#cc-m-7767850451 table {
  border-collapse: collapse; /* テーブルの枠線を重ねて表示 */
  width: 100%; /* テーブルの幅を100%に */
}

#cc-m-15297043823 th,
#cc-m-15297043823 td,
#cc-m-7767850451 th,
#cc-m-7767850451 td {
  border-bottom: 1px solid #ccc !important; /* 下線を追加 */
  padding: 8px; /* セル内の余白 */
  margin-bottom: 10px; /* セルの下のマージン */
  box-sizing: border-box; /* paddingとborderを要素のサイズに含める */
}

#cc-m-15297043823 tr:last-child td,
#cc-m-7767850451 tr:last-child td {
  border-bottom: none; /* 最後の行の下線は不要な場合は消す*/
}

/* ブログ一覧ページ */
#content_area > div.j-blog.n.clearover.j-blogarticle {
  width: 50%;
  margin: 0 auto;
}

/* プログ詳細ページ */
#content_area > div.n.j-blog-meta.j-blog-post--header {
  width: 70%;
  margin: 0 auto;
}
.n.j-blog-meta.j-blog-post--header + [id^="cc-matrix-"] {
  width: 70%;
  margin: 0 auto;
}

.j-blog.n.clearover.j-blogarticle figure.cc-imagewrapper.cc-m-image-align-1.cc-m-width-maxed {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*
.j-blog.n.clearover.j-blogarticle figure.cc-imagewrapper.cc-m-image-align-1.cc-m-width-maxed img {
  display: block;
  max-width: 100%;
  height: auto;
}
*/

figure.cc-imagewrapper img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure.cc-imagewrapper figcaption {
  font-size: 14px !important;
}

/* フッターのお問い合わせはこちら */
#cc-m-15297044723,
#cc-m-15297698023,
#cc-m-15297722223 {
  background-color: #D9D9D9; /* 灰色の背景色 */
  padding-top: 50px;
  padding-bottom: 50px;
}

#cc-m-15297044723 p,
#cc-m-15297698023 p,
#cc-m-15297722223 p {
  padding-bottom: 10px;
}

#cc-m-15297044723 a,
#cc-m-15297010723 a,
#cc-m-15297014323 a {
  display: inline-block; /* インラインブロック要素にする */
  color: var(--primary-color); /* テキストを赤色に */
  background-color: white; /* 背景色を白色に */
  border: 2px solid var(--primary-color); /* 赤色の枠線 */
  border-radius: 10px; /* 角丸にする */
  padding: 10px 20px; /* 内側の余白 */
  box-shadow: 5px 5px 5px #ccc; /* 影を追加 */
  text-decoration: none; /* 下線を消す */
}

#footer {
  min-height: 50px; /* または height: 50px; */
  background-color: #000;
  color: #fff;
  padding: 10px;
  text-align: center; /* 必要に応じて調整 */
}

#footer .leftrow {
  text-align: center;
}

#footer .leftrow img {
  display: block;
  margin: 0 auto;
  height: 20px; /* 例として画像の高さを指定 */
  width: auto; /* 幅は自動調整 */
}

#footer .gutter {
  position: relative; /* これは問題なさそうなので維持 */
}

#contentfooter > img {
  margin: 0 auto;
}

#contentfooter > div.leftrow {
  float: none !important;
  width: 100% !important;
  text-align: center !important;
}

/* スマートフォンビューのスタイル */
@media only screen and (max-width: 815px) {
  body {
    padding-top: 50px !important; /* スマホ表示のヘッダーの高さ分、bodyにpaddingを追加 */
  }
  .logo-image {
    height: 20px; /* 高さを15pxに設定 (例) */
    width: auto;
  }
  /* ナビゲーション */
  .hamburger { display: block; }
  #mainNav1 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--bg-color);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  #mainNav1 li {
    display: block;
    margin: 0;
  }
  #mainNav1 a {
    display: block;
    padding: 1rem 0;
  }
  #mainNav1.active { display: flex; }

  #content_area {
    width: 100%;
    max-width: 100%;
  }

  /* Heroブロック */
  #cc-m-15297005923,
  #cc-m-15297671323,
  #cc-m-15297711623 {
    flex-direction: column;
    text-align: center !important;
    padding-top: 40px;
  }
  #cc-m-textwithimage-15297005923 p:nth-child(1),
  #cc-m-textwithimage-15297671323 p:nth-child(1),
  #cc-m-textwithimage-15297711623 p:nth-child(1) {
    padding-bottom: 20px;
  }
  #cc-m-textwithimage-15297005923 p:nth-child(2),
  #cc-m-textwithimage-15297671323 p:nth-child(2),
  #cc-m-textwithimage-15297711623 p:nth-child(2) {
    padding-bottom: 20px;
  }
  #cc-m-15297005923 .cc-imagewrapper,
  #cc-m-15297671323 .cc-imagewrapper,
  #cc-m-15297711623 .cc-imagewrapper {
    order: 2;
    display: flex;
    justify-content: center;
  }
  #cc-m-15297005923 > div:nth-child(2),
  #cc-m-15297671323 > div:nth-child(2),
  #cc-m-15297711623 > div:nth-child(2) { 
    order: 1;
    text-align: center !important;
  }
  #cc-m-15297005923 div p,
  #cc-m-15297671323 div p,
  #cc-m-15297711623 div p { 
    text-align: center !important;
    padding-left: 0px !important;
  }
  #cc-m-15297005923 div p span,
  #cc-m-15299424823 p span { 
    font-size: 22.5px !important;
  }
  #cc-m-15297671323 div p span { 
    font-size: 19px !important;
  }
  #cc-m-15297711623 div p span { 
    font-size: 16px !important;
  }
  #cc-m-15297005923 a,
  #cc-m-15297671323 div p span a,
  #cc-m-15297711623 div p span a {
    font-size: 17px !important;
  }

  #cc-m-15297007623 p {
    text-align: left !important;
    margin: 0 15px;
  }

  #cc-m-15297008523,
  #cc-m-15297010623,
  #cc-m-7767849051,
  #cc-m-15297693723,
  #cc-m-7768566051,
  #cc-m-15297718723,
  #cc-m-15297695823,
  #cc-m-15297720323 {
    display: block; /* Flexboxを解除 */
  }

  #cc-m-15297010623 .cc-m-hgrid-column,
  #cc-m-7767849051 .cc-m-hgrid-column,
  #cc-m-7768566051 .cc-m-hgrid-column,
  #cc-m-15297718723 .cc-m-hgrid-column,
  #cc-m-15297695823 .cc-m-hgrid-column,
  #cc-m-15297720323 .cc-m-hgrid-column {
    width: 100% !important; /* 横幅いっぱいに表示 */
    display: block; /* ブロック要素にする */
    margin-bottom: 20px; /* 要素間の余白 */
    padding: 0px !important;
    margin-left: 0px;
    margin-right: 0px;
  }

  .j-hgrid {
    display: block; /* Flexbox や Grid レイアウトを解除 */
  }

  .j-hgrid .cc-m-hgrid-column {
    width: 100% !important; /* 横幅を100%にする */
    display: block; /* ブロック要素にする */
    margin-bottom: 20px; /* 必要に応じて要素間の余白を追加 */
  }

  /* ブログ一覧ページ */
  #content_area > div.j-blog.n.clearover.j-blogarticle {
    width: 80%;
  }
  /* プログ詳細ページ */
  #content_area > div.n.j-blog-meta.j-blog-post--header {
    width: 90%;
  }
  .n.j-blog-meta.j-blog-post--header + [id^="cc-matrix-"] {
    width: 90%;
  }

  figure.cc-imagewrapper img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  #content_area img,
  .j-text img,
  figure.cc-imagewrapper img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  figure.cc-imagewrapper,
  .cc-imagewrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 万一の横スクロール防止 */
  html, body,
  #content_area,
  .jtpl-content {
    overflow-x: hidden !important;
  }

  /* その他 */
  #header {
    flex-direction: column;
    text-align: left;
  }

  h2 { text-align: left !important; }
}