/* =========================================================
   三浦半島みらいミーティング — site styles
   Tone: 力強い太めの角ゴシックで引き締めつつ、ロゴのカジュアルさを残す
   ベース背景 = 白 ＋ 薄ベージュ（ロゴのベージュを淡く）の2色を交互に
   文字 = 黒 ／ 差し色・あしらい = ロゴのグリーン
   ボタン・フッター = 黒（hoverでロゴの淡いブルーにふわっと）
   端末標準フォントのみ（Webフォント不使用：神奈川県CMSの取込制約に準拠）
   Mobile-first, vanilla CSS
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* 差し色：公式ロゴのグリーン（主アクセント／あしらい・アイキャッチ） */
  --green: #009043;          /* ロゴのグリーン */
  --green-ink: #00773a;      /* テキスト/リンク用（白・ベージュ地でAA） */
  --green-soft: #e2f1e8;     /* 淡いグリーン背景 */
  --green-softer: #eef7f1;
  --green-line: rgba(0, 144, 67, .42);

  /* ボタンhover：公式ロゴの淡いブルー */
  --blue-light: #8fcfec;     /* ロゴの淡いブルー（ボタンhover） */
  --blue-light-soft: #c4e6f6;
  --blue-ink: #0a6f97;       /* 補助的な濃いブルー（必要箇所のみ） */

  /* ロゴのブルー（グリーンに代わる差し色・hover） */
  --brand-blue: #3c84c0;       /* ロゴのブルー本体 */
  --brand-blue-ink: #2c6699;   /* テキスト用に少し濃く（白・ベージュ地でAA） */
  --brand-blue-soft: #e4eef7;  /* 淡いブルー背景（タグ等） */

  /* 黒：ボタン／フッター／引き締め */
  --black: #111111;
  --black-2: #1c1c1c;

  /* base：白 ＋ ロゴのベージュを薄くした2色を交互に */
  --bg-white: #ffffff;       /* 背景A：白 */
  --bg-beige: #f4efe3;       /* 背景B：薄ベージュ（ロゴのベージュを淡く） */
  --paper: #ffffff;          /* カード等：白 */
  --beige-deep: #ece3d0;     /* やや濃いベージュ（差し色面・帯） */
  --line: #e7e1d4;           /* 罫線（ヘアライン） */
  --line-2: #ded6c4;         /* やや濃い罫線 */

  /* ink（黒） */
  --ink: #141414;
  --ink-2: #454545;
  --ink-3: #7a7468;

  /* 旧名の互換（下層ページ等で参照）：グリーン系へ寄せる */
  --blue: var(--green);
  --bg: var(--bg-beige);
  --beige: var(--bg-beige);
  --beige-2: var(--beige-deep);
  --sand: var(--line);
  --navy: var(--black);
  --coral: var(--green);
  --blue-soft: var(--green-soft);
  --blue-softer: var(--green-softer);
  --blue-line: var(--green-line);

  /* type — 県CMSはWebフォント(woff等)を取り込めないため端末標準フォントのみ。
     英字：Times New Roman ／ 日本語ゴシック：游ゴシック ／ 日本語明朝：游明朝 */
  --font-en: "Times New Roman", "Times", "Noto Serif", "Liberation Serif", serif;
  --font-jp: "Yu Gothic", "YuGothic", "Yu Gothic Medium", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
  --font-round: var(--font-jp); /* 旧名互換（丸ゴは廃止し角ゴに統一） */
  --font-script: var(--font-en); /* 旧名互換 → 英字 */
  /* 日本語明朝 */
  --font-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", "Meiryo Mincho", serif;

  /* layout */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 14px;
  --radius-sm: 10px;
  --header-h: 66px;
  --section-block: clamp(60px, 7vw, 100px);

  /* effect */
  --shadow-sm: 0 2px 8px rgba(20, 20, 20, .06);
  --shadow-md: 0 14px 34px rgba(20, 20, 20, .12);
  --shadow-strong: 0 12px 26px rgba(17, 17, 17, .22);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  font-family: var(--font-jp);
  color: var(--ink);
  background: var(--bg-white);
  line-height: 1.85;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-align: justify;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-jp); font-weight: 700; line-height: 1.36; letter-spacing: .01em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 768px) {
  html { scroll-padding-top: 60px; }
}

