/* features page - pcci-school.com 完全踏襲 */
.page_feature { color: #333; }
.page_feature .box { max-width: 1100px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/* head_area / p_title は共通スタイル (style.css) に統一 */

/* 強み一覧見出し */
.page_feature h2.h2_strengths {
    position: relative; z-index: 0;
    text-align: center; margin: 0 auto 30px; padding: 40px 0 0;
    font-weight: 700;
}
.page_feature h2.h2_strengths > span:nth-of-type(1) {
    display: block; font-family: "Oswald", sans-serif;
    font-size: 60px; color: #FAE0DC; line-height: 1;
    letter-spacing: .05em;
}
.page_feature h2.h2_strengths > span:nth-of-type(1) > span { display: inline-block; position: relative; }
.page_feature h2.h2_strengths > span:nth-of-type(1) > span:nth-of-type(1) { transform: rotate(-20deg); bottom: -20px; left: 6px; }
.page_feature h2.h2_strengths > span:nth-of-type(1) > span:nth-of-type(2) { transform: rotate(-17deg); bottom: -12px; left: 4px; }
.page_feature h2.h2_strengths > span:nth-of-type(1) > span:nth-of-type(3) { transform: rotate(-11deg); bottom: -5px; left: 2px; }
.page_feature h2.h2_strengths > span:nth-of-type(1) > span:nth-of-type(4) { transform: rotate(-4deg); bottom: -1px; }
.page_feature h2.h2_strengths > span:nth-of-type(1) > span:nth-of-type(5) { transform: rotate(0deg); bottom: 0; }
.page_feature h2.h2_strengths > span:nth-of-type(1) > span:nth-of-type(6) { transform: rotate(4deg); bottom: -1px; }
.page_feature h2.h2_strengths > span:nth-of-type(1) > span:nth-of-type(7) { transform: rotate(11deg); bottom: -5px; left: -2px; }
.page_feature h2.h2_strengths > span:nth-of-type(1) > span:nth-of-type(8) { transform: rotate(17deg); bottom: -12px; left: -4px; }
.page_feature h2.h2_strengths > span:nth-of-type(1) > span:nth-of-type(9) { transform: rotate(20deg); bottom: -20px; left: -6px; }
.page_feature h2.h2_strengths > span:nth-of-type(2) {
    display: block; margin-top: 36px;
    font-size: 28px; color: #333;
}
.page_feature h2.h2_strengths > span:nth-of-type(2) > span { color: #E86350; }
.page_feature h2.h2_strengths + p {
    font-weight: 300; text-align: center; margin: 0 auto 90px; color: #555;
}

/* 5項目カード */
.page_feature .feature00 ol {
    list-style: none; padding: 0;
    display: flex; justify-content: space-between; align-items: stretch;
    margin: 0 auto 180px; gap: 0;
}
.page_feature .feature00 ol li {
    position: relative; z-index: 0;
    width: 15.2%; text-align: center; border-radius: 20px;
    display: flex;
}
.page_feature .feature00 ol li a {
    display: flex; flex-direction: column; width: 100%;
    text-decoration: none; transition: .5s;
}
.page_feature .feature00 ol li a:hover { opacity: .5; }
.page_feature .feature00 ol li figure {
    width: 100%; height: 130px; margin: 0;
    border-radius: 19px 19px 0 0; overflow: hidden;
    flex-shrink: 0;
}
.page_feature .feature00 ol li figure img {
    width: 100%; height: 100%; object-fit: cover;
}
.page_feature .feature00 ol li p {
    position: relative; z-index: 0; margin: 0;
    color: #fff; font-size: 17px; font-weight: 500; line-height: 1.3;
    padding: 10px 10px 40px; background: #ccc;
    border-radius: 0 0 19px 19px;
    text-wrap: balance;
    word-break: auto-phrase;
    flex: 1;
    display: flex; align-items: center; justify-content: center;
}
.page_feature .feature00 ol li p::after {
    position: absolute; z-index: 0; display: block; content: "";
    width: 15px; height: 15px;
    border-right: solid 1px #fff; border-bottom: solid 1px #fff;
    transform: rotate(45deg); margin: auto;
    left: 0; right: 0; bottom: 15px;
}
.page_feature .feature00 ol li a > span {
    position: absolute; z-index: 1;
    font-family: "Oswald", sans-serif; font-size: 50px;
    color: #ccc; margin: auto; left: 0; right: 0; top: -1.1em;
}
.page_feature .feature00 ol li.feature01 figure { border: solid 1px #E86350; }
.page_feature .feature00 ol li.feature01 p { background: #E86350; }
.page_feature .feature00 ol li.feature01 a > span { color: #E86350; }
.page_feature .feature00 ol li.feature02 figure { border: solid 1px #539666; }
.page_feature .feature00 ol li.feature02 p { background: #539666; }
.page_feature .feature00 ol li.feature02 a > span { color: #539666; }
.page_feature .feature00 ol li.feature03 figure { border: solid 1px #E7AB45; }
.page_feature .feature00 ol li.feature03 p { background: #E7AB45; }
.page_feature .feature00 ol li.feature03 a > span { color: #E7AB45; }
.page_feature .feature00 ol li.feature04 figure { border: solid 1px #E86350; }
.page_feature .feature00 ol li.feature04 p { background: #E86350; }
.page_feature .feature00 ol li.feature04 a > span { color: #E86350; }
.page_feature .feature00 ol li.feature05 figure { border: solid 1px #539666; }
.page_feature .feature00 ol li.feature05 p { background: #539666; }
.page_feature .feature00 ol li.feature05 a > span { color: #539666; }
.page_feature .feature00 ol li.feature_text figure { border: solid 1px #4A90E2; }
.page_feature .feature00 ol li.feature_text p { background: #4A90E2; }
.page_feature .feature00 ol li.feature_text a > span { color: #4A90E2; }

/* 各 feature セクション */
.page_feature .feature { padding: 90px 0 0; margin: 0 auto 180px; }
.page_feature .feature .box { position: relative; z-index: 0; }
.page_feature .feature .box > span {
    position: absolute; z-index: 1;
    font-family: "Oswald", sans-serif;
    font-size: 90px; line-height: 1; color: #ccc;
    left: 50px; top: -100px;
}
.page_feature .feature .box > div {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin: 0 auto 60px;
}
.page_feature .feature .box > div > div { width: 65%; }
.page_feature .feature .box > div > div h3 {
    font-size: 25px; font-weight: 500; line-height: 1.6;
    padding: 0 0 10px; margin: 0 0 20px;
    border-bottom: solid 1px #ccc;
    text-wrap: balance;
    word-break: auto-phrase;
}
.page_feature .feature .box > div > div h3 span {
    color: #ccc;
    background: linear-gradient(transparent 60%, #FAE0DC 60%, #FAE0DC 90%, transparent 90%);
    display: inline-block;
}
.page_feature .feature .box > div > div p {
    font-weight: 300; line-height: 1.9; color: #444;
}
.page_feature .feature .box > div figure {
    width: 31%; margin: 0;
    border-radius: 20px; overflow: hidden;
}
.page_feature .feature .box > div figure img { width: 100%; height: auto; display: block; }
.page_feature .feature > .box > figure { margin: 30px auto 0; text-align: center; }
.page_feature .feature > .box > figure img { max-width: 100%; height: auto; }

/* セクションごとのカラー */
.page_feature .feature01 .box > span,
.page_feature .feature01 .box > div > div h3 span { color: #E86350; }
.page_feature .feature01 .box > div > div h3 { border-bottom: solid 1px #E86350; }

.page_feature .feature02 .box > span,
.page_feature .feature02 .box > div > div h3 span { color: #539666; }
.page_feature .feature02 .box > div > div h3 span {
    background: linear-gradient(transparent 60%, #E2EDE5 60%, #E2EDE5 90%, transparent 90%);
}
.page_feature .feature02 .box > div > div h3 { border-bottom: solid 1px #539666; }

.page_feature .feature03 .box > span,
.page_feature .feature03 .box > div > div h3 span { color: #E7AB45; }
.page_feature .feature03 .box > div > div h3 span {
    background: linear-gradient(transparent 60%, #FBF1DF 60%, #FBF1DF 90%, transparent 90%);
}
.page_feature .feature03 .box > div > div h3 { border-bottom: solid 1px #E7AB45; }

.page_feature .feature04 .box > span,
.page_feature .feature04 .box > div > div h3 span { color: #E86350; }
.page_feature .feature04 .box > div > div h3 { border-bottom: solid 1px #E86350; }

.page_feature .feature05 .box > span,
.page_feature .feature05 .box > div > div h3 span { color: #539666; }
.page_feature .feature05 .box > div > div h3 span {
    background: linear-gradient(transparent 60%, #E2EDE5 60%, #E2EDE5 90%, transparent 90%);
}
.page_feature .feature05 .box > div > div h3 { border-bottom: solid 1px #539666; }

.page_feature .feature_text .box > span,
.page_feature .feature_text .box > div > div h3 span { color: #4A90E2; }
.page_feature .feature_text .box > div > div h3 span {
    background: linear-gradient(transparent 60%, #DDE9F7 60%, #DDE9F7 90%, transparent 90%);
}
.page_feature .feature_text .box > div > div h3 { border-bottom: solid 1px #4A90E2; }
.page_feature .feature_text .box > div > div p strong {
    color: #4A90E2; font-weight: 600;
}

/* feature02 の受講回数dl */
.page_feature .feature02 dl {
    position: relative; z-index: 0; margin: 0;
    display: flex; justify-content: center; align-items: stretch;
    padding: 20px 0;
    border: solid 2px #539666; border-radius: 20px; overflow: hidden;
}
.page_feature .feature02 dl dt {
    position: absolute; z-index: 1; display: inline-block;
    color: #fff; font-weight: 500; padding: 5px 20px;
    background: #539666; border-radius: 0 0 20px 0;
    top: 0; left: 0;
    font-size: 14px;
}
.page_feature .feature02 dl dd {
    display: flex; justify-content: center; align-items: center;
    width: 33%; border-right: dashed 2px #539666;
    padding: 30px 6% 10px; margin: 0;
    color: #539666; font-weight: 500; font-size: 18px; line-height: 1.3;
    text-align: center;
}
.page_feature .feature02 dl dd:nth-last-of-type(1) {
    padding: 20px 4% 10px; border: none;
}

/* feature03 ボタン */
.page_feature .feature03 .btn_common { margin: 0 auto 60px; text-align: center; }
.page_feature .feature03 .btn_common a {
    display: inline-block;
    padding: 14px 50px;
    background: #E7AB45;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}
.page_feature .feature03 .btn_common a:hover { background: #d59530; }
.page_feature .feature03 figure img { margin: 0 auto; }

/* feature04 表 */
.page_feature .feature04 .w_table { margin: 0 auto 20px; overflow-x: auto; }
.page_feature .feature04 table { width: 100%; border-collapse: collapse; }
.page_feature .feature04 table th,
.page_feature .feature04 table td {
    font-weight: 300;
    text-align: left;
    border: solid 1px #E86350;
    padding: 0.5em 1em;
}
.page_feature .feature04 table th { background: #FDEFED; color: #333; }
.page_feature .feature04 table tr:nth-of-type(1) th {
    color: #fff;
    font-weight: 500;
    text-align: center;
    border: solid 1px #fff;
    background: #E86350;
}
.page_feature .feature04 .w_table + p span { font-weight: 500; color: #FF0000; }
.page_feature .feature04 ul { list-style: none; padding: 0; margin: 20px; }
.page_feature .feature04 ul li { margin: 0; padding: 0; line-height: 1.8; font-weight: 300; }

/* feature05 */
.page_feature .feature05 .box > figure { max-width: 580px; margin: 30px auto 0; }

.page_feature hr.anc { border: none; height: 0; margin: 0; padding: 0; }

/* レスポンシブ */
@media (max-width: 880px) {
    .page_feature .feature00 ol {
        flex-wrap: wrap;
        gap: 60px 4%;
        margin-bottom: 100px;
    }
    .page_feature .feature00 ol li { width: 48%; }
    .page_feature .feature { padding: 70px 0 0; margin: 0 auto 100px; }
    .page_feature .feature .box > span { font-size: 64px; left: 20px; top: -76px; }
    .page_feature .feature .box > div {
        flex-direction: column; gap: 24px; margin-bottom: 40px;
    }
    .page_feature .feature .box > div > div { width: 100%; }
    .page_feature .feature .box > div figure { width: 100%; }
    .page_feature .feature .box > div > div h3 { font-size: 20px; }
    .page_feature .feature02 dl { flex-direction: column; align-items: center; padding: 50px 20px 20px; }
    .page_feature .feature02 dl dd { width: 100%; border-right: none; border-bottom: dashed 2px #539666; padding: 12px 0; }
    .page_feature .feature02 dl dd:nth-last-of-type(1) { border: none; }
    .page_feature .feature02 dl dd br { display: none; }
    .page_feature .p_title { font-size: 26px; }
    .page_feature h2.h2_strengths > span:nth-of-type(1) { font-size: 42px; }
    .page_feature h2.h2_strengths > span:nth-of-type(2) { font-size: 22px; }
    .page_feature h2.h2_strengths + p { margin-bottom: 50px; }

    /* feature01 スケジュールサンプル画像: 潰さず横スクロールで視認性を確保 */
    .page_feature .feature01 .feature01-schedule-img {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
    }
    .page_feature .feature01 .feature01-schedule-img img {
        min-width: 640px;
        max-width: none;
        width: 640px;
    }

    /* feature04 資格試験表: 横スクロールを有効化し、文字の潰れを防止 */
    .page_feature .feature04 .w_table { -webkit-overflow-scrolling: touch; }
    .page_feature .feature04 table { font-size: 13px; min-width: 640px; }
    .page_feature .feature04 table th, .page_feature .feature04 table td {
        padding: 0.5em 0.8em;
        white-space: nowrap;
    }
    .page_feature .feature04 table td:last-child { white-space: normal; min-width: 160px; }
}