html,
body {
    color: #333;
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 750px) {
    html,
    body {
        font-size: 16px;
    }
}

body {
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
    body {
        line-height: 1.5;
        min-width: 320px;
    }
}

img {
    image-rendering: -webkit-optimize-contrast;
}

body {
    color: #000;
}

.l-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    box-shadow: 0 10px 10px rgba(139, 139, 139, 0.14);
}

.l-header__logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 18px;
}
@media screen and (max-width: 960px) {
    .l-header__logo {
        left: 10px;
    }
}

.l-header__logo picture {
    width: 180px;
    display: block;
}
@media screen and (max-width: 960px) {
    .l-header__logo picture {
        width: 120px;
    }
}

.l-header__logo-link {
    display: flex;
    align-items: center;
}
@media screen and (min-width: 751px) {
    .l-header__logo-link {
        transition: opacity 0.3s;
    }
    .l-header__logo-link:hover {
        opacity: 0.3;
    }
}
@media screen and (max-width: 960px) {
    .l-header__logo-link {
        display: block;
    }
}

.l-header__logo-txt {
    font-size: 14px;
    margin-left: 20px;
    display: block;
    text-align: center;
    margin-top: 3px;
}
@media screen and (max-width: 960px) {
    .l-header__logo-txt {
        font-size: 10px;
        margin-left: 0;
    }
}

.l-header__contents {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 75px;
}
@media screen and (max-width: 599px) {
    .l-header__contents {
        height: 60px;
    }
}

.l-header__inner {
    background-color: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 0.5s;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.js-header-scroll.is-show .l-header__inner {
    transform: translateY(0);
    opacity: 1;
}

.l-header__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
@media screen and (max-width: 750px) {
    .l-header__list {
        display: none;
    }
}

.l-header__item {
    position: relative;
    margin-right: 36px;
    height: 100%;
    display: flex;
    align-items: center;
}
@media screen and (max-width: 1024px) {
    .l-header__item {
        margin-right: 20px;
    }
}

.l-header__link {
    font-size: 16px;
    margin-top: 8px;
}
@media screen and (min-width: 751px) {
    .l-header__link {
        transition: color 0.3s;
    }
    .l-header__link:hover {
        color: #E02D00;
    }
}

.l-header__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: block;
    width: 90%;
    height: 3px;
    background: #E02D00;
    opacity: 0;
    transition: 0.3s;
}
@media screen and (min-width: 751px) {
    .l-header__link:hover::after {
        opacity: 1;
    }
}

.l-header__link--open svg {
    position: relative;
    top: 3px;
    left: 5px;
    width: 13px;
}
@media screen and (min-width: 751px) {
    .l-header__link--open path {
        transition: 0.3s;
    }
    .l-header__link--open line {
        transition: 0.3s;
    }
    .l-header__link--open:hover path {
        stroke: #E02D00;
    }
    .l-header__link--open:hover line {
        stroke: #E02D00;
    }
}

.l-header__sp-btn {
    margin-right: 15px;
}

.l-header__sp-btn-link {
    font-size: 16px;
    color: #fff;
    background-color: #E02D00;
    border: 2px solid #fff;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 100px;
    padding: 10px 40px;
    letter-spacing: 0.05em;
}

.l-header-btn {
    position: relative;
    z-index: 100;
    width: 72px;
    height: 100%;
    background: #000;
    border: none;
    cursor: pointer;
    padding: 0;
}
@media screen and (min-width: 751px) {
    .l-header-btn {
        transition: 0.3s;
    }
    .l-header-btn:hover {
        opacity: 0.7;
    }
}

.l-header-btn__cont {
    width: 28.2px;
    margin: 0 auto;
    display: block;
}

.l-header-btn__line {
    position: relative;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #fff;
    display: block;
    transition: 0.3s;
    border-radius: 100px;
}

.is-hamburger-open .l-header-btn__line {
    background-color: rgba(0, 0, 0, 0);
}

.l-header-btn__line::before,
.l-header-btn__line::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #fff;
    display: block;
    border-radius: 100px;
}

.l-header-btn__line::before {
    top: -12px;
    transition: 0.3s;
}
@media screen and (max-width: 599px) {
    .l-header-btn__line::before {
        top: -8px;
    }
}

.is-hamburger-open .l-header-btn__line::before {
    top: 0;
    transform: rotate(45deg);
}

.l-header-btn__line::after {
    bottom: -12px;
    transition: 0.3s;
}
@media screen and (max-width: 599px) {
    .l-header-btn__line::after {
        bottom: -8px;
    }
}

.is-hamburger-open .l-header-btn__line::after {
    bottom: 0;
    transform: rotate(-45deg);
}

.l-header-nav {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fff;
    width: 100vw;
    height: 100vh;
    max-width: 371.4px;
    overflow-y: scroll;
    display: none;
}
@media screen and (max-width: 750px) {
    .l-header-nav {
        max-width: 100%;
    }
}

.l-header-nav__inner {
    padding: 100px 27px;
}
@media screen and (max-width: 750px) {
    .l-header-nav__inner {
        padding: 27px;
    }
}

.l-header-nav__txt {
    font-size: 20px;
}

.l-header-nav__list {
    margin-top: 20px;
    margin-left: 15px;
    margin-bottom: 36px;
}

.l-header-nav__item:nth-of-type(n + 2) {
    margin-top: 5px;
}

.l-header-nav__link {
    font-size: 20px;
    line-height: 1.6;
}
@media screen and (min-width: 751px) {
    .l-header-nav__link {
        transition: 0.3s;
    }
    .l-header-nav__link:hover {
        opacity: 0.3;
    }
}

.l-header-nav__s-list {
    margin: 5px 10px 10px 30px;
}

.l-header-nav__s-item:nth-of-type(n+2) {
    margin-top: 5px;
}

.l-header-nav__s-link {
    font-size: 16px;
    line-height: 1.8;
}
@media screen and (min-width: 751px) {
    .l-header-nav__s-link {
        transition: 0.3s;
    }
    .l-header-nav__s-link:hover {
        opacity: 0.3;
    }
}

.l-header-sns {
    display: flex;
    margin-top: 50px;
    margin-left: 15px;
}

.l-header-sns__item:nth-of-type(n+2) {
    margin-left: 15px;
}

.l-header-sns__link {
    display: block;
}
@media screen and (min-width: 751px) {
    .l-header-sns__link {
        transition: 0.3s;
    }
    .l-header-sns__link:hover {
        opacity: 0.7;
    }
}

.l-header-sns__link--fb {
    width: 37px;
}

.l-header-sns__link--x {
    width: 30px;
}

.l-header-sns__link--insta {
    width: 37px;
}

.l-header-sns__link img {
    width: 100%;
}

.l-main {
    position: relative;
    overflow: hidden;
    margin-top: 75px;
}
@media screen and (max-width: 599px) {
    .l-main {
        margin-top: 60px;
    }
}

.l-footer-r {
    padding-top: 30px;
    padding-bottom: 20px;
    position: relative;
    z-index: 100;
    background-color: #fff;
}

.l-footer-r__container {
    max-width: 1420px;
    margin: 0 auto;
    padding-bottom: 78px;
}

.l-footer-r__logo picture {
    width: 180px;
    display: block;
}
@media screen and (max-width: 599px) {
    .l-footer-r__logo picture {
        width: 120px;
    }
}

.l-footer-r__logo-link {
    display: flex;
    align-items: center;
}
@media screen and (min-width: 751px) {
    .l-footer-r__logo-link {
        transition: 0.3s;
    }
    .l-footer-r__logo-link:hover {
        opacity: 0.3;
    }
}

.l-footer-r__logo-txt {
    font-size: 14px;
    font-weight: 500;
    margin-left: 20px;
}
@media screen and (max-width: 599px) {
    .l-footer-r__logo-txt {
        font-size: 12px;
        margin-left: 10px;
    }
}

.l-footer-r__contents {
    display: flex;
    align-items: flex-start;
    margin-top: 30px;
    margin-bottom: 40px;
}
@media screen and (max-width: 750px) {
    .l-footer-r__contents {
        display: block;
    }
}

.l-footer-r__col {
    position: relative;
    margin-right: 54px;
}
@media screen and (max-width: 900px) {
    .l-footer-r__col {
        margin-right: 25px;
    }
}
@media screen and (max-width: 750px) {
    .l-footer-r__col:nth-of-type(n+2) {
        margin-top: 30px;
    }
}

.l-footer-r__col--border-2::before {
    content: "";
    position: absolute;
    top: 33px;
    left: 6px;
    width: 1.8px;
    height: calc(100% - 33px);
    background-color: #E02D00;
    border-radius: 100px;
}

