/* テキストセクション */
.text-section {
    text-align: center;
    padding: 80px 20px;
    background-color: #ffffff; /* 背景は白 */
}

.text-section .subtitle {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0.3em;
    color: #3E3E3E;
    margin-bottom: 10px;
}

.text-section .main-title {
    font-size: 45px;
    font-weight: bold;
    color: #3E3E3E;
    margin: 0;
    letter-spacing: 0.3em; /* 少し文字間隔を広げる */
}

/* スマホ用メディアクエリ */
@media (max-width: 768px) {
    .text-section {
        padding: 40px 10px; /* スマホでは余白を減らす */
    }

    .text-section .subtitle {
        font-size: 20px; /* フォントサイズを小さく */
        letter-spacing: 0.2em; /* 文字間隔を狭く */
        margin-bottom: 8px; /* 余白を調整 */
    }

    .text-section .main-title {
        font-size: 30px; /* メインタイトルのフォントサイズを縮小 */
        letter-spacing: 0.2em; /* 文字間隔を狭く */
    }
}



/* 特徴セクション */
.features1 {
    background-color: #333;
    color: #fff;
    padding: 40px 20px;
    text-align: center;
}

.features-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.feature-box {
    background-color: #fff;
    color: #333;
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid #ccc;
    position: relative;
    border-color: #B18F35;
}

.feature-box img {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
}

.feature-box h3 {
    font-size: 1.5rem;
    color: #B18F35;
    margin-bottom: 10px;
}

.feature-box p {
    font-size: 1rem;
    line-height: 1.5;
}

/* スマホ対応のレスポンシブデザイン */
@media (max-width: 768px) {
    .features-container {
        flex-direction: column; /* 縦並びにする */
        gap: 10px; /* 間隔を縮小 */
    }

    .feature-box {
        width: 50%; /* 幅を画面いっぱいに */
        margin: 0 auto; /* センター揃え */
    }

    .feature-box h3 {
        font-size: 1.2rem; /* タイトルのフォントサイズを縮小 */
    }

    .feature-box p {
        font-size: 0.9rem; /* テキストのフォントサイズを縮小 */
    }

    .feature-box img {
        width: 40px; /* 画像を小さく */
        height: 40px;
    }
}




/* 解決セクション */
.solution-section {
    text-align: center;
    padding: 40px 20px;
    background-color: #ffffff; /* 背景を白 */
}

.solution-title {
    font-size: 60px;
    font-weight: bold;
    color: #B18F35; /* ゴールド色 */
    margin: 0;
    letter-spacing: 0.3em; /* 少し文字間隔を広げる */
}

/* スマホ用メディアクエリ */
@media (max-width: 768px) {
    .solution-section {
        padding: 20px 10px; /* スマホでは余白を縮小 */
    }

    .solution-title {
        font-size: 30px; /* タイトルのフォントサイズを縮小 */
        letter-spacing: 0.2em; /* 文字間隔を狭く */
        line-height: 1.2; /* 行間を調整 */
    }
}




/* セクション全体 */
.steps-section1 {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* 各ステップ */
.step1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    border: 1px solid #B18F35;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 388px;
}

/* 偶数ステップを反転 */
.step.reverse1 {
    display: flex;
    padding: 0;
    flex-direction: row-reverse;
    border: 1px solid #B18F35;
    height: 388px;
}

/* 画像部分 */
.step-image1 {
    flex: 1; /* 3分の1 */
    max-width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;   
}

.step-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* テキスト部分 */
.step-content1 {
    flex: 2; /* 3分の2 */
    max-width: 67%;
    padding: 20px;
    text-align: left;
}

.step-content1 h2 {
    font-size: 58px;
    font-weight: bold;
    color: #B18F35; /* ゴールド */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.step-content .step-number {
    font-size: 3rem;
    color: #ddd;
    margin-right: 10px;
}

.step-content1 p {
    font-size: 24px;
    line-height: 1.6;
    color: #555;
}

