/* 動画設定 */

.hero-video{
will-change: transform;
}

/* ---------- メッセージ ---------- */

.top-message{
max-width:900px;
margin:auto;
text-align:left;
padding:0 20px;
}

/* ---------- タイトル ---------- */

.hero-title{
line-height:1.5;
font-weight:bold;
}

/* 地域 */

.hero-area{
display:block;
font-size:16px;
letter-spacing:2px;
color:#666;
margin-bottom:5px;
}

/* メインコピー */

.hero-main{
display:block;
font-size:34px;
color:#222;
}

/* 会社名 */

.hero-company{
display:block;
font-size:40px;
color:#1f3f6b;
letter-spacing:2px;
margin-top:5px;
}

/* ライン */

.message-line{
width:80px;
height:2px;
background:#1f3f6b;
margin:25px 0;
}

/* 説明文 */

.lead-text{
font-size:14px;
line-height:2;
color:#555;
}

/* 最後の強調 */

.strong-text{
margin-top:25px;
font-size:22px;
font-weight:bold;
color:#1f3f6b;
letter-spacing:1px;
}

/* =========================
   タブレット
========================= */

@media (max-width:1024px){

.hero-main{
font-size:30px;
}

.hero-company{
font-size:34px;
}

.lead-text{
font-size:15px;
}

.strong-text{
font-size:20px;
}

}

/* =========================
   スマホ
========================= */

@media (max-width:768px){

.top-message{
padding:0 15px;
}

.hero-area{
font-size:13px;
}

.hero-main{
font-size:22px;
}

.hero-company{
font-size:26px;
}

.message-line{
width:60px;
margin:20px 0;
}

.lead-text{
font-size:14px;
line-height:1.9;
}

.strong-text{
font-size:18px;
margin-top:20px;
}

}





.top-hero{
  position:relative;
}

.top-hero::before{
  content:"";
  position:absolute;

  left:0;
  top:200px;
  bottom:0;

  width:30%;

  background:#f8f8f5;

  z-index:0;
}

.top-hero *{
  position:relative;
  z-index:1;
}




.cta-btn{
display:inline-flex;
align-items:center;
gap:10px;

margin-top:30px;
padding:14px 30px;

border:1px solid #1f3f6b;
color:#336699;
font-weight:bold;
text-decoration:none;

transition:.3s;
}

.cta-btn::after{
content:"→";
font-size:18px;
}

.cta-btn:hover{
background:#1f3f6b;
color:#ccc;
}


/* 住研アイコン */
.house-wrap{
width:250px;
margin:100px auto;
text-align:center;
}

.house-svg{
width:100%;
}

/* 線アニメーション */

.draw{
fill:none;
stroke:#000;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;

stroke-dasharray:600;
stroke-dashoffset:600;

animation:draw 1s ease forwards;
animation-play-state:paused;
}

/* 描画順 */

.line1{animation-delay:0s;}
.line2{animation-delay:.1s;}
.line3{animation-delay:.2s;}
.line4{animation-delay:.35s;}
.line5{animation-delay:.5s;}
.line6{animation-delay:.65s;}
.line7{animation-delay:.8s;}
.line8{animation-delay:.9s;}
.line9{animation-delay:1.05s;}
.line10{animation-delay:1.2s;}
.line11{animation-delay:1.3s;}
.line12{animation-delay:1.4s;}
.line13{animation-delay:1.5s;}
.line14{animation-delay:1.6s;}
.line15{animation-delay:1.7s;}

@keyframes draw{
to{
stroke-dashoffset:0;
}
}

/* 屋根 塗りアニメーション */

.line6{
fill:#336699;
fill-opacity:0;

animation:
draw 1s ease forwards .65s,
roofFill .8s ease forwards 2.6s;
}

@keyframes roofFill{
to{
fill-opacity:1;
}
}

/* 窓の光 */

.window-light{
fill:#ffe066;
opacity:0;
}

.light1{
animation:lightOn .8s ease forwards;
animation-delay:3.2s;
animation-play-state:paused;
}

.light2{
animation:lightOn .8s ease forwards;
animation-delay:3.6s;
animation-play-state:paused;
}

@keyframes lightOn{
to{
opacity:1;
}
}

/* タイトル */

.house-title{
margin-top:12px;
font-size:20px;
font-weight:bold;
letter-spacing:0.15em;

opacity:0;
transform:translateY(10px);

animation:titleFade 1s ease forwards;
animation-delay:2.3s;
animation-play-state:paused;
}

