*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#f3f1e8;font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;color:#111}
body{min-width:320px;background-color:#f3f1e8;background-image:radial-gradient(rgba(110,96,72,.10) .7px,transparent .8px),radial-gradient(rgba(255,255,255,.75) .8px,transparent .9px),linear-gradient(135deg,rgba(120,105,80,.035),rgba(255,255,255,.02));background-size:7px 7px,11px 11px,100% 100%;background-position:0 0,3px 5px,0 0}
a{color:inherit;text-decoration:none}
.site{width:min(1000px,100%);margin:0 auto;background:rgba(255,255,255,.72);box-shadow:0 0 35px rgba(70,60,45,.08)}
.intro{height:200px;padding:25px 28px 0;background:#fffcc0}
.logo{display:block;width:245px;height:auto}
.intro-text{margin:14px 0 0;font-size:15px;line-height:1.9;letter-spacing:.12em}
.hero{
  position:relative;
  width:100%;
  max-width:1000px;
  height:600px;
  margin:0 auto;
  overflow:hidden;
}
.hero>img{
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:auto;
  height:auto;
  max-width:none;
  z-index:1;
}
.hero-photo-layer{
  position:absolute;
  z-index:1;
}
.hero-fade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:24%;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.1) 25%,rgba(255,255,255,.72) 72%,#fff 100%);
  pointer-events:none;
  z-index:2;
}
.hero-title-wrap{
  position:absolute;
  inset:0;
  padding:0 28px 54px;
  display:flex;
  z-index:3;
  flex-direction:column;
}
.townscape-layer{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:600px;
  z-index:10;
  pointer-events:none;
  line-height:0;
}
.townscape-layer img{
  display:block;
  width:100%;
  height:600px;
  max-width:none;
  object-fit:contain;
  object-position:center bottom;
}
.hero-title-wrap.pos-x-left{align-items:flex-start;text-align:left}.hero-title-wrap.pos-x-center{align-items:center;text-align:center}.hero-title-wrap.pos-x-right{align-items:flex-end;text-align:right}.hero-title-wrap.pos-y-top{justify-content:flex-start}.hero-title-wrap.pos-y-center{justify-content:center}.hero-title-wrap.pos-y-bottom{justify-content:flex-end}
.hero-title-wrap h1{margin:0;font-weight:500;letter-spacing:.16em;line-height:1.45;color:var(--title-color,#111)!important}
.hero-title-wrap p{margin:10px 0 0;font-family:Arial,sans-serif;font-size:14px;letter-spacing:.18em}
.section{padding:68px 26px 0;background:rgba(255,255,255,.62)}
.section-heading{display:flex;align-items:center;gap:15px;color:#4f801f;font-size:17px;letter-spacing:.22em}
.section-heading:after{content:"";height:1px;background:#7c9d4f;flex:1}
.section-heading span{white-space:nowrap}
.about{padding-bottom:45px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:68px;margin:42px 30px 0}
.card{height:292px;border:3px solid;border-radius:7px;overflow:hidden;background:#fff;text-align:center;display:block}
.card-member{border-color:#55aa5c}.card-org{border-color:#5579ad}.card-message{border-color:#32aaa0}
.card-head{height:66px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:Arial,sans-serif;font-size:24px;letter-spacing:.12em}
.card-member .card-head{background:#55aa5c}.card-org .card-head{background:#5579ad}.card-message .card-head{background:#32aaa0}
.card-body{padding:31px 22px 20px}
.card-body h2{margin:0 0 34px;font-size:19px;font-weight:500;letter-spacing:.16em}
.card-body p{margin:0 0 25px;font-size:13px;line-height:2.05;letter-spacing:.1em}
.event{padding-bottom:95px;background:rgba(255,255,255,.62)}
.event-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start;margin-top:39px;padding:0 8px}
.event-copy{padding-top:0;font-size:14px;line-height:2.05;letter-spacing:.13em}
.event-copy>p:first-child{margin:0 0 28px}
.event-copy h2{margin:0;font-size:24px;font-weight:500;letter-spacing:.18em;white-space:nowrap}.content-title-position{position:relative;width:100%;min-height:110px;display:flex;box-sizing:border-box;padding:8px 0}.content-title-position h2{color:var(--title-color,#111)!important}.content-title-position.pos-x-left{justify-content:flex-start;text-align:left}.content-title-position.pos-x-center{justify-content:center;text-align:center}.content-title-position.pos-x-right{justify-content:flex-end;text-align:right}.content-title-position.pos-y-top{align-items:flex-start}.content-title-position.pos-y-center{align-items:center}.content-title-position.pos-y-bottom{align-items:flex-end}
.event-rule{height:1px;background:#888;width:370px;max-width:100%;margin:5px 0 24px}
.event-copy p{margin:0 0 24px}
.event-image-wrap{display:flex;justify-content:flex-end;align-items:flex-start;padding-top:0}
.event-image-wrap img{display:block;width:100%;max-width:420px;height:auto}
@media(max-width:760px){
 .intro{height:auto;min-height:165px;padding:20px 20px 25px}
 .logo{width:210px}
 .intro-text{font-size:13px}
 .section{padding-left:18px;padding-right:18px}
 .cards{grid-template-columns:1fr;gap:24px;margin:30px 20px 0}
 .card{height:auto;min-height:260px}
 .event-grid{grid-template-columns:1fr;gap:25px;padding:0 3px}
 .event-image-wrap{justify-content:center}
 .event-copy h2{white-space:normal;font-size:21px}
 .hero-title-wrap{bottom:30px;padding:0 15px}
}
.news{padding-bottom:110px;border-top:0}
.news-inner{margin:12px 8px 0;padding:0}
.news-inner .content-title-position{margin:0;min-height:0}.news-inner h2{margin:0;font-weight:500;letter-spacing:.18em;line-height:1.5;transform-origin:left top}
.news-content{font-size:14px;line-height:2.15;letter-spacing:.08em;white-space:normal;border-top:0;padding-top:0;max-width:900px}
@media(max-width:760px){.news{padding-bottom:75px}.news-inner{margin-top:10px}.news-content{font-size:13px}}