/* ステップ番号 */
.number {
    padding: 4rem 4.5rem;
    font-size: 30rem;
    z-index: 1;
    position: relative;
    color: #B18F35;
  }
  .number h2{
    position: relative;
  top: 50px; /* テキストを50px下に移動 */
  }

  .number::before{
    font-size: 11rem;
    font-weight: bold;
    z-index: -1;
    position: absolute;
    top: -20px;
    left: 10px;
    color: #DDDDDD;
    
  }
  .number1::before {
    content: "1";
  }
  .number2::before {
    content: "2";
  }
  .number3::before {
    content: "3";
  }
  .number4::before {
    content: "4";
  }
  .number5::before {
    content: "5";
  }




  
/* スマホ用メディアクエリ */
@media (max-width: 768px) {
    .step1, .step.reverse1 {
        flex-direction: column; /* ステップを縦並びに */
        height: auto; /* 高さを自動調整 */
        margin-bottom: 20px; /* ステップ間の余白を縮小 */
    }

    .step-image1 {
        max-width: 100%; /* 画像の幅を全体にフィット */
    }

    .step-content1 {
        max-width: 100%; /* テキストの幅を全体にフィット */
        padding: 10px; /* 余白を縮小 */
        text-align: center; /* テキストを中央揃え */
    }

    .step-content1 h2 {
        font-size: 32px; /* フォントサイズを縮小 */
    }

    .step-content1 p {
        font-size: 18px; /* フォントサイズを縮小 */
        line-height: 1.4; /* 行間を調整 */
    }

    .step-image img {
        width: 100%; /* 画像の幅を全体に合わせる */
        height: auto; /* 高さを自動調整 */
    }

    .number {
        padding: 2rem 2.5rem; /* ステップ番号の余白を縮小 */
        font-size: 20rem; /* フォントサイズを縮小 */
    }

    .number::before {
        font-size: 8rem; /* 番号の背景フォントを縮小 */
        top: -10px; /* 位置を調整 */
    }
}




/* CTAセクション */
.cta-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fdfdfd;
    padding: 40px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 90%;
    margin: 40px auto;
    gap: 20px;

}

/* テキストコンテンツ */
.cta-content {
    flex: 1;
    text-align: right;
}

.cta-content h2 {
    font-size: 2rem;
    color: #8a6d3b; /* ゴールド系 */
    margin-bottom: 20px;
    flex: 1; /* 左側テキストエリアが自動調整 */
    text-align: right; /* 右揃えにする */
}

.cta-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
    flex: 1; /* 左側テキストエリアが自動調整 */
    text-align: right; /* 右揃えにする */
}

.cta-button {
    display: inline-block;
    background-color: #8a6d3b;
    color: #fff;
    font-size: 1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
    margin-left: auto;
}

.cta-button:hover {
    background-color: #705a2e;
}

/* 画像コンテンツ */
.cta-image {
    flex: 1;
    text-align: center;
}

.cta-image img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* スマホ用メディアクエリ */
@media (max-width: 768px) {
    .cta-content {
        flex: 1; /* フレックスを保持 */
        text-align: center; /* テキストを中央揃え */
        margin-bottom: 20px; /* コンテンツ間に余白 */
    }

    .cta-content h2 {
        font-size: 1.5rem; /* タイトルのフォントサイズを少し縮小 */
        text-align: center; /* 中央揃え */
        margin-bottom: 10px; /* 余白を調整 */
    }

    .cta-content p {
        font-size: 1rem; /* フォントサイズを維持 */
        line-height: 1.5; /* 行間を調整 */
        text-align: center; /* 中央揃え */
        margin-bottom: 15px; /* 下部余白を縮小 */
    }

    .cta-button {
        font-size: 1rem; /* ボタンのフォントサイズを維持 */
        padding: 10px 20px; /* ボタンのサイズを維持 */
        margin: 0 auto; /* ボタンを中央揃え */
        display: block; /* ブロック要素で中央揃えを確実に */
    }

    .cta-image {
        flex: 1; /* フレックスを維持 */
        text-align: center; /* 画像を中央揃え */
        margin-bottom: 20px; /* 余白を追加 */
    }

    .cta-image img {
        max-width: 100%; /* 画像を親要素にフィット */
        height: auto; /* 縦横比を保持 */
        border-radius: 10px; /* 角丸を保持 */
    }
}





