/* コンテンツ全体の中央配置とギャップ設定 */
.content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* バナー画像・背景セクションの設定 */
.background-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px; /* セクションの高さを設定 */
    width: 100%; /* セクションの幅を設定 */
    background-image: url('../images/laptop-820274_1920.jpg'); /* 背景画像を指定 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-position: center center; /* 画像を中央に配置 */
    background-attachment: local; /* 画像をスクロールに対して固定 */
    background-size: cover; /* 画像をセクション全体にフィット */
}

/* セキュリティセクションのスタイル */
.security-section {
    position: relative;
    padding: 20px;
    border-radius: 10px; /* 角を丸くする */
    overflow: hidden; /* 背景がセクション外にはみ出さないようにする */
}

.security-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white; /* 背景色を白に設定 */
    opacity: 0.5; /* 背景の透明度を設定 */
    z-index: 1; /* 背景が前面に表示されないようにする */
}

.security-content {
    position: relative;
    z-index: 2; /* コンテンツが背景の前に表示されるようにする */
    color: black; /* テキストの色を設定 */
}

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

.security-text {
    font-size: 20px;
    margin-top: 40px;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-left: 20px;
    text-align: center;
}

/* イントロセクションのスタイル */
.intro-section {
    text-align: center; 
    padding: 40px;
    margin: 50px;
    border: double 5px;
    border-radius: 20px;
}
.intro-section .main-title{
    font-size: 30px;
}
.intro-section .pricing{
    font-size: 28px;
    margin-top: 20px;
}
.highlight-price {
    color: red; /* 強調表示の価格の色を設定 */
}

/* このようなお悩み事は、ございませんか？ */
.troubles-section {
    position: relative;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    height: 500px;
    width: 100%;
    padding-top: 100px;
    background-image: url('https://cachica.net/wp-content/uploads/2024/12/macbook-926121_1280.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.troubles-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 1;
}

.troubles-section * {
    position: relative;
    z-index: 2;
}

.security-background2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 1;
}

.troubles-title {
    display: block;
    text-align: center;
    font-size: 28px;
    margin: 0px 0px 100px 0px;
    color:black;
    font-weight: bold;
}
.troubles-title-iphone {
    display: none;
    /* display: none !important; */

}

.troubles-list {
    margin-top: 20px;
    line-height: 1.6;
    /* text-align: left; */
    font-size: 20px;
    padding: 0 20px;
}

.trouble-item {
    font-size: 24px;
    /* font-style: normal; */
    font-style: oblique 20deg;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    text-shadow: rgb(255, 255, 255, 0.7) 3px 3px;

}

.trouble-solution {
    text-align: center;
    font-size: 22px;
    margin: 20px auto;
    color: #0073e6;
}
/* このようなお悩みを弊社が解決します。 */
.trouble-solution-section {
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center; /* 子要素を垂直方向の中央に配置 */
    /* テキストと画像の間に適切な間隔を設定 */
    /* gap: 20px; */
    margin: 30px 0px;
    padding: 20px;
    border: double 5px;
    border-radius: 15px;
}

.trouble-solution-text {
    font-size: 36px;
    font-weight: bold;
    color: #0073e6;
    padding: auto;
}
.trouble-solution-text-iphone{
    display: none;
}

.trouble-solution-image {
    max-width: 20%;
    height: auto;
}

/* サービスセクションのスタイル */
.parent1 {
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* アイテム間のスペースを設定 */
    gap: 20px; /* 各アイテム間にスペースを設定 */
}
.div1, .div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9 {
    flex: 1 1 calc(25% - 30px); /* 各アイテムが2分の1の幅を持つように設定 */
    box-sizing: border-box; /* パディングやボーダーが要素の幅に影響しないようにする */
    background-color: white; /* 背景色を白に設定 */
    padding: 15px;
    margin: 15px; /* アイテム間に余白を設定 */
    border-radius: 10px;
    border: double 5px rgba(0, 0, 0, 0.4);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 影をつけて立体感を出す */
}
.service-item{
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
}
.service-description{
    font-size: 20px;
    text-align: left;
}
.strengths-section {
    width: 60%;
    margin: 0 auto;
}
.section-title1 {
    font-size: 36px;
    text-align: center;
    font-weight: bold;
    /* margin: 30px; */
    margin: 60px auto 10px auto;
    text-shadow: rgb(123, 123, 123, 0.7) 3px 3px;
}
.section-title1-iphone{
    display: none;
}
.section-title2 {
    font-size: 36px;
    text-align: center;
    font-weight: bold;
    margin: 30px;
    text-shadow: rgb(123, 123, 123, 0.7) 3px 3px;
}