.l-footer-r__col--right {
    margin-left: 150px;
}
@media screen and (max-width: 1280px) {
    .l-footer-r__col--right {
        margin-left: 50px;
    }
}
@media screen and (max-width: 900px) {
    .l-footer-r__col--right {
        margin-left: 25px;
    }
}
@media screen and (max-width: 750px) {
    .l-footer-r__col--right {
        margin-left: 0;
    }
}

.l-footer-r__txt {
    font-size: 18px;
    color: #E02D00;
    margin-bottom: 10px;
}

.l-footer-r__txt-link {
    font-size: 18px;
    color: #E02D00;
}
@media screen and (min-width: 751px) {
    .l-footer-r__txt-link {
        transition: 0.3s;
    }
    .l-footer-r__txt-link:hover {
        opacity: 0.3;
    }
}

.l-footer-r__list--2 {
    padding-left: 18px;
}

.l-footer-r__list-item:nth-of-type(n+2) {
    margin-top: 5px;
}

.l-footer-r__list-link {
    font-size: 15px;
}
@media screen and (min-width: 751px) {
    .l-footer-r__list-link {
        transition: 0.3s;
    }
    .l-footer-r__list-link:hover {
        opacity: 0.3;
    }
}

.l-footer-r__bnr {
    margin-top: 20px;
}

.l-footer-r__bnr-link {
    display: block;
    width: 300px;
    height: 62px;
}
@media screen and (min-width: 751px) {
    .l-footer-r__bnr-link {
        transition: 0.3s;
    }
    .l-footer-r__bnr-link:hover {
        opacity: 0.3;
    }
}

.l-footer-r__bnr-link--2 {
    margin-top: 10px;
}

.l-footer-r__bnr-inner {
    display: flex;
    align-items: center;
    border: 1px solid #B4B4B4;
    background-color: #fff;
    width: 100%;
    height: 100%;
    padding-left: 25px;
}

.l-footer-r__bnr-inner--1 {
    padding-left: 25px;
}

.l-footer-r__bnr-inner--2 {
    padding-left: 13px;
}

.l-footer-r__bnr-img--1 {
    width: 125px;
    margin-right: 40px;
}

.l-footer-r__bnr-img--2 {
    width: 140px;
    margin-right: 20px;
}

.l-footer-r__bnr-txt {
    line-height: 1.3;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
}

.l-footer-r__bnr-txt--1 {
    font-size: 13px;
}

.l-footer-r__bnr-txt--2 {
    font-size: 12px;
    color: #000;
    text-align: center;
}

.l-footer-r__copyright {
    text-align: center;
}

.l-footer-r__copyright-txt {
    font-size: 12px;
}

.l-footer-sns {
    display: flex;
}

.l-footer-sns__item:nth-of-type(n+2) {
    margin-left: 15px;
}

.l-footer-sns__link {
    display: block;
}
@media screen and (min-width: 751px) {
    .l-footer-sns__link {
        transition: 0.3s;
    }
    .l-footer-sns__link:hover {
        opacity: 0.7;
    }
}

.l-footer-sns__link--fb {
    width: 37px;
}

.l-footer-sns__link--x {
    width: 30px;
}

.l-footer-sns__link--insta {
    width: 37px;
}

.l-footer-sns__link img {
    width: 100%;
}

.l-container {
    padding: 0 50px;
}
@media screen and (max-width: 1024px) {
    .l-container {
        padding: 0 20px;
    }
}
@media screen and (max-width: 750px) {
    .l-container {
        padding: 0 4%;
    }
}
@media screen and (min-width: 751px) {
    .u-hide-pc {
        display: none !important;
    }
}
@media screen and (max-width: 750px) {
    .u-hide-sp {
        display: none !important;
    }
}
@media screen and (min-width: 600px) {
    .u-hide-min-sp-s {
        display: none !important;
    }
}

.u-bold {
    font-weight: bold;
}

.u-mgb-10 {
    margin-bottom: 10px !important;
}

.js-fadein {
    transform: translateY(50px);
    opacity: 0;
    transition: transform 0.75s, opacity 0.75s;
}

.js-fadein.is-show {
    transform: translateY(0);
    opacity: 1;
}

.p-circle {
    width: 340px;
    width: clamp(280px, 26.5625vw, 340px);
    width: max(280px, 26.5625vw);
    max-width: 400px;
    position: relative;
}
@media screen and (max-width: 750px) {
    .p-circle {
        width: clamp(230px, 26.5625vw, 340px);
    }
}
@media screen and (max-width: 599px) {
    .p-circle {
        margin: 0 auto;
    }
}

.p-circle__view {
    transform: scale(1) rotate(-90deg);
}

.p-circle__pie {
    fill: none;
    stroke-width: 7;
    stroke-dasharray: 0, 0, 0, 100;
}

.p-circle.is-show .p-circle__pie--3-1 {
    animation: pie3-1 0.75s ease-in-out forwards;
}

.p-circle.is-show .p-circle__pie--3-2 {
    animation: pie3-2 0.75s ease-in-out forwards;
}

.p-circle.is-show .p-circle__pie--3-3 {
    animation: pie3-3 0.75s ease-in-out forwards;
}

.p-circle.is-show .p-circle__pie--3-4 {
    animation: pie3-4 0.75s ease-in-out forwards;
}

.p-circle.is-show .p-circle__pie--4-1 {
    animation: pie4-1 0.75s ease-in-out forwards;
}

.p-circle.is-show .p-circle__pie--4-2 {
    animation: pie4-2 0.75s ease-in-out forwards;
}

.p-circle.is-show .p-circle__pie--4-3 {
    animation: pie4-3 0.75s ease-in-out forwards;
}

.p-circle.is-show .p-circle__pie--4-4 {
    animation: pie4-4 0.75s ease-in-out forwards;
}

.p-circle__line {
    position: absolute;
    opacity: 0;
}

.p-circle.is-show .p-circle__line {
    animation: line-show 0.25s ease-in-out forwards 0.75s;
}

.p-circle__line--3 {
    top: 13.8235294118%;
    left: 5.2941176471%;
    width: 66.1764705882%;
}

.p-circle__line img {
    width: 100%;
}

.p-circle__center {
    position: absolute;
    opacity: 0;
}

.p-circle.is-show .p-circle__center {
    animation: parts-show 0.5s ease-in-out forwards 1s;
}

.p-circle__center--3 {
    width: 37.6470588235%;
    top: 42.3529411765%;
    left: 31.4705882353%;
}

.p-circle__center--4 {
    width: 37.6470588235%;
    top: 43.2352941176%;
    left: 31.4705882353%;
}

.p-circle__center img {
    width: 100%;
}

.p-circle__num {
    display: inline-block;
    overflow: hidden;
    width: 100px;
    position: absolute;
}

.p-circle__num--3-1 {
    width: 20.5882352941%;
    right: -2.3529411765%;
    top: 41.1764705882%;
}

.p-circle__num--3-2 {
    width: 35.2941176471%;
    left: -16.4705882353%;
    bottom: 38.2352941176%;
}

.p-circle__num--3-3 {
    width: 24.7058823529%;
    left: 5%;
    top: 9.4117647059%;
}

.p-circle__num--3-4 {
    width: 28.8235294118%;
    left: 42.6470588235%;
    top: 1.1764705882%;
}

.p-circle__num--4-1 {
    width: 38.2352941176%;
    top: 21.7647058824%;
    right: -15.2941176471%;
}

.p-circle__num--4-2 {
    width: 42.3529411765%;
    bottom: 14.4117647059%;
    left: -7.0588235294%;
}

.p-circle__num--4-3 {
    width: 16.4705882353%;
    bottom: 47.0588235294%;
    left: 2.3529411765%;
}

.p-circle__num--4-4 {
    width: 37.0588235294%;
    top: 18.5294117647%;
    left: -3.2352941176%;
}

.p-circle__num img {
    width: 100%;
    transform: translateY(105%);
}

.p-circle.is-show .p-circle__num img {
    animation: num-show 0.5s ease-in-out forwards 1s;
}

@keyframes pie3-1 {
    to {
        stroke-dasharray: 63 37 0 0;
    }
}

@keyframes pie3-2 {
    to {
        stroke-dasharray: 0 63 27 10;
    }
}

@keyframes pie3-3 {
    to {
        stroke-dasharray: 0 90 3 7;
    }
}

@keyframes pie3-4 {
    to {
        stroke-dasharray: 0 93 7 0;
    }
}

@keyframes pie4-1 {
    to {
        stroke-dasharray: 41 59 0 0;
    }
}

@keyframes pie4-2 {
    to {
        stroke-dasharray: 0 41 31 28;
    }
}

@keyframes pie4-3 {
    to {
        stroke-dasharray: 0 72 8 20;
    }
}

@keyframes pie4-4 {
    to {
        stroke-dasharray: 0 80 20 0;
    }
}

@keyframes line-show {
    to {
        opacity: 1;
    }
}

@keyframes num-show {
    to {
        transform: translateY(0);
    }
}

@keyframes bar-show {
    to {
        transform: translateY(0);
    }
}

