@charset "utf-8";

:root {
  --color-black: #222;
  --color-main: #72be36; /* 黄緑色 */
  --color-main-text: #fff;
  --color-sub: #06C755;
  --color-sub-text: #fff;
  --color-main-light: #c2c5f1;
  --color-required: #f20f01;
  --color-link: #068ab5;
  --color-header-text: #222;
  --color-header-text-scroll: #222;
}

/* Reset & Base */
header, footer, nav, section, aside, article { display: block; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  margin: 0; padding: 0;
  background-color: #f8f9fa;
}

/* ▼ 右下ワンポイントロゴ（追従）
   背景として敷くと、背景色を持つ要素（緑帯・フォーム・フッター等）の下に潜るため、
   固定レイヤーとして最前面に重ねる。ヘッダー（z-index:99）より下、クリックは透過。
   邪魔な場合は z-index を 1 に下げるか、opacity で薄くして調整する。
   ▲ */
body::after {
  content: '';
  position: fixed;
  right: 5%;
  bottom: 1%;
  width: 320px;
  height: 320px;
  background-image: url('../img/ロゴスタンプ テーマ付き.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 320px auto;
  z-index: 98;
  pointer-events: none;
}
@media (max-width: 1023px) {
  body::after {
    width: 240px; height: 240px;
    right: 4%; bottom: 4%;
    background-size: 240px auto;
  }
}
@media (max-width: 767px) {
  body::after {
    width: 130px; height: 130px;
    right: 3%; bottom: 3%;
    background-size: 130px auto;
  }
}

body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, input, a, textarea, select, span, nav, section, header {
  margin: 0; padding: 0; box-sizing: border-box;
}

img { vertical-align: top; max-width: 100%; height: auto; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

html {
  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

a {
  color: var(--color-black);
  text-decoration: none;
  transition: all 0.3s !important;
}

#wrapper { overflow: hidden; }
.inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .inner { padding: 0 20px; }
}

/* Header */
.header {
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  z-index: 99;
  transition: ease .3s;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
}
.header.is-scroll .header-wrap {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header-wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  padding: 12px 30px; transition: ease .3s;
}
.header-logo { margin-right: auto; }
.header-logo a { color: var(--color-header-text); display: flex; align-items: center; gap: 10px; }
.header-logo img { max-height: 40px; width: auto; }

.header-nav { display: flex; align-items: center; }
.header-nav-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; }
.header-nav-menu a { font-weight: 700; color: var(--color-header-text); }

.header-nav-contact {
  position: relative; font-weight: 700;
  padding: 0.9em 2em; background: #ff8c00; color: #fff !important;
  border-radius: 200px; transition: ease .3s; margin-left: 20px;
  white-space: nowrap;
}
.header-nav-contact:hover { opacity: .8; }

.line-sns-icon { width: 32px; height: 32px; display: block; }

/* タブレット・SP：1段目にロゴ、2段目にナビ＋CTA の2段組 */
@media (max-width: 1023px) {
  .header-wrap { padding: 10px 20px; gap: 8px 16px; }
  .header-logo { margin-right: 0; width: 100%; }
  .header-logo img { max-height: 34px; }
  .header-nav { width: 100%; justify-content: space-between; gap: 12px; }
  .header-nav-menu { gap: 18px; font-size: 0.9rem; }
  .header-nav-contact { margin-left: 0; padding: 0.7em 1.4em; font-size: 0.9rem; }
  .line-sns-icon { width: 26px; height: 26px; }
}
@media (max-width: 767px) {
  .header-wrap { padding: 8px 15px; }
  .header-logo img { max-height: 28px; }
  .header-nav-menu { gap: 12px; font-size: 0.78rem; }
  .header-nav-contact { padding: 0.65em 1.1em; font-size: 0.78rem; }
  .line-sns-icon { width: 22px; height: 22px; }
}

/* ヒーローバナー */

/* ▼ キービジュアル背景
   画像：img/bg-hero.jpg（PC・タブレット・SP共通。SPは表示位置をずらして部分使用）
   単色に戻す場合：--hero-bg-image を none にする
   白レイヤーの濃度：--hero-overlay（上〜中央）／ --hero-overlay-bottom（下端）
   ※下端を濃くしているのは、足元のスカイラインイラストを白地の上に乗せるため
   ▲ */
.hero-flat {
  --hero-bg-image: url('../img/bg-hero.jpg');
  --hero-overlay: rgba(255, 255, 255, 0.55);
  --hero-overlay-bottom: rgba(255, 255, 255, 0.92);

  position: relative;
  width: 100%;
  min-height: 85vh;
  background-color: #f5f6f4; /* 画像未配置時・読込前のフォールバック */
  background-image:
    linear-gradient(to bottom,
      var(--hero-overlay) 0%,
      var(--hero-overlay) 48%,
      var(--hero-overlay-bottom) 100%),
    var(--hero-bg-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 120px;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-flat-inner {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 10px 20px;
  position: relative;
  z-index: 2;
}

.hero-sub-text {
  font-size: 1.35rem;
  font-weight: 700;
  color: #333;
  line-height: 1.7;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
}

.hero-flat-logo {
  margin-top: 10px;
  margin-bottom: 30px;
}
.hero-flat-logo img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  /* 背景写真の上でロゴを浮かせるため白のにじみを追加（単色背景では見えない） */
  filter: drop-shadow(0 0 26px #fff) drop-shadow(0 4px 15px rgba(0,0,0,0.08));
}

/* ボタン注釈テキストスタイル */
.hero-btn-annotation {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.hero-btn-annotation .slash-green {
  color: var(--color-main);
  font-weight: 900;
}

.hero-btn-wrap {
  margin-top: 15px;
  margin-bottom: 10px;
}
.hero-btn-wrap .btn-line-cta {
  display: inline-block;
  background: linear-gradient(135deg, #07E662 0%, #05A044 100%);
  color: #ffffff !important;
  font-size: 1.65rem;
  font-weight: 900;
  padding: 22px 75px;
  border-radius: 200px;
  box-shadow: 0 8px 25px rgba(6, 199, 85, 0.4);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
.hero-btn-wrap .btn-line-cta:hover {
  background: linear-gradient(135deg, #00FF66 0%, #04883A 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(6, 199, 85, 0.55);
}

.hero-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110px;
  z-index: 1;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-flat { min-height: 70vh; padding-top: 110px; padding-bottom: 100px; }
  .hero-sub-text { font-size: 1.15rem; }
  .hero-flat-logo img { max-width: 860px; }
  .hero-btn-annotation { font-size: 1.5rem; }
  .hero-btn-wrap .btn-line-cta { font-size: 1.4rem; padding: 20px 50px; }
  .hero-skyline { height: 85px; }
}

@media (max-width: 767px) {
  .hero-flat {
    min-height: 85vh; padding-top: 80px; padding-bottom: 70px;
    /* SPはPCと同じ bg-hero.jpg を使用。縦長の画面に cover で切り出すと
       左右が大きく切れるため、建物とカーポートが中心に来るよう横位置をずらす。
       見せたい位置を変える場合は下の 45% を増減する（0%=左端 / 100%=右端） */
    background-position: 45% center;
  }
  .hero-flat-inner { padding: 10px 15px; }
  .hero-sub-text { font-size: 1.05rem; margin-bottom: 20px; }
  .hero-flat-logo { margin-bottom: 20px; }
  .hero-flat-logo img { max-width: 600px; }
  .hero-btn-annotation { font-size: 0.95rem; margin-bottom: 8px; }
  .hero-btn-wrap .btn-line-cta { font-size: 1.2rem; padding: 18px 36px; max-width: 100%; }
  .hero-skyline { height: 60px; }
}

/* ▼ PC時、下に続く .first-content の斜めカット（clip-path）で削れた三角部分に
   地色が出て背景写真が途切れるため、KVの背景レイヤーを下方向へ延長して回り込ませる。
   背景は擬似要素に移し、.first-content（DOM上で後方・position:relative）が
   その上に重なることで、削れた部分だけKVが覗く状態になる。
   ▲ */
@media (min-width: 1024px) {
  .hero-flat {
    overflow: visible;
    background-image: none;
  }
  .hero-flat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -120px; /* 斜めカットの落ち込み分。6%相当を十分に上回る値 */
    background-color: #f5f6f4;
    background-image:
      linear-gradient(to bottom,
        var(--hero-overlay) 0%,
        var(--hero-overlay) 42%,
        var(--hero-overlay-bottom) 86%,
        var(--hero-overlay-bottom) 100%),
      var(--hero-bg-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
  }
}

/* Section Common */
.block { position: relative; }
.hdl { font-size: 36px; line-height: 1.3; font-weight: 900; text-align: center; margin-bottom: 30px; }
.hdm { font-size: 26px; line-height: 1.3; font-weight: 700; margin-bottom: 20px; }
.comtxt { line-height: 2; }
.fcwhite { color: #fff !important; }

@media (min-width: 1024px) {
  .comtxt { font-size: 18px; }
}
@media (max-width: 1023px) {
  .hdl { font-size: 30px; }
  .hdm { font-size: 22px; }
}
@media (max-width: 767px) {
  .hdl { font-size: 24px; margin-bottom: 24px; }
  .hdm { font-size: 20px; }
}

/* 黄緑色の背景エリア */
.first-content {
  position: relative;
  z-index: 1; /* 延長したKV背景レイヤーより前面に置く */
  padding: 100px 0 80px;
  background-color: var(--color-main);
  color: #fff;
}

@media (min-width: 1024px) {
  .first-content {
    clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
  }
}

.about .aboutbox {
  display: flex;
  align-items: center;
  gap: 40px;
}
.about .aboutbox .aboutcont {
  flex: 1;
}
.about .aboutbox .aboutimg {
  width: 45%;
  flex-shrink: 0;
  text-align: center;
}
.about .aboutbox .aboutimg img {
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .first-content { padding: 70px 0 60px; }
  .about .aboutbox { gap: 30px; }
  .about .aboutbox .aboutimg { width: 40%; }
}
@media (max-width: 767px) {
  .first-content { padding: 60px 0 50px; }
  .about .aboutbox { flex-direction: column; gap: 25px; }
  .about .aboutbox .aboutimg { width: 100%; }
}

/* チェックリスト スタイル */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}
.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
}
.chk-box {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chk-box.checked {
  background-color: #ffffff;
  color: var(--color-main);
  font-weight: 900;
  font-size: 14px;
}
.chk-box.unchecked {
  background-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 767px) {
  .checklist-item { font-size: 0.95rem; align-items: flex-start; }
  .chk-box { margin-top: 2px; }
}

/* お悩み解決エリア（背景同化・元画像サイズ・文字サイズ2倍） */
.solution-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  max-width: 980px;
  margin: 60px auto 30px;
  padding: 20px;
  background-color: transparent; /* 背景色を他の背景と同化 */
}

.solution-char {
  flex-shrink: 0;
  max-width: 34%; /* 枠側で表示幅を決める。画像だけ縮むと右に空白が出るため */
}
.solution-char img {
  width: 100%; /* 素材は2倍書き出し想定。枠幅ぶんで表示し画質低下を防ぐ */
  max-width: 100%;
  height: auto;
  display: block;
}

.solution-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

/* 緑の角丸帯バナー（文字サイズ倍増: 2.3rem） */
.solution-badge {
  background-color: #72be36;
  color: #ffffff;
  font-size: 2.3rem;
  font-weight: 900;
  padding: 10px 38px;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.05em;
}

/* タイトル文字（文字サイズ倍増: 5.4rem） */
.solution-title {
  font-size: 5.4rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.solution-title .orange-text {
  color: #f28f02;
  text-shadow: 
    3px 3px 0 #fff, -3px -3px 0 #fff, 
    3px -3px 0 #fff, -3px 3px 0 #fff,
    0 3px 3px #fff, 0 -3px 3px #fff,
    3px 0 3px #fff, -3px 0 3px #fff,
    0 4px 10px rgba(0,0,0,0.12);
}

.solution-title .green-text {
  color: #72be36;
  text-shadow: 
    3px 3px 0 #fff, -3px -3px 0 #fff, 
    3px -3px 0 #fff, -3px 3px 0 #fff,
    0 3px 3px #fff, 0 -3px 3px #fff,
    3px 0 3px #fff, -3px 0 3px #fff,
    0 4px 10px rgba(0,0,0,0.12);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .solution-container { gap: 20px; margin: 45px auto 25px; }
  .solution-badge { font-size: 1.7rem; padding: 9px 28px; }
  .solution-title { font-size: 3.8rem; }
}

@media (max-width: 767px) {
  .solution-container {
    flex-direction: column;
    text-align: center;
    padding: 20px 15px;
    gap: 15px;
    margin: 40px 15px 20px;
  }
  .solution-char {
    max-width: 55%;
  }
  .solution-content {
    align-items: center;
  }
  .solution-badge {
    font-size: 1.3rem;
    padding: 8px 24px;
  }
  .solution-title {
    font-size: 3.0rem;
  }
}

/* Feature Section */
.feature { margin-top: 80px; }
.feature .featbox { display: flex; align-items: center; gap: 40px; margin-bottom: 80px; }
.feature .featbox+.featbox { flex-direction: row-reverse; }
.feature .featbox .featimg { width: 50%; flex-shrink: 0; }
.feature .featbox .featimg img { border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.featbox:nth-of-type(odd) .featimg img { clip-path: polygon(0 0, 0 100%, 92% 100%, 100% 0); }
.featbox:nth-of-type(even) .featimg img { clip-path: polygon(8% 0, 0 100%, 100% 100%, 100% 0); }
.feature .featbox .featcont { flex: 1; }

@media (min-width: 768px) and (max-width: 1023px) {
  .feature { margin-top: 60px; }
  .feature .featbox { gap: 25px; margin-bottom: 60px; }
}
@media (max-width: 767px) {
  .feature { margin-top: 50px; }
  .feature .featbox,
  .feature .featbox+.featbox { flex-direction: column; gap: 20px; margin-bottom: 50px; }
  .feature .featbox .featimg { width: 100%; }
}

/* Company Table */
.company { margin-top: 100px; }
.comtable { width: 100%; background: #fff; border-top: 1px #ccc solid; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.comtable th, .comtable td { border-bottom: 1px #ccc solid; padding: 20px; text-align: left; vertical-align: middle; }
.comtable th { width: 28%; font-weight: 700; background: #f9f9f9; }

@media (min-width: 768px) and (max-width: 1023px) {
  .company { margin-top: 80px; }
}
@media (max-width: 767px) {
  .company { margin-top: 60px; }
  .comtable th, .comtable td { padding: 14px 12px; font-size: 0.9rem; }
  .comtable th { width: 32%; }
}

/* Contact Form */
.contact {
  background: var(--color-main); color: #fff;
  padding: 100px 0; margin-top: 120px;
  clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
}
.contact .hdl { color: #fff; }
.contact .formbox { max-width: 700px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 8px; color: #333; }
.contact .formlist li { margin-bottom: 20px; list-style: none; text-align: left; }
.contact .formtit { font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; }
.contact .must { background: var(--color-required); color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 4px; margin-left: 8px; }
.contact input[type=text], .contact input[type=email], .contact input[type=tel], .contact textarea {
  width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; font-family: inherit;
}
.contact .formbtn input[type=submit] {
  width: 220px; height: 54px; background: #ff8c00; color: #fff;
  font-size: 1.1rem; font-weight: 700; border: none; border-radius: 200px; cursor: pointer;
}

/* お問い合わせ：プライバシーポリシー同意（送信ボタン上部のスクロール枠） */
.contact-pp { margin-top: 30px; }
.contact-pp-title { font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; }
.contact-pp-box {
  height: 200px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid #ccc; border-radius: 4px; padding: 16px 18px;
  background: #fafafa; text-align: left; font-size: 13px; line-height: 1.9;
}
.contact-pp-box h4 { font-size: 14px; font-weight: 700; margin: 18px 0 6px; }
.contact-pp-box h4:first-child { margin-top: 0; }
.contact-pp-box p { margin-bottom: 10px; }
.contact-pp-box ul { margin: 0 0 10px; padding-left: 1.3em; list-style: disc; }
.contact-pp-box li { margin-bottom: 4px; list-style: disc; }
.contact-pp-agree { margin-top: 16px; text-align: center; }
.contact-pp-agree label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; }
.contact-pp-agree input[type=checkbox] {
  width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-main); cursor: pointer;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .contact { padding: 80px 0; margin-top: 90px; }
}
@media (max-width: 767px) {
  .contact { padding: 60px 0 50px; margin-top: 70px; }
  .contact .formbox { padding: 25px 20px; }
  .contact .formbtn input[type=submit] { width: 100%; max-width: 280px; }
  .contact-pp-box { height: 160px; padding: 14px; font-size: 12.5px; }
  .contact-pp-agree label { font-size: 14px; }
}

.footer { background: #111; color: #fff; text-align: center; padding: 25px; font-size: 0.85rem; }
@media (max-width: 767px) {
  .footer { padding: 20px 15px; line-height: 1.7; }
}

/* Animation Classes */
.animate-fadeIn, .animate-fadeInLeft, .animate-fadeInRight {
  opacity: 0; transition: all 0.8s ease;
}
.animate-fadeIn { transform: translateY(40px); }
.animate-fadeInLeft { transform: translateX(-60px); }
.animate-fadeInRight { transform: translateX(60px); }

.animate-fadeIn.is-animated, .animate-fadeInLeft.is-animated, .animate-fadeInRight.is-animated {
  opacity: 1; transform: translate(0);
}