<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>高松市の剪定・庭管理｜有限会社大成造園</title>

<style>
*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

:root{
  --sky:#63c7ff;
  --sky2:#9fe3ff;
  --green:#37c96b;
  --green2:#73df8f;
  --orange:#ff9f43;
  --yellow:#ffd95a;
  --pink:#ff7fb0;
  --purple:#9b7bff;
  --ink:#304d5b;
  --white:#fff;
}

body{
  margin:0;
  font-family:"Yu Gothic","Meiryo",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 10%,rgba(255,255,255,.65) 0 4%,transparent 4.5%),
    radial-gradient(circle at 90% 15%,rgba(255,255,255,.55) 0 3%,transparent 3.5%),
    linear-gradient(180deg,#9fe5ff 0%,#e8fbff 35%,#f6fff2 70%,#fff6dc 100%);
}

/* ===== ヘッダー ===== */
.header{
  padding:22px 18px 10px;
  background:linear-gradient(135deg,#64ccff 0%,#83ddff 34%,#8be69a 72%,#ffe47a 100%);
  border-bottom:6px solid rgba(255,255,255,.9);
}

.header-inner{
  max-width:1200px;
  margin:auto;
  background:rgba(255,255,255,.96);
  border-radius:30px;
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  border:5px solid #fff;
  position:relative;
  overflow:hidden;
}

.header-inner::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:8px;
  background:linear-gradient(90deg,#ff7777,#ffb84d,#ffe45e,#62d77e,#58c7ff,#9b7cff,#ff7fb0);
}

.logo img{
  height:90px;
  width:auto;
  position:relative;
  z-index:1;
}

.address{
  flex:1;
  text-align:center;
  color:#315a68;
  line-height:1.75;
  font-weight:800;
  background:linear-gradient(90deg,#effcff,#f4fff2,#fff9df);
  border-radius:18px;
  padding:10px 16px;
  border:2px dashed #8bd7e8;
  position:relative;
  z-index:1;
}

.tel{
  position:relative;
  z-index:1;
}

.tel a{
  background:linear-gradient(135deg,#3bcd70,#68df91);
  color:#fff;
  padding:15px 25px;
  border-radius:18px;
  font-weight:900;
  display:inline-block;
  border:3px solid #fff;
  transition:.2s;
}

.tel a:hover{
  transform:translateY(-3px) scale(1.03);
}

/* ===== メイン ===== */
.ba-section{
  max-width:1200px;
  margin:30px auto 45px;
  padding:35px;
  border-radius:34px;
  background:linear-gradient(135deg,#49c96f 0%,#64d793 40%,#59c6f3 100%);
  border:5px solid #fff;
  position:relative;
  overflow:hidden;
}

.ba-section::before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  right:-45px;
  top:-50px;
}

.ba-section::after{
  content:"";
  position:absolute;
  width:100px;
  height:100px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  left:-30px;
  bottom:-30px;
}

.ba-title{
  text-align:center;
  font-size:34px;
  margin:0 auto 30px;
  letter-spacing:2px;
  color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.08);
  position:relative;
  z-index:1;
}

.ba-title::after{
  content:"その他の活動・施工";
  display:block;
  width:max-content;
  margin:10px auto 0;
  padding:7px 18px;
  border-radius:999px;
  background:#fff;
  color:#3f8ea3;
  font-size:14px;
  letter-spacing:1px;
}

/* ===== グリッド ===== */
.gallery{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:15px;
  position:relative;
  z-index:1;
}

/* ===== ボタン ===== */
.case-btn{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  flex-direction:column;

  min-height:105px;
  padding:10px 7px;
  border-radius:22px;
  cursor:pointer;

  font-weight:900;
  font-size:13px;
  letter-spacing:.1px;
  line-height:1.45;

  color:#fff;
  border:3px solid rgba(255,255,255,.9);
  background:linear-gradient(135deg,#48c985 0%,#5fd3a0 45%,#58bdf7 100%);
  transition:.25s;
}

.case-btn:hover{
  transform:translateY(-5px) scale(1.03);
  filter:brightness(1.05) saturate(1.05);
}

/* ===== 戻る ===== */
.back-wrap{
  text-align:center;
  margin-top:34px;
  position:relative;
  z-index:1;
}

.back-btn{
  display:inline-block;
  padding:15px 38px;
  background:linear-gradient(135deg,#ffad43,#ff7b72);
  color:#fff;
  border-radius:999px;
  font-weight:900;
  border:3px solid #fff;
  transition:.2s;
}

.back-btn:hover{
  transform:translateY(-3px) scale(1.03);
}

/* ===== モーダル ===== */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(20,35,45,.92);
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.modal img{
  max-width:90%;
  max-height:85%;
  border-radius:18px;
  border:5px solid #fff;
}

.close-btn{
  position:absolute;
  top:20px;
  right:30px;
  font-size:42px;
  cursor:pointer;
  color:#fff;
  font-weight:900;
}

.nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:32px;
  cursor:pointer;
  background:rgba(255,255,255,.92);
  color:#3b7488;
  border-radius:50%;
  width:54px;
  height:54px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:900;
}

.prev{left:20px;}
.next{right:20px;}

/* ===== タブレット ===== */
@media(max-width:900px){
  .gallery{grid-template-columns:repeat(4,1fr);}
}

/* ===== スマホ ===== */
@media(max-width:768px){

  .header{padding:14px 12px 6px;}

  .header-inner{
    flex-direction:column;
    text-align:center;
    gap:14px;
    padding:18px;
    border-radius:24px;
  }

  .logo img{height:72px;}

  .address{
    font-size:14px;
    line-height:1.7;
  }

  .tel{width:100%;}

  .tel a{
    display:block;
    width:100%;
    max-width:240px;
    margin:auto;
    font-size:16px;
    padding:14px;
  }

  .ba-section{
    margin:22px 12px 34px;
    padding:26px 18px;
    border-radius:28px;
  }

  .ba-title{font-size:29px;}

  .gallery{
    grid-template-columns:repeat(3,1fr);
    gap:12px;
  }

  .case-btn{
    min-height:92px;
    font-size:12px;
    border-radius:18px;
    padding:8px 5px;
  }

  .nav-btn{
    width:46px;
    height:46px;
    font-size:28px;
  }

  .prev{left:8px;}
  .next{right:8px;}
}

/* ===== 小さいスマホ ===== */
@media(max-width:480px){
  .logo img{height:64px;}
  .address{font-size:13px;}
  .ba-title{font-size:25px;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .case-btn{
    font-size:11px;
    min-height:86px;
  }
}
</style>
</head>

<body>

<div class="header">
  <div class="header-inner">

    <div class="logo">
      <img src="logo01.png" alt="有限会社大成造園">
    </div>

    <div class="address">
      2026年4月1日 リニューアル<br>
      AIを活用した次世代型ホームページ<br>
      〒761-8023 香川県高松市鬼無町佐藤589-2<br>
        有限会社大成造園 TEL：087-882-3771
    </div>

    <div class="tel">
      <a href="tel:0878823771">今すぐ電話</a>
    </div>

  </div>
</div>

<section class="ba-section">
  <h2 class="ba-title">その他</h2>

  <div class="gallery">
    <div class="case-btn" onclick="openModal(0)">三木町Ｋ邸<br>親子で水かけ</div>
    <div class="case-btn" onclick="openModal(1)">ﾌﾗﾜｰﾌｪｽﾃｨﾊﾞﾙ<br>ﾃﾞｻﾞｲﾝ設計</div>
    <div class="case-btn" onclick="openModal(2)">大滝山<br>石積み修繕</div>
    <div class="case-btn" onclick="openModal(3)">紫雲の広場<br>事件発生</div>
    <div class="case-btn" onclick="openModal(4)">まんのう公園<br>落石防止柵設置</div>
    <div class="case-btn" onclick="openModal(5)">港湾合同庁舎<br>薬剤散布</div>
    <div class="case-btn" onclick="openModal(6)">大滝山<br>崩れ直し</div>
    <div class="case-btn" onclick="openModal(7)">讃高仮設ﾘｰｽへ<br>黒松運搬</div>
    <div class="case-btn" onclick="openModal(8)">まんのう公園<br>遊具設置</div>
    <div class="case-btn" onclick="openModal(9)">ｻﾝｺｰ物流ｾﾝﾀｰ<br>ﾌｪﾆｯｸｽ運搬</div>
    <div class="case-btn" onclick="openModal(10)">中央公園<br>ﾘﾆｭｰｱﾙ工事中</div>
    <div class="case-btn" onclick="openModal(11)">中央公園<br>移植</div>
    <div class="case-btn" onclick="openModal(12)">ボランティア<br>鬼無ぼんさい公園</div>
    <div class="case-btn" onclick="openModal(13)">ﾗｲｵﾝｽﾞｸﾗﾌﾞ<br>清掃奉仕</div>
    <div class="case-btn" onclick="openModal(14)">ﾗｲｵﾝｽﾞｸﾗﾌﾞ<br>献血奉仕</div>
    <div class="case-btn" onclick="openModal(15)">丸亀市Ｈ邸へ<br>景石積載状況</div>
    <div class="case-btn" onclick="openModal(16)">ﾗｲｵﾝｽﾞｸﾗﾌﾞ<br>BBQ奉仕</div>
    <div class="case-btn" onclick="openModal(17)">ﾗｲｵﾝｽﾞｸﾗﾌﾞ<br>清掃奉仕</div>
    <div class="case-btn" onclick="openModal(18)">ﾗｲｵﾝｽﾞｸﾗﾌﾞ<br>公園整備</div>
    <div class="case-btn" onclick="openModal(19)">ﾗｲｵﾝｽﾞｸﾗﾌﾞ<br>北谷勇雄<br>献血奉仕</div>
    <div class="case-btn" onclick="openModal(20)">ボランティア<br>鬼無ぼんさい公園</div>
    <div class="case-btn" onclick="openModal(21)">ﾗｲｵﾝｽﾞｸﾗﾌﾞ<br>清掃奉仕</div>
    <div class="case-btn" onclick="openModal(22)">ﾗｲｵﾝｽﾞｸﾗﾌﾞ<br>大会主催</div>
    <div class="case-btn" onclick="openModal(23)">砂利を水に<br>見立てて<br>金魚を置く</div>
    <div class="case-btn" onclick="openModal(24)">香南町Ｔ邸<br>段差無しｱﾌﾟﾛｰﾁ</div>
    <div class="case-btn" onclick="openModal(25)">鬼無町Ｓ邸<br>段差無しｱﾌﾟﾛｰﾁ</div>
    <div class="case-btn" onclick="openModal(26)">ダイキ香西店<br>ﾌｪﾆｯｸｽ掘り取り</div>
    <div class="case-btn" onclick="openModal(27)">三木町Ｋ邸<br>お子様から</div>
    <div class="case-btn" onclick="openModal(28)">大滝山<br>ﾃﾞｯｷ設置</div>
    <div class="case-btn" onclick="openModal(29)">北谷勇雄<br>平成2年シルビア</div>
  </div>

  <div class="back-wrap">
    <a href="index.html" class="back-btn">TOPページに戻る</a>
  </div>
</section>

<div class="modal" id="modal" onclick="closeModal()">
  <span class="close-btn">&times;</span>
  <div class="nav-btn prev" onclick="event.stopPropagation();prev()">‹</div>
  <img id="modalImg" alt="">
  <div class="nav-btn next" onclick="event.stopPropagation();next()">›</div>
</div>

<script>
const images=[
"1101.png","1102.png","1103.png","1104.png","1105.png",
"1106.png","1107.png","1108.png","1109.png","1110.png",
"1111.png","1112.png","1113.png","1114.png","1115.png",
"1116.png","1117.png","1118.png","1119.png","1120.png",
"1121.png","1122.png","1123.png","1124.png","1125.png",
"1126.png","1127.png","1128.png","1129.png","1130.png"
];

const modal = document.getElementById("modal");
const modalImg = document.getElementById("modalImg");

let index=0;

function openModal(i){
  index=i;
  modal.style.display="flex";
  modalImg.src=images[index];
}

function closeModal(){
  modal.style.display="none";
}

function next(){
  index=(index+1)%images.length;
  modalImg.src=images[index];
}

function prev(){
  index=(index-1+images.length)%images.length;
  modalImg.src=images[index];
}
</script>

</body>
</html>