@charset "utf-8";

/* リセットCSSなど */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

ul {
   list-style-type: none;
}

/* 共通カラー、マージンなど */
:root {
   /* ==== カラー ==== */
   --color-primary: #4caf50;
   /* メイン：明るいグリーン（自然・信頼感） */
   --color-primary-dark: #388e3c;
   /* ホバーや強調用の深緑 */
   --color-accent: #c5a46d;
   /* 高級感を添えるゴールド */
   --color-background: #f5f5f5;
   /* 全体背景：柔らかいライトグレー */
   --color-surface: #ffffff;
   /* セクション・カード背景 */
   --color-border: #e0e0e0;
   /* 仕切り線や区切り */
   --color-text: #333333;
   /* 本文テキスト（濃いグレーで見やすく） */
   --color-heading: #00770c;
   /* 見出し：重厚感を少し残す */

   /* ==== フォント ==== */
   --font-base: "Noto Sans JP", sans-serif;
   /* 読みやすいモダン書体 */
   --font-heading: "Noto Serif JP", serif;
   /* 高級感のある見出し */
   --font-maru: "Zen Maru Gothic", sans-serif;
   /* 丸みのある書体 */
   --font-size-base: 16px;
   --font-size-heading2: 2em;
   --font-size-heading3: 1.5em;
   --font-size-nav: 20px;
   --line-height-base: 1.7;

   /* ==== 余白・レイアウト ==== */
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 32px;
   --spacing-xl: 64px;
   --container-width: 1200px;

   /* ==== レスポンシブ ==== */
   --breakpoint-sm: 480px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 1024px;
   --breakpoint-xl: 1280px;

   /* ==== アニメーション/影 ==== */
   --transition-base: 0.3s ease-in-out;
   --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* フォーム関係 */
.req {
   font-size: 11px;
   color: red;
   margin-left: var(--spacing-sm);
}

.red {
   color: red;
}



/* パララックス関係 */
html,
body {
   height: 100%;
}

.bg {
   position: fixed;
   inset: 0;
   background: url("../images/mainimage.jpeg") center / cover no-repeat;
   z-index: -1;
}


/* フルード化 */
img {
   max-width: 100%;
   height: auto;
   display: block;
}

/* スクロール関係 */
html {
   scroll-behavior: smooth;
}

/* 幅決め */
.inner {
   max-width: var(--container-width);
   margin-inline: auto;
}

/* リンク・ホバー関係 */
a {
   /* display: block; */
   font-family: var(--font-maru);
   font-size: var(--font-size-nav);
   text-decoration: none;
   color: var(--color-heading);
   font-weight: 600;
   padding: 10px;
   border-radius: 30px;
   transition: 0.5s;
}

.more a:hover {
   color: #fff;
   background-color: var(--color-primary-dark);
}

.gnav li a {
   position: relative;
   /*アンダーラインの位置を決めるための基準 */
}

.gnav li a::after {
   position: absolute;
   left: 0;
   content: '';
   width: 100%;
   height: 3px;
   background: var(--color-primary-dark);
   bottom: -3px;
   transform: scale(0, 1);
   transform-origin: right top;
   /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
   transition: transform 0.3s;
   /*変形の時間*/
}

.gnav li a:hover::after {
   transform: scale(1, 1);
   /*ホバー後、x軸方向に1（相対値）伸長*/
   transform-origin: left top;
   /*左から右に向かう*/
}

body {
   font-family: var(--font-base);
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
}

/* ヘッダー */
header {
   background-color: var(--color-surface);
}

header div {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 0;
}

header h1 {
   flex: 1;
}

header nav {
   flex: 3;
}

nav.gnav ul {
   display: flex;
   gap: 30px;
}

nav.gnav ul li {
   width: 20%;
   text-align: center;
}

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

   /* ハンバーガーメニュー */
   .header {
      position: relative;
      padding: 20px;
   }

   .hamburger {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 100;
      width: 48px;
      height: 48px;
      border: none;
      background: transparent;
      cursor: pointer;
   }

   .hamburger__line {
      position: absolute;
      left: 11px;
      width: 26px;
      height: 2px;
      background-color: var(--color-primary-dark);
      transition: all .4s;
   }

   .hamburger__line:nth-of-type(1) {
      top: 14px;
   }

   .hamburger__line:nth-of-type(2) {
      top: 23px;
   }

   .hamburger__line:nth-of-type(3) {
      top: 32px;
   }

   /* メニューオープン時 */
   .hamburger.active .hamburger__line:nth-of-type(1) {
      transform: translateY(9px) rotate(-45deg);
   }

   .hamburger.active .hamburger__line:nth-of-type(2) {
      opacity: 0;
   }

   .hamburger.active .hamburger__line:nth-of-type(3) {
      transform: translateY(-9px) rotate(45deg);
   }

   .gnav {
      position: fixed;
      top: 0;
      left: 0;
      width: 300px;
      height: 100vh;
      background-color: #fff;
      box-shadow: 2px 0 4px rgba(0, 0, 0, .1);
      transform: translateX(-100%);
      transition: transform .4s;
      z-index: 90;
   }

   .gnav.active {
      transform: translateX(0);
   }

   .nav__list {
      margin: 0;
      padding: 100px 0 0;
      list-style: none;
   }

   .nav__item {
      padding: 0 20px;
   }

   .nav__link {
      display: block;
      padding: 15px 0;
      color: var(--color-primary-dark);
      text-decoration: none;
      border-bottom: 1px solid #eee;
   }

   /* ヘッダー */
   header div {
      flex-direction: column;
   }

   nav.gnav ul {
      flex-direction: column;
   }

   nav.gnav ul li {
      width: 100%;
   }
}

