@charset "UTF-8";

.site-main {
    background-color: white;
}

.company-page {
    width: 900px;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 2lh;
}

.company-page .company_top {
    width: 100%;
    margin-bottom: 1lh;
}
.company-page .company_top img{
    width: 100%;
}
.company-page .grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2列 */
    gap: 12px;
    /* すき間 */
    align-items: end;
    margin-bottom: 4lh;
}

@media (max-width: 600px) {
    .grid-2x2 {
        grid-template-columns: 1fr;
        /* 1列に */
    }
}

/* フレッシュフィットネス２４を福利厚生として導入しませんか？ */

.company-page .img-wrap {
    position: relative;
    display: inline-block;
    /* 画像サイズにピッタリ合わせたい場合 */
}

.company-page .img-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.company-page .img-wrap {
    margin-bottom: 3lh;
}

.company-page .img-wrap.sp {
    height: 250px;
}

.company-page .img-wrap .img-ovl_text,
.img-ovl_text2,
.img-ovl_text3 {
    position: absolute;
    left: 50%;
    top: 20%;
    /* 上から15%の位置に置く */
    transform: translateX(-50%);
    font-size: 22px;
    font-weight: bold;
    letter-spacing: .2em;
    color: black;
    z-index: 1;
}

.company-page .img-wrap .img-ovl_text {
    width: 100%;
    text-align: center;
}

.company-page .img-wrap .img-ovl_text2 {
    width: 80%;
    top: 33%;
    font-size: 32px;
    text-align: center;
}

/* .company-page を裁ち落としの境界にする */
.company-page {
    position: relative;
    overflow: hidden;
    /* はみ出しを隠す */
}

/* company_img02.png だけ拡大表示 */
.company-page .img-wrap img[src$="company_img02.png"],
.company-page .img_wrap img[src$="company_img02.png"] {
    display: block;
    transform: scale(1.9);
    /* 拡大率はお好みで 1.1～1.5 など */
    transform-origin: 80% 30%;
    /* 画像中央を見せたい場合はそのままでOK。見せたい位置が上なら originを top center に */
}


/*　MERIT */
.company-page .grid-1x4 {
    display: grid;
    padding-top: 2lh;
    grid-template-columns: repeat(4, 1fr);
    /* 2列 */
    gap: 12px;
    /* すき間 */
    align-items: end;
    padding-bottom: 2lh;
}
.company-page .img-wrap .comp_text.no1{
    color: #63C600;
}
@media (max-width: 600px) {
    .company-page .grid-1x4 {
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
    }
}

.company-page .grid-2x2 img {
    height: 45px;
}

/* ---- 「初心者・上級者も満足」を白背景バッジ化 ---- */
.company-page .img-wrap .comp_text {
    position: absolute;
    top: 8%;
    /* 位置は好みで微調整 */
    left: 0%;
    /*transform: translateX(-50%);*/
    /* 画像中央に寄せる（右上にしたいなら right:6%; left/transform を外す） */
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .08em;

    /* バッジ風の白背景 */
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    padding: .35em .7em;
    /*border-radius: .5em;*/

    pointer-events: none;
    /* 画像のクリックを邪魔しない（任意） */
    z-index: 2;
}

.company-page .img-wrap .comp_text.no1 {
    top: 10%;
}

.company-page .img-wrap .comp_text.no2 {
    top: 30%;
}

/* 親を可変幅にして、右側を基準に拡大できるようにする */
.company-page .img-wrap {
    display: block;
    width: 100%;
    /* ← fit-content をやめて全幅に */
    margin-left: auto;
    /* 右寄せは子で制御するのであってもOK */
    overflow: hidden;
    /* はみ出しを隠す（不要なら外してOK） */
}

/* 画像を“右寄せのまま”拡大。max-width を外さないと拡大できない場合がある */
.company-page .img-wrap img {
    display: block;
    width: 75%;
    /* ← 好みで 110〜160% などに調整 */
    max-width: none;
    /* ← グローバルの max-width:100% を打ち消す */
    height: auto;
    margin-left: auto;
    /* 右に寄せる（右端基準で拡大） */
}