.house-title span{
font-size:12px;
letter-spacing:0.25em;
}

@keyframes titleFade{
to{
opacity:1;
transform:translateY(0);
}
}

/* ロゴ */

.logo-mark{
opacity:0;
transform:translateY(5px);

animation:logoFade .8s ease forwards;
animation-delay:2s;
animation-play-state:paused;
}

@keyframes logoFade{
to{
opacity:1;
transform:translateY(0);
}
}

/* スクロール開始 */

.house-wrap.active .draw,
.house-wrap.active .light1,
.house-wrap.active .light2,
.house-wrap.active .house-title,
.house-wrap.active .logo-mark{
animation-play-state:running;
}

/* =============================
強みセクション
============================= */

.strength-section{
padding:100px 20px;

/* ドット背景 */
background-color:#fff;
background-image:radial-gradient(#dcdcdc 1px, transparent 0.8px);
background-size:14px 14px;
}

/* タイトル */

.strength-title{
text-align:center;
font-size:28px;
margin-bottom:20px;
}

.strength-subtitle {
  max-width: 800px;   /* 最大幅を800pxに設定 */
  margin: 0 auto 60px; /* 上0 下60px、左右は自動で中央寄せ */
  font-size: 14px;
  color: #777;
  text-align: left;    /* 文章を左揃えに */
  letter-spacing: 0.08em;
}

/* =============================
グリッド
============================= */

.strength-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:30px;
max-width:1200px;
margin:0 auto;
}

/* =============================
カード
============================= */

.strength-card{
background:#fff;
padding-bottom:5px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

/* 画像 */

.strength-card img{
width:100%;
height:160px;
object-fit:cover;
display:block;
}

/* 見出し */

.strength-card h3{
font-size:16px;
font-weight:bold;
margin:18px 0 10px;
text-align:center;
}

/* 説明 */

.strength-card p{
font-size:14px;
color:#666;
line-height:1.7;
padding:0 15px;
text-align:left;
}

@media(max-width:768px){

.strength-grid{
grid-template-columns:1fr;
gap:15px;
}

/* カード */

.strength-card{
display:flex;
gap:14px;
align-items:stretch;   /* 高さを揃える */
}

/* 画像 */

.strength-card img{
width:150px;
height:100%;
object-fit:cover;      /* 上下トリミング */
display:block;
flex-shrink:0;
}

/* テキスト */

.strength-text{
display:flex;
flex-direction:column;
justify-content:center;
padding:10px 0;
}


/* 見出し */

.strength-card h3{
font-size:15px;
margin:0 0 6px;
text-align:left;
}

/* コメント */

.strength-card p{
font-size:13px;
margin:0;
line-height:1.6;
}

}

@media(max-width:768px){

.strength-card{
display:flex;
gap:14px;
align-items:stretch;
padding-bottom:0;   /* ←これ追加 */
}

}


/* =============================
   HERO
============================= */

.hero-wrapper{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
}

/* 背景動画 */
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-media video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* オーバーレイ（少し強め） */
.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:1;
}

/* =============================
   テキスト
============================= */

.hero-text{
  position:absolute;
  top:50%;
  left:8%;
  transform:translateY(-50%);
  color:#fff;
  z-index:10;
  max-width:600px;
  animation:heroFade 1.2s ease forwards;
  opacity:0;
}

/* メイン（SEO最重要） */
.catch{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(28px,3vw,42px);
  font-weight:700;
  color:#fff;
  line-height:1.5;
  margin-bottom:16px;
}

/* サブ */
.sub{
  font-size:clamp(14px,1.2vw,18px);
  line-height:1.8;
  margin-bottom:20px;
  opacity:0.9;
}

/* 英語（装飾） */
.english{
  font-family: 'HannariMincho', "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size:clamp(16px,1.5vw,24px);
  letter-spacing:3px;
  opacity:0.6;
  margin-top:20px;
}

/* =============================
   CTA（ボタン）
============================= */

.cta{
  margin-top:20px;
}

.btn{
  display:inline-block;
  padding:16px 32px;
  margin-right:10px;
  font-size:15px;
  font-weight:600;
  border-radius:6px;
  text-decoration:none; /* ←線なし */
  transition:.3s;
}

/* メインボタン */
.primary{
  background:#c0392b;
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
}

