/* 基本スタイル */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6; /* 行間の設定 */
}

/* 大見出し (H1) */
h1 {
    font-size: 36px; /* PC用 */
}

/* 中見出し (H2, H3) */
h2 {
    font-size: 24px; /* PC用 */
}

h3 {
    font-size: 20px; /* PC用 */
}

/* 小見出し (H4, H5, H6) */
h4 {
    font-size: 18px; /* PC用 */
}

h5, h6 {
    font-size: 16px; /* PC用 */
}

/* モバイルデバイス用スタイル */
@media (max-width: 768px) {
    /* 基本テキスト */
    body {
        font-size: 16px; /* スマホ用 */
    }

    /* 大見出し (H1) */
    h1 {
        font-size: 28px; /* スマホ用 */
    }

    /* 中見出し (H2, H3) */
    h2 {
        font-size: 22px; /* スマホ用 */
    }

    h3 {
        font-size: 18px; /* スマホ用 */
    }

    /* 小見出し (H4, H5, H6) */
    h4 {
        font-size: 16px; /* スマホ用 */
    }

    h5, h6 {
        font-size: 14px; /* スマホ用 */
    }
}


/* ナビゲーションバーのブランド（ロゴ）のスタイル */
.navbar-brand {
    color: #000000; /* ブランドのテキストの色を黒に設定 */
    font-weight: bold; /* ブランドのテキストを太字に設定 */
}

/* ナビゲーションバー内のリンクのスタイル */
.navbar-light .navbar-nav .nav-link {
    color: #000000; /* テキストの色を黒に設定 */
    font-weight: bold; /* テキストを太字に設定 */
}

/* ナビゲーションバーのリンクホバー時のスタイル */
.navbar-light .navbar-nav .nav-link:hover {
    color: #555555; /* ホバー時の色を設定 */
}

/* PCやタブレットなどの大きな画面用のスタイル */
.main-visual {
    background: url('../img/main-view01.png') no-repeat top center;
    background-size: cover;
    height: 70vh; /* 画面の高さに合わせる */
}

/* スマートフォン用のスタイル */
@media (max-width: 768px) {
    .main-visual {
        background-size: contain; /* 画像全体がコンテナに収まるように調整 */
        height: 30vh; /* スマートフォンでの高さを調整 */
    }
}

.main-visual .container {
    height: 100%;
    position: relative; /* コンテナに対する相対位置指定を有効にする */
    max-width: 1920px;
}

.main-visual-content {
    background: rgba(255, 255, 255, 0.8); /* 背景を半透明に */
    padding: 2rem;
    text-align: right; /* テキストを右揃えに */
    position: absolute; /* 絶対位置指定を有効にする */
    top: 4rem; /* 上からの距離 */
    right: 1rem; /* 右からの距離 */
}

.main-visual h1, .main-visual p {
    color: #000; /* 文字色を黒に */
    font-weight: bold; /* フォントを太字に */
    text-shadow: 2px 2px 4px rgba(150, 150, 150, 0.5); /* テキストに影をつける */
}

.main-visual h1 {
    font-size: 3.5rem; /* 大きな見出し */
    margin-bottom: 0.5rem;
}

.main-visual p {
    font-size: 1.5rem; /* 説明テキストのサイズを大きくして統一感を出す */
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .main-visual h1 {
   		font-size: 1.8rem; /* モバイルでの見出しのサイズを調整 */
    }
    .main-visual p {
   		font-size: 1.0rem; /* モバイルでの説明テキストのサイズを調整 */
    }
}

.services-intro {
    /*background-color: #f8f9fa;*/ /* 軽い背景色 */
    color: #000000; /* テキストの色 */
    padding:50px 0; 
}

@media (max-width: 768px) {
    .services-intro {
        padding:30px 0; 
    }
}

.services-intro h2 {
    color: #000; /* 文字色を黒に */
    text-shadow: 2px 2px 4px rgba(150, 150, 150, 0.5); /* テキストに影をつける */   
    font-size: 1.6rem; /* 見出しのフォントサイズ */
    margin-bottom: 1rem; /* 見出しの下の余白 */
    font-weight: bold; /* 見出しを太字に */
}

.services-intro p {
    font-size: 1.0rem; /* パラグラフのフォントサイズ */
    line-height: 1.5; /* テキストの行間 */
}