@keyframes parts-show {
    to {
        opacity: 1;
    }
}

.p-topn-index {
    display: flex;
}
@media screen and (max-width: 750px) {
    .p-topn-index {
        padding-bottom: 80px;
    }
}

.p-topn-wrap {
    margin-left: 270px;
    width: calc(100% - 270px);
}
@media screen and (max-width: 1080px) {
    .p-topn-wrap {
        margin-left: 25%;
        width: 75%;
    }
}
@media screen and (max-width: 960px) {
    .p-topn-wrap {
        margin-left: 0;
        width: 100%;
    }
}

.p-topn-main {
    width: 100%;
}

.p-topn-container {
    padding: 0 30px;
    margin: 0 auto;
}
@media screen and (min-width: 1441px) {
    .p-topn-container {
        padding: 0 100px;
    }
}
@media screen and (max-width: 1280px) {
    .p-topn-container {
        padding: 0 3%;
    }
}

.p-topn-container--no-right {
    padding-right: 0;
}
@media screen and (max-width: 750px) {
    .p-topn-container--no-right {
        padding-left: 0;
    }
}

.p-topn-kv {
    position: relative;
}

.p-topn-kv__main-img {
    width: 100%;
}

.p-topn-kv__main-img img {
    width: 100%;
}

.p-topn-kv-btm {
    background-image: url("../img/recruit/topn/sp/img_bg-grade.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width: 751px) {
    .p-topn-kv-btm {
        display: none;
    }
}

.p-topn-kv-btm__txt {
    color: #fff;
    text-align: center;
    font-size: 14px;
}

.p-topn-topclass {
    padding-top: 50px;
}
@media screen and (max-width: 750px) {
    .p-topn-topclass {
        padding-top: 40px;
    }
}

.p-topn-anchor {
    margin-top: 50px;
}
@media screen and (max-width: 750px) {
    .p-topn-anchor {
        margin-top: 30px;
    }
}

.p-topn-anchor__head {
    position: relative;
    margin-bottom: 15px;
}

.p-topn-anchor__head-txt {
    font-size: clamp(11px, 1.015625vw, 13px);
    font-weight: 500;
    position: absolute;
    top: 0;
    left: 0;
}
@media screen and (max-width: 750px) {
    .p-topn-anchor__head-txt {
        top: -5px;
    }
}

.p-topn-anchor__head-ttl {
    font-size: clamp(23px, 2.8125vw, 36px);
    line-height: 1;
}

.p-topn-anchor__head-ttl-b {
    font-size: clamp(34px, 4.0625vw, 52px);
    font-weight: bold;
}

.p-topn-anchor__head-ttl-num {
    font-size: clamp(46px, 5.546875vw, 71px);
    font-weight: bold;
    color: #E02D00;
    display: inline-block;
    line-height: 1;
}

.p-topn-anchor__list {
    display: flex;
    border: 2px solid #E0E1E2;
    padding: 10px 0;
}
@media screen and (max-width: 750px) {
    .p-topn-anchor__list {
        border: none;
        justify-content: space-between;
    }
}

.p-topn-anchor__item {
    margin: 0 auto;
}
@media screen and (max-width: 750px) {
    .p-topn-anchor__item {
        margin: 0;
        width: 32.4%;
    }
}

.p-topn-anchor__item:nth-of-type(n+2) {
    position: relative;
}

.p-topn-anchor__item:nth-of-type(n+2)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -12.6%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background-color: #D6D6D6;
}
@media screen and (min-width: 1281px) {
    .p-topn-anchor__item:nth-of-type(n+2)::before {
        left: -46px;
    }
}
@media screen and (max-width: 960px) {
    .p-topn-anchor__item:nth-of-type(n+2)::before {
        left: calc(-24.25vw + 140px);
    }
}
@media screen and (max-width: 750px) {
    .p-topn-anchor__item:nth-of-type(n+2)::before {
        display: none;
    }
}

.p-topn-anchor__link {
    position: relative;
    display: inline-block;
    text-align: center;
    padding-bottom: 18px;
    white-space: nowrap;
}
@media screen and (max-width: 750px) {
    .p-topn-anchor__link {
        border: 2px solid #E02D00;
        background-color: #FFE6DF;
        border-radius: 5px;
        width: 100%;
        text-align: center;
        padding: 7%;
    }
}

.p-topn-anchor__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
    border-top: 16px solid #d6d6d6;
    border-bottom: 0;
}
@media screen and (min-width: 751px) {
    .p-topn-anchor__link::after {
        transition: 0.1s;
    }
}
@media screen and (max-width: 750px) {
    .p-topn-anchor__link::after {
        transform: translateX(-50%);
        bottom: -12px;
        width: 0;
        height: 0;
        border-style: solid;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        border-top: 6px solid #555555;
        border-bottom: 0;
    }
}
@media screen and (min-width: 751px) {
    .p-topn-anchor__link:hover::after {
        bottom: -2px;
    }
}

.p-topn-anchor__link-txt {
    position: relative;
    font-size: clamp(16px, 1.796875vw, 23px);
    font-weight: bold;
    display: inline-block;
    line-height: 1.1;
}
@media screen and (max-width: 750px) {
    .p-topn-anchor__link-txt {
        font-size: clamp(10px, 3.2vw, 12px);
        font-weight: 500;
    }
}

.p-topn-anchor__link-txt::before,
.p-topn-anchor__link-txt::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    z-index: -1;
    width: 100%;
    height: 4px;
}

.p-topn-anchor__link-txt::before {
    background-color: #F2836B;
}

.p-topn-anchor__link-txt::after {
    background-color: #E02D00;
    opacity: 0;
}
@media screen and (min-width: 751px) {
    .p-topn-anchor__link-txt::after {
        transition: 0.3s;
    }
    .p-topn-anchor__link:hover .p-topn-anchor__link-txt::after {
        opacity: 1;
    }
}

.p-topn-anchor__link-txt-num {
    font-size: clamp(20px, 2.34375vw, 30px);
    margin-right: 5px;
}
@media screen and (max-width: 750px) {
    .p-topn-anchor__link-txt-num {
        font-size: 12px;
        font-weight: 500;
    }
}

.p-topn-anchor__link-txt-s {
    font-size: clamp(10px, 0.9375vw, 12px);
    display: block;
    margin: 2px 0;
}
@media screen and (max-width: 750px) {
    .p-topn-anchor__link-txt-s {
        display: none;
    }
}

.p-topn-anchor-target {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    padding-top: 75px;
    margin-top: -75px;
}
@media screen and (max-width: 750px) {
    .p-topn-anchor-target {
        padding-top: 60px;
        margin-top: -60px;
    }
}

.p-topn-head {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 20px;
}
@media screen and (max-width: 750px) {
    .p-topn-head {
        padding-top: 5px;
    }
}

.p-topn-head__line {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    transition: 0.5s;
    background-color: #E02D00;
    content: "";
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
    display: block;
    width: 0;
    height: 14px;
    margin: 0 0 10px;
}
@media screen and (max-width: 750px) {
    .p-topn-head__line {
        height: 7px;
    }
}

.p-topn-head__line.js-contents-fade.is-show {
    width: 84px;
}
@media screen and (max-width: 750px) {
    .p-topn-head__line.js-contents-fade.is-show {
        width: 46px;
    }
}

.p-topn-head__txt-s {
    font-size: clamp(11px, 1.25vw, 16px);
    font-weight: bold;
}

.p-topn-head__txt {
    font-size: clamp(13px, 1.5625vw, 20px);
    font-weight: 900;
}

.p-topn-head__ttl {
    font-size: clamp(25px, 3.90625vw, 50px);
    font-weight: bold;
    line-height: 1;
    overflow: hidden;
}

.p-topn-ttl-3 {
    color: #E02D00;
    font-size: clamp(18px, 2.109375vw, 27px);
    font-weight: bold;
    overflow: hidden;
}

.p-topn-employ {
    padding-top: 50px;
}
@media screen and (max-width: 750px) {
    .p-topn-employ {
        padding-top: 30px;
    }
}

.p-topn-employ .p-topn-ttl-3 {
    margin-bottom: 20px;
}
@media screen and (max-width: 750px) {
    .p-topn-employ .p-topn-ttl-3 {
        margin-bottom: 10px;
    }
}

.p-topn-employ__inner {
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width: 750px) {
    .p-topn-employ__inner {
        display: block;
    }
}

.p-topn-employ__txt-area {
    position: relative;
    width: 50%;
    padding-bottom: 15px;
    background-color: #fff;
}
@media screen and (min-width: 751px) {
    .p-topn-employ__txt-area {
        transform: translateX(100%);
        transition: 0.7s;
    }
    .p-topn-employ__txt-area.js-contents-fade.is-show {
        transform: translateX(0);
    }
}
@media screen and (max-width: 750px) {
    .p-topn-employ__txt-area {
        padding: 0 3%;
        padding-bottom: 60px;
        width: 100%;
    }
}