/* サブボタン */
.secondary{
  border:1px solid #fff;
  color:#fff;
}

/* ホバー */
.btn:hover{
  opacity:0.85;
  transform:translateY(-2px);
}

/* =============================
   アニメーション
============================= */

@keyframes heroFade{
  from{
    opacity:0;
    transform:translateY(-40%) translateX(-20px);
  }
  to{
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }
}

/* =============================
   スマホ
============================= */

@media (max-width:768px){

.hero-text{
  left:6%;
  max-width:90%;
}

.catch{
  font-size:22px;
}

.sub{
  font-size:14px;
}

.btn{
  display:block;
  margin-bottom:10px;
}

}


/* 三角屋根 */

.roof-overlay{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:160px;
  background:#fff;

clip-path: polygon(
0% 100%,
50% 50%,
100% 100%
);

  z-index:2;
}


/* ============================= */
/* グリッド施工事例 */
/* ============================= */

.works-section{
padding:80px 20px;
}

.works-title{
text-align:center;
font-size:28px;
margin-bottom:40px;
}

.works-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:80%;
margin:0 auto;
padding:0 20px;
}

/* =============================
カード
============================= */

.work-card{
position:relative;
overflow:visible;
}

.work-card a{
text-decoration:none;
color:inherit;
display:block;
}

/* =============================
画像
============================= */

.work-card img{
width:100%;
height:250px;
object-fit:cover;
display:block;
transition:0.4s;
}

.work-card:hover img{
transform:scale(1.01);
}

/* =============================
タグ
============================= */

.work-tag{

position:absolute;

top:-10px;
left:-10px;

background:rgba(255,255,255,0.9);
color:#000;

border:1px solid #000;

font-size:12px;
padding:4px 12px;

letter-spacing:0.05em;

z-index:3;

}

/* =============================
テキスト
============================= */

.work-text{
padding:12px;
text-align:center;
}

.work-title{
font-size:15px;
color:#333;
margin:0;
}

/* =============================
地域
============================= */

.work-place{
display:block;
font-size:12px;
color:#888;
margin-top:4px;
letter-spacing:0.05em;
}

.work-place::before{
content:"";
display:inline-block;
width:14px;
height:1px;
background:#999;
margin-right:6px;
vertical-align:middle;
}

/* =============================
MORE
============================= */

.works-more{
text-align:center;
margin-top:40px;
}

.works-more a{
font-size:14px;
color:#666;
text-decoration:none;
}

/* =====================
スマホ
===================== */

@media(max-width:768px){

.works-grid{
grid-template-columns:repeat(2,1fr);
gap:20px 10px;
max-width:100%;
padding:0;
margin:20px 0;
}

.work-card img{
height:190px;
}

.work-text{
text-align:left;
padding:10px 4px;
}

.work-title{
font-size:14px;
}

.work-place{
font-size:11px;
}

}
/* イベントバナー */
.event-banner{
  position:absolute;
  right:80px;
  bottom:-90px;
  z-index:6;
}

/* ラベル */
.event-labelmini{
  position:absolute;
  top:-15px;
  left:-15px;
  background:#990033;
  color:white;
  font-size:12px;
  padding:6px 14px;
  font-weight:bold;
  letter-spacing:0.05em;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);

  transform:rotate(-5deg);
  animation:eventFloat 3s ease-in-out infinite;
}

/* アニメーション */
@keyframes eventFloat{
  0%{ transform:rotate(-5deg) translateY(0px); }
  50%{ transform:rotate(-5deg) translateY(-6px); }
  100%{ transform:rotate(-5deg) translateY(0px); }
}


/* バナー画像 */
.event-banner img{
  width:320px;
  display:block;
  box-shadow:0 10px 25px rgba(0,0,0,0.35);
}


/* バナー出現 */

.event-banner{
  position:absolute;
  right:80px;
  bottom:-90px;
  z-index:6;

  opacity:0;
  transform:translateY(40px);
  animation:eventFadeIn 1.2s ease forwards;
  animation-delay:2s; /* 少し遅れて出る */
}

