@charset "UTF-8";
:root{
  --main:#7c5335; --accent:#7aa680; --bg:#faf7f3; --card:#fff; --text:#333;
  --fz-h1:clamp(2.2rem,4vw+1rem,3.2rem); --radius:10px; --shadow:0 4px 12px rgba(0,0,0,.06);
}
*{
	box-sizing:border-box;margin:0;padding:0;
}
body{
	font-family:"Noto Sans JP",sans-serif;background:var(--bg);color:var(--text);line-height:1.8;-webkit-font-smoothing:antialiased;font-size:15px;
}
h1,h2,summary,button{
	font-family:Poppins,"Noto Sans JP",sans-serif;
}

/* HERO */
.hero-typo{
	position:relative;height:95vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--bg)
}
.marquee{
	position:absolute;top:40%;left:0;width:200%;display:flex;white-space:nowrap;pointer-events:none;animation:scroll 18s linear infinite;font:900 18vw/1 Poppins, sans-serif;color:#ece8e3;
}
.marquee span{padding-right:2vw}
.hero-copy{
	position:relative;z-index:1;max-width:680px;padding:0 1.2rem;
}
.hero-copy h1{
	font:600 2.4rem/1.25 Poppins,"Noto Sans JP",sans-serif;
}
.cta.primary{
	display:inline-block;margin-top:1.4rem;padding:.75rem 1.6rem;background:var(--main);color:#fff;border-radius:var(--radius);font-weight:600;transition:.2s;text-decoration:none;
}
.cta.primary:hover{
	transform:scale(1.05);box-shadow:0 6px 16px rgba(0,0,0,.2);
}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* GLOBAL SECTION */
section{
	max-width:1050px;margin:auto;padding:0 1rem 4rem;
}

/* DETAILS */
details{
	background:var(--card);border-radius:var(--radius);margin:1.2rem 0;box-shadow:var(--shadow);overflow:hidden;transition:.25s
}
details[open]{transform:translateY(-2px)}
summary{
	cursor:pointer;list-style:none;display:flex;align-items:center;padding:1.2rem .9rem;font-size:1.15rem;font-weight:600;gap:.5rem
}
summary svg{
	margin-left:auto;transition:.3s
}
details[open] summary svg{transform:rotate(180deg)}
details[open] summary{
	background:linear-gradient(90deg,rgba(122,166,128,.15),transparent);
}

.content{
	padding:1.2rem 1.3rem 1.8rem;font-size:.95rem;
}

/* GRID & CARD */
.card-grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1.5rem;
}
.card{
	background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:.25s
}
.card:hover{transform:translateY(-4px)}
.card img{
	width:100%;height:auto;display:block;
}
.card p{
	padding:.75rem;font-size:.88rem;font-weight:500;
}




/* ◆ 画像コンテナ周り ◆ */
.image-containers{
  margin: 1rem 0;
  text-align: center;
}
.image-containers img{
  max-width: 100%;
  height: auto;
}
.deck-example{
  text-align: center;
  margin: 1rem 0;
}
.example-inquiry-link{
  text-decoration: none;
}

/* ---------------------------------------------------- */
/* ◆ ボタン周り：大きめ＆インパクトあるデザイン ◆ */