/* ステップセクション */
.steps-section {
    background-color: #3E3E3E;
    text-align: center;
    padding: 40px 20px;
}

.steps-section h3 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
    letter-spacing: 0.3em;
}

.steps-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #E57013;
    margin-bottom: 30px;
    letter-spacing: 0.3em;
}


.step-item {
    display: flex; /* 子要素を横並びに配置 */
    justify-content: space-between; /* 左右に余白を確保 */
    align-items: center; /* 垂直方向を中央揃え */
    margin-bottom: 20px; /* 各ステップの間の余白 */
    
  }
  
  .step-content {
    flex: 1; /* テキスト部分を画像部分とバランスを取る */
    margin-right: 20px; /* テキストと画像の間に余白を追加 */
    
  }
  
  .step-content h3 { 
    margin-bottom: 10px; /* 見出しとテキストの間に余白を追加 */
    text-align: center; /* テキストを右寄せ */
  }
  
  .step-content p {
    font-size: 14px; /* テキストのフォントサイズ */
    line-height: 1.6; /* 行間を調整 */
    color: #fff; /* テキストの色 */
    text-align: center;
  }

  .step-number {
    margin-left: 150px;
    display: inline-block; /* 吹き出しを内容に応じた幅に調整 */
    background-color: #E57013; /* 吹き出しの背景色（オレンジ） */
    color: #fff; /* テキストの色（白） */
    font-size: 1px; /* テキストサイズを小さく */
    
    padding: 0 12px; /* 内側余白を最小化 */
    border-radius: 8px; /* 角丸を小さく調整 */
    position: relative; /* 吹き出しの基準を設定 */
    text-align: center; /* テキストを中央揃え */
    width: auto; /* 必要に応じて幅を内容に合わせる */
  }

  
  .step-number::after {
    content: ""; /* 吹き出しの三角形を生成 */
    position: absolute; /* 基準位置 */
    bottom: -10px; /* 吹き出しの下に配置 */
    left: 50%; /* 水平方向で中央揃え */
    transform: translateX(-50%); /* 中央に揃える */
    border-style: solid; /* 三角形の形状を指定 */
    border-width: 10px 10px 0 10px; /* 三角形のサイズを小さく調整 */
    border-color: #E57013 transparent transparent transparent; /* 三角形の色を指定 */
  }
  
  

/* 画像部分 */
.step-image {
    flex: 1; /* 全体の3分の1 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 高さを超える部分を非表示 */
    
}

.step-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover; /* 画像を要素全体にフィットさせる */
    border-radius: 10px; /* 角丸を追加 */
}




 /* スマホ向けスタイル（レスポンシブ対応） */
@media (max-width: 768px) {
    .steps-section {
        padding: 20px 10px;
    }

    .steps-section h3 {
        font-size: 1.4rem; /* フォントサイズを縮小 */
    }

    .steps-section h2 {
        font-size: 2rem; /* フォントサイズを縮小 */
    }

    .step-item {
        flex-direction: column; /* 縦並びに配置 */
        align-items: center; /* 中央揃え */
        margin-bottom: 30px;
    }

    .step-content {
        margin-right: 0;
        margin-bottom: 15px; /* 画像との間に余白を追加 */
    }

    .step-number {
        margin-left: 0; /* 左余白を削除 */
        font-size: 12px; /* テキストサイズを調整 */
    }

    .step-number::after {
        bottom: -8px; /* 三角形の位置調整 */
        border-width: 8px 8px 0 8px; /* 三角形サイズを縮小 */
    }

    .step-image {
        flex: none; /* フレックスを解除 */
        margin: 0 0 15px 0; /* 余白を適切に調整 */
        width: 100%; /* 画像部分を幅いっぱいに */
    }

    .step-image img {
        max-height: 200px; /* 画像の高さを制限 */
        width: auto;
        border-radius: 8px; /* 角丸調整 */
    }
} 

  
  