/* ---------- Helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--black); color: #fff; padding: 8px 16px; border-radius: 6px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }
.only-pc { display: none; }
@media (min-width: 768px) { .only-pc { display: inline; } }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Logo lockup（フォールバック用：通常は画像ロゴを使用） ---------- */
.logo-lockup { display: inline-flex; align-items: center; gap: 12px; }
.logo-lockup__mark {
  flex: none;
  display: inline-grid; place-items: center;
  width: 52px; height: 52px;
  font-family: var(--font-jp); font-weight: 900;
  font-size: 32px; line-height: 1; color: #fff;
  background: var(--green);
  border-radius: 12px;
}
.logo-lockup__name { display: flex; flex-direction: column; gap: 2px; }
.logo-lockup__name-jp {
  font-family: var(--font-jp); font-weight: 800;
  font-size: 17px; letter-spacing: .02em; color: var(--ink); line-height: 1.45;
}
.logo-lockup__name-en {
  font-size: 9.5px; letter-spacing: .22em; color: var(--ink-3); font-weight: 700;
}

/* ---------- Header（背景は白） ---------- */
.site-header {
  /* position: relative; top: 0; left: 0; right: 0; z-index: 50; */
  /* backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease); */
}
/* .site-header.is-scrolled {
  border-bottom-color: var(--line-2);
  box-shadow: var(--shadow-sm);
} */
.header__inner {
  /* display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  padding-block: var(--gutter);
  padding-inline: var(--gutter); */
}

.brand { 
  position: absolute;
  left: var(--gutter);
  top: var(--gutter);
  z-index: 100;
 }
.brand__mark {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  background: var(--green); color: #fff;
  font-family: var(--font-jp); font-weight: 900; font-size: 21px; line-height: 1;
  border-radius: 8px;
}
.brand__text { font-family: var(--font-jp); font-weight: 800; font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 380px) { .brand__text { display: none; } }

.nav__list { display: flex; align-items: center; gap: 0; }
.nav__list li {
  border-bottom: 1px solid #999999;
}
.nav__list a {
  display: inline-block; padding: 8px 0; border-radius: 8px;
  font-family: var(--font-jp); font-size: 14.5px; font-weight: 700; color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
/* お問い合わせも他メニューと同じ黒テキスト（黒ボタンにしない） */

/* ---------- Nav dropdown（5つの事業） ---------- */
.nav__item--has-sub { position: relative; }
.nav__item--has-sub > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__item--has-sub > a::after {
  content: ""; width: 7px; height: 7px; margin-top: -2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .65;
  transition: transform .2s var(--ease);
}
.nav__item--has-sub:hover > a::after,
.nav__item--has-sub:focus-within > a::after { transform: rotate(225deg); }

.nav__sub {
  position: absolute; top: 100%; left: 0;
  min-width: 252px; margin: 0; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 60;
}
/* ホバーが途切れないように透明なブリッジを渡す */
.nav__sub::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 12px; }
.nav__item--has-sub:hover > .nav__sub,
.nav__item--has-sub:focus-within > .nav__sub {
  opacity: 1; visibility: visible; transform: none;
}
.nav__sub a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border-radius: 9px;
  font-family: var(--font-jp); font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__sub a:hover { background: var(--bg-beige); color: var(--brand-blue-ink); }
.nav__sub-verb { font-size: 11.5px; font-weight: 700; color: var(--brand-blue); }
.nav__sub a:hover .nav__sub-verb { color: var(--brand-blue-ink); }

/* hamburger */
.nav-toggle { width: 60px; height: 60px; border: 0; background: none; cursor: pointer; padding: 20px 16px; border-radius: 100%; background: var(--green);
  position: fixed;
  z-index: 100;
  right: var(--gutter);
  top: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
}
 .nav-toggle__bar-wrapper{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
 }
.nav-toggle__bar { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease);
  position: absolute;
  left: 0;
  right: 0;
 }
.nav-toggle__bar:nth-child(1){
  position: absolute;
  top: 0;
}
.nav-toggle__bar:nth-child(2){
  top: 50%;
  transform: translateY(-50%);
}
.nav-toggle__bar:nth-child(3){
  bottom: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(-50%) rotate(45deg); transform-origin: top center; top: 50%; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(50%) rotate(-45deg); transform-origin: bottom center; bottom: 50%; }