/* 1) もっと施工事例を見るボタン(例) */
.toggle-btn-showcase{
  display: inline-block;
  font-size: 1.3rem;         /* 文字をさらに大きく */
  padding: 1rem 2rem;       /* ボタンを大きく */
  font-weight: bold;
  color: #fff;
  background: #45a049;
  border: none;
  border-radius: 30px;       /* 丸みを強調 */
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.toggle-btn-showcase:hover{
  background: #45a049;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}
.toggle-btn-showcase:active{
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* 2) その他のボタン例 (問い合わせ/詳細ボタンなど) */
.example-inquiry-button,
.details-button{
  font-size: 1.2rem;
  padding: 0.8rem 1.5rem;
  font-weight: bold;
  color: #fff;
  background: #4CAF50; /* 必要なら個別色を指定 */
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-decoration: none; /* aタグ用 */
  transition: all 0.3s ease;
  display: inline-block; /* 横幅自動調整 */
  margin: 1rem 0;        /* ボタン同士の上下隙間 */
}
.example-inquiry-button:hover,
.details-button:hover{
  background: #45a049;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}
.example-inquiry-button:active,
.details-button:active{
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* 中央揃えにしたい場合：親要素に text-align:center; または display:block + margin:0 auto; */
/* 例: このクラスを使うとボタンを中央寄せ */
.center-button-wrapper{
  text-align: center;
}

/* ---------------------------------------------------- */
/* ◆ 見出しと説明文 ◆ */
.category-title{
  font-size: 1.2rem;
  margin: 0.8rem 0 0.4rem 0;
  text-align: center;
  text-decoration: underline;
  line-height: 1.3;
}
.category-description{
  font-size: 0.95rem;
  color: #666;
  text-align: center;
  margin-bottom: 1rem;
}

/* ---------------------------------------------------- */
/* ◆ 3列の画像コンテナ：スマホでも崩れず3列固定 ◆ */
.category-container{
  display: flex;      /* 横並び */
  flex-wrap: wrap;    /* wrapしても3列を維持したい場合に後述CSSでサイズ固定 */
  margin: 0 -10px;    /* 子要素マージン相殺 */
}
.category-item{
  flex: 1 1 calc(33.333% - 20px); /* 常に3列分割 */
  margin: 10px;
  box-sizing: border-box;
}
.category-item img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px; /* 角丸 */
}

/* 画面幅がどんなに狭くても3列を維持したい → 下記のレスポンシブ無効化 */
/* よくある2列化 or 1列化をやめるため、@mediaの指定を削除または上書き */
@media (max-width: 768px) {
  .category-item {
    /* flex: 1 1 calc(33.333% - 20px) !important; */
    /* または、あえてメディアクエリを削除してもOK */
  }

.category-container{
    margin: 0 -5px;  /* 親のマージンを更に減らす */
  }
  .category-item{
    flex: 1 1 calc(33.333% - 10px); /* 余白の合計を少なめに */
    margin: 5px;                    /* 1つずつのマージンを小さく */
  }

  /* タイトル・説明文を小さく＆マージン縮小 */
  .category-title{
    font-size: 0.7rem;        /* さらに小さめ */
    margin: 0.4rem 0 0.2rem;  /* 上下の余白を圧縮 */
    line-height: 1.2;         /* 行間も詰める */
  }
  .category-description{
    font-size: 0.4rem;       /* 小さめ */
    margin-bottom: 0.5rem;    /* 下余白を短めに */
    line-height: 1.2;
  }
}

/* minigaraly*/
.mini-gallery{
	display:flex;gap:8px;margin:1.2rem 0;overflow-x:auto;scroll-snap-type:x mandatory
}
.mini-gallery figure{
	flex:0 0 auto;width:52vw;max-width:380px;border-radius:10px;overflow:hidden;scroll-snap-align:center
}
.mini-gallery img{
	width:100%;height:100%;object-fit:cover;filter:brightness(.93);transition:.3s
}
.mini-gallery img:hover{
	filter:brightness(1.05);
}


/* 横スクロールギャラリー */
.staff-slide{
	overflow:hidden;margin:1.4rem 0;
}
.staff-slide-track{display:flex;gap:12px;width:max-content;animation:artScroll 20s linear infinite}
.staff-slide-track figure{
	flex:0 0 auto;width:360px;
}
.staff-slide-track img{
	width:100%;height:240px;object-fit:cover;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.08);filter:brightness(.9);transition:.3s
}
.staff-slide-track img:hover{
	filter:brightness(1);
}
.staff-slide-track figcaption{
	text-align:center;font-size:.75rem;color:#555;margin-top:.3rem;
}
@keyframes artScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} 


/* Contact section specific */
.formrun-section{
	background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.8rem;margin-top:1rem;
}
.formrun-section h2{
	font-size:1.4rem;font-weight:600;margin-bottom:.6rem;
}
.formrun-section p{
	font-size:.9rem;margin-bottom:1.2rem;
}
.cta-buttons{
	display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.2rem;
}
.custom-btn{
	display:flex;align-items:center;justify-content:center;padding:.6rem 1.1rem;border-radius:var(--radius);font-size:.9rem;color:#fff;text-decoration:none;font-weight:600;box-shadow:var(--shadow)
}
.custom-btn--tel{
	background:#7c5335;
}
.custom-btn--mail{
	background:#7aa680;
}
.custom-btn--line{
	background:#00b900;
}
.btn-desc{
	font-size:.75rem;color:#555;text-align:center;margin-top:.3rem;
}
.line-icon{
	width:20px;height:20px;margin-right:.4rem;
}

.accordion-section{
	margin-top:2.6rem;
}
.accordion-item{
	border:1px solid #ddd;border-radius:var(--radius);margin-bottom:1rem;overflow:hidden;
}
.accordion-title{
	background:#f5f5f5;width:100%;text-align:left;padding:.8rem 1rem;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center
}
.accordion-content{
	max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 1rem;
}
.accordion-item.open .accordion-content{
	padding:1rem;
}
.example-block{
	background:#fafafa;border-radius:var(--radius);padding:.8rem;margin-bottom:.8rem;position:relative;
}
.copy-btn{
	position:absolute;right:.8rem;top:.8rem;border:none;background:var(--accent);color:#fff;font-size:.7rem;padding:.3rem .6rem;border-radius:var(--radius);cursor:pointer;
}

.bordered-box{
	background:#fff;border-left:4px solid var(--main);border-radius:var(--radius);padding:1.6rem;margin-top:2.6rem;box-shadow:var(--shadow)
}
.custom-flex-title{
	font-size:1.2rem;font-weight:600;margin-bottom:.6rem;
}
.cta-text{
	font-size:.9rem;margin-bottom:1rem;
}

/* Simulator */
.container{
	background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem;margin-top:1.8rem;
}
.sim-form{
	display:grid;gap:.8rem;max-width:420px;
}
.sim-form input, .sim-form select{
	width:100%;padding:.4rem;border:1px solid #ccc;border-radius:6px;font-size:.9rem;
}
.sim-result{
	margin-top:1rem;
}
.sim-result h3{
	font-size:1.25rem;font-weight:600;color:var(--main)
}
.bullet{
	list-style:"✔ ";margin-left:1rem;font-size:.9rem;
}


/* SUB ACCORDION */
button.more{
	margin:1.3rem auto 0;border:none;background:var(--accent);color:#fff;padding:.55rem 1.2rem;border-radius:var(--radius);cursor:pointer;font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:.4rem
}
button.more svg{transition:.3s}
button.more.open svg{transform:rotate(180deg)}
.subbox{
	max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .35s ease
}
.subbox.open{opacity:1}
.subbox-inner{
	padding:1rem 0 0;font-size:.9rem;
}
ul.check{
	margin:.5rem 0 0 1rem;list-style:"✔ "
}

/* FORM */
form{
	display:flex;flex-direction:column;gap:.7rem;margin-top:1rem;
}
input,textarea{
	padding:.7rem;border:1px solid #ccc;border-radius:var(--radius);font-size:.9rem;width:100%;
}
button.send{
	background:var(--main);color:#fff;border:none;padding:.7rem;border-radius:var(--radius);font-family:Poppins,sans-serif;cursor:pointer;font-size:.9rem;
}

/* TAGLINE */
#tagline{
	background:linear-gradient(90deg,rgba(122,166,128,.15),transparent);text-align:center;padding:3.2rem 1.2rem 2.8rem;
}
#tagline p{
	font-size:1.05rem;line-height:1.9;max-width:900px;margin:auto;
}
.tagline-main{
	font-size:1.15rem;font-weight:600;color:var(--main)
}
.tagline-sub{
	font-weight:500;color:#555;
}