/* キービジュアル */
#keyvisual {
   min-height: 50vh;
   /* background-color: var(--color-primary); */
   position: relative;
   padding-left: 2%;
   padding-right: 2%;
}

#keyvisual img {
   width: 100%;
   height: 50vh;
}

#keyvisual .inner {
   min-height: 50vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

.president {
   text-align: right;
   font-family: var(--font-heading);
   font-weight: 600;
}

/* キャッチコピー*/
.copy {
   font-family: "dnp-shuei-mincho-pr6", sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size: clamp(1.625rem, 1.17rem + 2.27vw, 2.875rem);
   color: var(--color-surface);
   text-align: center;
   text-shadow: 3px 3px 8px rgba(2, 19, 1, 1);
}

.subcopy {
   font-weight: 400;
   font-style: normal;
   font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
   color: var(--color-surface);
   text-align: center;
   text-shadow: 3px 3px 8px rgba(2, 19, 1, 1);
}

.catchcopy_sp {
   display: none;
}
/* キャッチコピーカラム落ち対策 */
      @media screen and (max-width:600px) {
         .catchcopy_sp {
            display: block;
         }

         .catchcopy {
            display: none;
         }

         .copy {
            font-size: 6.5vw;
            line-height: 1.3;
         }

         .subcopy {
            margin-top: 20px;
            font-size: 3vw;
            line-height: 1.5;
      }
   }

/* トップページ共通 */

h2 {
   text-align: center;
   font-family: var(--font-maru);
   font-size: var(--font-size-heading2);
   margin: var(--spacing-lg) auto;
   color: var(--color-heading);
}

.layout {
   width: 80%;
   margin-inline: auto;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   /* grid-template-columns: 1fr 1fr 1fr; */
   gap: 30px;
   margin-bottom: 50px;
}

.ttl {
   grid-column: 1/3;
   grid-row: 1;
}

.pic {
   grid-column: 3/4;
   grid-row: 1;
   background-color: var(--color-background);
   display: block;
}

.ttl2 {
   grid-column: 2/4;
   grid-row: 1;
}

.pic2 {
   grid-column: 1/2;
   grid-row: 1;
   background-color: var(--color-background);
}

section {
   padding-top: var(--spacing-lg);
   padding-bottom: var(--spacing-lg);
}

/* スマホ用 */
@media (max-width: 1024px) {
   .layout {
      grid-template-columns: 1fr;
   }

   .ttl,
   .ttl2,
   .pic {
      grid-column: auto;
      grid-row: auto;
   }

   .pic,
   .pic2 {
      display: none;
   }
}


/* 事業内容 */
#business {
   background-color: var(--color-surface);
}

#business .layout h3 {
   font-family: var(--font-heading);
   font-size: var(--font-size-heading3);
   margin: var(--spacing-sm) 0;
}

