@charset "UTF-8";
/*
 * /feature（在宅専科の強み）専用 CSS
 * import.css は編集禁止（Xserver で max-age 7日・キャッシュバスター無し配信のため）。
 * 読み込みは blade 側で mics()->asset() を使いバスター付与する。
 * 公開後に本ファイルを修正する場合は system/config/mics.php の version を bump すること。
 */

/* ページスコープ
---------------------------------------------------- */
body.feature-page .bnr-sec {
    display: none;
}

/* import.css の .container は PC 左右各 10px。ヘッダー(.header-wrap padding:0 20px)と
   左右インセットを揃えるため 20px に上書き（SP ≤768 は import.css 側で元々 20px＝同値・無害）。 */
.feature-wrap .container {
    padding-left: 20px;
    padding-right: 20px;
}

.feature-wrap {
    font-family: 'Noto Sans JP', "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, "Yu Gothic", sans-serif;
    font-weight: 500;
    color: #1e1e1e;
    letter-spacing: .1em;
}

/* import.css の * { letter-spacing: 0 }（import.css:12）が全要素に直接当たり
   .feature-wrap の .1em 継承を子孫で断ち切るため、ラッパ配下の全要素へ .1em を明示する
   （TOP の home.css:56-60 と同対処）。.1em は相対値なので各 font-size に比例する。 */
body.feature-page .feature-wrap * {
    letter-spacing: .1em;
}

.feature-wrap p {
    margin: 0;
    line-height: 1.8;
}

.feature-wrap .heading {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #12b3af;
    letter-spacing: .1em;
}

.feature-wrap img {
    display: block;
}

/* ３つの強み
---------------------------------------------------- */
.feature-merit {
    padding: 80px 0 130px;
}

.feature-merit .heading {
    margin-bottom: 14px;
}

.feature-merit .lead {
    font-size: 16px;
    margin-bottom: 35px;
}

.feature-merit .list {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature-merit .item {
    width: calc((100% - 80px) / 3);
}

.feature-merit .photo {
    margin-bottom: 13px;
    border-radius: 20px;
    overflow: hidden;
}

.feature-merit .photo img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.feature-merit .item:nth-child(1) .photo img {
    object-position: 20% 77%;
}

.feature-merit .item:nth-child(2) .photo img {
    object-position: 61% 80%;
}

.feature-merit .item:nth-child(3) .photo img {
    object-position: 51% 50%;
}

.feature-merit .label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    background: #12b3af;
    border-radius: 28px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.feature-merit .catch {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 116px;
    background: #e1fffe;
    border-radius: 20px;
    color: #3f3f3f;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.8;
    margin-bottom: 14px;
}

.feature-merit .txt {
    font-size: 14px;
}

/* なぜ選ばれるのか
---------------------------------------------------- */
.feature-reason {
    background: #e1fffe;
    padding: 72px 0;
}

.feature-reason .container {
    display: grid;
    grid-template-columns: 580px 452px;
    grid-template-areas:
        "heading college"
        "txt college"
        "cta college";
    justify-content: space-between;
}

.feature-reason .heading {
    grid-area: heading;
    margin-top: 16px;
}

.feature-reason .college {
    grid-area: college;
    align-self: center;
}

.feature-reason .college img {
    width: 100%;
    height: auto;
}

.feature-reason .txt {
    grid-area: txt;
    font-size: 16px;
    line-height: 2;
    margin-top: 46px;
}

.feature-reason .cta {
    grid-area: cta;
    margin-top: 33px;
    align-self: start;
}

.feature-reason .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    background: #ff9000;
    border: 2px solid #fff;
    border-radius: 40px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .3s;
}

.feature-reason .btn:hover {
    opacity: .7;
}

/* ISMS
---------------------------------------------------- */
.feature-isms {
    padding: 78px 0 90px;
}

