/* ベースのスタイル */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    /* overflow-x: hidden; */
    background-color: #ffffff; /* 全体の背景を白に */
    color: #333;
}

header {
    background-color: #ffffff; /* ヘッダーの背景を白に */
    color: #1e3a8a; /* ヘッダーのテキストを青に */
    text-align: center;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}


.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.logo {
    width: 200px;
    height: auto;
    margin-bottom: 10px;
}

.logo2 {
    width: 50px;
    height: auto;
    margin-bottom: 2px;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: #1e3a8a; /* ナビゲーションリンクも青に */
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #60a5fa;
    
}

/* 各セクションのスタイル */
section {
    height: auto;    /* 20vh; */
    display: flex;
    flex-direction: column; /* 縦方向に整列 */
    align-items: left;
    justify-content: left;
    text-align: left;
    padding: 0px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #ffffff; /* セクションも白に */
}
.sectionBlue {
    height: auto;    /* 20vh; */
    display: flex;
    flex-direction: column; /* 縦方向に整列 */
    align-items: left;
    justify-content: left;
    text-align: left;
    padding: 0px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #04318F; /* セクションも白に */
}



/* 左右にコンテンツを配置するコンテナ */
.left-right-container {
    display: flex;                  /* Flexboxで左右に配置 */
    justify-content: space-between; /* 左右に最大限のスペースを配置 */
    align-items: center;            /* 縦方向で中央揃えにする */
    padding: 20px;
    max-width: 1000px;              /* コンテナの最大幅 */
    margin: 0 auto;                 /* コンテンツ全体を中央に配置 */
    border: none;         /* 枠線（デザインによって削除可） */
}

.left-content {
    flex: 6;
    text-align: left;
}

.right-content {
    flex: 4;
    text-align: right;
}

.right-content img {
    max-width: 100%;
    width: 90%;
    height: auto;
}

.DivLeftforCenter {
    align-items: left;
    justify-content: left;
    text-align: left;
}

/* main 要素を中央揃えにする */
main {
    display: flex;                   /* Flexboxを使用 */
    flex-direction: column;           /* 子要素を縦に並べる */
    align-items: center;              /* 子要素を中央に揃える */
    justify-content: center;          /* 垂直方向にも中央に揃える（高さに応じて） */
    min-height: 100vh;                /* 画面全体の高さに対応 */
    padding: 20px;
}


h2 {
    color: #1e3a8a; /* 見出しを青に */
    font-size: 2.5em;
    margin-bottom: 10px;
    margin-left: 10px;
}
.h2White {
    color: white; /* 見出しを青に */
    font-size: 2.5em;
    margin-left: 10px;
}

h3 {
    color: #1e3a8a; /* 見出しを青に */
    font-size: 1.5em;
    margin-bottom: 10px;
    margin-left: 10px;
}

p {
    font-size: 1.2em;
    color: #4b5563;
}

/* 折り畳みメッセージ部分のスタイル */
.foldable {
    text-align: left;
}