/* MAP */
.map{
	height:260px;background:#e9e9e9;margin-top:1.2rem;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#777;
}



/* === Gallery band === */
#gallery-band{
  overflow:hidden;
  padding:0;
  background:#f1eee9;
  margin-top:3rem;
}
#gallery-band .scroller{
  display:flex;
  gap:8px;
  /* 幅は flex の内容に合わせ max-content */
  width:max-content;
  animation:galleryScroll 40s linear infinite;
}
#gallery-band figure{
  flex:0 0 auto;
  width:48vw;              /* 2 枚分が画面に入るイメージ */
  max-width:420px;
  border-radius:10px;
  overflow:hidden;
}
#gallery-band img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.95);
  transition:.3s;
}
#gallery-band img:hover{
	filter:brightness(1.05);
}
@keyframes galleryScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(calc(-50%))} /* 画像を 2 周期分複製するので 50% */
}


/* マウスホバー時に一時停止 */
#gallery-band:hover .scroller{animation-play-state:paused}



#accordion{
	position:relative;
}
#accordion::before,#accordion::after{
  content:\"\";position:absolute;top:2rem;width:72px;height:72px;background:url(logo-mark.svg) no-repeat center/contain;opacity:.08;
}
#accordion::before{
	left:-90px;
}   /* 左の余白 */
#accordion::after{
	right:-90px;
}   /* 右の余白 */
@media(max-width:1150px){#accordion::before,#accordion::after{
	display:none;
}}