.p-topn-employ__txt-area::after {
    content: "";
    position: absolute;
    top: 0;
    right: -79px;
    width: 80px;
    height: 100%;
    background: #fff;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}
@media screen and (max-width: 750px) {
    .p-topn-employ__txt-area::after {
        content: none;
    }
}

.p-topn-employ__txt-cont {
    display: flex;
    align-items: baseline;
}

.p-topn-employ__txt {
    font-size: clamp(14px, 1.5625vw, 20px);
}

.p-topn-employ__txt-num {
    color: #E02D00;
    font-size: clamp(18px, 3.125vw, 40px);
    font-weight: bold;
}

.p-topn-employ__txt-kome {
    font-size: clamp(10px, 0.859375vw, 11px);
    position: relative;
    top: -0.7em;
    line-height: 1;
    display: inline-block;
}

.p-topn-employ__graph-area {
    width: 90%;
    max-width: 600px;
    margin-top: 25px;
}
@media screen and (max-width: 750px) {
    .p-topn-employ__graph-area {
        max-width: 442px;
        width: 100%;
        margin: 30px auto 0;
    }
}

.p-topn-employ__graph {
    width: 100%;
    padding-top: 52.3489932886%;
    position: relative;
}

.p-topn-employ__graph img {
    image-rendering: -webkit-optimize-contrast;
}

.p-topn-employ__graph-base {
    width: 90.6040268456%;
    position: absolute;
    right: 0;
    bottom: 1.2820512821%;
    z-index: 10;
    opacity: 0;
}

.p-topn-employ__graph-area.is-show .p-topn-employ__graph-base {
    animation: parts-show 0.5s ease-in-out forwards;
}

.p-topn-employ__graph-base img {
    width: 100%;
}

.p-topn-employ__graph-scale {
    width: 89.2617449664%;
    position: absolute;
    right: 0.8948545861%;
    bottom: 1.2820512821%;
    z-index: 1;
    opacity: 0;
}

.p-topn-employ__graph-area.is-show .p-topn-employ__graph-scale {
    animation: parts-show 0.5s ease-in-out forwards;
}

.p-topn-employ__graph-scale img {
    width: 100%;
}

.p-topn-employ__graph-mark {
    width: 9.8434004474%;
    position: absolute;
    top: 2.1367521368%;
    left: 0;
    opacity: 0;
}

.p-topn-employ__graph-area.is-show .p-topn-employ__graph-mark {
    animation: parts-show 0.5s ease-in-out forwards;
}

.p-topn-employ__graph-mark img {
    width: 100%;
}

.p-topn-employ__graph-arrow {
    position: absolute;
    z-index: 3;
    top: 23.5042735043%;
    left: 24.6085011186%;
    width: 57.2706935123%;
    opacity: 0;
}

.p-topn-employ__graph-area.is-show .p-topn-employ__graph-arrow {
    animation: parts-show 0.5s ease-in-out forwards 1s;
}

.p-topn-employ__graph-arrow img {
    width: 100%;
}

.p-topn-employ__graph-txt {
    font-size: clamp(14px, 1.5625vw, 20px);
    text-align: center;
    margin-top: 20px;
}
@media screen and (max-width: 599px) {
    .p-topn-employ__graph-txt {
        margin-top: 10px;
    }
}

.p-topn-employ__graph-note {
    font-size: clamp(10px, 0.9375vw, 12px);
    margin-top: 15px;
}
@media screen and (max-width: 750px) {
    .p-topn-employ__graph-note {
        text-align: right;
        margin-top: 0;
    }
}

.p-topn-employ__graph-bar {
    position: absolute;
    bottom: 1.2820512821%;
    z-index: 2;
    overflow: hidden;
}

.p-topn-employ__graph-bar img {
    transform: translateY(100%);
    transition: 0.3s;
    width: 100%;
}

.p-topn-employ__graph-area.is-show .p-topn-employ__graph-bar img {
    animation: bar-show 0.5s ease-in-out forwards 0.5s;
}

.p-topn-employ__graph-bar--21 {
    width: 13.4228187919%;
    left: 14.3176733781%;
}

.p-topn-employ__graph-bar--22 {
    width: 13.4228187919%;
    left: 31.3199105145%;
}

.p-topn-employ__graph-bar--23 {
    width: 13.4228187919%;
    left: 48.322147651%;
}

.p-topn-employ__graph-bar--24 {
    width: 13.4228187919%;
    left: 64.8769574944%;
}

.p-topn-employ__graph-bar--25 {
    width: 13.4228187919%;
    left: 81.6554809843%;
}

.p-topn-employ__graph-year {
    width: 10.2908277405%;
    position: absolute;
    z-index: 3;
    opacity: 0;
    line-height: 1;
}

.p-topn-employ__graph-year img {
    width: 100%;
}

.p-topn-employ__graph-area.is-show .p-topn-employ__graph-year {
    animation: parts-show 0.5s ease-in-out forwards 1s;
}

.p-topn-employ__graph-year--21 {
    top: 86.3247863248%;
    left: 15.6599552573%;
}

.p-topn-employ__graph-year--22 {
    top: 86.3247863248%;
    left: 32.8859060403%;
}

.p-topn-employ__graph-year--23 {
    top: 86.3247863248%;
    left: 49.6644295302%;
}

.p-topn-employ__graph-year--24 {
    top: 86.3247863248%;
    left: 66.4429530201%;
}

.p-topn-employ__graph-year--25 {
    top: 86.3247863248%;
    left: 83.4451901566%;
}

.p-topn-employ__graph-num {
    width: 10.2908277405%;
    font-size: 5.1282051282%;
    position: absolute;
    z-index: 3;
    opacity: 0;
    line-height: 1;
}

.p-topn-employ__graph-num img {
    width: 100%;
}

.p-topn-employ__graph-area.is-show .p-topn-employ__graph-num {
    animation: parts-show 0.5s ease-in-out forwards 1s;
}

.p-topn-employ__graph-num--21 {
    top: 26.4957264957%;
    left: 15.6599552573%;
}

.p-topn-employ__graph-num--22 {
    top: 17.9487179487%;
    left: 32.8859060403%;
}

.p-topn-employ__graph-num--23 {
    top: 12.8205128205%;
    left: 49.6644295302%;
}

.p-topn-employ__graph-num--24 {
    top: 7.6923076923%;
    left: 65.9955257271%;
}

.p-topn-employ__graph-num--25 {
    width: 17.225950783%;
    top: -2.1367521368%;
    left: 80.9843400447%;
}

.p-topn-employ__graph-time {
    position: absolute;
    z-index: 3;
    width: 11.4093959732%;
    top: 19.2307692308%;
    left: 82.5503355705%;
    opacity: 0;
    line-height: 1;
}

.p-topn-employ__graph-area.is-show .p-topn-employ__graph-time {
    animation: parts-show 0.5s ease-in-out forwards 1s;
}

.p-topn-employ__graph-time img {
    width: 100%;
}

.p-topn-employ__pic {
    width: 50%;
}
@media screen and (max-width: 750px) {
    .p-topn-employ__pic {
        width: 100%;
    }
}

.p-topn-employ__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}

.p-topn-area {
    padding: 50px 0;
}
@media screen and (max-width: 750px) {
    .p-topn-area {
        padding: 30px 0;
    }
}

.p-topn-area .p-topn-ttl-3 {
    margin-bottom: 30px;
}
@media screen and (max-width: 750px) {
    .p-topn-area .p-topn-ttl-3 {
        margin-bottom: 5px;
    }
}