.feature-isms .container {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* import.css の clearfix 擬似要素が flex item 化し、gap 32px で先頭ロゴが右へずれるため
   無効化して左端を padding 端に揃える（TOP の home.css:68-76 と同対処）。 */
.feature-isms .container::before,
.feature-isms .container::after {
    display: none;
}

.feature-isms .logo {
    width: 209px;
    flex-shrink: 0;
}

.feature-isms .logo img {
    width: 100%;
    height: auto;
}

.feature-isms .txt {
    font-size: 16px;
    line-height: 1.6;
}

/* 中間幅（769〜1199px）: ウィンドウが PC デザイン幅 1180px を下回る帯
---------------------------------------------------- */
@media only screen and (min-width: 769px) and (max-width: 1199px) {

    /* import.css は PC(≥769px)で全体ラッパー .l-container に min-width:1180px、
       .container に width:1180px 固定を敷くため、このままでは横スクロールになり
       カードが縮まない。本ページ内だけ両方を解除して可変幅にする */
    body.feature-page .l-container {
        min-width: 0;
    }

    body.feature-page .container {
        width: auto;
        max-width: 1180px;
    }

    /* ３つの強み: 3列 → 2列（3枚目は2段目・左端揃え）。
       カード幅は PC 3列時と同じ 360px（=(1160-80)/3）に固定し、
       カード・画像の大きさを変えない。2枚並ばない狭さでのみ僅かに縮む。
       リスト自体を 2 列分の幅（360×2＋gap40＝760px）に絞って中央配置し、行内は
       左詰めにする＝2段目の 3 枚目が 1 段目の左端に揃う（justify-content: center
       だと段ごとに中央寄せされ 3 枚目だけ中央に浮く。TOP おすすめ記事と同じ手法） */
    .feature-merit .list {
        flex-wrap: wrap;
        justify-content: flex-start;
        max-width: 760px;
        margin: 0 auto;
    }

    .feature-merit .item {
        width: min(360px, calc((100% - 40px) / 2));
    }
}

/* 中間幅の「なぜ選ばれるのか」「ISMS」: 文字・画像は縮小せず、
   固定 2 カラム（580px + 452px = 1032px。container padding 左右各 20px
   〔合計 40px〕+ スクロールバー 15px ≒ viewport 1087px）が収まらなくなったら
   SP 版レイアウト（末尾 SP ブロックの鏡写し）へ切り替える
---------------------------------------------------- */
@media only screen and (min-width: 769px) and (max-width: 1099px) {

    /* なぜ選ばれるのか */
    .feature-reason {
        padding: 50px 0 80px;
    }

    .feature-reason .container {
        grid-template-columns: 100%;
        grid-template-areas:
            "heading"
            "college"
            "txt"
            "cta";
    }

    .feature-reason .heading {
        margin-top: 0;
        font-size: 20px;
        line-height: 1.6;
    }

    .feature-reason .college {
        width: 100%;
        max-width: 344px;
        margin: 10px auto 0;
    }

    .feature-reason .txt {
        font-size: 14px;
        line-height: 1.8;
        margin-top: 40px;
    }

    .feature-reason .cta {
        margin-top: 34px;
    }

    .feature-reason .btn {
        max-width: 350px;
        height: 70px;
        margin: 0 auto;
        font-size: 18px;
    }

    /* ISMS */
    .feature-isms {
        padding: 60px 0 62px;
    }

    .feature-isms .container {
        display: block;
    }

    .feature-isms .logo {
        width: 113px;
        margin-bottom: 6px;
    }

    .feature-isms .txt {
        font-size: 12px;
    }
}

/* 中間幅の footer: メニュー＋コピーライトが1行に収まらない幅では SP 版へ切替
   （実測: 内容 801px + container padding 20px + スクロールバー 15px ≒ 836px で折返し発生。
   バッファ込みで 859px 以下から footer.css の SP レイアウトを鏡写しで適用する。
   他ページは .l-container の min-width:1180px が生きており折返し自体が起きないため対象外）
---------------------------------------------------- */
@media only screen and (min-width: 769px) and (max-width: 859px) {

    body.feature-page footer .footer-inner {
        flex-direction: column;
        justify-content: center;
        min-height: 114px;
        gap: 8px;
    }

    body.feature-page footer .footer-menu {
        justify-content: center;
        margin-bottom: 13px;
    }

    body.feature-page footer .footer-menu > li {
        margin: 0 10px;
    }

    body.feature-page footer .footer-menu > li a {
        font-size: 14px;
    }

    body.feature-page footer .copy-right {
        font-size: 14px;
        text-align: center;
    }
}

/* SP
---------------------------------------------------- */
@media only screen and (max-width: 768px) {

    .feature-wrap .heading {
        font-size: 20px;
        line-height: 1.6;
    }

    /* ３つの強み */
    .feature-merit {
        padding: 50px 0 60px;
    }

    .feature-merit .heading {
        margin-bottom: 10px;
    }

    .feature-merit .lead {
        margin-bottom: 50px;
    }

    .feature-merit .list {
        display: block;
    }

    .feature-merit .item {
        width: 100%;
    }

    .feature-merit .item + .item {
        margin-top: 34px;
    }

    .feature-merit .photo {
        margin-bottom: 8px;
    }

    .feature-merit .photo img {
        height: 210px;
    }

    .feature-merit .item:nth-child(1) .photo img {
        object-position: 9% 50%;
    }

    .feature-merit .item:nth-child(2) .photo img {
        object-position: 50% 50%;
    }

    .feature-merit .item:nth-child(3) .photo img {
        object-position: 50% 44%;
    }

    .feature-merit .label {
        height: 40px;
        font-size: 20px;
        margin-bottom: 8px;
    }

    .feature-merit .catch {
        height: 90px;
        font-size: 16px;
        margin-bottom: 8px;
    }

    .feature-merit .txt {
        font-size: 12px;
    }

    /* なぜ選ばれるのか */
    .feature-reason {
        padding: 50px 0 80px;
    }

    .feature-reason .container {
        grid-template-columns: 100%;
        grid-template-areas:
            "heading"
            "college"
            "txt"
            "cta";
    }

    .feature-reason .heading {
        margin-top: 0;
    }

    .feature-reason .college {
        width: 100%;
        max-width: 344px;
        margin: 10px auto 0;
    }

    .feature-reason .txt {
        font-size: 14px;
        line-height: 1.8;
        margin-top: 40px;
    }

    .feature-reason .cta {
        margin-top: 34px;
    }

    .feature-reason .btn {
        max-width: 350px;
        height: 70px;
        margin: 0 auto;
        font-size: 18px;
    }

    /* ISMS */
    .feature-isms {
        padding: 60px 0 62px;
    }

    .feature-isms .container {
        display: block;
    }

    .feature-isms .logo {
        width: 113px;
        margin-bottom: 6px;
    }

    .feature-isms .txt {
        font-size: 12px;
    }
}