/* テキスト部分 */
.text-container {
    flex: 2; /* 全体の3分の2 */
    padding: 0 10px;
    text-align: left;
}

.text-container h2 {
    font-size: 1.8rem;
    color: #8a6d3b; /* ゴールド系 */
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.text-container .step-number {
    font-size: 3rem;
    color: #ddd; /* 背景と馴染む大きな数字 */
    margin-right: 10px;
}

.text-container p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
}




/* カスタマイズテキスト */
.customization-section {
    text-align: center;
    padding: 40px 20px;
  }
  
  .customization-section h1 {
    color: #b49d65;
    line-height: 1.6;
    margin-bottom: 40px;
  }

  /* スマホ用メディアクエリ */
@media (max-width: 768px) {
    .customization-section {
        padding: 20px 10px; /* 上下左右の余白を縮小 */
    }

    .customization-section h1 {
        font-size: 1.5rem; /* フォントサイズを縮小 */
        line-height: 1.4; /* 行間を調整 */
        margin-bottom: 20px; /* 下部余白を縮小 */
    }
}
  

/* カスタマイズコンテンツ */
  .content {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
  }
  
  .card {
    background-color: #b49d65;
    border-radius: 10px;
    padding: 20px;
    width: 350px;
    height: 350px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: #fff;
  }
  
  .custom-image {
    width: 100%; /* 横幅をカード内にフィット */
  max-height: 200px; /* 高さを揃える */
  object-fit: contain; /* 縦横比を維持して画像を縮小 */
  margin-bottom: 20px; /* テキストとの余白 */
}

  .card .image {
    width: 100%;
    max-width: 200px;
    margin: 0 auto 20px;
    display: block;
  }
  
  .card p {
    font-size: 14px;
    line-height: 1.8;
  }

/* スマホ用メディアクエリ */
@media (max-width: 768px) {
    .content {
        flex-direction: column; /* カードを縦並びに */
        gap: 20px; /* カード間の余白を縮小 */
        align-items: center; /* 中央揃え */
    }

    .card {
        width: 90%; /* カード幅を画面幅に合わせる */
        height: auto; /* 高さを自動調整 */
        padding: 15px; /* 内側の余白を縮小 */
    }

    .custom-image {
        max-height: 150px; /* 画像の最大高さを縮小 */
        margin-bottom: 15px; /* 下部余白を調整 */
    }

    .card .image {
        max-width: 150px; /* 画像サイズを縮小 */
        margin-bottom: 15px;
    }

    .card p {
        font-size: 12px; /* フォントサイズを縮小 */
        line-height: 1.6; /* 行間を調整 */
    }
}




  /* フッター全体 */
  .footer {
    background-color: #333; /* ダークグレー */
    color: #fff; /* 白い文字 */
    text-align: center;
    padding: 15px 0; /* 上下の余白 */
    border-top: 2px solid #444; /* 上の細い線 */
  }
  
  .footer-content p {
    margin: 0;
    font-size: 14px;
  }

  .background-image {
    width: 100%;  /* デフォルトは親要素いっぱい */
    height: auto;
  }

  .footer-content {
    display: flex; /* フレックスボックスで要素を並べる */
    align-items: center; /* 縦方向の中央揃え */
    justify-content: center; /* フッター全体の中央揃え */
  }
  
  .footer-image {
    width: 100px; /* 適切なサイズに調整 */
    height: auto; /* 比率を維持 */
    margin-right: 10px; /* テキストとの間隔を設定 */
  }