@keyframes eventFadeIn{

  0%{
    opacity:0;
    transform:translateY(40px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }

}

/* スマホ */
@media (max-width:768px){

.event-banner{
  right:15px;
  bottom:4px;
}

.event-banner img{
  width:180px;
}

}



/* ------------------
   選ばれる理由
------------------- */

.efforts{
background:#f4f4f4;
padding:120px 0;
overflow:hidden;
}

/* レイアウト */

.efforts-inner{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:120px 1fr;
gap:60px;
padding:0 20px;
position:relative;
}

/* 巨大英語 */

.efforts-inner::before{
content:"CORPORATE";

position:absolute;
left:-20px;
top:50%;
transform:translateY(-50%);

writing-mode:vertical-rl;
text-orientation:upright;

font-family:'Montserrat',sans-serif;
font-size:70px;
font-weight:600;
letter-spacing:6px;

color:rgba(0,0,0,0.08);

pointer-events:none;
}

.efforts-inner::after{
content:"";

position:absolute;
left:60px;
top:50%;
transform:translateY(-50%);

width:2px;
height:200px;

background:#336699;
opacity:0.3;
}


/* 左タイトル */

.efforts-title{
writing-mode:vertical-rl;
text-orientation:mixed;
font-size:32px;
font-weight:bold;
color:#333;
margin-left:60px;
}

.efforts-title h2{
font-size:28px;
margin:0;
line-height:1.6;
}

.efforts-title span{
font-size:12px;
letter-spacing:2px;
color:#336699;
margin-top:20px;
display:block;
}

/* カード */

.efforts-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

/* ------------------
カードデザイン
------------------- */

.effort-item{
position:relative;
display:flex;
align-items:center;

min-height:160px;
padding:35px;

border-radius:6px;
text-decoration:none;
color:#fff;

overflow:hidden;

/* スクロールアニメ */

opacity:0;
transform:translateY(40px);
}

/* 背景画像レイヤー（GPUで拡大） */

.effort-item::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background-size:cover;
background-position:center;

transition:transform 0.8s ease;

z-index:0;
}

/* overlay */

.effort-item::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.65);
transition:0.4s;
z-index:1;
}

/* hover */

.effort-item:hover{
transform:translateY(-6px);
}

.effort-item:hover::after{
transform:scale(1.08);
}

.effort-item:hover::before{
background:rgba(0,0,0,0.35);
}

/* テキスト */

.effort-info{
position:relative;
z-index:2;
}

.effort-info h3{
color:#fff;
font-size:30px;
font-weight: 600;
margin-bottom:10px;
}

.effort-info p{
font-size:14px;
line-height:1.7;
margin-bottom:15px;
}

/* ボタン */

.btn{
display:inline-block;
padding:8px 26px;

border:1px solid #fff;
border-radius:30px;

font-size:13px;
color:#fff;

transition:0.3s;
}

.btn::after{
content:"→";
margin-left:8px;
transition:0.3s;
}

.effort-item:hover .btn{
background:#fff;
color:#333;
}

.effort-item:hover .btn::after{
margin-left:14px;
}

/* 背景画像 */

.effort1::after{
background-image:url("img/res_03.png");
}

.effort2::after{
background-image:url("img/syamei.png");
}

.effort3::after{
background-image:url("img/top_slider_c.png");
}

.effort4::after{
background-image:url("img/house.jpg");
}

/* ------------------
スクロール表示
------------------- */

.effort-item.show{
opacity:1;
transform:translateY(0);
transition:0.8s;
}

/* ------------------
スマホ
------------------- */

@media (max-width:768px){

.efforts-inner{
grid-template-columns:1fr;
}

.efforts-title{
writing-mode:horizontal-tb;
text-align:center;
margin-left:0;
}

.efforts-list{
grid-template-columns:1fr;
}

/* 英語 */

.efforts-inner::before{
left:-20px;
top:-140px;
transform:none;
font-size:40px;
}

/* ライン */

.efforts-inner::after{
display:none;
}

}


/* その他メニュー */

.top-category{
width:100%;
}

/* カテゴリーブロック */

.category-item{
position:relative;
width:100%;
min-height:420px;

display:flex;
align-items:flex-start;
justify-content:flex-start;

padding:100px 10%;

color:#fff;
text-decoration:none;

overflow:hidden;
}

/* 背景レイヤー */

.category-item::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background-size:cover;
background-position:center;

transform:scale(1);
transition:transform 0.8s ease;

z-index:0;
}

/* hoverズーム */

.category-item:hover::before{
transform:scale(1.02);
}

/* 背景画像 */

.company::before{
background-image:url("img/52f1.jpg");
}

.staff::before{
background-image:url("img/co_af.jpg");
}

