/* =========================================
   全体の設定（カラーやフォントのルール決め）
========================================= */
:root{
  /* ブランドカラーの定義 */
  --navy:#152350;
  --navy-mid:#1e3070;
  --blue:#3060c0;
  --sky:#6090e0;
  --ice:#dce8f8;
  --ice-mid:#eaf2fc;
  --ice-light:#f2f7fd;
  --white:#ffffff;
  --accent:#2858c8;
  --rule:#d0dff0;

  /* 統一テキストカラー群 */
  --text-main: #152350;   
  --text-body: #222222;   
  --text-muted: #556688;  

  /* 統一フォントルール群 */
  --font-heading: 'Noto Sans JP', sans-serif;    
  --font-body: 'Shippori Mincho', serif;        
  --font-accent: 'Bebas Neue', sans-serif;       
}

/* =========================================
   ブラウザの初期設定リセットとベーススタイル
========================================= */
*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth; max-width: 100%; overflow-x: clip;}

body{
  font-family: var(--font-heading);
  background:var(--white);
  color:var(--text-body);
  overflow-x:clip;
  max-width: 100%;
  line-height:1.8;
}

/* =========================================
   ヘッダーエリア（画面上部のロゴとメニュー）
========================================= */
header{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
  padding:0 2.5rem;height:68px;
  display:flex;align-items:center;justify-content:space-between;
}

.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  min-width: 0;
  color: var(--text-main);
  transform: scale(1.3); 
  transform-origin: left center;
}

.logo-icon{
  width:240px; height:75px; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:transparent; margin-left: -15px;
}
.logo-icon img{
  width:100%; height:100%; object-fit:cover;
}