.p-topn-area__inner {
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width: 750px) {
    .p-topn-area__inner {
        display: block;
    }
}
@media screen and (max-width: 599px) {
    .p-topn-area__txt-area {
        width: 265px;
    }
}
@media screen and (min-width: 751px) {
    .p-topn-area__img-area {
        position: relative;
        margin-left: 40px;
    }
}
@media screen and (max-width: 750px) {
    .p-topn-area__img-area {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.p-topn-area__img-wrap {
    position: relative;
    width: clamp(206px, 34.53125vw, 442px);
    width: max(206px, 34.53125vw);
}
@media screen and (max-width: 750px) {
    .p-topn-area__img-wrap {
        margin-top: -100px;
        margin-left: auto;
        margin-right: 10%;
        width: 300px;
    }
}
@media screen and (max-width: 599px) {
    .p-topn-area__img-wrap {
        width: 206px;
    }
}
@media screen and (max-width: 400px) {
    .p-topn-area__img-wrap {
        margin-right: 0;
    }
}

.p-topn-area__img {
    opacity: 0;
}

.p-topn-area__img-wrap.is-show .p-topn-area__img {
    animation: parts-show 0.5s ease-in-out forwards 0.5s;
}

.p-topn-area__img img {
    image-rendering: -webkit-optimize-contrast;
}

.p-topn-area__img-dot {
    width: 68.5746606335%;
    position: absolute;
    top: 15.6028368794%;
    left: 2.9411764706%;
    opacity: 0;
}

.p-topn-area__img-wrap.is-show .p-topn-area__img-dot {
    animation: parts-show 0.5s ease-in-out forwards 1s;
}

.p-topn-area__box {
    border: 3px solid #F2836B;
    border-radius: 10px;
    width: clamp(92px, 15.3125vw, 196px);
    padding: clamp(10px, 1.5625vw, 20px) 0;
    text-align: center;
}
@media screen and (min-width: 751px) {
    .p-topn-area__box {
        position: absolute;
        top: 10px;
    }
}
@media screen and (max-width: 750px) {
    .p-topn-area__box {
        border-width: 2px;
        padding: 2px 0;
        margin-top: 10px;
        margin-left: 5px;
    }
}

.p-topn-area__box-txt {
    font-size: clamp(12px, 1.5625vw, 20px);
}

.p-topn-area__box-txt-num {
    font-size: clamp(16px, 3.125vw, 40px);
    font-weight: bold;
}

.p-topn-field {
    padding-top: 50px;
}
@media screen and (max-width: 750px) {
    .p-topn-field {
        padding-top: 40px;
    }
}

.p-topn-occ {
    padding-top: 30px;
}

.p-topn-occ__txt-color {
    font-size: clamp(14px, 1.5625vw, 20px);
    font-weight: bold;
    color: #000;
    margin-bottom: 10px;
}

.p-topn-occ__txt {
    font-size: clamp(14px, 1.25vw, 16px);
    line-height: 2.25;
}
@media screen and (max-width: 599px) {
    .p-topn-occ__txt {
        line-height: 1.7142857143;
    }
}

.p-topn-occ__graph {
    margin: 50px 0;
}

.p-topn-occ__photos {
    display: flex;
    gap: clamp(16px, 2.5vw, 32px);
    margin: 50px 0;
}

@media screen and (max-width: 750px) {
    .p-topn-occ__photos {
        display: block;
        margin: 30px 0;
    }
}

.p-topn-occ__photos-item {
    flex: 1 1 0;
    width: 50%;
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 4 / 3;
}

@media screen and (max-width: 750px) {
    .p-topn-occ__photos-item {
        width: 100%;
    }

    .p-topn-occ__photos-item:nth-of-type(n+2) {
        margin-top: 16px;
    }
}

.p-topn-occ__photos-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-topn-occ__graph-list {
    display: flex;
}
@media screen and (max-width: 599px) {
    .p-topn-occ__graph-list {
        display: block;
    }
}

.p-topn-occ__graph-item {
    position: relative;
    margin: 0 auto;
}

.p-topn-occ__graph-note {
    font-size: 12px;
    text-align: right;
    margin-top: -50px;
}

.p-topn-branch__txt {
    font-size: 16px;
    line-height: 2.25;
    margin-bottom: 10px;
}
@media screen and (max-width: 599px) {
    .p-topn-branch__txt {
        line-height: 1.7;
        margin-bottom: 5px;
    }
}

.p-topn-branch__list-item {
    font-size: clamp(14px, 1.5625vw, 20px);
    font-weight: bold;
    color: #E02D00;
}

.p-topn-branch__list-item:nth-of-type(n+2) {
    margin-top: 5px;
}

.p-topn-branch__list-item::before {
    content: "";
    width: clamp(10px, 1.015625vw, 13px);
    height: clamp(10px, 1.015625vw, 13px);
    background-color: #E0E1E2;
    border-radius: 100px;
    display: inline-block;
    margin-right: 10px;
}

.p-topn-assessment {
    padding-top: 50px;
}
@media screen and (max-width: 750px) {
    .p-topn-assessment {
        padding-top: 40px;
        background-color: #F9F9FB;
    }
}

.p-topn-train {
    background-color: #FAFAFA;
    padding: 50px 0;
}
@media screen and (max-width: 750px) {
    .p-topn-train {
        padding: 30px 0;
        background-color: #fff;
    }
}

.p-topn-train .p-topn-ttl-3 {
    margin-bottom: 20px;
}
@media screen and (max-width: 750px) {
    .p-topn-train .p-topn-ttl-3 {
        margin-bottom: 10px;
    }
}

.p-topn-train__inner {
    display: flex;
    align-items: flex-start;
}
@media screen and (max-width: 750px) {
    .p-topn-train__inner {
        display: block;
    }
}

.p-topn-train__txt-area {
    width: 41%;
}
@media screen and (max-width: 750px) {
    .p-topn-train__txt-area {
        width: 100%;
    }
}

.p-topn-train__txt {
    font-size: 16px;
    line-height: 1.875;
}
@media screen and (max-width: 599px) {
    .p-topn-train__txt {
        line-height: 1.7142857143;
    }
}

.p-topn-train__list {
    display: flex;
    flex-wrap: wrap;
    width: 60%;
    margin-left: 2%;
    min-width: 410px;
}
@media screen and (max-width: 750px) {
    .p-topn-train__list {
        width: 100%;
        min-width: 100%;
        margin-left: 0;
        display: block;
        margin-top: 20px;
    }
}

.p-topn-train__list-item {
    position: relative;
    border: 1px solid #F0F0F0;
    background-color: #fff;
    border-radius: 8px;
    width: 48%;
    padding: 12px 10px;
}
@media screen and (max-width: 750px) {
    .p-topn-train__list-item {
        width: 100%;
        height: 80px;
        border-radius: 5px;
        background-color: #F5F6F9;
        display: flex;
        align-items: center;
    }
}

.p-topn-train__list-item:nth-of-type(2n) {
    margin-left: 4%;
}
@media screen and (max-width: 750px) {
    .p-topn-train__list-item:nth-of-type(2n) {
        margin-left: 0;
    }
}
@media screen and (max-width: 750px) {
    .p-topn-train__list-item:nth-of-type(n+2) {
        margin-top: 10px;
    }
}

.p-topn-train__list-item:nth-of-type(n+3) {
    margin-top: 4%;
}
@media screen and (max-width: 750px) {
    .p-topn-train__list-item:nth-of-type(n+3) {
        margin-top: 10px;
    }
}

.p-topn-train__list-icon {
    position: absolute;
    top: 15px;
    left: 10px;
}
@media screen and (max-width: 750px) {
    .p-topn-train__list-icon {
        top: 50%;
        transform: translateY(-50%);
    }
}

.p-topn-train__list-icon--1 {
    width: clamp(42px, 4.0625vw, 52px);
}

.p-topn-train__list-icon--2 {
    width: clamp(42px, 4.21875vw, 54px);
}

.p-topn-train__list-icon--3 {
    width: clamp(42px, 4.21875vw, 54px);
}

.p-topn-train__list-txt-area {
    padding-left: clamp(50px, 5.46875vw, 70px);
}
@media screen and (max-width: 750px) {
    .p-topn-train__list-txt-area {
        display: flex;
        align-items: center;
    }
}
@media screen and (min-width: 751px) {
    .p-topn-train__list-txt-inner {
        margin-bottom: 5px;
    }
}
@media screen and (max-width: 750px) {
    .p-topn-train__list-txt-inner {
        width: 120px;
        flex-shrink: 0;
    }
}

.p-topn-train__list-txt {
    font-size: clamp(11px, 1.5625vw, 20px);
    white-space: nowrap;
}

.p-topn-train__list-txt-marker {
    font-size: clamp(11px, 1.875vw, 24px);
    white-space: nowrap;
    display: inline-block;
}

.p-topn-train__list-txt-marker--m {
    font-size: clamp(14px, 1.875vw, 24px);
    color: #E02D00;
}
@media screen and (max-width: 750px) {
    .p-topn-train__list-txt-marker--m {
        line-height: 1.3;
        margin-top: 2px;
    }
}

.p-topn-train__list-txt-num {
    font-size: clamp(23px, 3.125vw, 40px);
    font-weight: bold;
    line-height: 1;
    color: #E02D00;
}

.p-topn-train__list-txt-s {
    font-size: 12px;
    line-height: 1.75;
}

.p-topn-train__note {
    font-size: clamp(10px, 0.9375vw, 12px);
    margin-top: 10px;
    text-align: right;
}
/* ----------------------------------------
   overrides
   Adjustments required because this page is a standalone static clone of the
   reference site: no WordPress body classes, no fixed sidebar, and the SP
   gradient band asset was not part of the saved reference sources.
---------------------------------------- */

html,
body {
    font-family: "Noto Sans JP", sans-serif;
}

/* The reference reserves 270px on the left for the fixed job menu sidebar. */
.p-topn-wrap {
    margin-left: 0;
    width: 100%;
}

@media screen and (max-width: 1080px) {
    .p-topn-wrap {
        margin-left: 0;
        width: 100%;
    }
}

.p-topn-kv-btm {
    background-image: linear-gradient(90deg, #045C8C 0%, #0CA8F5 50%, #045C8C 100%);
}

/* ----------------------------------------
   brand color (blue / cyan)
   The reference site's red brand color (#E02D00 and its tints/shades) is
   re-themed to BUDDIES TECH's logo blue. Selectors below intentionally
   duplicate the ones extracted from recruit.css so the later declaration
   wins the cascade at equal specificity.
---------------------------------------- */

:root {
    --brand-blue: #0CA8F5;
    --brand-blue-dark: #087FBA;
    --brand-blue-darker: #045C8C;
    --brand-blue-light: #93D8FB;
    --brand-blue-pale: #E3F4FD;
}

@media screen and (min-width: 751px) {
    .l-header__link:hover {
        color: var(--brand-blue);
    }
    .l-header__link--open:hover path {
        stroke: var(--brand-blue);
    }
    .l-header__link--open:hover line {
        stroke: var(--brand-blue);
    }
}

.l-header__link::after {
    background: var(--brand-blue);
}

.l-header__sp-btn-link {
    background-color: var(--brand-blue);
}

.l-footer-r__col--border-2::before {
    background-color: var(--brand-blue);
}

.l-footer-r__txt {
    color: var(--brand-blue);
}

.l-footer-r__txt-link {
    color: var(--brand-blue);
}

.p-topn-anchor__head-ttl-num {
    color: var(--brand-blue);
}

@media screen and (max-width: 750px) {
    .p-topn-anchor__link {
        border: 2px solid var(--brand-blue);
        background-color: var(--brand-blue-pale);
    }
}

.p-topn-anchor__link-txt::before {
    background-color: var(--brand-blue-light);
}

.p-topn-anchor__link-txt::after {
    background-color: var(--brand-blue);
}

.p-topn-head__line {
    background-color: var(--brand-blue);
}

.p-topn-ttl-3 {
    color: var(--brand-blue);
}

.p-topn-employ__txt-num {
    color: var(--brand-blue);
}

.p-topn-partner__txt-num {
    color: var(--brand-blue);
}

.p-topn-area__box {
    border: 3px solid var(--brand-blue-light);
}

.p-topn-area__img-dot {
    filter: hue-rotate(190deg) saturate(1.3);
}

.p-topn-branch__list-item {
    color: var(--brand-blue);
}

.p-topn-train__list-txt-marker--m {
    color: var(--brand-blue);
}

.p-topn-train__list-txt-num {
    color: var(--brand-blue);
}

/* img_eval_graph.png bakes in a red salary-growth line/badge; recolor to blue. */
.p-topn-eval__graph img {
    filter: hue-rotate(190deg) saturate(1.15);
}

/* ----------------------------------------
   p-circle text labels (S-05 / feature 02 breakdown charts)
   The reference site bakes the donut chart's center title and per-segment
   labels into SVG images (outlined text, not live glyphs), so they cannot be
   relabeled directly. These rules restyle plain text placed in the same
   wrapper elements so the copy can be edited freely while keeping the same
   position/animation as the original image-based labels.
---------------------------------------- */

.p-circle__center-txt {
    display: block;
    margin: 0;
    text-align: center;
    color: #333;
    font-weight: bold;
    line-height: 1.3;
    font-size: clamp(10px, 1.09375vw, 14px);
}

.p-circle__num-txt {
    display: block;
    margin: 0;
    text-align: center;
    color: #333;
    line-height: 1.25;
    transform: translateY(105%);
}

.p-circle.is-show .p-circle__num-txt {
    animation: num-show 0.5s ease-in-out forwards 1s;
}

.p-circle__num-label {
    display: block;
    font-size: clamp(8px, 0.78125vw, 10px);
    font-weight: 500;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.p-circle__num-value {
    display: block;
    font-size: clamp(14px, 1.5625vw, 20px);
    font-weight: bold;
    white-space: nowrap;
}

.p-circle__num-txt--s {
    line-height: 1.3;
}

.p-circle__num-txt--s .p-circle__num-label {
    display: block;
    font-size: clamp(8px, 0.703125vw, 9px);
    font-weight: 500;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.p-circle__num-txt--s .p-circle__num-value {
    display: block;
    font-size: clamp(11px, 1.09375vw, 13px);
    font-weight: bold;
    white-space: nowrap;
}

/* "カスタマーサポート" needs more room than the original (shorter) baked label. */
.p-circle__num--4-3 {
    width: 30%;
}

/* ----------------------------------------
   p-topn-support (S-06 / feature 03)
   Badge + photo + description cards. This component does not exist in the
   reference site's recruit.css, so it is authored from scratch here, reusing
   the same tone (brand blue, rounded pill shape, Zen Kaku Gothic / Noto Sans
   JP type scale) as the rest of the page.
---------------------------------------- */

.p-topn-support {
    padding: 40px 0 50px;
}

@media screen and (max-width: 750px) {
    .p-topn-support {
        padding: 20px 0 40px;
    }
}

.p-topn-support__list {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

@media screen and (max-width: 750px) {
    .p-topn-support__list {
        flex-direction: column;
        gap: 45px;
    }
}

.p-topn-support__item {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.p-topn-support__badge {
    position: relative;
    display: inline-block;
    margin: 0 auto 20px;
    padding: 11px 22px;
    background-color: var(--brand-blue);
    color: #fff;
    font-weight: bold;
    font-size: clamp(13px, 1.09375vw, 15px);
    line-height: 1.4;
    border-radius: 100px;
    white-space: nowrap;
}

.p-topn-support__badge::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 9px 7px 0 7px;
    border-color: var(--brand-blue) transparent transparent transparent;
}

.p-topn-support__pic {
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 4 / 3;
}

.p-topn-support__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-topn-support__txt {
    margin-top: 18px;
    text-align: left;
    font-size: clamp(13px, 1.09375vw, 15px);
    line-height: 1.85;
    color: #1A1A1A;
}

/* ----------------------------------------
   p-topn-train (S-07 numbers, 4-card layout)
   The reference site only ships 3 icons (icon_train_01-03.svg); icon_train_04.svg
   is a new asset drawn in the same flat single-color style to fill the 4th card.
---------------------------------------- */

.p-topn-train__list-icon--4 {
    width: clamp(42px, 4.0625vw, 52px);
}

/* ----------------------------------------
   p-topn-faq (S-08 FAQ)
   Native <details>/<summary> accordion, no JS required. This component does
   not exist in the reference site, so it is authored from scratch here in the
   same tone as the rest of the page (brand blue, rounded cards, pale-blue
   borders per the トンマナ palette).
---------------------------------------- */

.p-topn-faq {
    padding: 50px 0 60px;
}

@media screen and (max-width: 750px) {
    .p-topn-faq {
        padding: 30px 0 40px;
    }
}

.p-topn-faq__list {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media screen and (max-width: 750px) {
    .p-topn-faq__list {
        margin-top: 20px;
        gap: 12px;
    }
}

.p-topn-faq__accordion {
    border: 1px solid #C8E4F4;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
}

.p-topn-faq__q {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 54px 20px 20px;
    list-style: none;
    cursor: pointer;
    font-weight: bold;
    font-size: clamp(14px, 1.25vw, 16px);
    color: #1A1A1A;
}

@media screen and (max-width: 750px) {
    .p-topn-faq__q {
        gap: 12px;
        padding: 16px 44px 16px 16px;
    }
}

.p-topn-faq__q::-webkit-details-marker {
    display: none;
}

.p-topn-faq__q::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--brand-blue);
    border-bottom: 2px solid var(--brand-blue);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.25s ease;
}

.p-topn-faq__accordion[open] .p-topn-faq__q::after {
    transform: translateY(-35%) rotate(-135deg);
}

.p-topn-faq__q-mark,
.p-topn-faq__a-mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: bold;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

@media screen and (max-width: 750px) {

    .p-topn-faq__q-mark,
    .p-topn-faq__a-mark {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }
}

.p-topn-faq__q-mark {
    background-color: var(--brand-blue);
    color: #fff;
}

.p-topn-faq__q-txt {
    flex: 1;
}

.p-topn-faq__a {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px 22px;
    border-top: 1px solid var(--brand-blue-pale);
    font-size: clamp(13px, 1.09375vw, 15px);
    line-height: 1.85;
    color: #1A1A1A;
}

@media screen and (max-width: 750px) {
    .p-topn-faq__a {
        gap: 12px;
        padding: 14px 16px 18px;
    }
}

.p-topn-faq__a-mark {
    background-color: var(--brand-blue-pale);
    color: var(--brand-blue);
}

.p-topn-faq__a-txt {
    flex: 1;
    padding-top: 4px;
}

/* ----------------------------------------
   p-topn-salary (年収イメージ)
   Before → After → 3年後 income flow cards. This component does not exist in
   the reference site, so it is authored from scratch here in the same tone
   (brand blue, rounded cards, Zen Kaku Gothic / Noto Sans JP type scale) as
   the rest of the page.
---------------------------------------- */

.p-topn-salary {
    padding: 50px 0 60px;
}

@media screen and (max-width: 750px) {
    .p-topn-salary {
        padding: 30px 0 40px;
    }
}

.p-topn-salary__flow {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin-top: 40px;
}

@media screen and (max-width: 750px) {
    .p-topn-salary__flow {
        flex-direction: column;
        gap: 16px;
        margin-top: 25px;
    }
}

.p-topn-salary__item {
    flex: 1;
    min-width: 0;
}

.p-topn-salary__arrow {
    flex-shrink: 0;
    align-self: center;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 14px solid var(--brand-blue-light);
}

@media screen and (max-width: 750px) {
    .p-topn-salary__arrow {
        align-self: center;
        transform: rotate(90deg);
    }
}

.p-topn-salary__card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid var(--brand-blue-pale);
    border-radius: 16px;
    padding: 26px 24px;
}

.p-topn-salary__card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.p-topn-salary__card-label {
    font-size: clamp(16px, 1.5625vw, 20px);
    font-weight: bold;
    color: #1A1A1A;
}

.p-topn-salary__card-badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--brand-blue-pale);
    color: var(--brand-blue-dark);
    font-size: 12px;
    font-weight: bold;
    border-radius: 100px;
    white-space: nowrap;
}

.p-topn-salary__card-num {
    font-size: clamp(15px, 1.5625vw, 20px);
    font-weight: bold;
    color: #1A1A1A;
    margin-bottom: 22px;
}

.p-topn-salary__card-num-value {
    font-size: clamp(32px, 3.75vw, 48px);
}

.p-topn-salary__card-num-value--accent {
    color: var(--brand-blue);
}

.p-topn-salary__card-box {
    margin-top: auto;
    background-color: #FAFAFA;
    border-radius: 10px;
    padding: 16px 18px;
}

.p-topn-salary__card-box-ttl {
    font-size: 13px;
    font-weight: bold;
    color: #1A1A1A;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #E5E5E5;
}

.p-topn-salary__card-box-list li {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.9;
    color: #333;
}

.p-topn-salary__card-box-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.8em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--brand-blue);
}

