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


.price{
	width:600px;
	margin:0px auto 0px;
}
.price_top{
	/* background:url(../images/price01a.png) center top no-repeat;*/
	margin:0px;
	padding:0px;
}
.price_btm{
	/*background:url(../images/price01c.png) center top no-repeat;*/
	margin:0px;
	padding:0px;
}

.price_body{
	/* background:url(../images/price01b.png) center top repeat-y; */
	margin:0px;
	padding:10px 0px;
}


.price_body table{
	text-align:center;
	margin:0px auto;
}

.price_tb{
	width:550px;
}
.price_body .price_tb td{
	padding:10px 0px;
}
.price_body .price_tb table td{
	padding:0px;
}


#price_text p{
	clear:none;
	padding:0px;
	line-height:1.3;
}



.price_title{
	margin:0px 0px 20px;
	padding:10px 5px;
	font-weight:bold;
	text-align:center;
	border-top:6px solid #B00000;
	border-bottom:6px solid #B00000;
	margin:0px auto; 
	width:500px;
}

.price_txt{
	border:10px solid #BCBCBC;
	background-color:#fff;
	padding:10px 10px;
	text-align:left;
}

.price_subtitle01{
	padding:10px 0px;
	background:#FFE34B;
	color:#000;
	text-align:center;
	font-weight:bold;
	

}
.price_subtitle02{
	padding:10px;
	background:#FFE34B;
	line-height:1.4em;
	color:#000;
	text-align:center;
	font-weight:bold;
}
.pirce_impact01{
	font-weight:bold;
	color:#000;
}
.pirce_impact02{
	font-weight:bold;
	color:#FF0000;
}

/* 受講費用　PC */
.page .site_subsc_box {
    margin-top: 50px;
}

.page .price_graph_ttl {
    margin-top: 100px;
}

.page .price_graph_ttl h3::before {
    bottom: 0;
}

.page_fee_box li {
    width: 383px;
    padding: 30px 40px;
    border-radius: 6px;
}

.page_fee_box li+li {
    margin-left: 45px;
}

.page_fee_box li .img {
    width: 75%;
    margin: auto;
}

.page_fee_box h3 {
    color: #e95310;
    text-align: center;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.5;
    padding-bottom: 10px;
}

.page_fee_box .text_box {
    margin-top: 10px;
}

.page_fee_box li:nth-child(1) {
    transform: translateY(180px);
}

.page_fee_box li:nth-child(2) {
    transform: translateY(80px);
    /* background-color: #ffecd259; */
    padding: 0 40px 30px;
}

.page_fee_merit {
    padding: 80px 0 50px;
}

.page_fee_box {
    position: relative;
}

.page_fee_ttl span.small {
    font-size: 25px;
    display: block;
}

.page_fee_ttl span.color {
    color: #ed8e05;
    font-size: 35px;
}

.page_fee_ttl h2 {
    font-weight: 900;
    letter-spacing: 0.05em;
}

.page_fee_ttl {
    margin-bottom: -85px;
    position: relative;
}

.page_fee_ttl::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -129px;
    background: url(/service/school/wp-content/uploads/2022/05/corner.png) center no-repeat;
    background-size: contain;
    width: 80px;
    height: 80px;
    transform: rotate(90deg);
}

.page_fee a.site_cmn_btn {
    margin-top: 65px;
}

.page_fee_ttl::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -34px;
    background: linear-gradient(90deg, rgba(255, 183, 94, 1) 0%, rgba(237, 143, 3, 1) 100%);
    width: 80px;
    height: 6px;
    border-radius: 6px;
}