.logo-sub {
  margin-left: 5px;
  padding-left: 15px;
  border-left: 1px solid var(--rule);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

nav{display:flex}
nav a{font-size:0.75rem;color:var(--text-muted);text-decoration:none;padding:0 1rem;border-left:1px solid var(--rule);letter-spacing:0.05em;transition:color 0.2s}
nav a:hover{color:var(--accent)}

/* =========================================
   ヒーローエリア（トップページのメインビジュアル）
========================================= */
.hero{
  background:var(--ice-light);
  padding:4rem 2.5rem 0;
  position:relative;overflow:hidden;
  min-height:55vh;
  display:flex;align-items:flex-end;
}

.hero-blob1{
  position:absolute;top:-120px;right:-80px;
  width:500px;height:500px;border-radius:50%;
  background:var(--ice);opacity:0.6;
  pointer-events:none;
}
.hero-blob2{
  position:absolute;bottom:0;left:-100px;
  width:380px;height:380px;border-radius:50%;
  background:rgba(96,144,224,0.08);
  pointer-events:none;
}

.hero-inner{
  max-width:1160px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr 1fr;
  gap:3rem;align-items:end;
  position:relative;z-index:1;
}

.hero-text{padding-bottom:3rem}

.hero-ghost{
  font-family: var(--font-accent);
  font-size:min(12vw,140px);
  color:var(--ice);
  line-height:0.85;
  letter-spacing:0.01em;
  margin-bottom:-0.2em;
  display:block;
  user-select:none;
}

.hero-h1{
  font-family: var(--font-body); 
  font-size: 3.5rem;
  font-weight:700;
  color:var(--text-main);
  line-height:1.45;letter-spacing:0.03em;
  margin-bottom:1.8rem;
}
.hero-h1 em{font-style:normal;color:var(--blue)}

.hero-lead{
  font-family: var(--font-body); 
  font-size:0.9rem;
  color:var(--text-muted);
  line-height:2.1;
  max-width:440px;
  margin-bottom:2.2rem;
  font-weight:500;
}

.hero-btns{display:flex;gap:0.8rem}

.btn-primary{
  display:inline-flex;align-items:center;gap:0.6rem;
  background:var(--accent);color:var(--white);
  text-decoration:none;font-size:0.82rem;font-weight:500;
  padding:0.85rem 2rem;
  letter-spacing:0.08em;transition:all 0.25s;
  border-radius: 9999px; 
  font-family: var(--font-heading);
}
.btn-primary:hover{background:var(--navy);transform:translateY(-1px)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:0.6rem;
  border:1px solid var(--rule);color:var(--text-muted);
  background:var(--white);
  text-decoration:none;font-size:0.82rem;font-weight:500;
  padding:0.85rem 1.8rem;letter-spacing:0.08em;transition:all 0.25s;
  border-radius: 9999px; 
  font-family: var(--font-heading);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* =========================================
   各セクション共通パーツ
========================================= */
.section{padding:7rem 2.5rem}

.section-inner{max-width:1160px;margin:0 auto}

.sec-label{
  font-family: var(--font-heading);
  font-size:0.62rem;letter-spacing:0.25em;
  color:var(--blue);text-transform:uppercase;
  display:flex;align-items:center;gap:1rem;
  margin-bottom:1rem;
  font-weight:500;
}
.sec-label::before{content:'';width:28px;height:1px;background:var(--blue)}

.sec-title{
  font-family: var(--font-heading); 
  font-size:clamp(1.6rem,3.5vw,2.8rem);
  font-weight:700;
  color:var(--navy); 
  letter-spacing:0.04em;margin-bottom:3.5rem;
  line-height:1.4;
}
.sec-title em{font-style:normal;color:var(--blue)}

/* =========================================
   設立趣旨セクション固有の設定
========================================= */
.mission-sec{background:var(--white)}

.mission-grid{
  display: flex;
  flex-direction: column;
  gap: 5rem; 
}

.mission-grid > div:nth-child(2) {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  column-gap: 4rem;               
  row-gap: 0;                     
}

.mission-text p{
  font-family: var(--font-body); 
  font-size:1.05rem;
  line-height:2.2;
  color:var(--text-body);
  margin-bottom:1.6rem;
  font-weight:500;
}
.mission-text p:first-child{margin-top:0} 
.mission-text p:last-child{margin-bottom:0}

.goals-label{
  grid-column: 1 / -1; 
  font-family: var(--font-heading); 
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:0.05em;
  color:var(--navy); 
  margin-bottom:2rem;
  line-height:1.2;
  margin-top:0;
}

.goal-row{
  display:flex;align-items:flex-start;gap:1.2rem;
  padding:2rem 0;
  border-top:1px solid var(--rule);
}
.goal-row:last-child{border-bottom:none} 

.goal-num{
  font-family: var(--font-accent);
  font-size:1.6rem;
  color:var(--text-main);
  font-weight:700;
  line-height:1;min-width:30px;padding-top:2px;
}

.goal-title{
  font-family: var(--font-heading); 
  font-size:1.05rem;
  font-weight:700;
  color:var(--navy); 
  margin-bottom:0.6rem;
}

.goal-desc{
  font-family: var(--font-body); 
  font-size:1.05rem; 
  color:var(--text-body);
  opacity:1;
  line-height:1.9;
  font-weight:500;
}

/* =========================================
   お知らせセクション固有の設定（トップページ基本）
========================================= */
.news-sec{background:var(--white)}

.news-sec .news-list{
  width: 100%;
  max-width: 820px;  
  display: flex;
  flex-direction: column;
  margin: 0 auto 4rem; 
}

.news-item{
  display: grid;
  grid-template-columns: auto 1fr; 
  align-items: baseline;
  gap: 2.5rem;                       
  padding: 1.5rem 1.5rem;
  border: 1px solid var(--rule); 
  border-radius: 12px;
  background: var(--white);
  margin-bottom: 1rem;
}

.news-text{
  font-size:0.88rem;
  color: var(--navy) !important; 
  text-decoration:none; 
  transition: color 0.2s; 
  font-family: var(--font-heading);
  word-break: break-all; 
}
.news-text:hover{
  color: var(--accent) !important;
}

/* =========================================
   下層ページ（news/index.html等）専用の特別スタイル
========================================= */
.page-container .news-list {
  width: 100% !important;   
  max-width: 720px !important; 
  margin: 0 auto 4rem !important;  
}
.page-container .news-item {
  padding: 1rem 1.2rem !important; 
  gap: 1.8rem !important;
}
.page-container .news-text {
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
}

/* =========================================
   下層ページ用の汎用コンテナ
========================================= */
.page-container{
  width: 100%;
  max-width:860px; 
  margin:4rem auto; 
  padding:0 2rem;
  min-height: calc(100vh - 68px - 140px); 
}
.page-title{font-family: var(--font-heading); font-size:2rem; color:var(--navy); margin-bottom:2.5rem; border-bottom:2px solid var(--navy); padding-bottom:0.5rem;}
.article-title{font-family: var(--font-heading); font-size:clamp(1.5rem, 3vw, 2.2rem); font-weight:700; color:var(--navy); line-height:1.4; margin-bottom:2.5rem;}

/* 💡活動報告・詳細記事テキストの調整 */
.content p{
  margin-bottom: 1.5rem; 
  font-size: 1.05rem; 
  color: var(--text-body); 
  text-align: justify; 
  font-family: var(--font-heading);
  line-height: 1.8;
}
.content h2{font-family: var(--font-heading); font-size:1.2rem; color:var(--text-main); margin:2.5rem 0 1rem; border-left:4px solid var(--blue); padding-left:0.5rem;}
.photo-dummy{background:var(--ice-mid); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-weight:bold; margin-bottom:1rem; border:1px solid var(--rule);}

/* 💡【新仕様】ブルー系統で統率された上品なボックス（Theme Box） */
.theme-box {
  background-color: var(--ice-light);
  border: 1.5px solid var(--sky);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 4px 12px rgba(21, 35, 80, 0.04);
}
.theme-box h3 {
  color: var(--navy);
  font-family: var(--font-heading);
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.6rem;
  display: flex;
  align-items: center;
}
.theme-box h3::before {
  content: "🔷";
  margin-right: 0.5rem;
  font-size: 0.9rem;
}
.theme-box ul {
  margin: 0;
  padding-left: 1.5rem;
}
.theme-box li {
  margin-bottom: 0.75rem;
  line-height: 1.6;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-family: var(--font-heading);
}
.theme-box li:last-child { margin-bottom: 0; }

/* 💡【新仕様】蛍光ペン風のアンバーバー（下線マーカー：アイスブルー） */
.u-line-marker {
  background: linear-gradient(transparent 55%, var(--ice) 55%);
  font-weight: bold;
  padding: 0 4px;
}

/* 💡【新仕様】文章中の色文字強調（プライマリブルー） */
.text-accent {
  color: var(--blue);
  font-weight: bold;
}

.page-bottom-btns {margin-top: 1.5rem; display: flex; gap: 1.5rem; align-items: center; justify-content: center;}

/* =========================================
   名簿ページ（賛同企業一覧）専用
========================================= */
.meta-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 2rem;
  border-bottom: 1px solid var(--ice-light);
  padding-bottom: 0.8rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.meta-info-bar .note { font-size: 0.9rem; color: #666; margin: 0; }
.meta-info-bar .update-date-badge {
  background-color: var(--ice-light);
  color: var(--navy);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}
.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 4rem;
  list-style: none;
  padding: 0;
}
.company-card {
  background: var(--white);
  border: 1px solid var(--ice-light);
  border-radius: 6px;
  padding: 1.5rem 1rem;
  text-align: center;
  font-weight: 500;
  color: var(--navy);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  font-size: 1.1rem;
}
.company-card:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.back-to-top-wrapper { text-align: center; margin-bottom: 2rem; }
.back-to-top-wrapper .btn-back {
  display: inline-block; padding: 1rem 3rem; background-color: var(--white); color: var(--blue); border: 1px solid var(--blue); border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s ease;
}
.back-to-top-wrapper .btn-back:hover { background-color: var(--blue); color: var(--white); }

/* =========================================
   お問い合わせセクション（Contact）
========================================= */
.contact-sec{
  background:var(--navy); padding:5rem 2.5rem; text-align:center; position:relative;overflow:hidden;
}

.contact-sec::before{
  content:'Contact'; position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); font-family: var(--font-accent); font-size:min(20vw,240px); color:rgba(255,255,255,0.03); white-space:nowrap; pointer-events:none;user-select:none;
}

.contact-inner{position:relative;z-index:1}
.contact-en{font-family: var(--font-accent); font-size:0.75rem;letter-spacing:0.3em; color:rgba(255,255,255,0.3); display:block;margin-bottom:1rem;}
.contact-title{font-family: var(--font-heading); font-size:clamp(1.8rem,4vw,3.2rem);font-weight:700; color:var(--white);margin-bottom:1.5rem;}
.contact-poem{font-family: var(--font-body); font-size:0.95rem; color:rgba(255,255,255,0.5); line-height:2.4;margin-bottom:3rem;}
.contact-poem span{display:block}

/* =========================================
   フォーム関連
========================================= */
.contact-form-container {
  max-width: 680px; margin: 0 auto; background: var(--white); padding: 3.5rem 3rem; text-align: left; border: 1px solid var(--rule); box-shadow: 0 20px 40px rgba(14,26,56,0.15);
}
.form-group {margin-bottom: 2rem;}
.form-group:last-of-type {margin-bottom: 2.5rem;}
.form-label {display: block; font-size: 0.88rem; font-weight: 500; color: var(--text-main); margin-bottom: 0.6rem; letter-spacing: 0.05em; font-family: var(--font-heading);}
.form-label .badge {font-size: 0.65rem; padding: 0.2rem 0.5rem; margin-left: 0.6rem; font-weight: 400; vertical-align: middle; letter-spacing: 0px;}
.form-label .badge.required {background: var(--accent); color: var(--white);}
.form-label .badge.optional {background: var(--ice); color: var(--text-muted);}
.form-control {width: 100%; padding: 0.85rem 1rem; font-size: 0.9rem; color: var(--text-body); background-color: var(--ice-light); border: 1px solid var(--rule); border-radius: 0; font-family: var(--font-heading); transition: all 0.25s ease;}
.form-control:focus {outline: none; border-color: var(--blue); background-color: var(--white); box-shadow: 0 0 0 3px rgba(48,96,192,0.1);}
select.form-control {appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23152350'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.2rem; padding-right: 2.5rem;}
.form-check {text-align: center; margin-bottom: 2.5rem;}
.form-check-label {font-size: 0.82rem; color: var(--text-muted); cursor: pointer; user-select: none; font-family: var(--font-heading);}
.form-check-input {margin-right: 0.5rem; vertical-align: middle; accent-color: var(--accent);}
.form-submit-wrapper {text-align: center;}
.form-submit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; background: var(--accent); color: var(--white); border: none; font-family: var(--font-heading); font-size: 0.88rem; font-weight: 500; padding: 1.1rem 4rem; letter-spacing: 0.15em; width: auto; min-width: 280px; cursor: pointer; transition: all 0.25s ease;
  border-radius: 9999px; 
}
.form-submit-btn:hover {background: var(--navy-mid); transform: translateY(-1px);}

/* =========================================
   その他 UIパーツ
========================================= */
.pagetop-btn {
  position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: var(--white); border: 1px solid var(--rule); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 999; transition: all 0.3s;
}
.pagetop-btn:hover {border-color: var(--blue); transform: translateY(-3px);}
.pagetop-btn svg {fill: var(--text-main); width: 20px; height: 20px;}

/* =========================================
   フッターエリア（ページ最下部）
========================================= */
footer{
  background:var(--navy);border-top:1px solid rgba(255,255,255,0.06); padding:1.5rem 2.5rem; display:flex; align-items:center; justify-content:space-between;
}
.footer-name{
  font-family: var(--font-heading);
  font-size:0.75rem; 
  color:rgba(255,255,255,0.35); 
  letter-spacing:0.06em;
}
.footer-link{
  font-size:0.75rem;
  color:var(--sky);
  text-decoration:underline;
  letter-spacing:0.06em;
  transition:all 0.25s ease;
  font-family: var(--font-heading);
}
.footer-link:hover{
  color:var(--white);
  opacity:1;
}
.footer-copy{
  font-size:0.62rem; 
  color:rgba(255,255,255,0.2); 
  letter-spacing:0.1em; 
  font-family: var(--font-heading);
}

/* =========================================
   レスポンシブデザイン（iPhone15・PC全端末完全対応）
========================================= */
@media(max-width:900px){
  nav{display:none}
  
  header {padding: 0 1rem; height: 64px; max-width: 100%; overflow: hidden;}
  
  .logo {
    min-width: 0; 
    flex: 1; 
    align-items: center;
    transform: scale(1.0) !important; 
  }
  .logo-icon {
    height: 48px; 
    width: 165px; 
    margin-left: -10px;
  }
  .logo-sub {
    font-size: 0.75rem;
    margin-left: 6px;
    padding-left: 8px;
  }

  .hero{min-height:auto;padding:5rem 1.5rem 0}
  .hero-inner{grid-template-columns:1fr;gap:1.5rem}
  .hero-text{padding-bottom:3rem}
  .hero-h1 { font-size: 2.2rem; }

  .mission-grid > div:nth-child(2) {
    grid-template-columns: 1fr; 
  }

  .section{padding:4rem 1.5rem}
  .contact-sec{padding:4rem 1.5rem}
  .contact-form-container {padding: 2.5rem 1.5rem;}
  
  /* スマホ表示で1行に美しく流し込む指示 */
  .news-item {
    display: block !important; 
    padding: 1.2rem 1.2rem !important; 
    margin-bottom: 1rem !important;
  }
  .news-date {
    display: inline !important; 
    margin-right: 0.8rem !important;
  }
  .news-text {
    display: inline !important; 
    line-height: 1.6 !important;
  }

  /* iPhoneや中間画面で、右端へのあらゆるはみ出し・突き抜けを完全シャットアウト */
  .news-sec .news-list,
  .page-container .news-list {
    width: 100% !important; 
    max-width: 100% !important;
    margin: 0 0 1.5rem 0 !important; 
  }

  /* トップページの標準ボタンの縮小・余白削減 */
  .btn-primary, .btn-ghost {
    padding: 0.4rem 1rem; 
    font-size: 0.7rem;     
    width: auto;
  }

  /* 下層ページボタンエリアの上の余白 */
  .form-submit-wrapper {
    margin-top: 0rem !important; 
  }
  
  /* 下層ページボタン自体 */
  .form-submit-wrapper .btn-primary {
    padding: 0.4rem 1.2rem !important; 
    font-size: 0.72rem !important;     
    width: auto !important;            
    min-width: auto !important;        
    display: inline-flex !important;
  }

  .pagetop-btn {
    bottom: 15px; 
    right: 15px;
    width: 40px;  
    height: 40px;
  }
  .pagetop-btn svg {
    width: 16px; 
    height: 16px;
  }

  .form-submit-btn {width: 100%; min-width:auto;}
  
  footer{flex-direction:column; align-items:center; text-align:center; gap:0.8rem; padding:2rem 1.5rem;}

  /* スマホ版での名簿（企業リスト）の表示調整 */
  .company-grid {
    grid-template-columns: 1fr; 
    gap: 1rem;
  }
  .meta-info-bar {
    flex-direction: column; 
    align-items: flex-start;
  }
}