@media (max-width: 768px) {
    .services-intro {
        text-align: center; /* センタリング */
    }
    .services-intro h2 {
        font-size: 1.6rem; /* スマートフォンでの見出しのフォントサイズ */
    }
    .services-intro img {
        max-width: 100%; /* 画像が画面幅に収まるように */
        height: auto; /* 高さを自動調整 */
    }
}


@media (max-width: 768px) {
    .main-visual-content {
        position: static; /* モバイル表示では通常のフローに戻す */
        margin-top: 0;
        margin-right: 0;
        text-align: center; /* テキストを中央揃えに */
    }
}

.feature-section h2 {
    color: #000; /* 文字色を黒に */
    text-shadow: 2px 2px 4px rgba(150, 150, 150, 0.5); /* テキストに影をつける */   
    font-size: 1.6rem; /* 見出しのフォントサイズ */
    margin-top: 2.5rem; /* 見出しの下の余白 */
    margin-bottom: 2.5rem; /* 見出しの下の余白 */
    font-weight: bold; /* 見出しを太字に */
}

.feature-section h3 {
    color: #000; /* 文字色を黒に */
    text-shadow: 2px 2px 4px rgba(150, 150, 150, 0.5); /* テキストに影をつける */   
    font-size: 1.4rem; /* 見出しのフォントサイズ */
    font-weight: bold; /* 見出しを太字に */
}

.feature-section p {
    font-size: 1.0rem; /* パラグラフのフォントサイズ */
    line-height: 1.5; /* テキストの行間 */
}

.image-container-right {
    position: relative;
    overflow: visible; /* Allows the pseudo-element to overflow */
}

.image-wrapper-right::after {
    content: '';
    position: absolute;
    bottom: -8%; /* Negative value to extend outside the container */
    right: 15%; /* Negative value to extend outside the container */
    background-color: #dcdcdc; /* Light grey color */
    width: 25%; /* Adjust the width as needed */
    height: 25%; /* Adjust the height as needed */
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); /* Desired polygon shape */
    z-index: 0; /* Stack it behind the image */
}

.clipped-image-right {
    display: block;
    width: 90%; /* Full width of its parent */
    height: auto; /* Maintain aspect ratio */
    clip-path: polygon(0 0, 100% 0%, 83% 100%, 0% 100%); /* Diagonal cut */
    position: relative;
    z-index: 1; /* Ensures the image is above the pseudo-element */
}

@media (max-width: 768px) {
    .image-wrapper-right::after {
        display: none; /* Hides the pseudo-element on mobile */
    }

    .clipped-image-right {
        clip-path: none; /* Removes the clip-path on mobile */
        width: 100%; /* Adjust the width to 100% for mobile devices */
    }
}

.image-container-left {
	text-align:right;
}

.image-wrapper-left {
    position: relative;
    overflow: visible; /* Allows the pseudo-element to overflow */
}

.image-wrapper-left::after {
    content: '';
    position: absolute;
    bottom: -8%; /* Negative value to extend outside the container */
    left: 35px; /* Extend to the left instead of right */
    background-color: #dcdcdc; /* Light grey color */
    width: 25%; /* Adjust the width as needed */
    height: 25%; /* Adjust the height as needed */
    clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 25% 100%); /* Adjusted polygon shape for the left side */
    z-index: 0; /* Stack it behind the image */
}

.clipped-image-left {
	display: block;
    width: 90%; /* Full width of its parent */
    height: auto; /* Maintain aspect ratio */
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 17% 100%); /* Mirrored diagonal cut */
    position: relative;
    z-index: 1; /* Ensures the image is above the pseudo-element */;
}

@media (max-width: 768px) {
    .image-wrapper-left::after {
        display: none; /* Hides the pseudo-element on mobile */
    }

    .clipped-image-left {
        clip-path: none; /* Removes the clip-path on mobile */
        width: 100%; /* Adjust the width to 100% for mobile devices */
    }
}

.feature-content {
    flex-basis: 50%;
    padding: 30px;
    background-color: #fff;
    position: relative;
    z-index: 2;
    /* Rest of your styles for feature content */
}

