@charset "utf-8";
/* CSS Document 

/*-----------------------------------
メニュー
-----------------------------------*/

.menu_sp {
    position: fixed;
    top: 0;
    right: -100%; /* 初期状態では画面の外に隠れている */
    width: 300px;
    height: 100%;
    background-color: #FFFFFF;
    transition: right 0.3s ease; /* スライドインのアニメーション */
    padding: 40px 0px 20px;
    box-sizing: border-box;
    z-index: 10;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
/* メニューが開いているとき */
.menu_sp.open {
    right: 0;
}

/* ホームアイコン */
.ico_home {
    margin-right: 46px;
    margin-top: 5px;
    color: #333333;
}

.ico_home a {
    color: inherit;
}

.ico_home a:hover {
    color:#28A88B ;
}

/* ハンバーガーボタンのスタイル */


.hamburger {
    position: fixed;
    top: 7px;
    right: 20px;
    width: 26px;
    cursor: pointer;
    z-index: 1000;
}
.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    margin: 6px 0;
    transition: 0.4s;
    background-color: #333333;
}

.hamburger:hover span,
.hamburger:active span {
    background-color: #28A88B;
}
/* バツ印に変化するスタイル */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}


/*-----------------------------------
非表示の切替
-----------------------------------*/

/* 初期状態では両方非表示 */
.pc-only, .sp-only {
    display: none;
}
/* 768px以上（PC）では .pc-only を表示 */
@media screen and (min-width: 769px) {
    .pc-only {
        display: block;
    }
}
/* 768px未満（スマホ）では .sp-only を表示 */
@media screen and (max-width: 768px) {
    .sp-only {
        display: block;
    }
}

/*-----------------------------------
レイアウト
画面幅が768px以下（スマホ想定）の場合
-----------------------------------*/

@media screen and (max-width: 768px) {
    header {
        position: fixed; /* ヘッダーを固定する */
        top: 0;
        left: 0;
    }
    #content {
        margin-top: 40px; /* ヘッダー固定分を下に下げる */
        min-width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    #container {
        min-width: 100%;
    }
/*-----------------------------------
TOP
-----------------------------------*/
    #mainvisual {
        margin-top: 40px; /* ヘッダー固定分を下に下げる */
        min-width: auto;
    }
    #container_logo-illut {}
    #mainvisual_inner {
        max-width: none;
        padding: 15px 5px 0px;
        margin-left: 30px;
        min-width: 370px;
    }
    #mainvisual_inner h1 {
        font-size: 15px;
    }
    #container_logo-illut .mainvisual-logo {
        width: 264px;
    }
    #container_logo-illut .mainvisual-illut {}
    #container_logo-illut .mainvisual-illut img.illustration {
        margin-left: -125px;
        width: 100px;
    }
/*-----------------------------------
H1 四角つき
-----------------------------------*/
    h1 {
        padding-left: 0; /* 左の余白をなくす */
        padding-top: 30px;
        text-align: center;
    }
    h1::before {
        position: static; /* 絶対位置指定を解除 */
        display: block; /* ブロック要素として縦に配置 */
        margin: 0 auto 20px; /* 中央寄せ＋下に余白 */
        transform: none; /* transform解除 */
    }
    h2.ttl_square {
        padding-left: 0; /* 左の余白をなくす */
        padding-top: 30px;
        text-align: center;
    }
    h2.ttl_square::before {
        position: static; /* 絶対位置指定を解除 */
        display: block; /* ブロック要素として縦に配置 */
        margin: 0 auto 20px; /* 中央寄せ＋下に余白 */
        transform: none; /* transform解除 */
    }
/*-----------------------------------
H1 アイコン付き
-----------------------------------*/
    h1.h1-icon {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* 横方向中央揃え */
        text-align: center; /* テキスト中央揃え */
        font-size: 26px;
        margin-bottom: 5px;
    }
    h1.h1-icon img {
        margin-right: 0; /* 横並び時の余白をリセット */
        margin-bottom: 10px; /* アイコンとテキストの間に余白を追加 */
    }
/*-----------------------------------
問い合わせボックス
-----------------------------------*/
    .toiawase_blk {
        padding: 20px 20px 10px;
    }
/*-----------------------------------
生活改善ポイント（文言とイラスト）
-----------------------------------*/
    /* style.cssでspace-between /*/
    .point-wrapper .image-container {
        justify-content: space-around;
    }
    .b_shindenzu .image-container {
        padding-top: 80px;
        justify-content: flex-start !important;
    }
/*-----------------------------------
メニュー（左カラム）
-----------------------------------*/
    #menu {
        display: none;
    }
/*-----------------------------------
ヘッダー
-----------------------------------*/
    header {
        min-width: 100%;
    }
/*-----------------------------------
検査結果の見方と活用 インデックス（TOPも）
-----------------------------------*/
    #content .exam-navi_outer .exam-navi {
        display: block;
    }
/*-----------------------------------
メインカラム
-----------------------------------*/
    .container-2column {
        display: block;
    }