.strength-items{
    display: flex;
    margin: 60px auto;
}
.strength-item {
    width: 40%;
    height: auto;
    margin: 0 auto;
    background-color:antiquewhite;
    border: double 5px rgba(0,0,0,1);
    border-radius: 15px;
    padding: 40px;
}

.strength-title {
    font-size: 24px;
    text-align: center;
    padding: 20px;
    text-wrap: nowrap;
}

.strength-description {
    font-size: 20px;
    line-height: 1.6;
    /* padding: 20px; */
}
.pricing-section {
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
    /* padding: 20px; */
}

.pricing-title {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
    text-shadow: rgb(123, 123, 123, 0.7) 3px 3px;
    /* font-style: italic; */
    /* font-family: 'Courier New', Courier, monospace; */

}
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 15px;
    /* border: 2px solid #ddd; */
    border: 1px solid;
    font-size: 16px;
    line-height: 1.5;
}
.plan-column-header{
    font-size: 20px;
    text-align: center;
    width: 300px;
}
.feature-header{
    width: 150px;
    line-height: 1.5;
    text-align: left;
    vertical-align: middle;
}

.plan-description{
    text-align: left;
    padding: 20px;
}
.tax-note{
    margin: 5px;
    font-size: 16px;
    text-align: end;
}

.contact-form-section{
    width: 33%;
    margin: 30px auto;
}
/* お問い合わせタイトルのスタイル */
.contact-form-title {
    font-size: 28px;
    font-weight: bold;
    color: #333; /* タイトルの文字色 */
    margin-bottom: 20px; /* タイトルとフォームの間に余白を設定 */
    text-align: center; /* タイトルを中央揃えに */
}
form {
    max-width: 600px; /* フォームの最大幅を設定 */
    margin: 0 auto; /* フォームを中央に配置 */
    padding: 20px;
    background-color: #f9f9f9; /* フォームの背景色 */
    border-radius: 10px; /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影を付ける */
}
/* ラベルのスタイル */
label {
    display: block;
    margin-bottom: 15px;
    font-weight: bold;
    color: #333; /* ラベルの文字色 */
}
/* テキスト入力フィールドのスタイル */
.input-name, .input-address, .input-email, .input-url, .input-tel {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
}
/* テキストエリアのスタイル */
.input-message {
    width: 100%;
    height: 150px;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
    resize: vertical; /* ユーザーがテキストエリアの高さを変更可能にする */
}
/* 送信ボタンのスタイル */
.btn-submit {
    display: block;
    background-color: #0073e6;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    transition: background-color 0.3s ease; /* ホバー時の背景色変更を滑らかにする */
}

/* 送信ボタンのホバースタイル */
.btn-submit:hover {
    background-color: #005bb5;
}