.maintenance::before{
background-image:url("work/w_img/re_52_c.png");
}

/* オーバーレイ */

.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:linear-gradient(
rgba(0,0,0,0.45),
rgba(0,0,0,0.2)
);

transition:0.4s;

z-index:1;
}

.category-item:hover .overlay{
background:linear-gradient(
rgba(0,0,0,0.7),
rgba(0,0,0,0.5)
);
}

/* テキスト */

.category-text{
position:relative;
z-index:2;

max-width:600px;
text-align:left;
}

.sub{
font-size:14px;
opacity:0.9;
letter-spacing:2px;
}

.category-text h2{
font-size:32px;
color:#fff;
margin:10px 0;
}

/* ボタン */

.btn{
display:inline-block;
padding:8px 22px;

border:1px solid #fff;
border-radius:30px;

font-size:13px;
color:#fff;

transition:0.3s;
}

/* ボタン矢印 */

.btn::after{
content:"→";
margin-left:10px;
transition:0.3s;
}

.category-item:hover .btn::after{
margin-left:18px;
}

/* ボタンhover */

.category-item:hover .btn{
background:#fff;
color:#333;
}


.category-desc{
margin:0 0 20px 0;
font-size:16px;
line-height:1.7;
color:#fff;
opacity:0.9;
font-family:'Noto Sans JP','Yu Gothic',sans-serif;
font-weight:400;
max-width:420px;
}



/* ------------------
   施工事例
------------------- */

.swiper-slide {
  text-align: center;
  padding-bottom: 5px; /* コメント＋ページネーションの余白確保 */
}

.swiper-slide img {
  width: 100%;
  height: 350px;      /* 高さを固定 */
  object-fit: cover;  /* はみ出る部分はトリミング */
  border-radius: 0;
}


.swiper-slide h4 {
  margin: 10px 0 5px;
  font-size: 1.1em;
  font-weight: 600;
}

.works-subtitle {
  width: 100%;          /* 画面幅いっぱいに広がる */
  max-width: 800px;     /* 最大幅を800pxに制限 */
  text-align: left;     /* 中身の文字は左揃え */
  font-size: 15px;
  color: #666;
  margin: -10px auto 40px auto; /* 上: -10px, 下:40px, 左右: 自動で中央寄せ */
  letter-spacing: 0.05em;
  box-sizing: border-box; /* 幅計算を安定させる */
}

.swiper-slide p {
  margin: 0;
  font-size: 0.9em;
  color: #555;
}

.swiper {
  padding-bottom: 60px; /* ページネーション分の余白 */
}

.swiper-pagination {
  bottom: 10px !important; /* ページネーションをスライド下に移動 */
}

.swiper-pagination-bullet {
  background: #336699 !important; /* ページネーション丸：通常 */
}
.swiper-pagination-bullet-active {
  background: #336699 !important; /* ページネーション丸：アクティブ */
}
.swiper-button-next,
.swiper-button-prev {
  color: #fff !important; /* !important は値の後、セミコロンの前 */
  font-size: 30px;
}

@media screen and (max-width: 640px) {
  .swiper-slide img {
    width: 100%;
    height: 300px;   /* 高さを大きくする */
    object-fit: cover; /* 枠に合わせて切り抜く */
  }
}



/* ======================
  海 背景
====================== */


.seaside-hero-inner{
  text-align:center;
  max-width:700px;
  padding:20px;
}

.seaside-hero-logo{
  width:100%;
  max-width:420px;
  margin-bottom:40px;
}

.seaside-hero-text{
  color:#fff;
  font-size:13px;
  line-height:2;
}

.seaside-hero-btn{
  display:inline-block;
  margin-top:30px;
  padding:10px 44px;

  background:#fff;
  color:#336699;

  text-decoration:none;
  border-radius:5px;
  font-weight:600;

  transition:all .3s;
}

.seaside-hero-btn:hover{
  background:#000;
  color:#fff;
}

.seaside-hero-btn:hover{
  background:#000;
  color:#fff;
  transform:translateY(-2px);
}

.seaside-hero{
  width:100%;
  min-height:90vh;
  background:url("img/top_bc_d.png") center/cover no-repeat;

  display:flex;
  align-items:center;
  justify-content:center;

  animation:bgZoom 15s ease-in-out infinite alternate;
}

@keyframes bgZoom{
  from{
    background-size:100%;
  }
  to{
    background-size:110%;
  }
}

