/* ================================
   Reset / Base
================================ */
:root{
  --about-bg-desktop: url('../images/about-pc.jpg');
  --about-bg-mobile:  url('../images/about-sp.jpg');
}

html, body{
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  background-color: #f4f3f0;
  color: #222;
  line-height: 1.9;
  scroll-behavior: smooth;
}

section {
  padding: 6rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

section h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 2rem;
  letter-spacing: 0.1em;
}

section p {
  margin-bottom: 1.5rem;
  color: #666;
}

/* ================================
   Header
================================ */
/* ヘッダー：コンパクト＆ダーク */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: saturate(1.2) blur(10px);
  z-index: 1000;
  box-sizing: border-box;
}

/* ロゴ */

.logo img {
  max-height: 36px;
}

/* ナビゲーション */
nav {
  display: flex;
  align-items: center;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}

nav li {
  display: inline-block;
  margin-left: 1.25rem;
}

nav a {
  text-decoration: none;
  color: #fff;
  font-size: 0.95rem;
  position: relative;
  white-space: nowrap;
}

/* ホバーエフェクト */
nav a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}


/* ================================
   Hero
================================ */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero h1, .overlay {
  position: relative;
  z-index: 1;
}

/* ================================
   Catchcopy (Hero直下のテキスト)
================================ */
.catchcopy {
  padding: 6rem 2rem;   /* 余白 */
  background: #f4f3f0;  /* サイトの背景色に合わせる */
  text-align: center;
}

.catchcopy-inner {
  max-width: 900px;
  margin: 0 auto;
}

.catchcopy h2 {
  font-size: clamp(22px, 4vw, 32px);
  margin-bottom: 1.2rem;
  font-weight: 600;
  letter-spacing: .05em;
}

.catchcopy p {
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.9;
  color: #444;
}

/* ================================
   Mission / Vision
================================ */
.content-with-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.image-container img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: transform 0.5s ease;
}
.image-container:hover img { transform: scale(1.05); }

/* ================================
   VALUE
================================ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 2rem;
}
.value-item {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: transform 0.3s ease;
  min-height: 220px;
  display: grid;
  align-content: center;
}
.value-item:hover { transform: translateY(-6px); }
.value-title { font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.value-description {
  font-size: 0.95rem; color: #666;
  max-width: 26ch; margin: 0 auto; line-height: 1.8;
}
@media (min-width: 1025px){
  .values-grid { grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }
}


/* ================================
   SERVICE（左右いっぱい）
================================ */
.services-grid{
  display: grid;
  gap: 6rem;
  max-width: 1200px;
  margin: 0 auto;
}