/* iPad用のレスポンシブスタイル */
@media only screen and (max-width: 1024px) {
    /* コンテンツ全体の中央配置とギャップ設定 */
    .content-container {
        gap: 15px;
    }
    /* バナー画像・背景セクションの設定 */
    .background-section {
        height: 500px; /* 高さを調整 */
        background-size: cover;
    } 
    .troubles-section{
        padding-top: 30px;
        height: 700px;
    }
    .trouble-item{
        text-align: left;
        padding: 0px 30px;
    }
    .trouble-solution-section{
        margin: 40px;

    }
    /* セキュリティセクションのスタイル */
    /* .security-section {
        padding: 15px;
    } */
    .trouble-solution-section {
        display: flex;
        flex-direction: column; /* 上下に配置 */
        align-items: center; /* コンテンツを中央揃え */
        justify-content: center; /* 上下中央に配置 */
        gap: 20px; /* テキストと画像の間にスペースを設定 */
        padding: 20px; /* セクション全体に余白を設定 */
    }
    .trouble-solution-image {
        width: 80%; /* 画像の幅を調整 */
        max-width: 150px; /* 画像の最大幅を設定 */
        height: auto; /* アスペクト比を維持 */
    } 
    .security-title {
        font-size: 24px;
        margin: 15px;
    }
    .security-text {
        font-size: 18px;
        margin: 30px 15px;
    }
    /* イントロセクションのスタイル */
    .intro-section .main-title {
        font-size: 26px;
    }
    .intro-section .pricing {
        font-size: 22px;
    }
    .section-title {
        font-size: 24px;
    }
    /* サービスセクションのスタイル */
    .parent1 {
        width: 90%;
        gap: 15px;
    }
    .div1, .div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9 {
        flex: 1 1 calc(50% - 20px); /* 2列レイアウトに変更 */
        margin: 10px;
        padding: 10px;
    }
    .service-item {
        font-size: 24px;
    }
    .service-description {
        font-size: 18px;
    }
    .strengths-section {
        width: 80%;
    }
    .strength-items {
        display: flex;
        flex-direction: column;
    }
    .strength-item {
        width: 80%;
        margin-bottom: 30px;
    }
    /* プライシングセクションのスタイル */
    .pricing-section {
        width: 85%;
        max-width: 650px;
    }
    .pricing-title {
        font-size: 22px;
    }
    .plan-header {
        font-size: 18px;
    }
    th, td {
        font-size: 16px;
        border: solid 2px;
    }
    .tax-note{
        margin: 5px;
        font-size: 16px;
        text-align: end;
    }
    /* お問い合わせセクションのスタイル */
    .contact-form-section {
        width: 90%;
        margin: 20px auto;
    }
    .contact-form-title {
        font-size: 24px;
    }
    form {
        max-width: 100%;
        padding: 15px;
    }
    /* フォーム要素のスタイル */
    .input-name, .input-address, .input-email, .input-url, .input-tel {
        padding: 8px;
        font-size: 14px;
    }
    .input-message {
        padding: 8px;
        font-size: 14px;
    }
    .btn-submit {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* iPhone用のレスポンシブスタイル */
@media only screen and (max-width: 429px) {
    /* コンテンツ全体の中央配置とギャップ設定 */
    .content-container {
        gap: 10px;
    }
    /* バナー画像・背景セクションの設定 */
    .background-section {
        height: 300px; /* 高さをさらに調整 */
        background-size: cover;
    }
    /* セキュリティセクションのスタイル */
    .security-section {
        padding: 10px;
    }
    .security-background {
        position: absolute;
        margin: 0 10px ;
        border-radius: 10px;
        background-color: white; /* 背景色を白に設定 */
        opacity: 0.5; /* 背景の透明度を設定 */
        z-index: 1; /* 背景が前面に表示されないようにする */
    }
    .security-title {
        font-size: 20px;
        margin: 10px;
    }
    .security-text {
        font-size: 10px;
        margin: 20px 10px;
    }
    .troubles-section {
        height: 1150px; /* iPhne用に高さを調整 */
        background-size: cover; /* 背景画像を全体にフィット */
    }        
    .troubles-title {
        display: none;
    }
    .troubles-title-iphone{
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        line-height: 1.4;
        margin-top: 20px;
        margin-bottom: 40px;
    }
    .trouble-solution-text{
        display: none;
    }
    .trouble-solution-text-iphone {
        font-size: 30px;
        text-align: center;
        font-weight: bold;
        color: #0073e6;
        padding: auto;
        display: block;
    }
    /* イントロセクションのスタイル */
    .intro-section .main-title {
        font-size: 22px;
    }
    .intro-section .pricing {
        font-size: 20px;
    }
    .section-title {
        font-size: 22px;
    }
    .section-title1{
        display: none;
    }
    .section-title1-iphone {
        font-size: 36px;
        text-align: center;
        font-weight: bold;
        /* margin: 30px; */
        margin: 60px auto 10px auto;
        text-shadow: rgb(123, 123, 123, 0.7) 3px 3px;
    }
    /* サービスセクションのスタイル */
    .parent1 {
        width: 100%;
        gap: 10px;
    }
    .div1, .div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9 {
        flex: 1 1 calc(100% - 20px); /* 1列レイアウトに変更 */
        margin: 15px;
        padding: 10px;
    }
    .service-item {
        font-size: 22px;
    }
    .service-description {
        font-size: 16px;
    }
    .strengths-section {
        width: 90%;
    }
    .strength-items {
        flex-direction: column;
    }
    .strength-item {
        width: 70%;
        margin-bottom: 20px;
    }
    .strength-title{
        text-wrap: wrap;
    }
    /* プライシングセクションのスタイル */
    .pricing-section {
        width: 90%;
        max-width: 90%;
    }
    .pricing-title {
        font-size: 20px;
    }
    .plan-header {
        font-size: 16px;
    }
    th, td {
        font-size: 12px;
        padding: 10px;
    }
    /* お問い合わせセクションのスタイル */
    .contact-form-section {
        width: 90%;
    }
    .contact-form-title {
        font-size: 20px;
    }
    form {
        max-width: 100%;
        padding: 10px;
    }
    /* フォーム要素のスタイル */
    .input-name, .input-address, .input-email, .input-url, .input-tel {
        padding: 8px;
        font-size: 14px;
    }
    .input-message {
        padding: 8px;
        font-size: 14px;
    }
    .btn-submit {
        padding: 8px 16px;
        font-size: 14px;
    }
}
.footer-section {
    background-color:black;
    color: white; 
    padding: 20px; 
}
.footer-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px; 
    text-align: center;
}
.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.company-info, .business-info {
    width: 30%; 
    border-collapse: collapse;
    margin: 60px;
}
.company-info th {
    width: 50%; 
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    padding: 8px;
    font-size: 16px;
    border: none;
}
.company-info td {
    vertical-align: middle;
    border: none;
}
.business-info .business-title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}
.business-info .business-link {
    text-decoration: none;
    color: #0073e6; /* リンクの色 */
    font-size: 16px;
    margin-bottom: 5px;
}
.business-info td {
    text-align: left;
    padding: 8px;
    font-size: 16px;
    border: none;
}
.business-info .business-link:hover {
    text-decoration: underline;
}
.business-info .business-detail {
    font-size: 16px;
    margin-bottom: 5px;
}
.address {
    line-height: 1.5; 
}