/* スマホ */
@media (max-width:768px){

  .seaside-hero{
    background:url(img/top_bc_c.png) center/cover no-repeat;
    animation:none;   /* これでカクつき防止 */
  }

}

:root {
--accent: #111;
--text: #222;
--gray: #666;
}

.container h2 {
  margin-bottom: 10px;
  letter-spacing: .15em;
}

.container p {
  margin-top: 0;
  color: #666;
}

.banner,
.box2 img {
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border-radius: 2px;
}



/* ==== メインメニューバナー文字 ==== */

  .banner-title {
    font-size: 30px;
    color: #fff;
  　font-family: 'HannariMincho', "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
    margin: 0 0 15px 15px;
  }

  .banner-subtitle {
    font-size: 17px;
    color: #ccc;
    font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    margin: 15px 15px 15px 15px;
    line-height: 1.4;
  }

/* ===== スマホ（768px以下）では少し小さく ===== */
@media screen and (max-width: 768px) {
  .banner-title {
    font-size: 22px; /* ← 約8px小さく */
    margin: 0 0 10px 10px;
  }

  .banner-subtitle {
    font-size: 14px; /* ← 少し小さく */
    margin: 10px 10px 10px 10px;
  }
}


/* ==== 2カラムセクション ==== */
.feature-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin: 0px auto;
  padding: 10px;
  max-width: 1000px;
  background: #fff;
}

/* ==== 画像 ==== */
.feature-box img {
  width: 45%;
  height: auto;
  object-fit: cover;
}

/* ==== テキストエリア ==== */
.feature-content {
  width: 55%;
}

.feature-content h3 {
  font-family: "Noto Serif JP", serif; /* ←ここだけ専用フォント */
  font-size: 1.8em;
  margin-bottom: 15px;
}

.feature-content p {
  font-size: 1em;
  line-height: 1.8;
  margin-bottom: 25px;
}

/* ==== ボタン ==== */
.feature-content .btn {
  display: inline-block;
  padding: 12px 35px;
  background: #333;
  color: #fff;
  text-decoration: none;
  font-size: 1em;
  border-radius: 0;
  transition: 0.3s;
  text-align: center;
}
.feature-content .btn:hover {
  background: #666;
}

/* ==== スマホ対応 ==== */
@media (max-width: 768px) {
  .feature-box {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }

  .feature-box img {
    width: 100%;
    max-width: 420px;
  }

  .feature-content {
    width: 100%;
  }

  .feature-content h3 {
    font-size: 1.4em;
  }

  .feature-content p {
    font-size: 0.95em;
  }

  .feature-content .btn {
    display: block;
    margin: 0 auto;
    width: fit-content;
  }
}

 /* スマホでは白文字 */

@media (max-width: 768px) {
  .reason {
    color: #fff !important; /* インラインスタイルより優先 */
  }
}




/* 画像 */
.banner img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(60%);
  transition: transform 0.5s ease;
}

/* ホバー時に拡大 */
.banner:hover img {
  transform: scale(1.05);
}

/* 中央のテキスト */
.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;           /* 画面幅に合わせる */
  max-width: 250px;     /* 最大幅を設定 */
}
.banner-content p {
  margin: 0px 0;
  font-family: "游明朝", "Yu Mincho", serif;
  color: #fff;
  font-size: 16px;
  white-space: nowrap;      /* これで改行を防ぐ */
}

/* スマホ調整 */
@media (max-width: 768px) {
.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 98%;           /* 画面幅に合わせる */

  }
}



/* ===== 更新履歴 ===== */

.news-heading{
  font-size:32px;
  letter-spacing:0.08em;
  margin-bottom:5px;
}

.news-sub{
  position:relative;
  display:inline-block;

  font-size:16px;
  color:#666;

  padding-bottom:10px;
}

/* 下ライン */

.news-sub::after{
  content:"";
  position:absolute;

  left:50%;
  transform:translateX(-50%);

  bottom:0;

  width:60px;
  height:2px;

  background:#1f3f6b;
}

/* リスト */

.news-list{
  list-style:none;
  max-width:1200px;
  margin:60px auto;
  padding:0;
}

/* 行 */

.news-item{
  position:relative;

  display:flex;
  align-items:center;
  gap:14px;

  padding:36px 20px;

  border-bottom:1px solid #eee;

  transition:transform 0.3s ease;
}

/* hoverで少し動く */

.news-item:hover{
  transform:translateX(4px);
}