.service-item{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.service-item:nth-child(even){
  grid-template-columns: 1fr 1fr;
  direction: rtl;    /* 画像とテキストを反転 */
}
.service-item:nth-child(even) .service-text{ direction: ltr; }

.service-image{
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
/*
.service-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
*/

/* タイトルが2行にならないように */
.service-text h3{
  white-space: nowrap;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

/* ================================
   ABOUT（全幅・フル高、背景切替）
================================ */
/* section の共通 max-width をキャンセル */
/*
section.about-hero {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* ABOUT（背景が必ず出るように !important を付与） */
.about-hero{
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-image: var(--about-bg-desktop) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
@media (max-width: 768px){
  .about-hero{
    min-height: 80vh;
    background-image: var(--about-bg-mobile) !important;
  }
}
*/
.about-hero::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.50);
}

.about-hero .section-content{
  position: relative; z-index: 1;
  width: min(92%, 1040px);
  margin: 0 auto;
  padding: clamp(36px, 4vw, 64px) 24px;
}
.about-hero .about-content{
  color: #fff;
  background: rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  padding: clamp(16px, 2.6vw, 28px) clamp(18px, 3vw, 36px);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.about-hero .company-name{ font-size: clamp(22px, 3.2vw, 34px); margin: 0 0 .4rem; letter-spacing: .06em; }
.about-hero .company-description{ font-size: clamp(14px, 1.6vw, 18px); margin:.25rem 0; opacity:.96; }
.about-hero .company-details{ font-size: clamp(13px, 1.4vw, 17px); margin:.4rem 0 0; opacity:.92; }

/* SPは背景差し替え＋高さ少し低く */
@media (max-width: 768px){
  .about-hero{
    background-image: var(--about-bg-mobile);
    min-height: 80vh;
  }
}

/* ================================
   Footer
================================ 
footer {
  text-align: center;
  padding: 3rem 1rem;
  font-size: 0.85rem;
  color: #666;
  background: #f4f3f0;
}*/


/* ================================
   Animation
================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================
   Responsive tweaks
================================ */
@media (max-width: 900px){
  .service-text h3{ white-space: normal; } /* 画面が狭い時は改行OKにするなら有効化 */
}
/* ===== Content with Image（Mission / Vision） ===== */
.content-with-image{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items:center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;
}
.content-with-image.reverse{
  direction: rtl;
}
.content-with-image.reverse .text{ direction:ltr; }
.content-with-image .image-container img{
  width:100%; height:100%;
  object-fit:cover; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* ===== SERVICE（テキスト＋片側フルブリード） ===== */
.sec-title{ text-align:center; letter-spacing:.2em; margin-bottom:2rem; }

.service-row{
  display:grid;
  grid-template-columns: minmax(360px, 560px) 1fr;
  gap: 3rem;
  align-items:center;
  max-width: 1200px;
  margin: 0 auto 6rem;
  padding: 0 2rem;
}

/* 画像をビューポート端まで“はみ出させる”トリック */
.bleed-right .service-bleed{ margin-right: calc(50% - 50vw); }
.bleed-left  .service-bleed{ margin-left:  calc(50% - 50vw);  }

.service-bleed img{
  width: 100%;
  height: 520px;             /* 見栄えの良い高さ（調整可） */
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

.service-copy h3{
  font-size: clamp(20px, 2.4vw, 30px);
  margin: 0 0 1rem;
}
.service-copy p{ margin: 0; line-height: 1.9; }
.nowrap{ white-space: nowrap; }   /* 地域資源活用プロジェクトを1行固定 */

/* SP：縦1カラムに（画像は100vw） */
@media (max-width: 900px){
  .service-row{
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0 1.2rem;
  }
  .bleed-right .service-bleed,
  .bleed-left  .service-bleed{ margin: 0 -1.2rem; }  /* 画面端まで */
  .service-bleed img{ height: 44vh; border-radius: 12px; }
}

/* ===== ABOUT: フルスクリーン & フルブリード ===== */
section.about-hero {
  /* 共通セクションの max-width を無効化 */
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 親の中央寄せの影響を打ち消して、画面幅いっぱいにするトリック */
.about-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* ← 左右の余白を打ち消し */
  min-height: 100vh;
  background-image: var(--about-bg-desktop) !important; /* PC画像を確実に適用 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;                 /* 横スクロール防止 */
}

/* 文字が読みやすいようにオーバーレイを少し濃く */
.about-hero::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}

/* 中身のカード */
.about-hero .section-content{
  position: relative; z-index: 1;
  width: min(92%, 1040px);
  margin: 0 auto;
  padding: clamp(36px, 4vw, 64px) 24px;
}

/* ===== テキストは真っ白（必ず白になるように強制） ===== */
.about-hero .about-content,
.about-hero .about-content * {
  color: #fff !important;
}
.about-hero .about-content{
  background: rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  padding: clamp(16px, 2.6vw, 28px) clamp(18px, 3vw, 36px);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.about-hero .company-name{ font-size: clamp(22px, 3.2vw, 34px); margin: 0 0 .4rem; letter-spacing: .06em; }
.about-hero .company-description{ font-size: clamp(14px, 1.6vw, 18px); margin:.25rem 0; opacity: 1; }
.about-hero .company-details{ font-size: clamp(13px, 1.4vw, 17px); margin:.4rem 0 0; opacity: .98; }

/* スマホは画像差し替え＋少し低めでもOK */
@media (max-width: 768px){
  .about-hero{
    background-image: var(--about-bg-mobile) !important;
    min-height: 80vh;
    margin-left: 0;               /* スマホでは横スクロールの原因になりやすいので解除 */
    width: 100%;
  }
}
/* ===== ヘッダー右側の Home / TOP を非表示 ===== */
header nav {
  display: none !important;
}

/* もしテーマによって ul にドットが付いてしまう場合の保険 */
header nav ul, header nav li {
  list-style: none;
  margin: 0; padding: 0;
}
/* ===== Hero: video ===== */
.hero--video{ position:relative; height:100vh; display:grid; place-items:center; overflow:hidden; }
.hero-video-wrap{ position:absolute; inset:0; }
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(.8);
}
/* PC/SP 切替：デフォルトはPCを表示 */
.hero-video--pc{ display:block; }
.hero-video--sp{ display:none; }
@media (max-width: 768px){
  .hero-video--pc{ display:none; }
  .hero-video--sp{ display:block; }
}
/* ヒーローの上の文字（白でくっきり） */
.hero-title{
  position:relative; z-index:1;
  color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6);
  font-size:clamp(24px, 5vw, 44px); letter-spacing:.12em; margin:0;
}

/* ===== Footer layout: ロゴ左 / 会社概要右 / コピーライト中央 ===== */
.site-footer {
  background:#0b0e0f;
  color:#e8e8e8;
}

/* フッター内は横書きに固定（縦書きの副作用を遮断） */
.site-footer, .site-footer * { writing-mode: horizontal-tb; }

.site-footer a { color:#e8e8e8; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:32px 20px;
  box-sizing:border-box;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;                    /* ← コピーライトを下段中央に配置するため */
}

/* 左：ロゴ（左寄せ） */
.footer-left{ 
  flex:0 0 auto;                     /* 幅は画像に合わせる */
}
.footer-logo img{
  display:block;
  max-width:180px;
  height:auto;
  transform:none;
}

/* 右：会社概要（ブロック右寄せ・テキストは左揃え） */
.footer-center{
  flex:1 1 560px;
  min-width:360px;
  margin-left:auto;                  /* ← これで右端に寄る */
  text-align:left;                   /* テキストは左揃え */
}
.footer-title{
  font-size:1rem;
  margin:0 0 .5rem;
  letter-spacing:.03em;
}
.company-lines{ font-style:normal; line-height:1.9; }

/* 下段：コピーライト（中央） */
.footer-right{
  order:2;                           /* 下段へ */
  flex:0 0 100%;                     /* 横幅いっぱい */
  display:flex;
  justify-content:center;            /* 中央配置 */
  margin-top:12px;
}
.copyright{ white-space:nowrap; opacity:.85; }


/* ======================
   FOOTER 仕上げ（画像レイアウト準拠）
====================== */
footer.site-footer{
  background:#0b0e0f;   /* 現状の黒に合わせる */
  color:#e8e8e8;
}

/* 縦書きの干渉が来ないようにフッター内は横書き固定 */
footer.site-footer, footer.site-footer *{ writing-mode: horizontal-tb; }

footer.site-footer a{ color:#e8e8e8; text-decoration:none; }
footer.site-footer a:hover{ text-decoration:underline; }

/* 2列 + 下段コピーライト（中央） */
footer.site-footer .footer-inner{
  max-width: 1240px;               /* 画像の左右余白感に寄せる */
  margin: 0 auto;
  padding: 28px 24px 18px;         /* 上/横/下 */
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr; /* 左：ロゴ、右：会社概要 */
  grid-template-areas:
    "logo info"
    "copy copy";
  column-gap: clamp(32px, 8vw, 160px); /* 横の空き（画面幅に応じて可変） */
  row-gap: 14px;
  align-items: center;
}

/* 左：ロゴ（画像そのものでも .footer-logo クラスでも拾えるように） */
footer.site-footer .footer-logo,
footer.site-footer img.footer-logo,
footer.site-footer .footer-left,
footer.site-footer .footer-left img{
  grid-area: logo;
  justify-self: start;   /* 左寄せ固定 */
}
footer.site-footer .footer-logo img{
  height: 56px;          /* 画像に近い高さ感（お好みで 48〜64px 程度） */
  width: auto;
  display: block;
}

/* 右：会社概要（ブロックは右端に、文字は左揃え） */
footer.site-footer .company-info,
footer.site-footer .footer-center{
  grid-area: info;
  justify-self: end;     /* 右端に寄せる */
  text-align: left;      /* 文字は左揃え */
  max-width: 520px;      /* 伸びすぎ防止（任意） */
}
footer.site-footer .company-info h3,
footer.site-footer .footer-center h3{
  margin: 0 0 10px;
  font-size: 20px;       /* 見出しを少し大きめに */
  font-weight: 700;
  letter-spacing: .02em;
}
footer.site-footer .company-info p,
footer.site-footer .company-info address,
footer.site-footer .footer-center p,
footer.site-footer .footer-center address{
  margin: 0;
  font-style: normal;
  line-height: 2.0;      /* 画像のゆったり行間に寄せる */
  font-size: 16px;
  opacity: .92;
}

/* 下段：コピーライト中央 */
footer.site-footer .copyright,
footer.site-footer small.copyright,
footer.site-footer .footer-right{
  grid-area: copy;
  justify-self: center;  /* 中央配置 */
  text-align: center;
  margin-top: 6px;
  padding-top: 6px;
  opacity: .9;
  display: block;
  white-space: nowrap;
}

/* スマホ調整 */
@media (max-width: 768px){
  footer.site-footer .footer-inner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "info"
      "copy";
    row-gap: 16px;
    padding: 22px 16px 16px;
  }
  footer.site-footer .footer-logo img{ height: 50px; }
  footer.site-footer .company-info{ justify-self: start; max-width: none; }
  footer.site-footer .company-info h3{ font-size: 14px; }
  footer.site-footer .company-info p,
  footer.site-footer .company-info address{ font-size: 10px; line-height: 1.9; }
}

/* PC はそのまま、SP だけ縦並びで文章→画像の順に */
@media (max-width: 768px){
  /* 共通：縦並び */
  .content-with-image{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Mission：テキスト → 画像 */
  #mission .text{ order: 1; }
  #mission .image-container{ order: 2; }

  /* Vision もテキスト → 画像 */
  #vision .text{ order: 1; }
  #vision .image-container{ order: 2; }
}

/* About のカード枠を消す（全デバイス） */
.about-hero .about-content{
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0;                /* 余白も要らなければ 0 に */
}

/* 読みやすさのために文字はわずかに強めてもOK（任意） */
.about-hero .about-content,
.about-hero .about-content *{
  text-shadow: none;
  color: #fff;               /* 既に白ならこの行は不要 */
}

/* SP改行：PCでは無効、SPでのみ有効 */
.sp-br { display: none; }

@media (max-width: 768px){
  .sp-br { display: inline; }
}

/* ヒーロー直下コピー */
.hero-copy{
  max-width: 980px;
  margin: clamp(28px, 6vw, 60px) auto 0;
  padding-inline: 20px;
  text-align: center;
  color: #222;
}

.hero-copy .lead-1{
  font-size: clamp(22px, 5.8vw, 32px);
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 .6rem;
}

.hero-copy .lead-sub{
  font-size: clamp(12px, 3.5vw, 16px);
  color: #777;
  margin: .2rem 0 1.6rem;
}

.hero-copy .lead-2{
  font-size: clamp(18px, 4.8vw, 26px);
  font-weight: 700;
  letter-spacing: .03em;
  margin: 1.2rem 0 0;
  line-height: 1.6;
}

/* ===== SERVICE：モバイルだけ並び順を調整 ===== */
@media (max-width: 768px){
  /* モバイルでは縦積みに統一（安全のため明示） */
  #service .service-row{
    display: flex;
    flex-direction: column;
    gap: 16px;              /* お好みで */
    direction: ltr;         /* PC用の rtl 指定があっても無効化 */
  }

  /* 画像は横幅いっぱいに */
  #service .service-bleed img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* ★ 2つ目（.bleed-left）だけ「テキスト → 画像」に入れ替え */
  #service .service-row.bleed-left .service-copy{ order: -1; }  /* テキスト上 */
  #service .service-row.bleed-left .service-bleed{ order: 0; }  /* 画像下 */

  /* タイトルの折返し制御（必要なら） */
  #service .service-copy .nowrap{ white-space: nowrap; }
}