.message {
    display: none;
    margin-top: 10px;
    padding: 15px;
    background-color: #f0f4f8; /* 折り畳み部分は淡い青 */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.toggle-btn {
    padding: 12px 25px;
    background-color: white; /* ボタンは明るい青 */
    color: #1e3a8a;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background-color 0.3s ease;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}


.triangle-icon {
    display: inline-block;
    margin-right: 10px;
    transition: transform 0.3s ease, color 0.3s ease;
    color: #a0d7e7;
}

.rotate {
    transform: rotate(180deg);
}

footer {
    background-color: #ffffff; /* フッターも白 */
    color: #1e3a8a;
    text-align: center;
    padding: 10px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}


/* ボックスを2つ並べるセクション */
.two-boxes-section {
    display: flex;
    justify-content: space-between; /* ボックスとセクションの左右にも均等なスペース */
    padding: 2px;
    /* max-width: 700px;  */
    background-color: white;
}

.box {
    flex: 1; /* 各ボックスを同じ幅にする */
    margin: 10px;
    padding: 20px;
    /* width: 300px; */
    background-color: white;
    color: white;
    text-align: left;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}




/* 左右にコンテンツを配置するコンテナ */
.left-right-container2 {
    display: flex;                  /* Flexboxで左右に配置 */
    justify-content: space-between; /* 左右に最大限のスペースを配置 */
    align-items: center;            /* 縦方向で中央揃えにする */
    padding: 20px;
    max-width: 1000px;              /* コンテナの最大幅 */
    margin: 0 auto;                 /* コンテンツ全体を中央に配置 */
    border: none;         /* 枠線（デザインによって削除可） */
    background-color: #f0f4f8;
}

/* 左側のコンテンツ */
.left-vertical-process-with-images {
    display: flex;
    flex-direction: column; /* 子要素を縦に並べる */
    align-items: flex-start; /* 左寄せにする */
    padding: 20px;
    text-align: left;               /* 左揃え */
    width: 55%;                     /* 左右に均等な幅を指定 */
}

/* 右側のコンテンツ */
.right-vertical-process-with-images {
    text-align: right;              /* 右揃え */
    width: 35%;                     /* 左右に均等な幅を指定 */
}

/* 各プロセスステップのスタイル */
.process-step {
    display: flex;
    align-items: center;      /* 画像とテキストを縦方向で中央揃え */
    margin: 2px 0;
    padding: 2px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;              /* ボックス全体を親の幅に広げる */
    max-width: 800px;          /* 最大幅を設定 */
    justify-content: flex-start; /* 子要素（画像とテキスト）を左詰めにする */
}

/* 画像のスタイル */
.process-image {
    width: 50px;              /* 画像の幅を固定 */
    height: auto;              /* アスペクト比を保持 */
    border-radius: 8px;        /* 角を丸くする */
    margin-right: 20px;        /* 画像とテキストの間に余白を追加 */
    margin-left: 10px;
}

/* テキストのスタイル */
.process-text {
    font-size: 1.2rem;         /* テキストサイズ */
    color: #333;               /* テキストの色 */
    line-height: 1.5;          /* 行間を広げる */
}

/* 三つのボックスを含むセクション */
.three-boxes {
    display: flex;                      /* 横並びにする */
    justify-content: space-between;     /* ボックス間にスペースを均等に配置 */
    padding: 20px;
    max-width: 1000px; 
}

/* 各ボックスのスタイル */
.boxfor3 {
    background-color: #f0f4f8; /* ボックスの背景色 */
    border-radius: 8px;        /* 角を丸くする */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 30%;                /* 各ボックスの幅を30%に設定 */
    margin: 10px;
    /* max-width: 250px;  */
            /* ボックスの最大幅を設定 */
    text-align: left;         /* テキストを左寄せ */
}
.boxfor3white {
    background-color: white; /* ボックスの背景色 */
    border-radius: 8px;        /* 角を丸くする */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 30%;                /* 各ボックスの幅を30%に設定 */
    margin: 10px;
    /* max-width: 250px;  */
            /* ボックスの最大幅を設定 */
    text-align: left;         /* テキストを左寄せ */
}
/* ボックス内の見出し */
.box h2 {
    margin-top: 0;            /* 上のマージンをリセット */
}

/* ボックス内のテキスト */
.box p {
    font-size: 1rem;          /* テキストサイズ */
    color: #333;              /* テキストの色 */
}


.content-section {
    padding: 20px;
    margin: 20px;
    /* max-width: 800px; */
    /* margin: 0 auto; */
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

/* ヘッダー部分の配置をflexboxで調整 */
.header-with-number {
    display: flex;
    align-items: center;        /* 縦方向の中央揃え */
    gap: 20px;                  /* 図形とコンテンツの間のスペース */
}

/* 図形とテキストを並べるためのスタイル */
.vertical-numbers {
    display: flex;
    flex-direction: column;     /* 図形とテキストを縦に並べる */
    gap: 20px;                  /* 各番号・テキストの間隔 */
}

/* 各番号とテキストを横に並べる */
.number-text-item {
    display: flex;
    align-items: center;        /* 図形とテキストを縦方向に中央揃え */
    gap: 15px;                  /* 番号とテキストの間のスペース */
}

/* 図形のスタイル */
.number-shape {
    background-color: #a0d7e7;
    color: #ffffff;
    /* border-radius: 50%; */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 図形内の番号 */
.number-shape span {
    font-size: 1.2em;
    font-weight: bold;
}

/* 番号の横に表示されるテキスト */
.number-text p {
    margin: 0;
    color: #333;
    font-size: 1em;
}

/* ヘッダーとコンテンツ部分のスタイル */
.header-content h2 {
    font-size: 1.5em;
    margin: 0;
    color: #333;
}

.header-content p {
    margin: 5px 0;
    color: #666;
}

/* テキストと図形の間に引く線 */
.header-line {
    flex-grow: 1;               /* スペースを埋めるために伸ばす */
    height: 2px;                /* 線の高さ */
    background-color: #a0d7e7;  /* 線の色 */
}




.Strengths-image {
    width: 90%;              /* 画像の幅を固定 */
    height: auto;              /* アスペクト比を保持 */
    border-radius: 8px;        /* 角を丸くする */
    margin-right: 10px;        /* 画像とテキストの間に余白を追加 */
    margin-left: 10px;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
    .header-content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    h2 {
        color: #1e3a8a; /* 見出しを青に */
        font-size: 2.5em;
        margin-bottom: 10px;
        margin-left: 10px;
    }
    nav ul li {
        display: none;
        text-align: center;
        margin-bottom: 10px;
    }
    .box {
        width: 90%;              /* 幅を90%にして全画面幅を使用 */
        max-width: none;         /* 最大幅の制限を解除 */
        margin-bottom: 20px;     /* ボックス間の余白を追加 */
        margin-left: 10px;
    }

    .toggle-btn {
        font-size: 14px;
        padding: 10px 20px;
    }

    .two-boxes-section {
        flex-direction: column; 
    }

    .three-boxes {
        flex-direction: column; /* 縦並びにする */
        align-items: center;     /* 中央揃えにする */
    }

    .boxfor3 {
        width: 90%;              /* 幅を90%にして全画面幅を使用 */
        max-width: none;         /* 最大幅の制限を解除 */
        margin-bottom: 20px;     /* ボックス間の余白を追加 */
    }
    .boxfor3white {
        width: 90%;              /* 幅を90%にして全画面幅を使用 */
        max-width: none;         /* 最大幅の制限を解除 */
        margin-bottom: 20px;     /* ボックス間の余白を追加 */
    }
    .left-right-container {
        flex-direction: column;     /* 縦並びにする */
        align-items: flex-start;    /* 左揃えにする */
    }

    .left-right-container2 {
        flex-direction: column;     /* 縦並びにする */
        align-items: center;    
    }

    .left-content, .left-vertical-process-with-images  {
        width: 100%;                /* 両方のコンテンツを全幅にする */
        text-align: center;            
        margin-bottom: 10px;        /* コンテンツ間に余白を追加 */
    }

    .right-content {
        width: 70%;  
        text-align: center;          
        margin-bottom: 10px; 
    }
    .right-vertical-process-with-images {
       
        display: none;  /* コンテナ全体を非表示に */
    }
    .header-with-number {
        flex-direction: column;     /* スマートフォンでは縦並びにする */
        align-items: flex-start;    /* 左揃えにする */
    }

    .header-line {
        width: 100%;                /* 線を全体に広げる */
        margin-top: 10px;            /* 上部に余白を追加 */
    }

    .number-shape {
        width: 35px;                /* 図形の幅を少し小さく */
        height: 35px;               /* 図形の高さを少し小さく */
        display: none;  /* コンテナ全体を非表示に */
    }

    .number-shape span {
        font-size: 1.1em;           /* 番号のサイズを少し小さく */
    }

    .number-text-item {
        flex-direction: row;     /* 横並びにしてもレイアウトが崩れないようにする */
        width: 100%;             /* 横幅を100%に設定 */
    }
    
/* プライバシーポリシーページ専用 */
.privacy-policy .privacy-policy__title {
    margin-bottom: 2rem;
  }
  
  .privacy-policy .privacy-policy__section h2 {
    margin-bottom: 0.5rem;
  }
  
  .privacy-policy .privacy-policy__section p,
  .privacy-policy .privacy-policy__section ul {
    margin-left: 1rem;
  }
  

}