@import url(responsive.css);

body {
      font-family: 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
      color: #222;
    }
    footer,
    h1, h2, h3, .headline-serif {
      font-family: 'Noto Serif JP', '游明朝体', "Hiragino Mincho ProN", serif;
      letter-spacing: 0.08em;
    }
    /* カラーテーマ */
    :root {
      /*--navy: #0c1b35;*/
      --navy: #131e39;
      --navy-light: #132446;
      --beige: #f5f1ea;
      --accent: #c4925b;
    }

    /* サイドロゴ＋縦ナビ（PC） */
    .side-nav {
      position: fixed;
      top: 0;
      left: 0;
      /*width: 140px;*/
      width: 15vw;
      height: 100vh;
      background: #fff;
      border-right: 1px solid #eee;
      z-index: 1030;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 2rem;
    }
    .side-logo {
    width: 60%;
    height: fit-content;
      /*border-radius: 50%;*/
      /*border: 2px solid #000;*/
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      letter-spacing: 0.12em;
    }
    .side-logo span {
      display: block;
    }
    
    #mainLogo{
        width: 100%;
    }
    
    .side-nav ul {
      list-style: none;
      padding-left: 0;
      margin-top: 3rem;
      /*font-size: 0.85rem;*/
      font-size: calc(0.70vw + 0.25vh);
      letter-spacing: 0.25em;
    }
    .side-nav li + li {
      margin-top: 0.8rem;
    }
    .side-nav a {
      text-decoration: none;
      color: #444;
    }
    .side-nav a:hover {
      color: var(--accent);
    }

    /* メイン領域はサイドナビ分オフセット */
    .main-wrapper {
      /*margin-left: 140px;*/
      margin-left: 15vw;
    }

    /* ヒーロー */
    .hero {
      position: relative;
      /*min-height: 70vh;*/
      min-height: 99vh;
      /*background-color: #000;*/
      /*background: url("../img/common/gray_back.png") center center / cover no-repeat;*/
      display: flex;
      align-items: flex-end;
      color: #fff;
    }
    /*.hero, .hero-slider { background: url("../img/common/gray_back.png") center center / cover no-repeat; }*/

    header#top >  section,
    #zheaderWrap{
        /*background: url("../img/common/gray_back.png") center center / cover no-repeat;*/
    }
    
    .hero-overlay {
      background: rgba(0, 0, 0, 0.35);
      width: 100%;
      padding: 4rem 0 3rem;
    }
    .hero-copy {
      max-width: 520px;
    }
    .hero-copy small {
      letter-spacing: 0.25em;
      font-size: 0.75rem;
    }
    .hero-copy h1 {
      font-size: 2.2rem;
      margin: 1rem 0 1.5rem;
    }

    .btn-outline-light.rounded-0 {
      letter-spacing: 0.18em;
      font-size: 0.8rem;
      border-radius: 0.2rem;
    }
    .btn-outline-light.rounded-2 {
      letter-spacing: 0.18em;
      font-size: 0.8rem;
      border-radius: 0.2rem;
    }

    /* セクション共通 */
    section {
      padding: 4.5rem 0;
    }
    .section-title {
      text-align: center;
      margin-bottom: 2.5rem;
    }
    .section-title small {
      display: block;
      letter-spacing: 0.25em;
      font-size: 0.75rem;
      color: #666;
      margin-bottom: 0.4rem;
    }
    .section-title h2 {
      font-size: 1.6rem;
    }

    /* 新着情報 */
    #news {
      background: #fff;
    }
    .news-list {
      border-top: 1px solid #ddd;
      font-size: 0.9rem;
    }
    .news-item {
      padding: 0.9rem 0;
      border-bottom: 1px solid #eee;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.5rem;
      align-items: baseline;
    }
    .news-date {
      color: #999;
      width: 6.5rem;
      flex-shrink: 0;
    }
    .news-label {
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
      border: 1px solid #ccc;
    }

/*     波形仕切り 
    .wave-top {
      position: relative;
      padding-top: 0;
    }
    .wave-top::before {
      content: "";
      position: absolute;
      top: -50px;
      left: 0;
      width: 100%;
      height: 50px;
      background: radial-gradient(120% 120% at 50% 100%, transparent 50%, var(--navy) 51%);
    }*/



    /* ギャラリー */
    #gallery {
      background: var(--navy);
      padding-top: 0; /* 波形で十分余白あるので */
      padding-bottom: 4rem;
    }
    .gallery-grid img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      margin-bottom: 1rem;
    }

    /* 施工事例 */
    #works {
      background: #f3f3f3;
    }
    .work-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }
    .work-card-text {
      background: #fff;
      padding: 1.2rem 1.4rem;
      border: 1px solid #eee;
      border-top: none;
      font-size: 0.9rem;
    }

    /* お客様の声 */
    #voices {
      background: #fff;
    }
    .voice-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }
    .voice-body {
      border: 1px solid #eee;
      border-top: none;
      padding: 1.2rem 1.4rem;
      font-size: 0.9rem;
      line-height: 1.9;
    }

    /* お問い合わせ */
    #contact {
      background: var(--navy-light);
      color: #fff;
    }
    #contact label {
      font-size: 0.85rem;
      letter-spacing: 0.12em;
    }

    /* フッター */
    footer {
      background: var(--navy);
      color: #fff;
      padding: 2.5rem 0;
      text-align: center;
      font-size: 0.9rem;
    }
    .footer-logo {
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      letter-spacing: 0.18em;
    }
    
    #contact{
          background: url("../img/common/mokume4.jpg") center center   no-repeat ;
          background-size: 100% 100%;
    }
    

    /* スマホ時：サイドナビをトップバーに変更 */
    @media (max-width: 991.98px) {
      .side-nav {
        display: none;
      }
      .main-wrapper {
        margin-left: 0;
      }
      .hero {
        min-height: 60vh;
      }
    }
  
    
    .sp-only{
        display: none;
    }