@charset "UTF-8";
/* ==================================================================
 *  事業内容（page-service.php）専用CSS
 * ================================================================== */
/* 事業内容：黒ベース。下のフッター（暗）へそのままつながる */
#service { padding: 120px 48px 140px; background: linear-gradient(180deg,#151517 0,#101012 100%); }
#service_contents { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 60px; }
/* 各事業ブロックを白線の枠で囲んで区切る（黒地での視認性向上） */
.service_contents_box {
  display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center;
  border: 1px solid rgba(255,255,255,.22); /* ★枠線の強さ */
  border-radius: 6px;
  background: rgba(255,255,255,.02);
  padding: 48px 52px;
}
#service02 .service_contents_text { order: 1; }
#service02 .service_contents_img { order: 2; }

/* --- 写真：白い細枠 ＋ ホバーでゆっくりズーム（背後のズラし面は廃止） --- */
.service_contents_img { position: relative; }
.sv-img-frame {
  position: relative; z-index: 1; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); /* ブロック枠と二重にならないよう控えめに */
}
.service_contents_img img, .service_contents_img .ph {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transform: scale(1); transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.service_contents_box:hover .service_contents_img img,
.service_contents_box:hover .service_contents_img .ph { transform: scale(1.06); }
.service_contents_img .ph { background: linear-gradient(145deg,#26262b,#15151a); position: relative; }
.service_contents_img .ph::after { content: 'PHOTO'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--en); letter-spacing: .4em; font-size: 11px; color: #55555a; }

/* --- 順次表示：画像じんわり → 見出しが揃う → 本文フェード ---
 *  .img-in / .text-in は footer.php のJSが .service_contents_box に付与する
 */
.sv-img-frame { opacity: 0; transform: scale(1.04); transition: opacity 1.7s ease, transform 2.4s cubic-bezier(.22,.7,.24,1); }
.service_contents_box.img-in .sv-img-frame { opacity: 1; transform: scale(1); }

/* --- テキスト --- */
.service_contents_text { position: relative; }
/* 見出しが散らばった状態から動くので、はみ出しても親を切らない */
.service_contents_text dt.typo-scatter { overflow: visible; }
.service_contents_text dd { opacity: 0; transform: translateY(14px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.22,.9,.3,1); }
.service_contents_box.text-in .service_contents_text dd { opacity: 1; transform: none; }

.service_contents_text dt { font-family: var(--serif); font-size: clamp(20px,2.4vw,26px); font-weight: 700; color: var(--paper); letter-spacing: .08em; position: relative; padding-bottom: 20px; margin-bottom: 24px; }
.service_contents_text dt::before { content: attr(data-en); display: block; font-family: var(--en); font-size: 12px; letter-spacing: .24em; color: var(--gray); margin-bottom: 10px; font-weight: 400; text-transform: uppercase; }
.service_contents_text dt::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 1px; background: var(--paper); }
.service_contents_text dd { font-size: 15px; line-height: 2.0; color: #c9c9cc; }
.service-note { max-width: 1120px; margin: 90px auto 0; text-align: center; font-size: 13px; color: var(--gray); letter-spacing: .06em; }
@media (max-width: 1024px) {
  #service { padding-left: 32px; padding-right: 32px; }
  #service_contents { gap: 48px; }
  .service_contents_box { grid-template-columns: 1fr; gap: 34px; padding: 36px 32px 40px; }
  #service02 .service_contents_text { order: 2; }
  #service02 .service_contents_img { order: 1; }
}
@media (max-width: 768px) {
  #service { padding: 76px 22px 100px; }
  #service_contents { gap: 36px; }
  .service_contents_box { padding: 24px 20px 30px; gap: 24px; }
}


/* ==================================================================
 *  選ばれる理由（3つの強み）／明るい面
 *  暗いヒーローの直後に置き、次の #service（黒）へつなぐ
 * ================================================================== */
#reason { padding: 110px 48px 120px; background: #f7f7f5; }
.reason-inner { max-width: 1120px; margin: 0 auto; }

.reason-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--line-d); border: 1px solid var(--line-d); }
.reason-tile { background: #fff; padding: 42px 32px; position: relative; transition: background .4s; }
.reason-tile:hover { background: #f0f0ee; }
.reason-tile .n { font-family: var(--en); font-size: 12px; letter-spacing: .3em; color: #aaa; }
.reason-tile .sq { position: absolute; top: 42px; right: 32px; width: 11px; height: 11px; background: var(--ink); transition: transform .4s; }
.reason-tile:hover .sq { transform: rotate(90deg); }
.reason-tile h3 { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ink); margin: 14px 0 12px; letter-spacing: .06em; line-height: 1.55; }
.reason-tile p { font-size: 13.5px; line-height: 2.05; color: #35353b; }

@media (max-width: 1024px) { #reason { padding-left: 32px; padding-right: 32px; } .reason-tiles { grid-template-columns: 1fr; } }
@media (max-width: 768px) { #reason { padding: 76px 22px 90px; } .reason-tile { padding: 30px 22px; } .reason-tile .sq { top: 30px; right: 22px; } }