/* 比較表 */
body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f8f9fa;
        }

        .comparison-section {
            max-width: 1200px;
            margin: 0 auto;
            padding-bottom: 80px;
        }

        .section-title {
            text-align: center;
            font-size: 2em;
            font-weight: bold;
            color: #333;
            margin:0 ;
            line-height: 1.4;
        }

        .table-container {
            position: relative;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin: 20px 20px 0px;
            padding: 0 20px 0px;
        }

        .comparison-table {
            width: 100%;
            min-width: 800px;
            border-collapse: separate;
            border-spacing: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
			margin: 30px 0;
        }

        .sticky-column {
            position: sticky;
            left: 0;
            z-index: 10;
            background: white;
            box-shadow: 2px 0 4px rgba(0,0,0,0.1);
        }

        .table-header {
            background-color: #f8f9fa;
        }

        .table-header th {
			padding: 20px 60px;
            text-align: center;
            font-weight: bold;
            font-size: 36px;
            color: #333;
            position: relative;
        }

        .campus-column {
			border-radius: 20px 20px 0 0;
            background-color: rgb(252, 182, 159);
            border: 10px solid rgb(252, 182, 159);
            position: relative;
        }

        .campus-header {
            background: linear-gradient(to bottom, #FFECD2, #FCB69F);
            color: #333;
            font-size: 36px;
            padding: 25px 15px;
        }

        .campus-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 24px;
            font-weight: bold;
        }

		 .campus-logo img {
			width: 400px;
			height: auto;
		 }

		.table-header .other-columns {
			background-color: rgb(239, 239, 239);
			color: rgb(165, 165, 165);
		}

		.table-header .other-columns:not(:last-child) {
            border-right: 15px solid #feecd2;
		}

        .other-columns {
            background-color: #f8f9fa;
            color: #666;
        }

        .table-row {
            border-bottom: 1px solid #e9ecef;
        }

        .table-row:last-child {
            border-bottom: none;
        }

        .row-header {
            background-color: #ffffff;
            font-weight: bold;
			font-size: 40px;
            color: #333;
            padding: 20px 15px;
			text-align: center;
            border-right: 2px solid #e9ecef;
			min-width: 300px;
        }

		.table-row:nth-child(2n+1) .row-header {
			background-color: rgb(247, 247, 247);
		}

        .table-cell {
            padding: 20px 30px;
            text-align: center;
            color: #333;
			vertical-align: middle;
            line-height: 1.6;
        }

        .campus-cell {
            font-weight: 500;
			border-left:10px solid rgb(252, 182, 159);
			border-right:10px solid rgb(252, 182, 159);
        }

        .campus-cell-orange {
            background-color: #fff5e6;
        }

        .campus-cell-white {
            background-color: white;
        }

        .other-cell {
        	background-color: rgb(247, 247, 247);
            color: rgb(165, 165, 165);
			font-size: 36px;
			font-weight: bold;
			min-width: 360px;
        }

		.other-cell:not(:last-child) {
            border-right: 15px solid #feecd2;
		}

		.table-row:nth-child(2n) .other-cell {
			background-color: rgb(250, 250, 250);
		}

        .price-highlight {
			color: rgb(233, 83, 16);
            font-weight: bold;
            font-size: 40px;
        }

        .price-small {
			font-size: 24px;
            color: #666;
        }

        .period-highlight {
            color: rgb(233, 83, 16);
            font-weight: bold;
            font-size: 38px;
        }

        .support-text {
			font-size: 36px;
            line-height: 1.5;
			font-weight: bold;
            color: rgb(233, 83, 16);
        }

        .circle-yes {
            display: inline-block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid rgb(165, 165, 165);
            background-color: white;
            position: relative;
            margin: 0 auto;
        }

        .circle-yes.filled {
            background-color: rgb(233, 83, 16);
        }

        .circle-yes.filled::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .cross-no {
            color: #999;
            font-size: 36px;
            font-weight: bold;
        }

        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .section-title {
                font-size: 24px;
                margin-bottom: 30px;
            }

            .table-container {
                margin: 0 -10px;
                padding: 0 10px;
            }

            .comparison-table {
                min-width: 1000px;
            }

            .table-header th,
            .table-cell,
            .row-header {
                padding: 15px 12px;
                font-size: 14px;
            }

            .campus-logo {
                font-size: 20px;
            }

            .logo-icon {
                width: 28px;
                height: 28px;
                font-size: 14px;
            }
        }