/*-----------------------------------
画像サイズ調整
-----------------------------------*/
    img.img_center {
        width: 100%;
    }
    .container-2column .left-column {
        margin-bottom: 30px;
    }
    .b_nyubo .container-2column img.resp-size {
        width: 60%;
    }
    .o_tokutei-kenshin .container-2column img.resp-size {
        width: 60%;
    }
    .resp-flex {
        display: flex;
    }
    .a_nyo-jin .container-2column {
        gap: 20px;
    }
    .a_nyo-jin .left-column {
        margin: 0px;
    }
    .a_nyo-jin .left-column img {
        margin: 0px;
    }
    .a_nyo-jin .right-column {
        flex: 5;
        margin: 0px;
    }
/*-----------------------------------
特定健診
-----------------------------------*/
    .o_tokutei-kenshin .container-2column.illst01, .o_tokutei-kenshin .container-2column.illst02 {
        display: flex;
        gap: 10px;
    }
    .o_tokutei-kenshin .illst01 .left-column, .o_tokutei-kenshin .illst02 .left-column {
        flex: 4;
        margin-bottom: 0;
    }
    .o_tokutei-kenshin .container-2column.illst01 img, .o_tokutei-kenshin .container-2column.illst02 img {
        margin-top: -40px;
    }
/*-----------------------------------
ポイント　
-----------------------------------*/
    .point-wrapper {
        gap: 20px;
    }
    .text-container {
        flex: 2;
    }
/*-----------------------------------
テーブル
-----------------------------------*/
    th, td {
        padding: 5px 8px;
        font-size: 15px;
    }
/*-----------------------------------
テーブル　縦並び
-----------------------------------*/
    table.sp_table, table.sp_table thead, table.sp_table tbody, table.sp_table tr, table.sp_table th, table.sp_table td {
        display: block;
        width: 100% !important;
        border: none;
    }
    table.sp_table thead {
        display: block; /* ヘッダーも縦に出す場合は block に */
    }
    table.sp_table tr {
        margin-bottom: 1em;
        border: 1px solid #ccc;
        border-radius: 6px;
        overflow: hidden;
    }
    table.sp_table th, table.sp_table td {
        position: relative;
        padding: 10px;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
    }
    table.sp_table th:last-child, table.sp_table td:last-child {
        border-bottom: none;
    }
/*-----------------------------------
テーブル 各調整
-----------------------------------*/
    /*前立腺　*/
    .description-container {
        display: block;
    }
    .description-container .text {
        margin-bottom: 20px;
    }
    .description-container .image {
        margin-bottom: 10px;
        text-align: center;
    }
    /*体の部位別検査早わかり表*/
    .c_karada-kensa .syoken-table {
        min-height: auto;
        margin-bottom: 0px;
    }
    /*テーブル内リスト*/
    #content table ul li {
        font-size: 15px;
    }
/*-----------------------------------
テーブル内　画像をポップアップ
-----------------------------------*/
    .txt_litebox-click {
        display: block;
        margin-top: 12px;
        text-align: center;
        font-size: 12px;
        padding: 2px 2px;
        border-radius: 4px;
        color: #777777;
        background: #DDDDDD82;
    }
    /* 画像を上付きに */
    .syoken-table td.td-img-top {
        vertical-align: top;
        padding-top: 30px;
    }
    .syoken-table td.td-img-top img {
        width: 100px;
    }
/*-----------------------------------
フッター
-----------------------------------*/
    footer {
        min-width: 100%;
        flex-direction: column; /* 縦並びに変更 */
        align-items: center; /* 横方向センター */
        justify-content: center; /* 高さ方向の調整（任意） */
        flex-wrap: nowrap; /* 折り返し不要 */
        height: auto; /* 高さ制限を外す */
        padding: 20px;
        gap: 10px; /* 要素の間隔 */
    }
    .footer_inner_nav {
        flex-direction: column; /* ナビも縦並び */
        gap: 10px;
        align-items: center; /* 横センター */
        padding: 0;
    }
    address {
        text-align: center;
        width: 100%;
    }
    #box_toTop {
        bottom: 10px;
        right: 10px;
    }
} /*--　/768x以下　-*/

/*-----------------------------------
500px以下
-----------------------------------*/
@media screen and (max-width: 500px) {
    table.b_fujinka-table {
        overflow-wrap: break-word; /* ← 英文を折り返す*/
        word-break: break-word; /* ← 非標準だが補助的に */
    }
} /*--　/500x以下　-*/

/*-----------------------------------
390px以下
-----------------------------------*/
@media screen and (max-width: 390px) {
    #mainvisual {
        margin-top: 40px; /* ヘッダー固定分を下に下げる */
        min-width: 100%;
        max-height: none;
    }
    #container_logo-illut {
        flex-direction: column; /* 子要素を縦に並べる */
        align-items: center; /* 子要素を横方向に中央揃え */
        justify-content: center; /* 子要素を縦方向に中央揃え */
    }
    #mainvisual_inner {
        width: 100%;
        justify-content: center;
        margin-left: 0px;
        min-width: 300px;
    }
    #mainvisual_inner h1 {
        font-size: 12px;
        text-align: center;
        margin-bottom: 10px;
    }
    #container_logo-illut .mainvisual-logo {
        width: 260px;
    }
    #container_logo-illut .mainvisual-illut {
        margin-left: 50%;
        margin-top: -20px;
    }
    #container_logo-illut .mainvisual-illut img.illustration {
        margin-left: 0px;
    }
} /*--　/390px以下　-*/