/* --- Variables & Base --- */
 :root {
    --main-cyan: #40C9D9;
    --bg-ivory: #FFFBF2;
    --text-black: #333333;
    --white: #ffffff;
    --gray-light: #f4f4f4;
  }
  
 #lp5-content * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
 #lp5-content body {
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    color: var(--text-black);
    line-height: 1.8;
    padding-top: 70px;
  }
  
 #lp5-content .container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
 #lp5-content .header .container.flex-header {
    max-width: none;
    width: 100%;
    padding: 0 40px;
  }
  
 #lp5-content .section {
    padding: 50px 0;
    text-align: center;
  }
  
 #lp5-content .bg-ivory { background-color: #fbef95; }
  
 #lp5-content .section-title {
    font-size: 2rem;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
  }
  
 #lp5-content .section-title::after {
    content: "";
    width: 40px;
    height: 3px;
    background: var(--main-cyan);
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
  }
  
 #lp5-content .subtitle { margin-top: -30px; margin-bottom: 40px; font-size: 0.95rem; }
 #lp5-content .subtitle-sp { display: none; }
  
  /* --- Header --- */
 #lp5-content .header {
    height: 70px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    background-color: #fff; /* 固定した際、下の文字が透けないように背景色を指定 */
    /* 固定のための追加設定 */
    position: fixed;      /* 画面に固定 */
    top: 0;               /* 一番上に配置 */
    left: 0;              /* 左端から配置 */
    width: 100%;          /* 横幅いっぱい */
    z-index: 1000;        /* 他の要素より手前に表示（数字は適宜調整） */
  }
 #lp5-content .flex-header { display: flex; justify-content: space-between; width: 100%; align-items: center; }
  #lp5-content.logo {
    display: flex;
    align-items: center;
  }
  
 #lp5-content .logo img {
    height: 50px; /* ヘッダーの高さ(70px)に合わせて調整してください */
    width: auto;  /* 横幅は自動で比率を維持 */
    display: block;
  }
 #lp5-content .btn-login { 
	 text-decoration: none; 
	 color: #40C9D9; 
	 border: 1px solid #40C9D9; 
	 padding: 5px 25px; 
	 border-radius: 20px; 
	 font-size: 0.85rem; }

 #lp5-content .btn-login:hover { 
	 text-decoration: none; 
	 background-color:#40C9D9; 
	 color:#FFFFFF; 
	 border: 1px solid #40C9D9; 
	 padding: 5px 25px; 
	 border-radius: 20px; 
	 font-size: 0.85rem; 
	 transform: translateY(-2px);}
  
  /* --- Hero --- */
 #lp5-content .hero {
    background: linear-gradient(135deg, #40C9D9 0%, #76E1E1 100%);
    color: var(--white);
    padding: 100px 0;
    text-align: center;
  }
 #lp5-content .hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    line-height: 1.4;
  }
  
 #lp5-content .hero-title-sp {
    display: none;
  }
  
 #lp5-content .hero-subtitle {
    font-size: 1.2rem;
    margin-top: -10px;
    color: var(--white);
  }
  
 #lp5-content .hero-subtext {
    display: block;
    background-color: #ffffff;
    color: #383838;
    line-height: 3.5rem;
    max-width: 700px;
    margin: 2rem auto;
    font-size: 1rem;
    line-height: 2rem;
    border-radius: 10px;
  }
  
 #lp5-content .hero-subtext-sp {
    display: none;
  }
  
  /* スマホ版の調整（画面幅768px以下） */
  @media (max-width: 768px) {
  #lp5-content  .section-title {
      font-size: 1.5rem;
      margin-bottom: 50px;
      position: relative;
      display: inline-block;
    }
   #lp5-content .hero {
        padding: 60px 0; /* 上下の余白をPC版より小さく */
    }
  
  
  #lp5-content  .hero h1:not(.hero-title-sp) {
      display: none;
  }
  
 #lp5-content .hero .hero-title-sp {
      display: block;  /* display: none を上書き */
      font-size: 2.5rem;
      line-height: 1.4;
      margin-bottom: 15px;
      padding: 0 10px;
  }
  
    /* サブタイトルの調整 */
   #lp5-content .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 30px;
    }
  
    /* 中央の白いボックス（文章エリア）の調整 */
  #lp5-content  .hero-subtext {
      display: none;
    }
  
    /* ボックス内の文章 */
   #lp5-content .hero-subtext p {
        font-size: 0.85rem;  /* 文字を少し小さく */
        text-align: left;    /* スマホで長文の場合は左寄せの方が見やすい場合があります（お好みで中央のままでもOK） */
        line-height: 1.8;
    }
  #lp5-content  .hero-subtext-sp {
      display: block;
      background-color: #ffffff;
      color: #383838;
      line-height: 2rem;
      width: 90%;          /* 横幅を画面いっぱいに近く広げる */
      max-width: none;     /* PC版の制限を解除 */
      margin: 0 auto;
      padding: 25px 20px;  /* ボックス内の余白を調整 */
      border-radius: 10px; /* 角丸を少し控えめに（お好みで） */
    }
  
  #lp5-content  .subtitle { display: none; }
   #lp5-content .subtitle-sp { display: block; margin-top: -20px; margin-bottom:  40px; font-size: 0.95rem;}
  }
  
  /* --- Problems --- */
 #lp5-content .grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
 #lp5-content .problem-card {
    background: var(--white);
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: left;
    display: flex;
    align-items: center;
  }
 #lp5-content .problem-card::before {
    content: "✔︎";
    color: var(--main-cyan);
    font-weight: bold;
    margin-right: 15px;
    font-size: 1.2rem;
  }
  
 #lp5-content .problem-text {
    display: block;
    margin-top: 30px;
    font-size: 1rem;
    color: #555; }
  
 #lp5-content .problem-text-sp {
    display: none;
  }
  
  @media (max-width: 768px) {
   #lp5-content .problem-text {
      display: none;
    }
  #lp5-content  .problem-text-sp {
      display: block;
      margin-top: 20px;
      font-size: 1rem;
      color: #555;
    }
  }
  
  /* --- Comparison --- */
 #lp5-content .comparison-flex { display: flex; justify-content: center; align-items: center; gap: 40px; margin-top: 40px; }
 #lp5-content .comp-item { background: var(--white); padding: 40px; border-radius: 10px; width: 320px; }
 #lp5-content .comp-item.highlight { border: 2px solid var(--main-cyan); }
 #lp5-content .comp-visual { font-size: 2rem; margin: 20px 0; color: #ddd; }
 #lp5-content .comp-item.highlight .comp-visual { color: var(--main-cyan); }
 #lp5-content .comp-arrow { font-size: 2rem; color: #ccc; }
  
  /* --- Philosophy Section --- */
 #lp5-content .philosophy {
    background-color: #fff;
    padding: 50px 0;
  }
  
 #lp5-content .philosophy-header {
    text-align: center;
    margin-bottom: 60px;
  }
  
 #lp5-content .philosophy-header .main-title {
    font-size: 2.5rem;
    font-weight: normal;
    color: #333;
  }
  
 #lp5-content .philosophy-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* 左側テキストエリア */
 #lp5-content .philosophy-text-area {
    flex: 1;
    text-align: left;
  }
  
 #lp5-content .intro-text {
    display: block;
    margin-bottom: 30px;
    font-size: 1.3rem;
    color: #444;
  }
 #lp5-content .intro-text-sp {
    display: none;
    margin-bottom: 30px;
    font-size: 1.3rem;
    color: #444;
  }
  
 #lp5-content .highlight-box {
    background-color: var(--bg-ivory);
    padding: 40px;
    border-radius: 20px;
    margin-bottom: 30px;
  }
  
 #lp5-content .box-label {
    margin-bottom: 15px;
    color: #444;
  }
  
 #lp5-content .check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
  }
  
 #lp5-content .check-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    color: #444;
  }
  
  /* 緑色のチェックマーク */
 #lp5-content .check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--main-cyan);
    font-weight: bold;
  }
  
 #lp5-content .box-footer {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
  }
  
 #lp5-content .footer-text {
    line-height: 1.8;
    color: #444;
  }
  
 #lp5-content .underline {
    background: linear-gradient(transparent 70%, #51deed 70%); /* 薄緑の下線風 */
    font-weight: bold;
  }
  
  /* 右側画像エリア */
 #lp5-content .philosophy-image {
    flex: 1;
  }
  
 #lp5-content .philosophy-image img {
    width: 100%;
    height: auto;
    /* 画像の不規則な丸みを再現 */
    border-radius: 40% 60% 40% 60% / 50% 50% 50% 50%;
    object-fit: cover;
  }
  
  /* レスポンシブ */
  @media (max-width: 850px) {
   #lp5-content .philosophy-content {
        flex-direction: column;
    }
    
   #lp5-content .philosophy-image {
        width: 100%;
    }
  
   #lp5-content .philosophy-header .main-title {
        font-size: 1.8rem;
    }
   #lp5-content .intro-text {
        display: none;
    }
   #lp5-content .intro-text-sp {
        display: block;
        text-align: center;
    }
  }
  
  /* --- Difference Table --- */
 #lp5-content .diff-table { display: flex; border-radius: 10px; overflow: hidden; margin-top: 30px; }
 #lp5-content .diff-col { flex: 1; background: #eee; padding: 40px; }
 #lp5-content .diff-col.highlight { background: var(--main-cyan); color: var(--white); }
 #lp5-content .diff-col ul { list-style: none; text-align: left; margin-top: 20px; }
 #lp5-content .diff-col li { margin-bottom: 10px; }
 #lp5-content .diff-col li::before {
    content: "→";
    color: inherit;
    font-weight: bold;
    margin-right: 10px;
  }
  
 #lp5-content .diff-col.highlight li::before {
    content: "✔︎";
    color: var(--white);
  }
  
  /* --- Services --- */
 #lp5-content .grid-3x2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* これで2行目の項目が中央に寄ります */
    gap: 40px;
    max-width: 900px; /* 全体の幅を調整（必要に応じて） */
    margin: 0 auto;
  }
 #lp5-content .icon-circle { width: 60px; height: 60px; border: 2px solid var(--main-cyan); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 20px; color: var(--main-cyan); font-size: 1.5rem; }
 #lp5-content .service-item h4 { margin-bottom: 10px; }
 #lp5-content .service-item p { font-size: 0.85rem; color: #666; }
 #lp5-content .service-item {
    width: calc(33.333% - 40px); /* 3カラムを維持 */
    min-width: 250px; /* スマホ等で崩れないための最小幅 */
    margin-bottom: 20px;
  }
  
 #lp5-content .service-text {
    font-family: "Noto Serif JP", serif;
    max-width: 600px;
    margin: 30px auto 0 auto;
    font-size: 1rem;
    color: #ffffff;
    background-color: #40C9D9;
    border-radius: 50px;
  }
 #lp5-content .service-text-sp {
    display: none;
    font-family: "Noto Serif JP", serif;
    max-width: 600px;
    margin: 30px auto 0 auto;
    font-size: 1rem;
    color: #ffffff;
    background-color: #40C9D9;
    border-radius: 50px;
  }
  @media (max-width: 850px) {
  #lp5-content  .service-item {
        width: 100%; /* 1カラムに変更 */
    }
  #lp5-content  .service-text {
        display: none;
    }
  #lp5-content  .service-text-sp {
        display: block;
        margin: 30px auto 0 auto;
        padding: 20px;
        font-size: 1rem;
        color: #ffffff;
        background-color: #40C9D9;
        border-radius: 50px;
    }
  }
  /* --- Pricing --- */
  /* --- Variables (Add to your existing root) --- */
 #lp5-content :root {
    --olive-green: #6B7E5F;
    --light-olive: #88A27C;
    --text-gray: #444;
  }
  
  /* --- Pricing Styles --- */
 #lp5-content .pricing {
    padding: 50px 0;
    text-align: center;
  }
  
 #lp5-content .section-header {
    margin-bottom: 60px;
  }
  
 #lp5-content .section-desc {
    margin-top: 20px;
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
  }
  
 #lp5-content .pricing-flex {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 40px;
  }
  
  /* プランカード基本 */
 #lp5-content .price-card {
    flex: 1;
    max-width: 350px;
    background: #fff;
    padding: 60px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-top: 4px solid #91eded; /* 薄い緑の線 */
    position: relative;
    display: flex;
    flex-direction: column;
  }
  
  /* 中央のプランを強調 */
 #lp5-content .price-card.featured {
    border-top: 4px solid #40C9D9;
    transform: translateY(-10px); /* 少し上に浮かせる */
  }
  
  /* RECOMMENDEDタグ */
 #lp5-content .recommend-tag {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: #40C9D9;
    color: white;
    padding: 4px 20px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.05em;
  }
  
  /* アイコン */
 #lp5-content .price-icon {
    font-size: 2rem;
    color: var(--main-cyan);
    margin-bottom: 20px;
  }
  
 #lp5-content .price-card h3 {
    font-size: 1.3rem;
    margin-bottom: 25px;
    color: #333;
  }
  
  /* 金額部分 */
 #lp5-content .price-amount {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 5px;
  }
  
 #lp5-content .price-amount .unit, .price-amount .tax {
    font-size: 0.85rem;
    color: #666;
  }
  
 #lp5-content .price-amount .number {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
  }
  
  /* 特徴リスト */
 #lp5-content .price-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-gray);
    flex-grow: 1;
  }
  
 #lp5-content .price-features li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f9f9f9;
  }
  
 #lp5-content .price-features li:last-child {
    border-bottom: none;
  }
  
  /* 下部注釈 */
 #lp5-content .pricing-footer {
    color: #888;
    font-size: 0.8rem;
  }
  
  /* レスポンシブ */
  @media (max-width: 900px) {
  #lp5-content  .pricing-flex {
        flex-direction: column;
        align-items: center;
    }
    
  #lp5-content  .price-card {
        width: 100%;
        max-width: 400px;
        transform: none !important;
    }
  }
  
  /* --- Statement Section (Dark Brown) --- */
 #lp5-content .bottom-statement {
    font-family: "Noto Serif JP", serif;
    background-color: #4A433F; /* 画像のダークブラウン */
    color: #ffffff;
    padding: 80px 0;
    text-align: center;
    line-height: 2;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
  }
  
 #lp5-content .bottom-statement p {
    margin-bottom: 30px;
  }
  
 #lp5-content .bottom-text {
    display: block;
    font-weight: bold;
    text-shadow: #383838 1px 1px 2px;
  }
  
 #lp5-content .bottom-text-sp {
    display: none;
  }
  
 #lp5-content .bottom-text-highlight {
    font-weight: bold;
    background: linear-gradient(transparent 70%, #feed6d 70%);
    text-shadow: #383838 1px 1px 2px;
  }
  
 #lp5-content .bottom-statement p:last-child {
    margin-bottom: 0;
  }
  
  @media (max-width: 900px) {
  #lp5-content  .bottom-text {
        display: none;
    }
  #lp5-content  .bottom-text-sp {
        display: block;
        font-weight: bold;
        text-shadow: #383838 1px 1px 2px;
    }
  }
  
  /* --- Vision Section --- */
 #lp5-content .vision {
    background-color: #ffffff;
    padding: 120px 0;
    text-align: center;
  }
  
 #lp5-content .vision-title {
    font-family: "Noto Serif JP", serif;
    font-size: 1.8rem;
    font-weight: normal;
    color: #4A433F;
    margin-bottom: 60px;
    letter-spacing: 0.2em;
  }
  
 #lp5-content .vision-content {
    color: #333;
    line-height: 2.2;
  }
  
 #lp5-content .vision-lead {
    font-size: 1rem;
    margin-bottom: 50px;
    color: #666;
  }
  
 #lp5-content .vision-main {
    font-size: 1.6rem; /* 強調するメインメッセージ */
    font-weight: bold;
    margin-bottom: 50px;
    color: #333;
  }
  
 #lp5-content .vision-sub {
    font-size: 1rem;
    color: #666;
  }
  
  /* レスポンシブ調整 */
  @media (max-width: 768px) {
  #lp5-content  .vision-main {
        font-size: 1.3rem;
    }
  #lp5-content  .vision {
        padding: 80px 20px;
    }
  }
  
  /* --- Variables --- */
 #lp5-content :root {
    --soft-green-bg: #F1F5F1; /* 外側の薄い緑背景 */
    --olive-btn: #6B7E5F;    /* ボタンのオリーブ色 */
    --text-dark: #333;
    --text-light: #666;
  }
  
  /* --- Contact Section --- */
 #lp5-content .bg-soft-green {
    background-color: #bdffff;
    padding: 60px 0;
  }
  
 #lp5-content .contact-card {
    background-color: #ffffff;
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 40px;
    border-radius: 30px; /* 大きめの角丸 */
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    text-align: center;
  }
  
 #lp5-content .contact-title {
    font-family: "Noto Serif JP", serif;
    font-size: 1.8rem;
    font-weight: normal;
    line-height: 1.5;
    margin-bottom: 40px;
    color: var(--text-dark);
  }
  
 #lp5-content .contact-content {
    margin-bottom: 50px;
    line-height: 2;
    color: var(--text-light);
    font-size: 0.95rem;
  }
 #lp5-content .contact-content-sp {
    display: none;
    margin-bottom: 50px;
    line-height: 2;
    color: var(--text-light);
    font-size: 0.95rem;
  }
  
  @media (max-width: 768px) {
  #lp5-content  .contact-content {
        display: none;
    }
  #lp5-content  .contact-content-sp {
        display: block;
        margin-bottom: 50px;
        line-height: 2;
        color: var(--text-light);
        font-size: 0.95rem;
    }
  }
  
  /* 相談するボタン */
 #lp5-content .btn-consult {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #40C9D9;
    color: #ffffff;
    text-decoration: none;
    padding: 18px 60px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 15px rgba(107, 126, 95, 0.3);
  }
  
 #lp5-content .btn-consult:hover {
    background-color: #FFFFFF;
    color: #40C9D9;
    border: 2px solid #40C9D9;
    transform: translateY(-2px);
  }
  
 #lp5-content .btn-consult i {
    font-size: 0.8rem;
  }
  
 #lp5-content .contact-note {
    margin-top: 25px;
    font-size: 0.8rem;
    color: #999;
  }
  
 #lp5-content .social-links {
    display: flex;
    justify-content: center;
    gap: 25px;
  }
  
 #lp5-content .social-links a {
    color: var(--text-dark);
    font-size: 1.2rem;
    transition: color 0.2s;
  }
  
 #lp5-content .social-links a:hover {
    color: var(--olive-btn);
  }