.p-topn-salary__card--highlight {
    position: relative;
    overflow: hidden;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    background: linear-gradient(135deg, var(--brand-blue-darker) 0%, var(--brand-blue-dark) 45%, var(--brand-blue) 100%);
    border: none;
}

/* Faint upward-trending line-graph watermark, reinforcing the "income grows" theme. */
.p-topn-salary__card--highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 240' preserveAspectRatio='none'%3E%3Cpath d='M0,216 L48,192 L88,204 L136,150 L176,166 L224,100 L264,114 L320,44 L320,240 L0,240 Z' fill='%23FFFFFF' fill-opacity='0.07'/%3E%3Cpolyline points='0,216 48,192 88,204 136,150 176,166 224,100 264,114 320,44' fill='none' stroke='%23FFFFFF' stroke-opacity='0.3' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 100% 65%;
}

.p-topn-salary__card--highlight::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    height: 45%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    -webkit-mask-image: linear-gradient(315deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(315deg, #000 0%, transparent 70%);
    pointer-events: none;
}

.p-topn-salary__card-label--highlight {
    position: relative;
    z-index: 1;
    display: inline-block;
    color: #fff;
    font-size: clamp(16px, 1.875vw, 24px);
    margin-bottom: 18px;
}

.p-topn-salary__card-num--highlight {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: clamp(20px, 2.1875vw, 28px);
    margin-bottom: 0;
}

.p-topn-salary__card--highlight .p-topn-salary__card-num-value--accent {
    color: #fff;
    font-size: clamp(48px, 5.625vw, 68px);
}

.p-topn-salary__card-divider {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 1px;
    margin: 18px 0;
    background-color: rgba(255, 255, 255, 0.3);
}

.p-topn-salary__card-note {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: clamp(12px, 1.09375vw, 14px);
    line-height: 1.8;
    font-weight: bold;
}

.p-topn-salary__note {
    margin-top: 24px;
    font-size: 12px;
    color: #666;
    text-align: right;
}

/* ----------------------------------------
   p-topn-req (募集要項)
   Two job cards (製造 / IT) + LINE CTA, placed below 年収イメージ.
---------------------------------------- */

.p-topn-req {
    padding: 50px 0 60px;
}

@media screen and (max-width: 750px) {
    .p-topn-req {
        padding: 30px 0 40px;
    }
}

.p-topn-req__list {
    display: flex;
    gap: clamp(16px, 2.5vw, 32px);
    margin-top: 40px;
}

@media screen and (max-width: 750px) {
    .p-topn-req__list {
        display: block;
        margin-top: 25px;
    }
}

.p-topn-req__card {
    flex: 1 1 0;
    width: 50%;
    min-width: 0;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid var(--brand-blue-pale);
    border-radius: 12px;
    padding: clamp(20px, 2.5vw, 32px);
}

@media screen and (max-width: 750px) {
    .p-topn-req__card {
        width: 100%;
    }

    .p-topn-req__card:nth-of-type(n+2) {
        margin-top: 16px;
    }
}

.p-topn-req__badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 14px;
    border-radius: 100px;
    background-color: var(--brand-blue);
    color: #fff;
    font-size: clamp(12px, 1.09375vw, 14px);
    font-weight: bold;
    line-height: 1.6;
}