.sub_list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   /* grid-template-columns: 1fr 1fr; */
   /* 1:2 の割合 */
   grid-template-rows: auto auto;
   /* 行の高さは自動 */
   gap: 30px;
   margin: var(--spacing-lg);
   text-align: center;
}
.sub_list img{
   margin:0 auto ;
}
.sub_ttl{
   font-weight: 500;
   line-height: 1.2;
   margin-bottom: 10px;
}
.sub_list a{
   padding: 0;
}

/* スマホ用 */
@media (max-width: 1024px) {
   .sub_list {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      text-align: center;
   }
   .sub_list img{
      margin:  0 auto;
   }

}



/* 施工事例 */
#works {
   background-color: var(--color-surface);
   /* background-color: color-mix(in srgb, var(--color-background) 70%, transparent) */
   margin-top: 30vh;
}

#works_detail {
   background-color: var(--color-surface);
   /* background-color: color-mix(in srgb, var(--color-background) 70%, transparent) */
}

.works {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 20px;
}

.works p {
   text-align: center;
}

.more {
   width: 200px;
   color: #fff;
   border-radius: 30px;
   background-color: var(--color-primary);
   text-align: center;
   margin: 30px 20px 30px auto;
}

.more a {
   display: block;
   padding: 10px;
   color: #fff;
   border-radius: 30px;
   font-family: var(--font-base);
   font-size: var(--font-size-base);
   font-weight: 400;
}

/* 施工事例下層ページ */
/* ↓↓↓↓↓　swiper設定　↓↓↓↓↓ */

/* スライドの動き等速 */
.swiper2 {
   overflow: hidden;
}

.swiper2 .swiper-wrapper {
   transition-timing-function: linear;
}

/* 画像のサイズ調整 */
.swiper2 .swiper-slide img {
   height: auto;
   width: 100%;
}

/* デフォルト矢印を消す */
.swiper-button-next::after,
.swiper-button-prev::after {
   display: none;
}

/* 丸いボタン共通 */
.swiper-button-next,
.swiper-button-prev {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   background-color: rgba(0, 0, 0, 0.4);

   /* 追加で確実に正円にする */
   min-width: 44px;
   min-height: 44px;
   max-width: 44px;
   max-height: 44px;
}

/* ホバー時 */
.swiper-button-next:hover,
.swiper-button-prev:hover {
   background-color: rgba(0, 0, 0, 0.7);
}

/* →「くの字」矢印 */
.swiper-button-next::before {
   content: "";
   display: block;
   width: 12px;
   height: 12px;
   border-right: 2px solid #fff;
   border-bottom: 2px solid #fff;
   transform: rotate(-45deg);
   margin-right: 5px;
}

/* ←「くの字」矢印 */
.swiper-button-prev::before {
   content: "";
   display: block;
   width: 12px;
   height: 12px;
   border-left: 2px solid #fff;
   border-top: 2px solid #fff;
   transform: rotate(-45deg);
   margin-left: 5px;
}

/* 通常のドット */
.swiper-pagination-bullet {
   width: 10px;
   height: 10px;
   background-color: rgba(255, 255, 255, 0.5);
   /* 半透明白 */
   opacity: 1;
   /* デフォルトはopacityで調整されるので1にする */
}

/* アクティブのドット */
.swiper-pagination-bullet-active {
   background-color: #fff !important;
   /* 白に変更 */
   width: 11px !important;
   height: 11px !important;
   border-radius: 50% !important;
}

/* swiper設定　ここまで */
section h3 {
   font-size: var(--font-size-heading3);
}

.flow {
   text-align: center;
   color: var(--color-heading);
}

      /* スマホ用 */
      @media (max-width: 1024px) {
         .works {
            grid-template-columns: repeat(auto-fill, minmax(70% 1fr));
            padding: 5vw;
         }

      }


/* 施工の流れタイムライン */
.timeline {
   position: relative;
   max-width: 1000px;
   margin: 0 auto;
   padding: 20px;
   counter-reset: item;
   /* 連番用カウンター初期化 */
}

/* 縦線 */
.timeline::before {
   content: '';
   position: absolute;
   left: 43px;
   top: 0;
   bottom: 0;
   width: 2px;
   background-color: var(--color-primary);
}

/* タイムライン項目 */
.timeline-item {
   position: relative;
   padding: 10px 20px 10px 60px;
   margin-bottom: 30px;
   counter-increment: item;
   /* カウンターを1増やす */
}