/* --- Main Footer --- */
.main-footer {
  background-color: #ffffff;
  padding: 60px 0　!important;
  text-align: center;
  border-top: 1px solid #eee;
  min-height:200px;
  align-content: center;
}

#lp5-content.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

#lp5-content.footer-icon {
  width: 24px;
  height: auto;
}

#lp5-content.footer-logo-text {
  font-size: 1.4rem;
  font-family: serif; /* ロゴっぽいセリフ体 */
  color: var(--text-dark);
  letter-spacing: 0.05em; 
  text-align:center
}

#lp5-content.social-links {
  display: flex;
  justify-content: center;
  gap: 25px;
}

#lp5-content.social-links a {
  color: var(--text-dark);
  font-size: 1.2rem;
  transition: color 0.2s;
}

#lp5-content.social-links a:hover {
  color: var(--olive-btn);
}
  
  /* レスポンシブ */
  @media (max-width: 600px) {
  #lp5-content  .contact-card {
        padding: 50px 20px;
        margin: 0 15px;
    }
  #lp5-content  .contact-title {
        font-size: 1.4rem;
    }
  #lp5-content  .btn-consult {
        width: 100%;
        padding: 15px 0;
    }
  }
  
  /* --- Mobile --- */
  @media (max-width: 768px) {
  #lp5-content  .grid-2x2, .grid-3x2, .comparison-flex, .pricing-grid, .approach-content, .diff-table { flex-direction: column; display: block; }
  #lp5-content  .comp-item, .price-box, .problem-card { width: 100%; margin-bottom: 20px; }
   #lp5-content .comp-arrow { transform: rotate(90deg); margin: 20px 0; }
  }