@charset "utf-8";

/* =========================================================
   表示切り替え
   ========================================================= */
/* PC用ナビゲーション等は非表示 */
.globalnavi, 
.header-right { 
    display: none !important; 
}

/* スマホ用要素を表示 */
.openbtn, 
.sp-navi { 
    display: block !important; 
}

/* 汎用表示切り替えクラス */
.smp-on { display: block !important; }
.smp-off { display: none !important; }


/* =========================================================
   ヘッダー固定・レイアウト
   ========================================================= */
header {
    padding-top: 4.5rem; 
    width: 100%;
}
/* --- 修正：余計な隙間を削除 --- */
.header-area {
    padding: 0 !important; /* PC用の余白(1rem)を打ち消す */
}
.header-inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4.5rem;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 1000;
    display: flex;
    justify-content: flex-start !important; /* 強制的に左寄せ */
    
    box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.05);
    padding: 0;
}

/* 左側エリア（ロゴ） */
.header-left {
    width: auto !important;
    display: flex;
    margin-left: 1rem;   /* 左の余白 */
    margin-top: 0.8rem;  /* 上の余白（ロゴを垂直中央に見せるために数値を調整） */
}

/* ロゴ画像 */
.logo-img {
    margin: 0;
    padding: 0;
    line-height: 1;
}
.logo-img img {
    height: auto;
    width: 12.5rem; /* ロゴの大きさ */
    display: block;
}

.office-info { display: none; }

/* =========================================================
   ハンバーガーメニューボタン
   ========================================================= */
.openbtn {
    position: fixed;
    top: 0.6rem;
    right: 0.8rem;
    z-index: 9999; /* 最前面 */
    cursor: pointer;
    width: 3.125rem; /* 50px */
    height: 3.125rem;
    background: transparent; /* 背景なし */
}

/* 3本線 */
.openbtn span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    left: 0.2rem;
    height: 0.19rem; /* 太さ約3px */
    border-radius: 0.125rem;
    background-color: #005FAC; /* 通常時は青 */
    width: 2.5rem; /* 40px */
}

/* 線の位置 */
.openbtn span:nth-of-type(1) { top: 0.625rem; }
.openbtn span:nth-of-type(2) { top: 1.375rem; }
.openbtn span:nth-of-type(3) { top: 2.125rem; }

/* "MENU" テキスト */
.openbtn p {
    font-size: 0.625rem;
    font-weight: 800; /* 太字 */
    color: #005FAC;
    position: absolute;
    top: 2.5rem;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    transition: all 0.4s;
    letter-spacing: 0.05em;
}

/* --- アクティブ時（×印）のアニメーション --- */
/* 線と文字を白(#fff)に変更 */
.openbtn.active span {
    background-color: #fff;
}
.openbtn.active span:nth-of-type(1) {
    top: 1.375rem;
    left: 0.2rem;
    transform: rotate(-45deg);
    width: 2.5rem;
}
.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
    top: 1.375rem;
    left: 0.2rem;
    transform: rotate(45deg);
    width: 2.5rem;
}
/* MENU文字は非表示（または色を変える） */
.openbtn.active p {
    opacity: 0;
}


/* =========================================================
   スライドメニュー本体
   ========================================================= */
.sp-navi nav {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 95, 172, 0.95); /* 濃い青背景 */
    
    /* フェードイン設定 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    
    overflow-y: auto; /* 縦スクロール */
    padding-top: 5rem; /* ヘッダー分空ける */
    padding-bottom: 3rem;
}

.sp-navi nav.panelactive {
    opacity: 1;
    visibility: visible;
}

/* メニューリスト */
.sp-menu {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    width: 85%;
    text-align: center;
}

.sp-menu li {
    border-bottom: 0.0625rem dotted rgba(255, 255, 255, 0.4);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
.sp-menu li:last-child {
    border-bottom: none;
}

.sp-menu li a {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    letter-spacing: 0.1rem;
}

/* --- メニュー内 電話番号エリア --- */
.sp-tel-item {
    border-bottom: none !important; /* 線なし */
    margin-top: 1rem;
    margin-bottom: 1.5rem !important;
    text-align: center;
}

.sp-tel-label {
    display: block;
    color: #fff;
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
    opacity: 0.8;
    font-weight: 500;
}

.sp-tel-link {
    display: inline-block !important; /* 横幅いっぱいにしない */
    border: 0.0625rem solid #fff;
    border-radius: 2rem;
    padding: 0.8rem 2rem !important;
    font-size: 1.2rem !important;
    background: rgba(255,255,255,0.1);
    transition: 0.3s;
}
.sp-tel-link:hover {
    background: rgba(255,255,255,0.3);
}
.sp-tel-link i {
    margin-right: 0.5rem;
}

/* =========================================================
   メインビジュアル (SP調整)
   ========================================================= */
.mv-inner {
    height: 400px; /* スマホでの高さ */
}

/* メインコピー調整 */
.mv-textarea {
    width: 95%; /* 画面端に余裕を持たせる */
}

.mv-textarea h2 {
    font-size: 1.4rem; /* スマホ用に小さく */
    margin-bottom: 1rem;
    white-space: normal; /* スマホではさすがに改行を許可（必要なら） */
    line-height: 1.4;
}

/* ★修正：サブテキスト（白帯）のはみ出し防止 */
.mv-sub-text {
    width: 90%;          /* 画面幅の90%に収める */
    max-width: 100%;     /* はみ出し防止 */
    padding: 0.8rem 1rem; /* 内側の余白を調整 */
    box-sizing: border-box; /* paddingを含めた幅計算にする */
    display: inline-block;
}

/* ★修正：サブテキスト内の文字 */
.mv-textarea p {
    font-size: 0.8rem;   /* 文字サイズ調整 */
    white-space: normal; /* ★重要：画面幅に合わせて改行させる */
    line-height: 1.6;    /* 行間を空けて読みやすく */
    display: inline-block; /* ブロックとして扱う */
}

.mv-bg-text {
    width: 120%; /* スマホでは背景文字を少し大きく */
    opacity: 0.15; /* 薄くする */
}
/* =========================================================
   コンテンツエリア（スマホ用調整）
   ========================================================= */
.swiper-container {
    height: 100%; /* 親要素(.mv-inner)の高さ(400px)いっぱいに広げる */
}

.mv-textarea {
    width: 90%;
}
.mv-textarea h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.mv-textarea p {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
}

/* レイアウト調整 */
.about-3colom ul, 
.news-flex, 
.footer-info-area, 
.bottom-links ul {
    flex-direction: column;
}
.about-3colom li {
    width: 100%;
    margin-bottom: 2rem;
}
.circle-img img {
    margin: 0 auto;
}

/* ニュースエリア調整 */
.news-h-area {
    width: 100%;
    border-right: none;
    border-bottom: 0.125rem solid #005FAC;
    margin-bottom: 1.5rem;
    text-align: center;
    padding-right: 0;
}
.news-list-area { width: 100%; }

/* フッター調整 */
.footer-info-area { gap: 2rem; }
.foot-info, .foot-info2 { width: 100%; }
.bottom-links li { width: 100%; height: 12.5rem; }