.p-topn-req__ttl {
    font-size: clamp(18px, 1.71875vw, 22px);
    font-weight: bold;
    color: #1A1A1A;
    line-height: 1.4;
    margin-bottom: 6px;
}

.p-topn-req__role {
    font-size: clamp(14px, 1.25vw, 16px);
    font-weight: bold;
    color: #1A1A1A;
    line-height: 1.6;
    margin-bottom: 20px;
}

.p-topn-req__dl {
    margin: 0;
}

.p-topn-req__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F0F0F0;
    font-size: clamp(13px, 1.171875vw, 15px);
    line-height: 1.6;
}

.p-topn-req__row:first-child {
    border-top: 1px solid #F0F0F0;
}

.p-topn-req__row dt {
    flex-shrink: 0;
    width: 5.5em;
    color: var(--brand-blue);
    font-weight: bold;
}

.p-topn-req__row dd {
    flex: 1;
    min-width: 0;
    color: #1A1A1A;
    margin: 0;
}

.p-topn-req__body {
    margin-top: 22px;
}

.p-topn-req__body-ttl {
    font-size: clamp(14px, 1.25vw, 16px);
    font-weight: bold;
    color: var(--brand-blue);
    margin-bottom: 10px;
}

.p-topn-req__body-txt {
    font-size: clamp(13px, 1.171875vw, 15px);
    line-height: 1.85;
    color: #1A1A1A;
}

.p-topn-req__cta {
    margin-top: 40px;
    text-align: center;
}

@media screen and (max-width: 750px) {
    .p-topn-req__cta {
        margin-top: 28px;
    }
}

.p-topn-req__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(100%, 420px);
    padding: 18px 32px;
    border-radius: 8px;
    background-color: #06C755;
    color: #fff;
    font-size: clamp(15px, 1.40625vw, 18px);
    font-weight: bold;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.p-topn-req__cta-btn:hover {
    background-color: #05b34c;
}

.p-topn-req__cta-note {
    margin-top: 14px;
    font-size: clamp(12px, 1.09375vw, 14px);
    line-height: 1.6;
    color: #666;
}

/* ----------------------------------------
   c-float-line (floating LINE CTA)
   Bottom-right widget: banner image + logo/CTA bar.
---------------------------------------- */

.c-float-line {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    width: min(224px, calc(100vw - 32px));
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(4, 92, 140, 0.22);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.c-float-line.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.c-float-line[hidden] {
    display: none !important;
}

.c-float-line__close {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: #087FBA;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.c-float-line__close:hover {
    background-color: #fff;
    color: #045C8C;
}

.c-float-line__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.c-float-line__banner img {
    width: 100%;
    height: auto;
    display: block;
}

.c-float-line__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 9px 11px;
    background-color: #fff;
    border-top: 1px solid var(--brand-blue-pale);
}

.c-float-line__logo {
    flex-shrink: 0;
    width: 70px;
}

.c-float-line__logo img {
    width: 100%;
    height: auto;
    display: block;
}

.c-float-line__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 7px 9px;
    border-radius: 100px;
    background-color: #06C755;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    transition: background-color 0.2s ease;
}

.c-float-line__link:hover .c-float-line__btn {
    background-color: #05b34c;
}

.c-float-line__note {
    margin: 0;
    padding: 0 11px 9px;
    font-size: 9px;
    line-height: 1.5;
    color: #666;
    text-align: center;
    background-color: #fff;
}