.company-page .img-wrap.no2 img {
    display: block;
    margin-left: 0;
    /* 左寄せ */
    margin-right: auto;
    /* 右側に余白を寄せる */
}

.company-page .img-wrap .comp_text.no1 {
    top: 10%;
}

.company-page .img-wrap.no2 .comp_text.no1 {
    top: 10%;
}

.company-page .img-wrap.no2 .comp_text.no2 {
    top: 30%;
}

.company-page .img-wrap.no2 .comp_text {
    right: 5%;
    left: auto;
    /* left指定を無効化 */
    transform: none;
    /* センター寄せ用の変形を無効化 */
    text-align: right;
    /* バッジ内のテキストも右揃えに */
}

.company-page .img-wrap.no3 .comp_text {
    left: 12%;
    right: auto;
    /* left指定を無効化 */
    transform: none;
    /* センター寄せ用の変形を無効化 */
    text-align: right;
    /* バッジ内のテキストも右揃えに */
}

@media (max-width:600px) {

    .company-page .img-wrap img[src$="company_img02.png"],
    .company-page .img_wrap img[src$="company_img02.png"] {
        transform: scale(1.35);
    }

    /* 画面端の安全領域も意識 */
    :root {
        --sp-pad-x: max(16px, env(safe-area-inset-left));
        --sp-pad-r: max(16px, env(safe-area-inset-right));
    }

    .company-page {
        width: 100%;
        max-width: none;
        margin: 0 auto;
        padding-left: var(--sp-pad-x);
        padding-right: var(--sp-pad-r);
        padding-bottom: 32px;
    }

    /* ヒーロー画像などがあれば横幅フィット */
    .company-page .company_top img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 2×2 → 1列 */
    .company-page .grid-2x2 {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-bottom: 16px;
    }

    .company-page .grid-2x2 img {
        height: 35px;
    }

    /* 1×4 → 2列（アイテムが小さければ1列でもOK） */
    .company-page .grid-1x4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding-top: 16px;
        padding-bottom: 16px;
        text-align: center;
    }

    /* 画像＋テキスト重ね */
    .company-page .img-wrap {
        display: block;
        /* 親をブロック化して幅100%運用 */
        width: 100%;
    }

    .company-page .img-wrap img {
        width: 100%;
        height: auto;
        display: block;
    }

    .company-page .img-wrap .comp_text.no1,
    .company-page .img-wrap .comp_text.no2 {

        font-size: 20px;
        white-space: nowrap;
    }

    .company-page .img-wrap.no2 {
        width: 100%;
    }

    .company-page .img-wrap .img-ovl_text {
        width: 90%;
        top: 12%;
        font-size: 14px;
    }

    .company-page .img-wrap .img-ovl_text2 {
        width: 80%;
        top: 30%;
        font-size: 20px;
    }

    /* 重ねテキストは右揃えのまま */
    .company-page .img-wrap.no2 .comp_text {
        right: 4%;
        left: auto;
        transform: none;
        text-align: right;
    }

    /* オーバーレイ文字：折り返し可能＆可読性アップ */
    .company-page .img-wrap .img-ovl_text,
    .company-page .img-wrap .img-ovl_text2,
    .company-page .img-wrap .img-ovl_text3 {
        left: 50%;
        transform: translateX(-50%);
        white-space: normal;
        /* ← スマホで勝手に場外へ出ないように */
        text-align: center;
        line-height: 1.2;
        letter-spacing: .1em;
        color: black;
    }

    /* 画像の下に説明テキスト等がある場合の余白調整 */
    .company-page .img-wrap+* {
        margin-top: 8px;
    }

    /* 表や2カラム等がある場合の保険 */
    .company-page table {
        width: 100%;
        table-layout: fixed;
        word-break: break-word;
    }

    /* 任意：表示切替ユーティリティ */
    .pc-only {
        display: none !important;
    }

    .sp-only {
        display: initial !important;
    }

    .company-page .img-wrap.no2 .comp_text {
        right: 50%;
        left: auto;
        transform: translateX(50%);
        /* ＝中央寄せ */
        text-align: center;
    }

    .company-page .img-wrap.no2 .comp_text.no1 {
        top: 14%;        
    }

    .company-page .img-wrap.no2 .comp_text.no2 {
        top: 36%;
    }
}

