/* ===== Design tokens (fixed px for pixel match) ===== */
:root{
  --container-w:1207px;

  /* colors */
  --brand:#c84444;
  --brand-deep:#b63e3e;
  --ink:#333333;
  --ink-2:#666666;
  --ink-3:#999999;
  --blue:#6396db;
  --line:#dfdfdf;
  --card:#ffffff;
  --nav-text:#666666;

  /* header heights (per feedback) */
  --header-top-h:107px;    
  --nav-h:49px;           

  /* lead sizes (per feedback) */
  --lead-left-w:708px;
  --lead-right-w:458px;
  --slider-h:499px;

  /* section title */
  --title-h:36px;
  --title-fs:16px;
  --title-dot:18px;
}

/* ===== Reset ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:14px; color:var(--ink); background:#fff;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ===== Header ===== */
.header{
  width:100%; background:var(--brand);
}
.header-top{
  height:var(--header-top-h);
  max-width:var(--container-w); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  position:relative;
  background:url(../images/top_bg_buildings.png) calc(50% + 200px) 0px no-repeat;
}
.brand{display:flex; align-items:center; color:#fff}
.brand-logo{margin-right:12px}
.brand-logo{
  width:34px;height:34px;border-radius:6px;
  background:
    radial-gradient(12px 12px at 65% 40%, #ffffff 0%, rgba(255,255,255,.7) 35%, rgba(255,255,255,0) 36%),
    linear-gradient(135deg,#e21d2f 0%, #e96b6b 48%, #1e88e5 49%, #66a6ff 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.25) inset;
}
.brand-title{font-size:26px;font-weight:700;line-height:1;margin-left:25px;margin-right:10px;}
.brand-sub{font-size:12px;opacity:.95;line-height:1.2}
.langs{display:flex;align-items:center}
.langs > * + *{margin-left:8px}
.lang-pill{
  font-size:12px;color:#fff;
  border-radius:12px;padding:6px 14px;
  margin-left:14px;
  background: rgba(255, 255, 255, 0.2);
}
.search{display:flex;align-items:center;position: relative;}
.search input{
  width:220px;height:30px;border:none;border-radius:16px;
  padding:0 34px 0 12px; border:solid 1px #463635; color:#000; outline:none;background:rgba(255,255,255,.01);
}
.search input::placeholder{color:#000;}
.search .icon{width:16px;height:16px;opacity:.9;position:absolute; right:10px; }
.search .search-btn{
  width: 30px;
  height: 30px;
  background: none;   
  border: none;       
  padding: 0;         
  cursor: pointer;
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-nav{
  background:#fff; 
}
.nav-inner{
  max-width:var(--container-w); margin:0 auto; height:100%;
  display:flex; align-items:center; padding:0 10px;
  justify-content: space-evenly;
}
.nav-item + .nav-item{margin-left:36px}
.nav-item{
  color:var(--nav-text); font-size:24px; height:100%;
  display:flex; align-items:center; position:relative; padding:0 6px;
}
.nav-item.active{color:var(--brand)}
.nav-item.active:after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--brand)
}

/* ===== Container ===== */
.mainbg{background: url(../images/main_bg.jpg) no-repeat center 0px;padding-top:16px;}
.container{width:var(--container-w); margin:0px auto 60px;}
.contview{width:var(--container-w);margin:0px auto; }
.header-top-warp{width:100%;}
.header-nav-warp{width:100%;background: #fff;border-bottom:1px solid var(--line);
  border-top:2px solid var(--line);height:var(--nav-h);}
.header-top{width:var(--container-w);margin:0px auto;}
.header-nav{width:var(--container-w);margin:0px auto;height:100%;}
.card{
  background:var(--card); border:1px solid var(--line); 
}

/* ===== Lead (slider + right news) ===== */
.olead{background: #fff;padding:31px 9px 0px 13px;border:solid 1px var(--line)}
.lead{display:grid; grid-template-columns: var(--lead-left-w) var(--lead-right-w)}
.lead > * + *{margin-left:16px}

/* slider */
.slidercard{border:none;}
.slider{position:relative; height:var(--slider-h); overflow:hidden; border-radius:0px}
.slide{position:absolute; top:0; right:0; bottom:0; left:0; opacity:0; transition:opacity .45s ease;pointer-events: none;}
.slide.active{opacity:1;pointer-events: all;}
.slide img{width:100%; height:100%; object-fit:cover}
.slide-caption{
  position:absolute; left:0; right:0; bottom:0; color:#fff;
  padding:16px 18px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,0));
  font-weight:600; letter-spacing:.2px
}
.slider-dots{position:absolute; right:14px; bottom:12px; display:flex}
.slider-dots button + button{margin-left:8px}
.slider-dots button{
  width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.85);
  background:transparent; padding:0; cursor:pointer;border: none;background: #fff;
}
.slider-dots button.active{background:#dd461d}

/* right news */
.lead-right .xwsection-title{
  background:#f7f8f8;
  
  border-bottom:1px solid var(--line)}
.news-list{padding:10px 12px}
.news-item{display:flex; padding:10px 0; }
.news-item .dot{margin-right:10px}
.news-item:last-child{border-bottom:none}
.news-item .dot{width:6px;height:6px;border-radius:50%;background:#ff4d4f;margin-top:7px}
.news-item .title{font-weight:700;color:#2b2b2b;line-height:1.45;font-size:18px;}
.news-item .desc{color:#767676;font-size:14px;margin-top:4px;line-height:1.5}

/* ===== Section title (per feedback) ===== */


.xwsection-title{
  padding:20px 13px; font-size:var(--title-fs); font-weight:600; color:#3a3a3a;
  border-bottom:1px solid var(--line); background:#fff;
}
.lead-right .xwsection-title .title{
font-size:23px;line-height:1.56;

}

.lead-right .xwsection-title .desc{
  font-size:17px;line-height:31px;
  margin-top:10px;
  }

  .section-title{
    height:var(--title-h); display:flex; align-items:center;
    padding:0 0px 0 8px; font-size:23px; font-weight:600; color:#3a3a3a;
     background:#fff;

  }
.section-title .dot{
  width:var(--title-dot); height:var(--title-dot); border-radius:50%; background:var(--blue);
  margin-right:18px; flex-shrink:0;
  margin-left:18px;
  flex: 0 0 auto;  
}

.section-title .line{
  flex: 1 1 auto;               
  height: 1px;                
  background: #dadada;
  }

/* ===== Life guide ===== */
.life .icons{display:flex;padding:14px 14px 18px;justify-content:center}
.icon-card + .icon-card{margin-left:22px}
.icon-card{
  width:150px;height:146px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#14407b;
}
.icon-card img + span, .icon-card span + img{margin-top:8px}
.icon-card img{width:84px;height:76px;}
.icon-card span{font-size:23px}

/* ===== Feature + pills ===== */
.feature-area{display:grid; grid-template-columns: 1fr 543px;
  border:solid 1px var(--line);padding:31px 10px 31px 16px;

}

.feature-area .feature{height:414px;width:610px;}
.feature-area .card{border: none;}

.feature-area > * + *{margin-left:16px}
.feature .thumb{height:220px; position:relative; overflow:hidden; border-radius:4px 4px 0 0}
.feature .thumb img{width:100%; height:100%; object-fit:cover}
.feature .legend{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0))
}
.feature-area .pills{padding:0px}
.feature-area .pill{
  height:52px; display:flex; align-items:center; padding-left:22px; margin:8px 0;
  background:linear-gradient(#dce1ea,#fff); border:1px solid #cfcfcf; border-radius:26px;
  color:#6b6b6b;font-size:18px;color:#414141;
  background:url(../images/fealitiemback.png) no-repeat;
  border:none;
}
.feature-area .more-wrap{padding:0 12px 12px}
.feature-area .more{color:#414141; font-size:20px; cursor:pointer}
.feature-area .more a{color:#414141;}

/* ===== Prefecture + Recommend ===== */
.pref-rec{display:grid; grid-template-columns: 1fr 553px;
border:solid 1px var(--line);padding:23px 10px 0px 10px;
}
.pref-rec > * + *{margin-left:31px}
.pref-card{
  padding:10px 0 0 10px;
}
.pref-tags{display:flex; flex-direction:column}
.pref-tag + .pref-tag{margin-top:8px}
.pref-tag{
  width:120px; padding:6px 10px; background:#eef6ff; border:1px solid #d6e7ff;
  color:#4384d9; border-radius:16px; text-align:center; font-size:13px
}
.map{
  height:320px; border:1px dashed #e0d8cf; border-radius:6px; position:relative; background:#fffdf9;
}
.map:before{
  content:"山東省 臨沂市 地図（ダミー）"; color:#c6a98b; font-size:12px; position:absolute; left:12px; top:10px
}
.map:after{
  content:""; position:absolute; left:18px; right:18px; top:24px; bottom:18px;
}
.rec-card .content{padding:12px}
.rec-card .rec-item{padding:10px 0;font-size:18px;}
.rec-card .rec-item:last-child{border-bottom:none}
.rec-card .rec-item a{color:#444; font-weight:600}
.rec-card .rec-item .sub{font-size:14px; color:#888; margin-top:6px}


.rec-card .thumbpic{width:500px;height:282px;position:relative;margin-top:20px;}
.rec-card .pic{width:500px;height:282px;}
.rec-card .pic img{width:500px;height:282px;}
.rec-card .tit{font-size:19px;color:#fff;width: 100%;line-height:31px;position:absolute;bottom:0px;padding:30px 10px 10px 10px;text-align:center;background:linear-gradient(to top,rgba(0, 0, 0, .88),rgba(0, 0, 0, 0))}
.rec-card .tit a{color:#fff;}
/* ===== 2x2 sections ===== */
.grid-2x2{display:grid; grid-template-columns: 1fr 1fr;border:solid 1px #e1e1e1;padding:16px 18px;background:#fff;}
.grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 32px; 
  grid-row-gap: 16px;  
}

.grid-2x2 .card{background:#f7f8f8;}
.grid-2x2 .section-title{background: none;margin:15px 0px;padding: 0 0px 0 16px;}
.grid-2x2 .section-title .line{display:none;}

.block .content{padding:12px;padding-top:0px;}


.grid-2x2 .thumbpic{width:536px;height:303px;position:relative;margin-top:20px;}
.grid-2x2 .pic{width:536px;height:303px;}
.grid-2x2 .pic img{width:536px;height:303px;}
.grid-2x2 .tit{font-size:19px;color:#fff;width: 100%;line-height:31px;position:absolute;bottom:0px;padding:30px 10px 10px 10px;text-align:center;background:linear-gradient(to top,rgba(0, 0, 0, .88),rgba(0, 0, 0, 0))}
.grid-2x2 .tit a{color:#fff;}

.block .thumb{height:180px; overflow:hidden}
.block .thumb img{width:100%; height:100%; object-fit:cover}
.block .list{margin-top:10px}
.grid-2x2 .block .list .li{font-size:18px;padding:10px 0; border-bottom:1px solid #f0f0f0; color:#444;}
.grid-2x2 .block .list .li:last-child{border-bottom:none}
.block .brief{font-size:13px;color:#888;margin-top:6px;font-weight:400}

/* ===== Links ===== */
.links .content{padding: 21px 21px}
.links .section-title{border-bottom:solid 1px var(--line);height: 59px;}
.links .section-title .line{display:none;}
.link-tags{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap: 19px;}
.link-tag{background:#f7f7f7;border:1px solid #f0f0f0;color:#555}