/* 丸いマーカー＋連番 */
.timeline-item::before {
   content: counter(item);
   /* カウンター表示 */
   position: absolute;
   left: 5px;
   top: 10px;
   width: 40px;
   height: 40px;
   background-color: var(--color-primary);
   color: #fff;
   border-radius: 50%;
   text-align: center;
   line-height: 38px;
   font-weight: bold;
   font-size: 18px;
}

.count_ttl {
   font-size: var(--font-size-heading3);
   font-weight: 600;
}

.flex {
   display: flex;
   gap: 30px
}
/* 挿絵対策 */
@media (max-width: 800px) {
   .flex{
      display: block;
   }
   .flex img{
      display: block;
      margin: 20px auto 0px;
   }
}


/* 会社概要 */
#company {
   margin-top: 30vh;
   background-color: var(--color-surface);
   padding-bottom: var(--spacing-xl);
}

.info_list {
   display: flex;
   gap: 30px;
}


#info {
   width: 50%;
   border-collapse: collapse;
}

#info th,
#info td {
   border-bottom: 1px solid #b5b1b1;
   padding: 24px 0;
}

#info th {
   width: 30%;
}

#map {
   width: 50%;
}

#map iframe {
   width: 100%;
}

/* スマホ用 */
@media (max-width: 1024px) {
   .info_list {
      display: block;
   }

   #info {
      width: 90%;
      margin: 0 auto;
   }

   #map {
      width: 90%;
      margin: 30px auto;
   }

}

/* フッター */
footer {
   background-color: var(--color-surface);
   margin-top: 20vh;
}

footer p {
   text-align: center;
   padding: 25px 0;
}

button {
   position: fixed;
   bottom: 20px;
   right: 20px;
}

/* スマホ用 */
@media (max-width: 1024px) {
   footer {
      margin-top: 10px;
   }
}

/* お問い合わせフォーム */
.contact-container {
   max-width: 800px;
   margin: 60px auto;
   padding: 0 20px;
}


.contact-container p {
   font-size: 1.1em;
   color: #555;
   line-height: 1.6;
   margin-bottom: 40px;
}

.form-wrapper {
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
   border-radius: 12px;
   overflow: hidden;
   padding: 40px;
}

.contact-form {
   max-width: 600px;
   margin: 0 auto;
}

.form-group {
   display: flex;
   align-items: center;
   margin-bottom: 15px;
}

.form-group label {
   flex: 1;
   /* ラベルの横幅 */
   padding-right: 10px;
}

.form-group input,
.form-group textarea,
.form-group select,
.form-group div {
   flex: 2;
   /* 残り幅を入力欄が使う */
   padding: 8px;
   box-sizing: border-box;
}

.checkbox {
   padding: 10px;
}

.submit-group {
   padding: 10px;
   text-align: center;
}

input[type="submit"],
input[type="reset"] {
   width: 100px;
   padding: 5px 10px;
}
.note{
   padding: 10px;
}

/* ページトップへ戻るボタン */
.button_top {
   /* ①ボタンの色と文字の色とサイズ */
   background-color: var(--color-primary);
   color: white;
   font-size: 16px;

   /* ②ボタンのサイズと角丸 */
   width: 80px;
   height: 80px;
   border-radius: 50%;

   /* ③次に作る上向きの三角と、TOPの文字の位置を揃えるためのcss */
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 99;
   transition: all .3s ease;
}

.button_top:hover {
   background-color: white;
   color: var(--color-primary);
}

.button_top::before {
   content: "";
   display: block;
   width: 10px;
   height: 10px;
   /* ⑥三角の線と回転角度 */
   border-top: 2px solid white;
   border-right: 2px solid white;
   transform: rotate(-45deg);
}

/* ⑦マウスをかざした時に変化する色の指定 */
.button_top:hover {
   background-color: white;
   color: var(--color-primary);
   border: 1px solid var(--color-primary);
}

/* ⑨マウスをかざした時に変化する色の指定 */
.button_top:hover::before {
   border-top: 2px solid var(--color-primary);
   border-right: 2px solid var(--color-primary);
}

@media screen and (max-width: 600px) {
   .form-group {
      flex-direction: column;
      align-items: stretch;
   }

   .form-group label {
      width: 100%;
      margin-bottom: 5px;
      padding-right: 0;
   }
}