/* FOOTER */
footer{
	text-align:center;padding:2.2rem 1rem;background:#eee;font-size:.8rem;font-weight:500;
}


/* MEDIA */
/* =========================================================
   Mobile Readability Booster  (max-width: 600px)
   ───────────────────────────────────────────────────────── */
@media (max-width: 600px){

  /* 1) 文字サイズ・行間・字間  -------------------------------- */
  body{
    font-size: 17px;       /* 少し大きめ */
    line-height: 1.95;     /* 広めの行間 */
    letter-spacing: .03em; /* ほんの少し字間を開ける */
    -webkit-text-size-adjust: 100%;  /* iOS の自動拡大を抑止 */
  }

  /* 2) セクション左右パディングを広げ、画面端の圧迫感を解消 ---- */
  section,
  .content,
  .container,
  .formrun-section{
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  /* 3) 段落・リスト間にゆとり -------------------------------- */
  p,
  li{
    margin-bottom: 1rem;   /* 従来 0 → 1rem */
  }
  ul.check li{
	line-height: 1.8;
}

  /* 4) 見出しは大きく、前後余白でメリハリ --------------------- */
  h1{
	font-size: 1.9rem; line-height: 1.3; margin: 1.5rem 0 .9rem;
}
  h2{
	font-size: 1.4rem; margin: 1.4rem 0 .8rem;
}
  h3{
	font-size: 1.2rem; margin: 1.3rem 0 .7rem;
}
  h4{
	font-size: 1.05rem;margin: 1.2rem 0 .6rem;
}




}
  /* 画面が極端に狭いときは 1 カラム */
  @media (max-width: 380px){
    .card,
    .category-item{ flex: 1 1 100%; }
  }

  /* 6) ギャラリー帯の画像を “縦横バランス” 良く表示 --------- */
  #gallery-band figure{
    width: 80vw;           /* サムネが細長くならない幅 */
    max-width: 320px;
  }
  #gallery-band img{
    height: 180px;         /* 縦比率を固定して長細さを防止 */
    object-fit: cover;
  }

  /* 7) 横スクロールのスタッフ／ミニギャラリーも高さ統一 ----- */
  .staff-slide-track img{
	height: 180px;
}
  .mini-gallery figure{ width: 80vw; }
  .mini-gallery img{
	height: 180px; object-fit: cover;
}

  /* 8) フォーム要素を指一本で触れるサイズに ------------------- */
  input, select, textarea, button.send{
    font-size: 1rem;
    padding: .9rem .8rem;
  }
  summary{
	padding: 1.1rem 1.4rem; font-size: 1.05rem;
}

  /* 9) CTA ボタンは画面幅いっぱいで押しやすく --------------- */
  .cta-buttons{ flex-direction: column; }
  .custom-btn{
	width: 100%; margin-bottom: .8rem;
}
  .custom-btn:last-child{
	margin-bottom: 0;
}

  /* 10) 施工事例サムネのキャプションを読みやすい位置に ------ */
  .category-title{
    font-size: .95rem;
    margin-top: .6rem;
  }
  .category-description{
    font-size: .8rem;
    line-height: 1.6;
  }
}
@media(prefers-reduced-motion:reduce)
{.marquee{animation:none}}