@charset "utf-8";

.plan-table {
            border-collapse: collapse; /* セルの境界線を結合 */
            width: 100%;
            max-width: 800px;
            margin: 20px auto;
            font-family: Arial, sans-serif;
            text-align: center;
        }

        /* ヘッダー行 (プラン名) のスタイリング */
        .plan-table th {
            padding: 10px 5px;
            font-weight: bold;
            color: #333; /* デフォルトの文字色 */
            border: none; /* 境界線をなくす */
        }

        /* 比較項目列 (サービス対象期間) のスタイリング */
        .plan-table .comparison-item {
            text-align: left;
            background-color: #f7f7f7;
            color: #333;
            font-weight: normal;
            padding-left: 15px;
            width: 25%; /* 列幅の調整 */
        }

        /* データセル全体のスタイリング */
        .plan-table td {
            padding: 10px 5px;
            border: 1px solid #ddd;
            vertical-align: middle; /* 垂直方向中央揃え */
            line-height: 1.5;
            color: #333;
        }
        
        /* 1行目（ヘッダー行）のセルはボーダーを非表示 */
        .plan-table thead th, .plan-table thead td {
            border: none;
            color: white; /* プラン名の文字色を白に統一 */
        }

        /* プラン一覧ボタンのスタイリング */
        .plan-table .list-btn {
            background-color: #f0f0f0;
            color: #666;
            font-size: 14px;
        }

        /* 各プランヘッダーの色 */
        .plan-table .trial-header {
            background-color: #55c872; /* 明るい緑 */
        }

        .plan-table .standard-header {
            background-color: #35b399; /* 緑がかった水色 */
        }

        .plan-table .success-header {
            background-color: #19523e; /* 濃い緑 */
        }

        /* 注意書きのスタイル */
        .plan-table .success-header span {
            font-size: 0.8em;
            vertical-align: super;
        }

/* デフォルト（PC表示時など）では非表示にする */
.sp-only {
    display: none;
}

.btn-anchor a{
    background: #ff3131 url(./img/btn-arrow-blue.svg) no-repeat center right 2rem / auto 1.4em;
    color: #ffffff;
}

.mv-text h2 {
    font-size: 4.8rem;
    line-height: 1.4;
    font-weight: bold;
    margin-bottom: var(--s4);
    color: #ffde59;
/*
	text-shadow: 1px 1px 0 #3a3af2, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0 -1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
*/
}

.section-title01::before {
	display:none;
    content: "【ニーズ別】";
    color: var(--pri);
    font-size: 1.8rem;
    transform: translateX(-50%);
    position: absolute;
    top: -3.2rem;
    left: 50%;
    z-index: 3;
    padding: 0 0 0 var(--s3);
    background: url(img/energy.svg) no-repeat left center / auto 100%;
}








/* 768px以下の画面幅の時だけ表示させる */
@media screen and (max-width: 768px) {
    .sp-only {
        display: block; /* または display: inline-block; など、要素に合った表示形式を指定 */
        text-align: center; /* 元の指定にあった中央寄せを適用 */
    }
}

/*----------------------------------------------------
    PCサイトcss
----------------------------------------------------*/
@media screen and (min-width: 768px) {
/*/////////////PC用のCSSをここに作成してください。/////////////*/
/*/////////////必ず中括弧の中に作成してください。/////////////*/


}



/*----------------------------------------------------
    SPサイトcss
----------------------------------------------------*/
@media screen and (max-width: 767px) {
/*/////////////SP用のCSSをここに作成してください。/////////////*/
/*/////////////必ず中括弧の中に作成してください。/////////////*/

.table-container {
    overflow-x: auto;
    overflow-x: auto;
    width: 100%;
    /* background-color: #f9f9f9; */
}

.plan-table {
    width: 700px;
    min-width: 100%;
    border-collapse: collapse; 
    margin: 20px auto;
}

.mv-text h2 {
    font-size: 3.8rem;
}

.mv-text .mv-label {
	font-size: 2rem;
}









}