/*　法人契約割引内容　*/

.company-page .img-wrap .img-ovl_text.no1 {
    top: 20%;
    font-size: 52px;
    white-space: nowrap;
}

.company-page .img-wrap .img-ovl_text.no2 {
    top: 55%;
    font-size: 18px;
    white-space: nowrap;
}

.company-page .price-table01 {
    border: 1px solid #80f2d2;
    border-bottom: none;
    margin-top: 0px;
    width: 1080px;
}

.company-page .price-table01 tr {
    height: 76px;
}

.company-page .price-table01 tr:first-of-type {
    height: 40px;
    line-height: 40px;
}

.company-page .price-table01 th {
    background-color: #00e6a6;
    color: #fff;
    border-right: 1px solid #80f2d2;
    border-bottom: 1px solid #80f2d2;
    text-align: center;
}

.company-page .price-table01 th:nth-of-type(1),
.company-page .price-table01 th:nth-of-type(2),
.company-page .price-table01 th:nth-of-type(3),
.company-page .price-table01 th:nth-of-type(4) {
    width: 100px;
}

.company-page .price-table01 td {
	font-size:24px;
    background-color: #fff;
    border-right: 1px solid #80f2d2;
    border-bottom: 1px solid #80f2d2;
    text-align: center;
}

/* 列幅を制御：1列目は固定幅、他3列は残りを等分 */
.company-page .price-table01 {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    /* ←列幅指定を効かせる要 */
    --first-col-w: 150px;
    /* ←ここを変えるだけで1列目の幅を調整 */
}

/* 見やすさ（任意） */
.company-page .price-table01 th,
.company-page .price-table01 td {
    padding: .7em .9em;
    vertical-align: middle;
    /*word-break: break-word;*/
}

/* 1行目（ヘッダー行）のセルに幅を指定すると全行に適用される */
.company-page .price-table01 tr:first-child>th:nth-child(1) {
    width: var(--first-col-w);
}

.company-page .price-table01 tr:first-child>th:nth-child(2) {
    width: calc((100% - var(--first-col-w)) / 3);
}

.company-page .price-table01 tr:first-child>th:nth-child(3) {
    width: calc((100% - var(--first-col-w)) / 3);
}

.company-page .price-table01 tr:first-child>th:nth-child(4) {
    width: calc((100% - var(--first-col-w)) / 3);
}

.company-page .table-overflow {
    margin-bottom: 1lh;
}

.company-page .comp_end1 {
    margin-top: 1.5lh;
    margin-bottom: 0.7lh;
    font-size: 40px;
    font-weight: 800;
    text-align: center;
}