/* 日付 */

.news-date{
  font-size:14px;
  color:#888;
  min-width:90px;
}

.news-badge{
  font-size:11px;
  font-weight:bold;

  padding:2px 6px;

  background:#1f3f6b;
  color:#fff;

  border-radius:3px;

  animation:newFadeBlue 2.5s ease-in-out infinite;
}

@keyframes newFadeBlue{

0%{
background:#1f3f6b;
}

50%{
background:#3c6fb3;
}

100%{
background:#1f3f6b;
}

}

/* カテゴリ */

.news-cat{
  font-size:13px;
  font-weight:600;   /* ← 太字 */
  border:1px solid #000;
  background:#fff;

  padding:2px 8px;
}

/* タイトル */

.news-title{
  text-decoration:none;
  color:#333;
  font-size:17px;

  transition:0.3s;
}

.news-title:hover{
  color:#ccc;
}

/* 矢印（ふわっと出る） */

.news-title::after{
  content:"→";

  margin-left:8px;

  opacity:0;
  transform:translateX(-8px);

  transition:opacity 0.35s ease, transform 0.35s ease;

  color:#1f3f6b;
}

.news-item:hover .news-title::after{
  opacity:1;
  transform:translateX(0);
}
@media (max-width:768px){

.news-item{
  display:grid;

  grid-template-columns:auto auto 1fr;
  grid-template-rows:auto auto;

  gap:6px 10px;

  padding:16px 10px;
}

/* 日付 */
.news-date{
  grid-column:1;
  grid-row:1;
}

/* カテゴリ */
.news-cat{
  grid-column:2;
  grid-row:1;
  width:fit-content;
}

/* NEWアイコン（カテゴリ横） */
.news-badge{
  grid-column:3;
  grid-row:1;
  justify-self:start;
}

/* タイトル */
.news-title{
  grid-column:1 / 4;
  grid-row:2;
}

}

/* ================================
   インスタ
================================= */

/* 共通：とりあえず両方非表示 */
.snapwidget-pc,
.snapwidget-sp {
  display: none;
}

/* PC用を表示（幅768px以上） */
@media screen and (min-width: 768px) {
  .snapwidget-pc {
    display: block;
  }
}

/* スマホ用を表示（幅767px以下） */
@media screen and (max-width: 767px) {
  .snapwidget-sp {
    display: block;
  }
}


.snapwidget-widget {
  pointer-events: none; /* iframe全体のクリックを無効化 */
}
.snapwidget-widget {
  width: 100% !important;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: none;
}