@media screen and (max-width: 750px) {
    .c-float-line {
        right: 10px;
        bottom: 10px;
        width: min(176px, calc(100vw - 20px));
    }

    .c-float-line__logo {
        width: 58px;
    }

    .c-float-line__btn {
        font-size: 9px;
        padding: 6px 7px;
        min-height: 26px;
    }

    .c-float-line__note {
        font-size: 8px;
        padding: 0 9px 7px;
    }
}

/* ----------------------------------------
   p-topn-area materials (特長02: housing + map)
   Body text follows p-topn-occ pattern; below it a 2-col layout with
   company-housing cards (train-card visual language) on the left and
   the existing Japan map on the right.
---------------------------------------- */

.p-topn-area__materials {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(24px, 3.125vw, 48px);
    margin-top: 50px;
}

@media screen and (max-width: 750px) {
    .p-topn-area__materials {
        display: block;
        margin-top: 30px;
    }
}

.p-topn-housing {
    flex: 1 1 0;
    width: 50%;
    min-width: 0;
    background-color: #FAFAFA;
    border-radius: 12px;
    padding: clamp(20px, 2.34375vw, 32px);
    box-sizing: border-box;
}

@media screen and (max-width: 750px) {
    .p-topn-housing {
        width: 100%;
        background-color: #F5F6F9;
        padding: 20px 16px;
        margin-top: 30px;
    }
}

.p-topn-housing__head {
    margin-bottom: 18px;
}

.p-topn-housing__ttl {
    font-size: clamp(22px, 2.1875vw, 28px);
    font-weight: bold;
    color: var(--brand-blue);
    line-height: 1.4;
    margin-bottom: 6px;
}

.p-topn-housing__lead {
    font-size: clamp(13px, 1.171875vw, 15px);
    line-height: 1.7;
    color: #333;
}

.p-topn-housing__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.p-topn-housing__item {
    position: relative;
    border: 1px solid #F0F0F0;
    background-color: #fff;
    border-radius: 8px;
    padding: 14px 14px 14px 12px;
    display: flex;
    align-items: flex-start;
}

@media screen and (max-width: 750px) {
    .p-topn-housing__item {
        border-radius: 5px;
        padding: 12px 10px;
        align-items: center;
    }
}

.p-topn-housing__icon {
    flex-shrink: 0;
    width: clamp(40px, 3.90625vw, 50px);
    margin-right: 12px;
    margin-top: 2px;
}

@media screen and (max-width: 750px) {
    .p-topn-housing__icon {
        margin-top: 0;
        margin-right: 10px;
    }
}

.p-topn-housing__icon img {
    width: 100%;
    height: auto;
    display: block;
}

.p-topn-housing__txt-area {
    flex: 1;
    min-width: 0;
}

.p-topn-housing__txt-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 4px;
}

.p-topn-housing__label {
    font-size: clamp(13px, 1.171875vw, 15px);
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

.p-topn-housing__label-s {
    font-size: 0.85em;
    font-weight: normal;
    color: #666;
}

.p-topn-housing__value {
    font-size: clamp(20px, 2.03125vw, 26px);
    font-weight: bold;
    color: var(--brand-blue);
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.p-topn-housing__desc {
    font-size: clamp(12px, 1.015625vw, 13px);
    line-height: 1.6;
    color: #666;
}

.p-topn-area__materials .p-topn-area__img-area {
    position: relative;
    flex: 1 1 0;
    width: 50%;
    min-width: 0;
    box-sizing: border-box;
    margin-left: 0;
}

.p-topn-area__materials .p-topn-area__img-area--single {
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-topn-area__materials .p-topn-area__img-area--single img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width: 750px) {
    .p-topn-area__materials .p-topn-area__img-area {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* ----------------------------------------
   l-footer (simple)
   Logo + catch + in-page nav + copyright. No SNS / banners.
---------------------------------------- */

.l-footer {
    background-color: #fff;
    padding: 48px 20px 32px;
    text-align: center;
    border-top: 1px solid #E8EEF2;
}

@media screen and (max-width: 750px) {
    .l-footer {
        padding: 36px 16px 24px;
    }
}

.l-footer__inner {
    max-width: 800px;
    margin: 0 auto;
}

.l-footer__logo {
    display: inline-block;
    margin-bottom: 24px;
}

.l-footer__logo img {
    width: clamp(140px, 18vw, 180px);
    height: auto;
    display: block;
}

.l-footer__catch {
    margin: 0 0 24px;
    font-size: clamp(13px, 1.25vw, 15px);
    line-height: 1.7;
    color: #6B6B6B;
}

.l-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.l-footer__nav a {
    font-size: clamp(13px, 1.171875vw, 14px);
    color: #1A1A1A;
    text-decoration: none;
    transition: color 0.2s ease;
}

.l-footer__nav a:hover {
    color: var(--brand-blue);
}

.l-footer__copy {
    display: block;
    font-size: 12px;
    color: #6B6B6B;
    line-height: 1.6;
}

/* ----------------------------------------
   p-topn-anchor redesign
   Centered title (katakana above English) + card content like:
   ① title / blue underline / (subtitle)
---------------------------------------- */

.p-topn-anchor__head {
    text-align: center;
    margin-bottom: 28px;
}

.p-topn-anchor__head-ttl {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0 2px;
    line-height: 1.1;
}

.p-topn-anchor__head-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.p-topn-anchor__head-txt {
    position: static;
    display: block;
    margin: 0 0 2px;
    font-size: clamp(10px, 0.9375vw, 12px);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--brand-blue);
    line-height: 1.2;
}

.p-topn-anchor__head-ttl-b {
    display: block;
    line-height: 1;
}

.p-topn-anchor__list {
    display: flex;
    gap: 16px;
    border: none;
    padding: 0;
}

@media screen and (max-width: 750px) {
    .p-topn-anchor__list {
        gap: 8px;
        justify-content: space-between;
    }
}

.p-topn-anchor__item {
    flex: 1 1 0;
    margin: 0;
    width: auto;
}

.p-topn-anchor__item:nth-of-type(n+2)::before {
    display: none;
}

.p-topn-anchor__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 28px 18px 24px;
    text-align: center;
    white-space: normal;
    background-color: #fff;
    border: 1px solid var(--brand-blue-pale);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(4, 92, 140, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.p-topn-anchor__link::after {
    display: none;
}

@media screen and (min-width: 751px) {
    .p-topn-anchor__link:hover {
        border-color: var(--brand-blue);
        box-shadow: 0 10px 28px rgba(12, 168, 245, 0.16);
        transform: translateY(-3px);
    }
}

@media screen and (max-width: 750px) {
    .p-topn-anchor__link {
        border: 1px solid var(--brand-blue-pale);
        background-color: #fff;
        border-radius: 12px;
        padding: 16px 8px 14px;
        width: 100%;
    }

    .p-topn-anchor__link::after {
        display: none;
    }
}

.p-topn-anchor__link-txt {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-bottom: 10px;
    font-size: clamp(16px, 1.796875vw, 23px);
    font-weight: bold;
    line-height: 1.4;
    color: #1A1A1A;
    white-space: nowrap;
}

.p-topn-anchor__link-txt::before {
    display: none;
}

.p-topn-anchor__link-txt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--brand-blue);
    opacity: 1;
}

@media screen and (max-width: 750px) {
    .p-topn-anchor__link-txt {
        font-size: clamp(11px, 3.2vw, 13px);
        font-weight: bold;
        white-space: normal;
        padding-bottom: 8px;
    }

    .p-topn-anchor__link-txt::after {
        height: 2px;
    }
}

.p-topn-anchor__link-txt-num {
    display: inline;
    margin: 0 4px 0 0;
    font-size: 1.15em;
    font-weight: bold;
    line-height: 1;
    color: #1A1A1A;
    vertical-align: baseline;
}

@media screen and (max-width: 750px) {
    .p-topn-anchor__link-txt-num {
        margin-right: 2px;
        font-size: 1.1em;
        font-weight: bold;
    }
}

.p-topn-anchor__link-txt-s {
    display: block;
    margin-top: 10px;
    font-size: clamp(11px, 0.9375vw, 13px);
    line-height: 1.5;
    color: #1A1A1A;
}

@media screen and (max-width: 750px) {
    .p-topn-anchor__link-txt-s {
        display: block;
        margin-top: 8px;
        font-size: clamp(9px, 2.4vw, 10px);
        line-height: 1.4;
    }
}

/* ----------------------------------------
   p-topn-head tweaks (特長 sections)
---------------------------------------- */

.p-topn-head__line.js-contents-fade.is-show {
    width: 168px;
}

@media screen and (max-width: 750px) {
    .p-topn-head__line.js-contents-fade.is-show {
        width: 92px;
    }
}

.p-topn-head__txt-s {
    font-size: clamp(14px, 1.5625vw, 20px);
    font-weight: 500;
}