/* iPad用のレスポンシブスタイル */
@media only screen and (max-width: 1024px) {
    .company-info, .business-info {
        width: 50%;
        border-collapse: collapse;
        margin: 0;
    }
    .company-info th {
        width: 40%;
        padding: 0;
        font-weight: bold;
        vertical-align: middle;
        text-align: center;
        font-size: 12px;
        border: none;
    }
    .company-info td {
        vertical-align: middle;
        border: none;
        padding: 0;
    }
    .business-info .business-detail {
        margin: 0;
        font-size: 16px;
        margin-bottom: 5px;
    }

}
/* iPhone用のレスポンシブスタイル */
@media only screen and (max-width: 768px) {
    .footer-section {
        padding: 15px;
    }

    .footer-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .company-info, .business-info {
        width: 90%; /* 横幅を100%に近づける */
        margin: 20px 0; /* 上下に余白を調整 */
    }

    .company-info th {
        width: 25%;
        font-size: 14px;
        padding: 6px;
    }

    .company-info td {
        font-size: 14px;
        padding: 6px;
        text-align: left; 
    }

    .business-info .business-title {
        font-size: 16px;
        margin-bottom: 8px;
        text-align: center; /* タイトルを中央揃え */
    }

    .business-info .business-link {
        font-size: 14px;
        text-align: left;
        display: block;
        margin-bottom: 10px;
    }

    .business-info td {
        font-size: 14px;
        padding: 6px;
        text-align: left; /* テキストを中央揃え */
    }

    .business-info .business-detail {
        margin-left: 0; 
        font-size: 14px;
        text-align: left;
        margin-bottom: 10px;
    }

    .address {
        line-height: 1.4;
        font-size: 14px;
        text-align: left;
    }
}