/* ================= PDFセクション白背景・幅設定 ================= */
.pdf-white-box {
  background-color: #fff;   
  padding: 30px;            
  margin: 0 auto 50px auto; 
  box-sizing: border-box;
  max-width: 1200px;        
  width: 100%;              
  border-radius: 2px;      
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

/* タイトル部分に背景色 */
.pdf-title-bg {
   background: url("img/bc-02.gif") repeat; /* 繰り返し表示 */
  padding: 15px 20px;
  border-radius: 10px;
  margin-bottom: 30px;
}

/* PDFボックス共通 */
.pdf-container {
  display: flex;
  gap: 40px; 
  justify-content: center;
  flex-wrap: wrap;
}

.pdf-box a {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.pdf-box a:hover {
  color: #007acc;
}

.pdf-box img {
  width: 300px; 
  height: auto;
}

.pdf-desc {
  font-family: 'HannariMincho', "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 14px;
  max-width: 450px; 
  text-align: left;
}

/* ============================== スマホ表示 ================================= */
@media screen and (max-width: 767px) {
  .pdf-white-box {
    max-width: 600px;       
    padding: 20px;          
  }

  .pdf-title-bg {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  .pdf-container {
    flex-direction: row; 
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }

  .pdf-box a {
    flex-direction: column; 
    align-items: center;
    text-align: center;
  }

  .pdf-box img {
    width: 100%;
    max-width: 150px; 
    height: auto;
  }

  .pdf-desc {
    max-width: 90%; 
    text-align: center;
  }
}




/* バナー全体 */

.banner-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px; /* ぴったり */
  overflow-x: hidden; /* 念のため */
}

/* スマホ */
@media (max-width: 768px) {
  .banner-container {
    grid-template-columns: repeat(2, 1fr);
  }
}


.banner {
  position: relative;
  overflow: hidden;
  background-color: #222;
  cursor: pointer;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  text-decoration: none;  /* 下線を消す */
  display: block;         /* aタグをブロック化 */
  color: inherit;         /* テキスト色を継承 */
}


.banner:hover img {
  transform: scale(1.05);
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.banner-content p {
  margin: 10px 0;
  font-family: 'HannariMincho', "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: #fff;
  font-size: 30px;
}

.banner-content a {
  display: inline-block;
  padding: 50px 50px;
  background-color: rgba(0, 0, 0, 0.7);
  font-family: 'HannariMincho', "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: #ccc;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.banner-content a:hover {
  background-color: #bfa145;
}

/* スライダーコンテナ */
.slider-container {
  overflow-x: hidden; /* 横にはみ出した部分を隠す */
}

@media (max-width: 768px) {
  .banner-content p {
    font-size: 15px; /* 少し小さくする */
  }
  .banner-content a {
    padding: 20px 20px; /* ボタンも少し小さく */
    font-size: 15px;
  }
}


/* ===== 縦書きカード（共通） ===== */
.vertical-card {
  writing-mode: vertical-rl;     /* 縦書き */
  text-orientation: mixed;
  background: #fff;
  padding: 30px 20px;
  display: flex;                 /* ← 子要素を上揃えに制御する */
  justify-content: flex-start;   /* 縦方向の上揃え */
  align-items: flex-start;       /* 横方向の左寄せ */
  font-family: 'Shippori Mincho', serif;
  height: auto;                  /* 必要に応じて高さ指定 */
}

/* ===== fade-in-only（中身） ===== */
.vertical-card .fade-in-only {
  display: block;                /* ← 不要な中央寄せ防止 */
  margin: 0;
  padding: 0;
  text-align: start;             /* ← 縦書きの自然な配置 */
}

/* ===== 縦書きタイトル ===== */
.vertical-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: block;
  font-size: 1.2em !important;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin: 0;
  padding: 0 3px;
}

/* ===== テキスト部分 ===== */
.vertical-card p {
  font-size: 1rem;
  line-height: 2.2;
  margin: 0;
  padding: 0;
}


/* ===== 通常の見出し（企業理念など） ===== */
.vertical-card h2:not(.vertical-title) {
  writing-mode: horizontal-tb;  /* 横書きに戻す */
  text-align: center;
  margin: 40px 0 10px;
  font-size: 1.3rem;
  font-weight: bold;
}

/* ===== スマホ対応 ===== */
@media screen and (max-width: 768px) {
  .vertical-card {
    padding: 15px 10px;
  }

  .vertical-title {
    height: 200px;
    font-size: 1.1rem;
  }

  .vertical-card h2:not(.vertical-title) {
    font-size: 1.1rem;
    margin-top: 20px;
  }

  .vertical-card p {
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 10px;
  }
}


/* ===== 協力企業バナー全体 ===== */
.banner-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.banner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PCでは4列 */
  gap: 20px;
  justify-items: center;
}

@media screen and (max-width: 1024px) {
  .banner-grid {
    grid-template-columns: repeat(3, 1fr); /* タブレットは3列 */
    gap: 15px;
  }
}

@media screen and (max-width: 768px) {
  .banner-grid {
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    gap: 12px;
  }
}


/* ===== バナー個別 ===== */
.banner-item {
  display: block;
  width: 100%;
  max-width: 280px;
  height: 80px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.banner-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.banner-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ============================== ブログ ============================== */

#note-articles{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.article-card{
border:1px solid #000;
background:#fff;
padding:12px;
margin:5px;
box-sizing:border-box;
text-align:left;
border-radius:0;
text-decoration:none;
display:block;
transition:background 0.3s;
}

.article-card:hover{
background:#f5f5f5;
}

.article-card .title{
font-family:"Noto Serif JP","Yu Mincho",serif;
margin:5px 0;
font-size:1.2rem;
color:#336699;
}

.article-card .excerpt{
font-family:"Noto Sans JP","Yu Gothic",sans-serif;
margin:5px 0;
font-size:0.85rem;
color:#333;
}

.article-card .date{
font-family:"Noto Sans JP","Yu Gothic",sans-serif;
font-size:0.9rem;
color:#666;
}

/* スマホ */

@media (max-width:768px){

#note-articles{
grid-template-columns:repeat(2,1fr);
gap:8px;
}

.article-card{
margin:0;
padding:10px;
}

}