.company-page .comp_end2 {
    display: block;
    width: fit-content;
    margin: 12px auto;
    padding: .3em 0.8em;
    background: #a6ff4d;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.45;
}
.tax {
	text-align:right;
}
@media (max-width: 600px) {
    .company-page .comp_end1 {
        font-size: clamp(14px, 4vw, 16px);
    }

    .company-page .comp_end2 {
        font-size: clamp(14px, 4vw, 16px);
    }

    .company-page .price-table01 {
        --first-col-w: 9.5rem;
    }

    .company-page .img-wrap.no1 .comp_text {
        left: 0% !important;
        transform: none !important;
        text-align: left !important;
    }

    /* スマホ時は .no2 の重ねテキストを必ず右寄せにする（最終勝ち） */
    .company-page .img-wrap.no2 .comp_text {
        right: 0% !important;
        transform: none !important;
        text-align: right !important;
    }

    .company-page .img-wrap.no3 .comp_text {
        left: 0% !important;
        transform: none !important;
        text-align: left !important;
    }

    .company-page .img-wrap .comp_text.no1 {
        top: 15%;
    }

    .company-page .img-wrap .comp_text.no2 {
        top: 45%;
    }
   .company-page .img-wrap.no2 .comp_text.no1 {
        top: 15%;
    }

    .company-page .img-wrap.no2 .comp_text.no2 {
        top: 45%;
    }

    .company-page .img-wrap .img-ovl_text.no1 {
        top: 20%;
        font-size: 40px;
    }

    .company-page .img-ovl_text.no2 {
        overflow-wrap: anywhere;
        width: 90% !important;
        max-width: 38rem;
        display: block;
        line-height: 1.4;
        text-align: left;
    }

    /* テーブル：横スクロールで崩れ防止 */
    .company-page .table-overflow {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-top: 10px;
    }

    .company-page .price-st {
        font-size: clamp(12px, 3.6vw, 14px);
        margin: 6px 0;
        color: #666;
    }

    .company-page .price-table01 {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        /*min-width: 640px;*/
        /* ←画面より広くして横スクロールに */
    }

    .company-page .price-table01.no2 {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        /*min-width: 640px;*/
        /* ←画面より広くして横スクロールに */
    }

    .company-page .price-table01 th,
    .company-page .price-table01 td {
        padding: .6em .7em;
        font-size: clamp(12px, 3.6vw, 14px);
        line-height: 1.35;
    }

    .company-page .price-table01.no2 th,
    .company-page .price-table01.no2 td {
        padding: .6em .7em;
        font-size: clamp(12px, 3.6vw, 14px);
        line-height: 1.35;
    }

    .company-page .price-table01 .text-emph {
        font-size: 20px;
    }

    .company-page .price-table01 .text-emph2 {
        font-size: 16px;
    }

    /* 列幅：読みやすい目安（必要なら調整OK） */
    .company-page .price-table01 tr:first-child>th:nth-child(1) {
        width: 11rem;
    }

    /* 通常 */
    .company-page .price-table01 tr:first-child>th:nth-child(2) {
        width: 11rem;
    }

    /* 法人契約 */
    .company-page .price-table01 tr:first-child>th:nth-child(3) {
        width: 11rem;
    }

    /* 割引適用の条件 */
    .company-page .price-table01 tr:first-child>th:nth-child(4) {
        width: 11rem;
    }

    /* 画像ブロック：横いっぱい＋高さ固定で見せ場を作る */
    .company-page .img-wrap.sp {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin: 14px 0 8px;
        height: 200px;
    }

    .company-page .img-wrap.sp img {
        display: block;
        width: 100%;
        height: 150px;
        /* height: clamp(220px, 48vw, 360px);*/
        /* 好みで調整 */
        object-fit: cover;
        /* 上下を自然にトリミング */
        object-position: center;
        /* 右寄せにしたい時は right center などに */
    }

    /* 重ねテキスト：中央寄せ＋白背景、必ず折り返す */
    .company-page .img-wrap.sp .img-ovl_text {
        display: inline-block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 88%;
        padding: .5em .75em;
        line-height: 1.6;
        /* 折り返しを阻害する指定を強制解除 */
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .company-page .img-wrap.sp .img-ovl_text2 {
        padding-top: 10px;
    }

    .company-page .img-wrap img[src$="company_img02.png"],
    .company-page .img_wrap img[src$="company_img02.png"] {
        display: block;
        /*transform: scale(1.1);*/
        /* 拡大率はお好みで 1.1～1.5 など */
        transform-origin: 80% 50%;
        /* 画像中央を見せたい場合はそのままでOK。見せたい位置が上なら originを top center に */
    }

    .company-page .img-wrap.sp .img-ovl_text.no1 {
        top: 8%;
        font-size: 24px;
    }

    .company-page .img-wrap.sp .img-ovl_text.no2 {
        top: 35%;
       font-size: 16px;
        line-height: 1.2;
    }

    /* ラッパで横スクロール */
    .company-page .table-overflow {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* テーブル本体はコンテナ幅より広くして、横スクロールを発生させる */
    .company-page .price-table01,
    .company-page .price-table01.no2 {
        width: auto !important;
        /* 汎用の width:100% を無効化 */
        min-width: 720px !important;
        /* 画面より広い基準幅（必要なら 640～960pxで調整） */
        table-layout: fixed !important;
        /* 列幅を安定させる */
    }

    /* 文字高さ・間隔なども統一 */
    .company-page .price-table01 th,
    .company-page .price-table01 td {
        padding: .6em .7em !important;
        line-height: 1.35 !important;
        font-size: clamp(12px, 3.6vw, 14px) !important;
        word-break: break-word;
    }
}