/* 基本的な設定 */
html {scroll-behavior: smooth;}
body {font-family:'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;margin:0; background-color:#f4f7f6; color:#333;}

/* ハンバーガーメニュー */
.hamburger {position:fixed; right:20px; top:20px; width:44px; height:44px; cursor:pointer; z-index:300; background:rgba(255, 255, 255, 0.9); border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,0.05); display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box;}
.hamburger__line {position:absolute; width:22px; height:2px; background-color:#333; transition:all 0.5s;}
.hamburger__line--1 {top: 14px;}
.hamburger__line--2 {top: 21px;}
.hamburger__line--3 {top: 28px;}
.open .hamburger__line--1 {transform: rotate(-45deg); top: 21px;}
.open .hamburger__line--2 {opacity: 0; }
.open .hamburger__line--3 {transform: rotate(45deg); top: 21px;}
.sp-nav {position:fixed; top:0; right:-300px; width:280px; height:100%; background-color:#fff; transition:right 0.5s ease;  z-index:200; padding-top:80px; box-sizing:border-box; box-shadow:-2px 0 8px rgba(0,0,0,0.1);}
.sp-nav ul {list-style-type:none; padding:0; margin: 0;}
.sp-nav li a {display:block; padding:18px 25px; color:#333; text-decoration:none; font-weight:500; transition: background-color 0.3s;}
.sp-nav li a:hover {background-color:#f2f2f2;}
.black-bg {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; z-index: 100;}
.nav-wrapper.open .sp-nav {right: 0;}
.nav-wrapper.open .black-bg {opacity:1; visibility: visible;}

/* フッター */
.site-footer {background-color:#2c3e50; color:#ecf0f1; padding:40px 20px; margin-top:60px; text-align:center;}
.footer-container {max-width:1000px; margin:0 auto;}
.footer-nav {margin-bottom:25px; display:flex; justify-content:center; flex-wrap:wrap; gap:15px 30px;}
.footer-nav a {color:#ecf0f1; text-decoration:none; font-weight:500; transition:color 0.2s ease;}
.footer-nav a:hover {color: #3498db; text-decoration: underline;}
.copyright {margin:0; font-size:0.9em; color:rgba(236, 240, 241, 0.7);}


/* ここから必要なものを記述 */

/* ページ全体のコンテナ */
.page-container {
    max-width: 800px;
    margin: 80px auto 40px; /* 上部の余白を確保 */
    padding: 0 20px;
}

/* ページタイトル (h1) */
.page-title {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: #427ab3;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
}

/* 説明セクション全体 */
.explain {
    background-color: #ffffff;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* 部署名 (h2) */
.explain h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 30px;
    border-left: 5px solid #3498db;
    padding-left: 15px;
}

/*　質問　(h3)　*/


/*　回答 (p)　*/
.explain p {
    font-size:medium;
    color: #ff0000;
    font-weight: 450;   
}