@media (max-width: 768px) {
  .nav-toggle { width: 40px; height: 40px; padding: 12px 10px; }
  .nav-toggle__bar { height: 1.5px; }
}

/* セクション見出し（小ルビ＋大きな英語見出し・左寄せ）※全セクション共通 */
.sec-en__ruby {
  font-family: var(--font-jp); font-weight: 600;
  font-size: 18px; letter-spacing: .14em; margin: 0 0 2px;
}
.sec-en__en {
  font-family: var(--font-en); font-weight: 600;
  font-size: clamp(40px, 7vw, 72px); line-height: 1.05; letter-spacing: .01em; margin: 0;
}
.section__desc{
  margin-top: 24px;
}

/* ---------- Footer（背景：黒） ---------- */
.site-footer__main{
  background: #efecda;
  padding-block: var(--section-block);
}
.site-footer__kanagawa{
  text-align: center;
  margin-bottom: 40px;
}
.site-footer__kanagawa img{
  width: 180px;
  height: auto;
  margin: 0 auto;
}
.site-footer__a11y{
  line-height: 1.8;
  text-align: center;
}
.site-footer__policy{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
}
.site-footer__policy a{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.site-footer__policy li:not(:last-child)::after{
  content: "|";
  margin-inline: 20px;
}
.site-footer__bottom{
  background: var(--black);
  color: #fff;
  padding-block: 20px;
  text-align: center;
}
.site-footer__copy{
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .site-footer__policy{
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .site-footer__policy li:not(:last-child)::after{
    display: none;
  }
}


/* ---------- Reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* =========================================================
   Responsive — tablet & desktop
   ========================================================= */

@media (min-width: 900px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .report-list { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Mobile nav (drawer) ---------- */
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    background: var(--bg-white);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform .25s var(--ease), opacity .25s var(--ease), visibility .25s;
    box-shadow: var(--shadow-md);
    width: 350px;
    top: 0;
    right: 0; z-index: 90;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 120px var(--gutter) 60px; }
  .nav__list a { display: block; padding: 14px 0; border-radius: var(--radius-sm); font-size: 16px; }
  /* .nav__cta { text-align: center; } */

  @media (max-width: 768px) {
    .nav__list {
      padding-top: 80px;
      padding-bottom: 40px;
    }
  }

  /* ドロワー内ではサブメニューを常時表示（インデント） */
  .nav__item--has-sub > a::after { display: none; }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 2px 0 6px; gap: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .nav__sub::before { display: none; }
  .nav__sub a { padding: 12px 16px 12px 32px; border-radius: var(--radius-sm); font-size: 15px; }

/* ---------- 公式ロゴ ---------- */
.brand__logo { height: 38px; width: auto; display: block; margin-top: 10px; }
@media (max-width: 768px) { .brand__logo { height: 20px; margin-top: 10px; } }
.site-footer__mark { width: 46px; height: 46px; display: block; }

/* ---------- SP表示非表示 ---------- */
@media (min-width: 767px) {
  .sp{
    display: none;
  }
}
@media (max-width: 768px) {
  .pc{
    display: none;
  }
}


/* ---------- Hero ---------- */
.kv-wrapper {
  background: url(../img/kv-bg.jpg) no-repeat center center / cover;
}
.hero--kv{
  position: relative;
}
.hero__inner {
  width: 1600px;
  max-width: 100%;
  margin-inline: auto;
}

.hero__title{
  font-family: var(--font-mincho); 
  font-size: calc(120 / 1600 * 100vw); 
  font-weight: 600;
  color: #FFFFFF;
  margin-top: calc(120 / 1600 * 100vw * -2);
  padding-inline: calc(50 / 1600 * 100vw);
}
@media (min-width: 1600px) {
  .hero__title {
    font-size: 120px;
    margin-top: -240px;
    padding-inline: 50px;
  }
}
@media (max-width: 768px) {
  .hero__title {
    font-size: calc(80 / 768 * 100vw); 
    margin-top: calc(80 / 768 * 100vw * -1.5); 
  }
}

/* ---------- Concept ---------- */
.section.concept {
  width: 1600px;
  max-width: 100%;
  margin-inline: auto;
  padding-top: calc(60 / 1600 * 100vw);
  padding-bottom: calc(120 / 1600 * 100vw);
}
.concept__inner {
  display: flex;
  gap: 40px;
  padding-inline: calc(100 / 1600 * 100vw);
}
.concept__text {
  flex: 1;
}
.concept__img {
  flex: 1;
}
.concept__img img {
  width: 100%;
  height: auto;
}
.concept__title{
  margin-bottom: 40px;
}
.concept__subtitle{
  margin-bottom: 24px;
  font-family: var(--font-mincho);
  font-size: calc(44 / 1600 * 100vw);
  font-weight: 600;
  line-height: 1.35;
}
@media (min-width: 1600px) {
  .concept__inner {
    padding-inline: 100px;
  }
  .concept__subtitle {
    font-size: 44px;
  }
}
@media (max-width: 768px) {
  .concept__inner {
    flex-direction: column;
  }
  .concept__subtitle {
    font-size: calc(44 / 768 * 100vw);
  }
}

/* ---------- Projects ---------- */
.projects__head {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 16px rgb(0 0 0 / 30%);
}
.projects__head-bg img {
  width: 100%;
  height: 380px;
  object-fit: cover;
}
.projects__head-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.biz-list{
  padding-block: var(--section-block);
  display: flex;
  flex-direction: column;
  gap: calc(100 / 1600 * 100vw);
}
.biz{
  position: relative;
}
.biz__decoration{
  position: absolute;
  bottom: 0;
  left: calc(50% - 50vw);
  z-index: -1;
  width: calc(164 / 1600 * 100vw);
  height: auto;
  transform: translate3d(0, 50%, 0);
}
.biz:nth-child(even) .biz__decoration{
  left: auto;
  right: calc(50% - 50vw);
}
.biz__inner {
  display: flex;
  gap: calc(50 / 1600 * 100vw);
  padding-inline: calc(200 / 1600 * 100vw);
}
.biz__head {
  flex: 1;
}
.biz__detail{
  flex: 1;
}
.biz__topline{
  margin-bottom: 16px;
}
.biz__name{
  font-family: var(--font-mincho);
  font-size: calc(54 / 1600 * 100vw);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.05em;
  padding-bottom: 16px;
  margin-bottom: 24px;
  position: relative;
}
.biz__name::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(-200 / 1600 * 100vw);
  right: 0;
  height: 1px;
  background-color: #999999;
}
.biz:nth-child(even) .biz__inner .biz__head {
  order: 2;
}
.biz:nth-child(even) .biz__inner .biz__head .biz__name::before{
  left: 0;
  right: calc(-200 / 1600 * 100vw);
}
.biz__catch{
  font-family: var(--font-mincho);
  font-size: calc(48 / 1600 * 100vw);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 24px;
}
.biz__detail .spec__title{
  margin: 0;
  padding: 0;
}
.biz__detail .spec__title .spec__title-text{
  display: inline-block;
  font-weight: 700;
  line-height: 1.5;
  color: #FFFFFF;
  padding: 8px 24px;
  background-color: #000000;
}
.spec__list{
  border: 1px solid #999999;
  padding: 1.5em;
  border-radius: 0 15px 15px 15px;
}
.spec__list > div{
  display: flex;
}
.spec__list dt{
  line-height: 1.5;
  border-right: 1px solid #999999;
  width: 6em;
}
.spec__list dd{
  line-height: 1.5;
  flex: 1;
  padding-left: 2em;
}
.spec__list > div:not(:first-child) dt,
.spec__list > div:not(:first-child) dd{
  padding-top: 1.5em;
}
.biz__link-wrapper{
  margin-top: 32px;
}
.biz__link{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
  background-color: var(--green);
  padding: 1em 2em;
  border-radius: 99999px;
  transition: all 0.3s ease;
}
.biz__link:hover{
  background-color: #000000;
}
.icon-arrow-right{
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 18"><path fill="%23000" d="M7.586,0.832 L14.225,7.367 L14.226,7.367 L15.885,9.001 L7.587,17.171 L5.928,15.536 L11.388,10.159 L0.906,10.159 L0.906,7.848 L11.396,7.848 L5.927,2.464 L7.586,0.832 Z" /></svg>');
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
  background-color: currentColor;
}

@media (min-width: 1600px) {
  .biz__decoration{
    left: calc(50% - 50vw);
    width: 164px;
  }
  .biz__name {
    font-size: 54px;
  }
  .biz__catch {
    font-size: 48px;
  }
}

@media (max-width: 980px) {
  .projects__head-bg img {
    height: 240px;
  }
  .biz-list {
    gap: calc(100 / 980 * 100vw);
  }
  .biz__inner {
    flex-direction: column;
  }
  .biz__topline img{
    zoom: 0.75;
  }
  .biz__name{
    font-size: calc(80 / 980 * 100vw);
  }
  .biz__catch{
    font-size: calc(64 / 980 * 100vw);
  }
  .biz .biz__inner .biz__head {
    order: 0 !important;
  }
  .biz__link-wrapper{
    text-align: center;
    margin-top: 24px;
  }
  .biz__link{
    /* font-size: calc(40 / 980 * 100vw); */
  }
}

@media (max-width: 768px) {
  .biz-list {
    gap: calc(100 / 768 * 100vw);
  }
  .biz__inner {
    padding-inline: var(--gutter);
  }
  .biz__name::before{
    left: calc(-1 * var(--gutter));
  }
  .biz:nth-child(even) .biz__inner .biz__head .biz__name::before{
    right: calc(-1 * var(--gutter));
  }
}

/* ---------- Reports ---------- */
.section.reports{
  position: relative;
  z-index: 1;
}
.reports-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.reports-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reports-inner{
  position: relative;
  z-index: 2;
  padding-block: var(--section-block);
}
.reports .section__head{
  text-align: center;
  color: #fff;
  text-shadow: 0 0 16px rgb(0 0 0 / 30%);
}
.reports .section__head .section__desc{
  font-weight: 600;
}
.report-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(40 / 1600 * 100vw);
}
.report-item{
  margin-top: 50px;
}
.report__link{
  display: block;
  position: relative;
  z-index: 1;
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  background-color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.report__link:hover{
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.report__thumb-wrapper{
  aspect-ratio: 32 / 19;
  overflow: hidden;
  background-color: #f0f0f0;
}
.report__thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.report__body{
  padding: 24px;
}
.report__title{
  font-size: 1em;
  font-weight: 700;
  line-height: 1.875;
  margin-bottom: 8px;
}
.report__date{
  font-size: 0.875em;
  line-height: 1.5;
  color: #999999;
}
.reports__foot{
  margin-top: 60px;
  text-align: center;
}
.reports__foot .btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
  background-color: transparent;
  border: 2px solid #ffffff;
  padding: 1em 2em;
  border-radius: 99999px;
  width: 320px;
  max-width: 100%;
  transition: all 0.3s ease;
}
.reports__foot .btn:hover{
  background-color: #ffffff;
  color: #000000;
}

@media (max-width: 768px) {
  .reports-bg{
    display: none;
  }
  .reports-inner{
    padding-top: 0;
  }
  .reports .section__head{
    background: url(../img/reports-bg.jpg) no-repeat center center / cover;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-block: calc(100 / 768 * 100vw);
  }
  .report-list{
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
  }
  .report-item{
    margin-top: 30px;
  }
  .reports__foot .btn{
    background-color: #000000;
    color: #ffffff;
  }
}

/* ---------- Contact ---------- */
.section.contact{
  position: relative;
  z-index: 1;
  padding-block: var(--section-block);
}
.contact__inner{
  display: flex;
  align-items: center;
  gap: calc(70 / 1600 * 100vw);
}
.contact__content{
  flex: 1;
}
.contact__content-head{
  margin-bottom: 32px;
  padding-bottom: 32px;
  position: relative;
}
.contact__content-head::before{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: calc(50% - 50vw);
  right: 0;
  height: 1px;
  background-color: #999999;
}
.contact__logo{
  width: 460px;
  max-width: 100%;
  height: auto;
}
.contact__content-info a{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.contact__img{
  flex: 1;
}
.contact__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

@media (min-width: 1600px) {
  .contact__content-head::before{
  }
}

@media (max-width: 768px) {
  .contact__inner{
    flex-direction: column;
  }
  .contact__content-head::before{
    left: calc(-1 * var(--gutter));
  }
}