.feature-content .background-text {
    font-size: 10rem;
    color: #f0f0f0;
    position: absolute;
    top: -15%;
    left: 55%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

@media (max-width: 768px) {
    .background-text {
        display: none; /* Hide the element on mobile */
    }
}

@media (max-width: 768px) {
    .feature-section {
        flex-direction: column;
    }
    .feature-content {
	    flex-basis: unset; 
       /*order: -1;*/
    }
    .image-container-right, .feature-content {
        position: static; /* Temporarily disable 'position: relative;' for testing */
    }
}

.cta {
    background-color: #007bff; /* プライマリーカラーで背景を設定 */
    color: #fff; /* テキストカラーを白に設定 */
    display: flex; /* Flexboxを使用 */
    flex-direction: column; /* 子要素を縦方向に配置 */
    align-items: center; /* 中央揃え */
    justify-content: center; /* 中央揃え */
    text-align: center; /* テキストを中央揃え */
    padding: 2rem 1rem; /* パディング調整 */
}

.cta h2 {
    color: #ffffff; /* 文字色を黒に */
    text-shadow: 2px 2px 4px rgba(150, 150, 150, 0.5); /* テキストに影をつける */   
    font-size: 1.6rem; /* 見出しのフォントサイズ */
    margin-bottom: 1rem; /* 見出しの下の余白 */
    font-weight: bold; /* 見出しを太字に */
}

.cta p {
    font-size: 1.0rem; /* パラグラフのフォントサイズ */
    line-height: 1.5; /* テキストの行間 */
}

@media (max-width: 768px) {
    .cta h2 {
        font-size: 1.8rem; /* モバイルでのタイトルのフォントサイズを調整 */
    }
    .cta p {
        font-size: 1rem; /* モバイルでの説明テキストのフォントサイズを調整 */
    }
}


.faq {
    margin-top: 100px;
    background-color: #f8f9fa; /* セクションの背景色 */
    padding-top:40px;
    padding-bottom:30px;
    
}

@media (max-width: 768px) {
    .faq {
        margin-top: 50px;
    }
}

.faq h2 {
    color: #000; /* 文字色を黒に */
    text-shadow: 2px 2px 4px rgba(150, 150, 150, 0.5); /* テキストに影をつける */   
    font-size: 1.6rem; /* 見出しのフォントサイズ */
    margin-bottom: 1rem; /* 見出しの下の余白 */
    font-weight: bold; /* 見出しを太字に */
}

.faq p {
    font-size: 1.0rem; /* パラグラフのフォントサイズ */
    line-height: 1.5; /* テキストの行間 */
}

@media (max-width: 768px) {
    .faq h2 {
        font-size: 1.8rem; /* モバイルでのタイトルのフォントサイズを調整 */
    }
    .faq p {
        font-size: 1rem; /* モバイルでの説明テキストのフォントサイズを調整 */
    }
}

.faq .card-header {
    background-color: #007bff; /* カードヘッダーの背景色 */
    color: white; /* カードヘッダーのテキスト色 */
}

.faq .card-header .btn-link {
    color: white; /* カードヘッダーのボタンリンク色 */
    text-decoration: none; /* 下線を除去 */
}

.faq .card-header .btn-link:hover,
.faq .card-header .btn-link:focus {
    color: #fff; /* ホバー時の色 */
    text-decoration: none; /* ホバー時の下線を除去 */
}

.faq .card-body {
    font-size: 1rem; /* カードボディのフォントサイズ */
}

.testimonials {
    background-color: #f8f9fa; /* セクションの背景色 */
   /* margin-top:30px;*/
}

.testimonials h2 {
    color: #000; /* 文字色を黒に */
    text-shadow: 2px 2px 4px rgba(150, 150, 150, 0.5); /* テキストに影をつける */   
    font-size: 1.6rem; /* 見出しのフォントサイズ */
    margin-bottom: 1rem; /* 見出しの下の余白 */
    font-weight: bold; /* 見出しを太字に */
}

.testimonials p {
    font-size: 1.0rem; /* パラグラフのフォントサイズ */
    line-height: 1.5; /* テキストの行間 */
}

@media (max-width: 768px) {
    .testimonials h2 {
        font-size: 1.8rem; /* モバイルでのタイトルのフォントサイズを調整 */
    }
    .testimonials p {
        font-size: 1rem; /* モバイルでの説明テキストのフォントサイズを調整 */
    }
}

.testimonial-title {
    font-size: 1.1rem; /* Adjust the size as needed */
    font-weight: bold; /* Optional: if you want the title to stand out */
    margin-bottom: 0.5rem; /* Space between title and description */
    /* Add any other styling as required */
}


.testimonials .testimonial {
    background-color: #fff; /* テストモニアルの背景色 */
    padding: 2rem; /* パディング */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* 影 */
    margin-bottom: 2rem; /* 下の余白 */
}

.testimonials .description {
    font-size: 1rem; /* フォントサイズ */
    line-height: 1.5; /* 行の高さ */
    color: #333; /* テキストの色 */
}

.testimonials .customer-name {
    font-weight: bold; /* フォントを太字に */
    color: #007bff; /* 名前の色 */
    text-align:right;
}

/* Testimonials Section */
.testimonials .row {
    display: flex;
    flex-wrap: wrap;
}

.testimonials .col-md-4 {
    display: flex;
    flex: 1; /* Ensure each column takes equal width */
    margin-bottom: 3rem; /* Adjust bottom margin as needed */
}

@media (max-width: 768px) {
    .testimonials .row {
        flex-direction: column; /* Stack the columns vertically on small screens */
    }
    .testimonials .col-md-4 {
        flex: 0 0 100%; /* Forces each column to take full width on small screens */
        max-width: 100%; /* Ensures the columns don't exceed 100% width */
        margin-bottom: 1rem; /* Adjusts bottom margin for smaller screens */
    }
}



.testimonial {
    flex-grow: 1; /* Allow testimonial boxes to grow and fill the height */
    background-color: #f8f9fa; /* Optional background color */
    padding: 1rem; /* Padding inside each testimonial box */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    /* Other styling as needed */
}


footer {
    background-color: #343a40; /* フッターの背景色 */
    color: #fff; /* フッターのテキスト色 */
}

footer a {
    color: #fff; /* リンクの色 */
    text-decoration: none; /* 下線を削除 */
}

footer a:hover {
    color: #ccc; /* ホバー時のリンクの色 */
    text-decoration: underline; /* 下線を追加 */
}

footer h5 {
    font-size: 1.25rem; /* タイトルのフォントサイズ */
}

footer p {
    font-size: 0.9rem; /* テキストのフォントサイズ */
}

.custom-button01 {
    display: inline-block; /* ボタンのように要素を表示 */
    background: #0056b3; /* 落ち着いた青色の背景 */
    color: #ffffff; /* テキストの色を白に */
    padding: 0.75rem 2rem; /* 上下左右のパディング */
    font-size: 1rem; /* フォントサイズ */
    font-weight: 600; /* フォントを少し太く */
    border: none; /* ボーダーをなしに */
    border-radius: 5px; /* 角を丸く */
    text-align: center; /* テキストを中央揃えに */
    vertical-align: middle; /* 縦方向の位置を中央に */
    cursor: pointer; /* カーソルをポインターに */
    transition: background-color 0.3s ease; /* 背景色の変化を滑らかに */
    text-decoration: none; /* テキストの下線をなしに */
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); /* ソフトな影を追加 */
}

.custom-button01:hover,
.custom-button01:focus {
    background: #004494; /* ホバー時やフォーカス時の背景色を変更 */
    color: #ffffff; /* ホバー時やフォーカス時のテキスト色を白に */
    outline: none; /* フォーカス時のアウトラインをなしに */
}

.custom-button02 {
    background-color: #d9534f; /* Red color for the button */
    color: #ffffff; /* White text color for contrast */
    padding: 12px 24px; /* Slightly larger padding for a better visual */
    border: none; /* No border for a clean look */
    text-transform: uppercase; /* Capitalize text */
    font-weight: bold; /* Bold text for emphasis */
    border-radius: 5px; /* Rounded corners for a modern look */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); /* Subtle shadow for depth */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
    cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
}

.custom-button02:hover,
.custom-button02:focus {
    background-color: #c6443e; /* Slightly darker red on hover/focus for feedback */
       color: #ffffff; /* White text color for contrast */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); /* Larger shadow on hover/focus for a "lifted" effect */
    outline: none; /* Removes the outline to maintain the design */
}

.footer {
    text-align: center;
    padding: 20px 0;
}