@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Montserrat:wght@400;500;600;700&display=swap');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-family: "Noto Sans JP", "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

html {
    overflow-y: scroll;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

input, textarea {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    font-size: 16px;
    border: #ccc 1px solid;
    border-radius: 3px;
    background: #fafafa;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th {
    text-align: left;
}

a:focus {
    outline: none;
}

.clear:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

* html .clear {
    height: 1px;
}

.both {
    clear: both;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --navy: #1a2744;
    --navy-dark: linear-gradient(90deg, rgba(12, 25, 45, 1) 0%, rgba(34, 78, 129, 1) 100%);
    --blue: #2c4a7c;
    --accent: #3a6db5;
    --text: #252525;
    --text-sub: #275B94;
    --white: #fff;
    --gray-bg: #f5f5f5;
    --border: #e0e0e0;
}

body {
    color: var(--text);
    line-height: 1.8;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity .3s;
}

a:hover {
    opacity: .7;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.en {
    font-family: "Roboto", sans-serif;
}


/* ==========================================================
   TYPOGRAPHY 共通
   ========================================================== */

.section-heading {
    font-size: clamp(22px, 2.5vw, 25px);
    font-weight: 700;
    line-height: 1.65;
    margin-bottom: 28px;
    color: var(--text);
}

.section-body {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.06em;
    margin-bottom: 48px;
}

.section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    position: relative;
    left: -60px;
}

.section-label .slash {
    display: inline-block;
    width: 50px;
    height: 4px;
    background: var(--navy);
    transform: rotate(315deg);
}

.section-label .en {
    font-family: 'Roboto';
    font-size: 43px;
    letter-spacing: .05em;
    color: var(--navy);
    line-height: 1;
    font-weight: 500;
}

.section-label br {
    display: none;
}

.section-label-sub {
    font-size: 16px;
    color: var(--text-sub);
    margin-bottom: 40px;
    font-weight: 500;
}

.greeting .section-label .en,
.rc-beginner .section-label span:not(.slash),
.rc-experienced .section-label span:not(.slash),
.rc-requirements .section-label span:not(.slash),
.rc-message .section-label span:not(.slash),
.rc-person .section-label span:not(.slash),
.sv-card-text .section-label span:not(.slash) {
    font-size: 43px;
    font-weight: 700;
}

.greeting .section-label .en,
.rc-beginner .section-label span:not(.slash),
.rc-experienced .section-label span:not(.slash),
.rc-requirements .section-label span:not(.slash),
.rc-message .section-label span:not(.slash),
.sv-card-text .section-label span:not(.slash) {
    color: var(--text-sub);
}

.rc-person .section-label span:not(.slash) {
    color: var(--white);
}

.sv-card-text .section-label span:not(.slash) {
    line-height: 1.2;
}


/* ==========================================================
   COLOR MODIFIER
   ========================================================== */

.color-white .section-heading,
.color-white .section-body {
    color: var(--white);
}

.color-white .section-label .en {
    color: var(--white);
}

.color-white .section-label .slash {
    background: var(--white);
}

.color-white .section-label-sub {
    color: #275B94;
}

.color-white .section-body {
    opacity: .85;
}


/* ==========================================================
   BUTTON 共通
   ========================================================== */
.btn{
display:inline-flex;
align-items:center;
font-family:'Roboto';
font-size:17px;
font-weight:500;
letter-spacing:.1em;
padding:10px 97px 10px 37px;
position:relative;
border:none;
cursor:pointer;
text-decoration:none;
transform:translateX(0);
transition:background-color .28s ease,color .28s ease,border-color .28s ease,transform .28s ease;
}

.btn::after{
content:'';
display:inline-block;
width:30px;
height:1px;
position:absolute;
right:0;
transition:width .28s ease,background-color .28s ease;
}

.btn::before{
content:'';
position:absolute;
right:-30px;
height:1px;
width:30px;
transition:width .28s ease,right .28s ease,background-color .28s ease;
}

.btn:hover{
opacity:1;
transform:translateX(4px);
}

.btn:hover::after{
width:36px;
}

.btn:hover::before{
width:36px;
right:-36px;
}

.btn--filled{
background-color:var(--navy);
color:var(--white);
}

.btn--filled::after{
background:var(--white);
}

.btn--filled::before{
background:var(--navy);
}

.btn--filled:hover{
background-color:#2f5f91;
color:var(--white);
}

.btn--filled:hover::after{
background:var(--white);
}

.btn--filled:hover::before{
background:#2f5f91;
}

.btn--white{background-image: linear-gradient(90deg, #24568B, #24568B);color:var(--white);}

.btn--white::after,
.btn--white::before{
background:var(--white);
}

.service .btn--white.en:hover{background-image: linear-gradient(90deg, #24568b, #1872b2);border-color:#2f5f91;color:var(--white);}

.btn--white:hover::after,
.btn--white:hover::before{
background:var(--white);
}

/* ==========================================================
   HEADER
   ========================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 20px 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    transition: background .3s, box-shadow .3s;
}

.header.scrolled {
    background: linear-gradient(90deg, rgba(12, 25, 45, 1) 0%, rgba(34, 78, 129, 1) 100%);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .15);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
}

.header-logo svg {
    width: 36px;
    height: 36px;
}

.header-logo span {
    font-family: "Bebas Neue";
    font-size: 20px;
    letter-spacing: .04em;
}

.header-nav {
    display: flex;
    gap: 60px;
}

.header-nav a {
    color: var(--white);
    font-family: 'Roboto';
    font-size: 21px;
    font-weight: 500;
    letter-spacing: .08em;
}

.hamburger {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 0;
}

.hamburger-label {
    font-family: 'Roboto';
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
}

.hamburger-icon {
    width: 22px;
    height: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--white);
    border-radius: 1px;
}

p.ec {
    position: absolute;
    top: -50px;
    right: -13%;
    height: 680px;
}

p.ec img {
    height: 100%;
    width: auto;
}


/* ==========================================================
   SP MENU
   ========================================================== */

.sp-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(26, 39, 68, .97);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s;
}

.sp-menu.open {
    opacity: 1;
    pointer-events: auto;
}

.sp-menu-close {
    position: absolute;
    top: 18px;
    right: 20px;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    width: 32px;
    height: 32px;
}

.sp-menu-close::before,
.sp-menu-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 1.5px;
    background: var(--white);
    border-radius: 1px;
}

.sp-menu-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.sp-menu-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.sp-menu-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.sp-menu-nav a {
    color: var(--white);
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .12em;
}


/* ==========================================================
   HERO
   ========================================================== */

.hero {
    position: relative;
    width: 100%;
    /* height: 100vh; */
    min-height: 600px;
    overflow: hidden;
    background: var(--navy);
    display: flex;
    align-items: flex-end;
}

.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* display: none; */
}

.hero-img img {
    width: 100%;
    /* height: 100%; */
    /* object-fit: cover; */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 39, 68, .7) 0%, rgba(26, 39, 68, .3) 50%, rgba(26, 39, 68, .6) 100%);
}

.hero-content {
    z-index: 2;
    color: var(--white);
    /* max-width: 700px; */
    padding: 0 0 80px 60px;
}

.hero-content .hero-en{
font-size:clamp(32px,4vw,62px);
font-weight:500;
line-height:1.3;
margin-bottom:16px;
--kirarin-base:#73B4D4;
--kirarin-shine:#68CFE1;
--kirarin-shine-soft:#B8E6F5;
--kirarin-end-bg:linear-gradient(90deg,#73B4D4 0%,#68CFE1 100%);
}


.hero-content .hero-ja {
    font-size: clamp(22px, 4.8vw, 46px);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
}

.hero-content .hero-desc {
    font-size: 22px;
    line-height: 2;
    opacity: .85;
}


/* ==========================================================
   COMMON SECTION
   ========================================================== */

.section {
    padding: 100px 0;
}

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}


/* ==========================================================
   TOP: ABOUT
   ========================================================== */

.about {
    position: relative;
    overflow: hidden;
    padding: 250px 0 120px;
}

.about-watermark,
.recruit-watermark {
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 1100px;
    transform: translateY(-50%);
    font-family: 'Roboto';
    font-size: clamp(80px, 12vw, 180px);
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    line-height: 0.9;
    background-image: linear-gradient(90deg, #73B4D4, #68CFE1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.1;
}

.about .section-inner {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px 60px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.about-label {
    grid-column: 1;
    grid-row: 1;
}

.about-content {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.about-btn {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
}


/* ==========================================================
   TOP: SERVICE
   ========================================================== */

.service {
    background: var(--navy-dark);
    position: relative;
    margin-bottom: 130px;
}

.service .section-inner {
    align-items: center;
    gap: 60px;
}

.service-text {
    position: relative;
    z-index: 1;
}

.service-img {
    position: absolute;
    right: -10%;
    top: -15px;
    z-index: 0;
    max-width: 1210px;
}

.service-img img {
    width: 100%;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}




/* ==========================================================
   TOP: RECRUIT
   ========================================================== */

.recruit {
    position: relative;
    overflow: hidden;
}

.recruit-watermark {
    bottom: 10%;
    left: 40%;
    top: unset;
    text-align: center;
}

.recruit .section-inner {
    align-items: center;
}

.recruit-img {
    position: absolute;
    left: -10%;
    top: 0;
    max-width: 1100px;
}

.recruit-img img {
    width: 100%;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}

.recruit-text {
    position: relative;
    z-index: 1;
    width: 60%;
    margin-left: 40%;
}

.recruit p.section-body {
    margin-bottom: 110px;
}

.recruit a.btn.btn--outline.en,
.recruit a.btn.btn--filled.en {
    float: right;
}


/* ==========================================================
   TOP: NEWS
   ========================================================== */

.news .section-inner {
    max-width: 1000px;
}

.news .section-label,
.news .section-label-sub {
    text-align: left;
    left: 0;
}

.news-list {
    margin-bottom: 70px;
}

.news-item {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 20px 30px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.news-item:first-child {
    border-top: 1px solid var(--border);
}

.news-item-meta {
    display: contents;
}

.news-date {
    font-family: 'Roboto';
    font-size: 15px;
    color: #0c192d80;
    flex-shrink: 0;
}

.news-cat {
    display: flex;
    background-image: linear-gradient(90deg, #1c90af, #014190);
    color: var(--white);
    font-size: 15px;
    padding: 3px 14px 1px;
    border-radius: 22px;
    flex-shrink: 0;
    width: 123px;
    text-align: center;
    font-family: 'Roboto';
    justify-content: center;
    align-items: center;
}

.news-title {
    flex: 1;
    font-size: 15px;
}

.news-title a:hover {
    opacity: .7;
}

.news .btn-wrap {
    text-align: center;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.footer {
    background: var(--navy-dark);
    color: var(--white);
    padding: 60px 40px;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    flex-direction: row;
    border-bottom: 1px solid rgb(255 255 255 / 30%);
    padding-bottom: 50px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo svg {
    width: 30px;
    height: 30px;
}

.footer-logo span {
    font-family: 'Bebas Neue';
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .05em;
}

.footer-company {
    font-size: 20px;
    margin-bottom: 8px;
    opacity: 0.8;
}

.footer-address {
    font-size: 15px;
    opacity: .7;
    line-height: 1.8;
}

.footer-nav {
    display: flex;
    gap: 28px;
    font-family: 'Roboto';
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .05em;
    padding-top: 8px;
    width: 65%;
    justify-content: space-between;
}

.footer-nav-sp {
    display: none;
}

.footer-copy {
    text-align: center;
    font-size: 14px;
    margin-top: 40px;
    font-family: 'Roboto', sans-serif;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   PAGE HEADER (RECRUIT等)
   ========================================================== */

section.page-header {
    background: var(--navy-dark);
    height: 600px;
    display: flex;
    align-items: center;
    position: relative;
}

section.page-header h1 {
    display: flex;
    color: #275B94;
    flex-direction: column;
    max-width: 1100px;
    margin: 0 auto;
    width: 90%;
    font-size: 21px;
    letter-spacing: 0.06em;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

section.page-header h1 span {
    color: #fff;
    font-family: 'Roboto';
    font-size: 60px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.06em;
}

section.page-content {
    padding-top: 150px;
}


/* ==========================================================
   PAGE HERO (ABOUT/SERVICE等)
   ========================================================== */

.page-hero {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: var(--navy);
    display: flex;
    align-items: flex-end;
    padding: 60px;
}

.page-hero-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
}

.page-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(26, 39, 68, 1) 30%, rgba(26, 39, 68, .3) 70%, rgba(26, 39, 68, .1) 100%);
}

.page-hero-content {
    position: relative;
    z-index: 2;
    color: var(--white);
}

.page-hero-title {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    margin-bottom: 12px;
}

.page-hero-sub {
    font-size: 14px;
    opacity: .7;
    padding-left: 4px;
}


/* ==========================================================
   ABOUT PAGE: GREETING 共通
   ========================================================== */

.greeting {
    padding: 0px 0 60px;
}

.greeting + .greeting {
    padding-top: 40px;
}

.greeting-block {
    display: flex;
    gap: 50px;
    margin-top: 40px;
    align-items: flex-start;
}

.greeting-block--reverse {
    flex-direction: row-reverse;
}

.greeting-text {
    flex: 1;
}

.greeting-heading {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 28px;
    color: var(--text);
}

.greeting-body p {
    font-size: 15px;
    line-height: 2;
    color: var(--text);
    margin-bottom: 8px;
}

.greeting-sign {
    margin-top: 24px;
    font-size: 14px;
    line-height: 2;
}

.greeting-photo {
    flex: 0 0 240px;
}

.greeting-photo img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.greeting-caption {
    margin-top: 12px;
    font-size: 16px;
    text-align: center;
    color: var(--text);
}

.greeting-caption span {
    font-size: 15px;
    color: var(--text-sub);
    margin-right: 12px;
}


/* ==========================================================
   ABOUT PAGE: COMPANY
   ========================================================== */

.company-block {
    display: flex;
    gap: 100px;
    align-items: flex-start;
}

.company-photo {
    flex: 0 0 31%;
}

.company-photo img {
    width: 100%;
    /* aspect-ratio: 4 / 3; */
    /* object-fit: cover; */
}

.company-info {
    flex: 1;
}

.company-table {
    width: 100%;
    border-collapse: collapse;
}

.company-table tr {
    border-bottom: 1px solid var(--border);
}

.company-table th,
.company-table td {
    padding: 18px 0;
    font-size: 15px;
    line-height: 1.8;
    vertical-align: top;
}

.company-table th {
    width: 120px;
    font-weight: 500;
    color: var(--text-sub);
    white-space: nowrap;
}

.company-table td {
    color: var(--text);
}


/* ==========================================================
   ABOUT PAGE: PHILOSOPHY
   ========================================================== */

.philosophy {
    background: var(--navy-dark);
    padding: 100px 0;
    position: relative;
}

.philosophy-text {
    text-align: center;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

.philosophy-text p {
    font-size: 25px;
    line-height: 2.2;
    color: var(--white);
    font-weight: 500;
    text-align: left;
}


/* ==========================================================
   ABOUT PAGE: MVV
   ========================================================== */

.mvv,
.rc-requirements {
    padding: 100px 0;
    background: linear-gradient(90deg, #F1F7FA 0%, #EFF4F8 100%);
}

.mvv-item {
    margin-bottom: 70px;
    border-bottom: 1px solid rgb(12 25 45 / 30%);
    padding-bottom: 30px;
}

.mvv-item:last-child {
    margin-bottom: 0;
}

.mvv-title {
    font-size: 43px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--navy);
    line-height: 1;
    margin-bottom: 8px;
}

.mvv-sub {
    font-size: 16px;
    color: var(--text-sub);
    margin-bottom: 24px;
    font-weight: 500;
}

.mvv-body {
    font-size: 15px;
    line-height: 2;
    color: var(--text);
    margin-bottom: 8px;
}

.value-list {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.value-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.value-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-sub);
    flex-shrink: 0;
    line-height: 1;
    padding-top: 5px;
    opacity: 0.5;
}

.value-content {
    flex: 1;
}

.value-heading {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-sub);
    margin-bottom: 8px;
    line-height: 1.5;
}

.value-content p {
    font-size: 16px;
    line-height: 2;
    color: var(--text);
}


/* ==========================================================
   SERVICE PAGE: LEAD
   ========================================================== */

.sv-lead {
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
}

.sv-lead-watermark {
    position: absolute;
    top: 26%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto';
    font-size: clamp(60px, 10vw, 160px);
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    line-height: 0.95;
    background-image: linear-gradient(90deg, #1C90AF, #003F8F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.08;
    text-align: center;
}

.sv-lead .section-inner {
    position: relative;
    z-index: 1;
}

.sv-lead-heading {
    font-size: clamp(20px, 2.4vw, 33px);
    font-weight: 700;
    line-height: 1.7;
    color: #000;
    margin-bottom: 140px;
}

.sv-lead-body {
    font-size: 16px;
    line-height: 2.1;
    color: #000;
    max-width: 700px;
    float: right;
}


/* ==========================================================
   SERVICE PAGE: CARDS
   ========================================================== */

.sv-card {
    position: relative;
    overflow: hidden;
    padding: 40px 0;
    margin-bottom: 4%;
}

.sv-card-img {
    position: absolute;
    top: 0;
    z-index: 0;
    max-width: 1200px;
    height: 100%;
}

.sv-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}

.sv-card--img-right .sv-card-img {
    left: 53%;
    width: 90%;
}

.sv-card--img-right .sv-card-text {
    position: relative;
    z-index: 1;
    width: 65%;
}

.sv-card--img-left .sv-card-img {
    right: 53%;
    width: 90%;
}

.sv-card--img-left .sv-card-text {
    position: relative;
    z-index: 1;
    width: 65%;
    margin-left: auto;
    max-width: 620px;
}

.sv-card-cat {
    font-size: 17px;
    color: hsl(
211deg 58% 37% / 30%);
    margin-bottom: 32px;
}

.sv-card-text .section-heading {
    margin-bottom: 20px;
}

.sv-card-text .section-body {
    font-size: 16px;
    margin-bottom: 28px;
}

.sv-card-list-label {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-sub);
    margin-bottom: 10px;
    border-bottom: 1px solid hsl(211deg 58% 37% / 30%);
}

.sv-card-list {
    list-style: none;
}

.sv-card-list li {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text);
    padding-left: 16px;
    position: relative;
}

.sv-card-list li::before {
    content: '・';
    position: absolute;
    left: 0;
}


/* ==========================================================
   RECRUIT PAGE: LEAD
   ========================================================== */

.rc-lead {
    padding: 0 0 100px;
}

.rc-lead-heading {
    font-size: clamp(20px, 2.4vw, 33px);
    font-weight: 700;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 50px;
}

h2.rc-lead-heading br {
    display: none;
}

.rc-lead-block {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 60px;
}

.rc-lead-img {
    flex: 0 0 38%;
}

.rc-lead-img img {
    width: 100%;
    /* clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); */
}

.rc-lead-text {
    flex: 1;
}

.rc-lead-text p {
    font-size: 16px;
    line-height: 2;
    color: var(--text);
    margin-bottom: 16px;
}

.rc-lead-qa-title {
    font-size: 25px;
    font-weight: 700;
    color: var(--text);
    margin-top: 28px;
    margin-bottom: 16px;
}

.rc-lead-detail {
    margin-top: 0;
}

.rc-lead-detail-block {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 50px;
}

.rc-lead-detail-text {
    flex: 1;
}

.rc-lead-detail-text p {
    font-size: 16px;
    line-height: 2;
    color: var(--text);
    margin-bottom: 12px;
}

.rc-lead-detail-text p.rc-lead-source {
    font-size: 14px;
    color: var(--text-sub);
    margin-top: 8px;
}

.rc-lead-detail-img {
    flex: 0 0 36%;
}

.rc-lead-detail-img img {
    width: 100%;
}
.keiken-flex .img1 {
    width: 45%;
}
.rc-lead-closing {
    font-size: 16px;
    line-height: 2;
    color: var(--text);
    margin-top: 10px;
}

.rc-curriculum-skills-body {
    background: color(srgb 0.15 0.36 0.58 / 0.1);
    padding: 20px 25px;
    min-height: 430px;
}


/* ==========================================================
   RECRUIT PAGE: 募集人材
   ========================================================== */

.rc-person {
    background: var(--navy-dark);
    padding: 100px 0 120px;
    position: relative;
    overflow: hidden;
}

.rc-person .section-label .slash {
    background: var(--white);
}

section.section.rc-person .section-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left !important;
}

.rc-person-intro {
    font-size: 16px;
    line-height: 2;
    color: var(--white);
    opacity: .85;
    margin-top: 30px;
    margin-bottom: 60px;
}

.rc-person-cap {
    font-size: 25px;
    font-weight: 700;
    color: var(--white);
    text-align: center;
    margin-bottom: 8px;
}

.rc-person-watermark {
    font-size: clamp(36px, 5vw, 55px);
    text-align: center;
    background-image: linear-gradient(90deg, #1990AE, #003F8F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 50px;
    pointer-events: none;
    line-height: 1.2;
}

.rc-person-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.rc-person-row {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.rc-person-circle {
    width: 270px;
    height: 270px;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.rc-person-circle-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.5;
    margin-bottom: 10px;
}

.rc-person-circle-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #A2E5F4;
}


/* ==========================================================
   RECRUIT PAGE: カリキュラム共通
   ========================================================== */

.rc-beginner,
.rc-experienced {
    padding: 70px 0;
}

.rc-experienced {
    padding: 0px 0 80px;
}

.rc-curriculum {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    align-items: stretch;
}

.rc-curriculum-card {
    flex: 1;
    padding: 28px 28px 36px;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid #ffffff;
    border-image: linear-gradient(to right, #1b8cae 0%, #024591 100%) 2;
}

.rc-curriculum-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
}

.rc-curriculum-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 18px;
    border-radius: 20px;
    margin-bottom: 16px;
    background-image: linear-gradient(90deg, #1c90af, #014190);
    color: var(--white);
    width: fit-content;
}

.rc-curriculum-desc {
    font-size: 14px;
    line-height: 1.85;
    margin-bottom: 6px;
    color: var(--text);
}

.rc-curriculum-skills {
    padding-top: 0;
    margin-top: 20px;
}

.rc-curriculum-skills-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    text-align: center;
    padding: 8px 0;
    background: #275B94;
}

.rc-curriculum-skills-body h4 {
    font-size: 16px;
    font-weight: 700;
    color: #275B94;
    margin-bottom: 2px;
    margin-top: 12px;
    text-underline-offset: 3px;
}

.rc-curriculum-skills-body h4:first-child {
    margin-top: 0;
}

.rc-curriculum-skills-body ul {
    list-style: none;
    margin-bottom: 2px;
}

.rc-curriculum-skills-body ul li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
    padding-left: 14px;
    position: relative;
}

.rc-curriculum-skills-body ul li::before {
    content: '-';
    position: absolute;
    left: 0;
}


/* ==========================================================
   RECRUIT PAGE: 募集要項テーブル
   ========================================================== */

.rc-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 40px;
}

.rc-table tr {
    border-bottom: 1px solid var(--border);
}

.rc-table th,
.rc-table td {
    padding: 22px 16px;
    font-size: 15px;
    line-height: 1.9;
    vertical-align: top;
    text-align: left;
}

.rc-table th {
    width: 140px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    background: transparent;
}

.rc-table td {
    color: var(--text);
}


/* ==========================================================
   RECRUIT PAGE: メッセージ
   ========================================================== */

.rc-message {
    padding: 100px 0;
}

.rc-message-body {
    margin-top: 0px;
    width: 70%;
}

.rc-message-body p {
    font-size: 15px;
    line-height: 2;
    color: var(--text);
    margin-bottom: 12px;
}
.keiken-flex {
    display: flex;
    gap: 50px;
    padding-top: 30px;
}

.keiken-flex ul li {
    list-style: disc;
    margin: 10px 0 10px 20px;
    line-height: 1.6;
}

.rc-message-body p {
    margin-bottom: 20px;
}

/* ==========================================================
   SP (max-width: 768px)
   ========================================================== */

@media(max-width: 1100px) {

    .header {
        padding: 5px 20px;
    }

    .header-logo svg {
        width: 28px;
        height: 28px;
    }

    .header-logo span {
        font-size: 14px;
    }

    .header-nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    a.header-logo img {
        width: 45px;
    }

    .hero {
        height: auto;
        min-height: auto;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        height: 48vh;
        background: none;
    }

    .hero-img {
        position: relative;
        width: auto;
        height: 30vh;
        /* display: none; */
    }

    .hero-img img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero-overlay {
        background: linear-gradient(180deg, rgba(26, 39, 68, .15) 0%, rgb(26 39 68 / 11%) 60%, rgb(26 39 68 / 0%) 100%);
    }

    .hero-content {
        padding: 24px 24px 0px;
        max-width: none;
        bottom: 50px;
    }

    .hero-content .hero-en {
        font-size: 31px;
        margin-bottom: 14px;
        line-height: 1.35;
    }

    .hero-content .hero-ja {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .hero-content .hero-desc {
        font-size: 16px;
        line-height: 1.9;
    }

    .hero-content .hero-desc br {
        display: none;
    }

    .section-heading {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .section-body {
        font-size: 13px;
        line-height: 1.9;
        margin-bottom: 24px;
    }

    .section-body br {
        display: none;
    }

    .section-label {
        margin-left: 0;
        left: 0;
    }

    .section-label .en {
        font-size: 24px;
    }

    .section-label .slash {
        width: 30px;
        height: 3px;
    }

    .section-label-sub {
        margin-bottom: 0;
        font-size: 11px;
        padding-left: 40px;
    }

    .greeting .section-label .en,
    .rc-beginner .section-label span:not(.slash),
    .rc-experienced .section-label span:not(.slash),
    .rc-requirements .section-label span:not(.slash),
    .rc-message .section-label span:not(.slash),
    .rc-person .section-label span:not(.slash),
    .sv-card-text .section-label span:not(.slash) {
        font-size: 23px;
    }
@media screen and (max-width: 1100px){
.btn{
font-size:12px;
padding:10px 60px 8px 20px;
}
.btn::after{
width:20px;
}
.btn::before{
width:20px;
right:-20px;
}
.btn:hover::after{
width:26px;
}
.btn:hover::before{
width:26px;
right:-26px;
}
}

    .section {
        padding: 40px 0;
    }

    .section-inner {
        padding: 0 20px;
    }

    .about {
        padding: 100px 0;
    }

    .about-watermark {
        font-size: 55px;
        top: 14%;
        left: 3%;
    }

    .about .section-inner {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .about-btn {
        justify-content: flex-start;
    }

    .service {
        margin-bottom: 0;
    }

    .service .section-inner {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .service-text {
        order: 1;
    }

    .service-img {
        position: absolute;
        right: -50px;
        top: -20px;
        max-width: none;
        width: 124%;
        order: 2;
    }

    .service-img img {
        clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
        width: 80%;
        margin-left: auto;
    }

    .service p.section-label-sub {
        margin-bottom: 70px;
    }

    .recruit-watermark {
        font-size: 44px;
        top: 45%;
        bottom: auto;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .recruit .section-inner {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .recruit-img {
        position: absolute;
        left: -90px;
        top: 20px;
        max-width: none;
        width: 150%;
        order: 1;
    }

    .recruit-img img {
        clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
        width: 70%;
    }

    .recruit-text {
        width: 100%;
        margin-left: 0;
        order: 2;
    }

    .recruit .section-label {
        justify-content: flex-end;
    }

    .recruit .section-label-sub {
        text-align: right;
        padding-left: 0;
        padding-right: 60px;
        margin-bottom: 80px;
    }

    .recruit a.btn.btn--filled.en,
    .recruit a.btn.btn--outline.en {
        float: none;
    }
.keiken-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.keiken-flex .img1 {
    width: 60%;
}

.rc-message-body {
    width: 100%;
}

.rc-lead-detail-text {
    order: 2;
}
    .recruit p.section-body {
        margin-bottom: 24px;
    }

    .news .section-inner {
        padding: 0 24px;
    }

    .news .section-label {
        margin-left: -30px;
    }

    .news-list {
        margin-bottom: 30px;
        margin-top: 20px;
    }

    .news-item {
        flex-wrap: wrap;
        gap: 0;
        padding: 11px 0;
    }

    .news-item-meta {
        display: flex !important;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin-bottom: 0;
    }

    .news-date {
        font-size: 12px;
    }

    .news-cat {
        background-image: unset;
        font-size: 11px;
        padding: 2px 10px;
        width: auto;
        border-radius: 16px;
        color: var(--text-sub);
    }

    .news-title {
        width: 100%;
        flex: none;
        font-size: 16px;
    }

    .news .btn-wrap {
        text-align: left;
    }

    .footer {
        padding: 40px 24px 24px;
        text-align: center;
    }

    .footer-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        border-bottom: none;
        padding-bottom: 0;
    }

    .footer-logo {
        justify-content: center;
        margin-bottom: 0;
    }

    .footer-logo img {
        width: 42px;
        height: auto;
    }

    .footer-logo span {
        font-size: 14px;
        letter-spacing: 0.1em;
    }

    .footer-nav {
        display: none;
    }

    .footer-nav-sp {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        align-items: stretch;
        width: 100%;
        border-top: 1px solid rgb(255 255 255 / 25%);
    }

    .footer-nav-sp a {
        opacity: .8;
        border-bottom: 1px solid rgb(255 255 255 / 25%);
        display: block;
        text-align: left;
        padding: 10px;
    }

    .footer-company {
        font-size: 13px;
        text-align: center;
    }

    .footer-address {
        font-size: 11px;
        text-align: left;
    }

    .footer-copy {
        margin-top: 20px;
        font-size: 9px;
        text-align: left;
    }

    .page-hero {
        height: 260px;
        padding: 40px 24px;
    }

    .page-hero-img {
        width: 80%;
    }

    .page-hero-title {
        font-size: 32px;
    }

    .page-hero-sub {
        font-size: 12px;
    }

    .greeting {
        padding: 60px 0 30px;
    }

    .greeting + .greeting {
        padding-top: 20px;
    }

    .greeting-block,
    .greeting-block--reverse {
        flex-direction: column;
        gap: 24px;
        margin-top: 20px;
    }

    .greeting-heading {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .greeting-body p {
        font-size: 13px;
        line-height: 1.9;
    }

    .greeting-photo {
        flex: none;
        width: 60%;
        margin: 0 auto;
    }

    .greeting-caption {
        text-align: center;
    }

    .company-block {
        flex-direction: column;
        gap: 30px;
        display: flex;
        align-items: center;
    }

    .company-photo {
        flex: none;
        width: 60%;
        order: 2;
    }

    .company-table th {
        width: 90px;
        font-size: 13px;
    }

    .company-table td {
        font-size: 13px;
    }

    .company-table th,
    .company-table td {
        padding: 14px 0;
    }

    .philosophy {
        padding: 60px 0;
    }

    .philosophy-text p {
        font-size: 14px;
        line-height: 2;
        text-align: left;
    }

    .philosophy-text p br {
        display: none;
    }

    .mvv {
        padding: 60px 0 80px;
    }

    .mvv-item {
        margin-bottom: 50px;
    }

    .mvv-title {
        font-size: 24px;
    }

    .mvv-sub {
        font-size: 11px;
    }

    .mvv-body {
        font-size: 13px;
    }

    .mvv-body br {
        display: none;
    }

    .value-item {
        gap: 16px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 5px;
        flex-wrap: wrap;
    }

    .value-num {
        font-size: 16px;
        display: inline-block;
    }

    .value-heading {
        font-size: 16px;
        display: inline-block;
        margin-left: 10px;
    }

    .value-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .sv-lead {
        padding: 10px 0 30px;
    }

    .sv-lead-watermark {
        font-size: 40px;
    }

    .sv-lead-heading {
        font-size: 18px;
        margin-bottom: 24px;
    }

    .sv-lead-heading br {
        display: none;
    }

    .sv-lead-body {
        font-size: 12px;
    }

    .sv-card {
        padding: 20px 0;
        margin-bottom: 0px;
    }

    .sv-card .section-inner {
        padding: 0 24px;
    }

    .sv-card-img {
        position: absolute;
        height: 100%;
        width: 130% !important;
        left: -15% !important;
        right: auto !important;
        top: 0;
        display: none;
    }

    .sv-card-img img {
        opacity: .15;
        clip-path: unset;
    }

    .sv-card--img-right .sv-card-text,
    .sv-card--img-left .sv-card-text {
        width: 100%;
        margin-left: 0;
    }

    .sv-card-cat {
        padding-left: 40px;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .sv-card-text .section-heading {
        font-size: 17px;
    }

    .sv-card-text .section-heading br {
        display: none;
    }

    .sv-card-text .section-body {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .sv-card-list-label {
        font-size: 16px;
    }

    .sv-card-list li {
        font-size: 15px;
    }

    .rc-lead {
        padding: 0px 0 40px;
    }

    .rc-lead-heading {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .rc-lead-heading br {
        display: none;
    }

    .rc-lead-block {
        flex-direction: column;
        gap: 20px;
    }

    .rc-lead-img {
        flex: none;
        width: 80%;
        margin: 0 auto;
    }

    .rc-lead-text p,
    .rc-lead-detail-text p {
        font-size: 15px;
    }

    .rc-lead-qa-title {
        font-size: 18px;
        margin-top: 16px;
    }

    .rc-lead-detail-block {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }

    .rc-lead-detail-img {
        flex: none;
        width: 80%;
        margin: 0 auto 20px;
    }

    .rc-lead-source {
        font-size: 12px;
    }

    .rc-lead-closing {
        font-size: 13px;
    }

    .rc-person {
        padding: 60px 0 80px;
    }

    .rc-person-intro {
        font-size: 15px;
        margin-bottom: 40px;
    }

    .rc-person-intro br {
        display: none;
    }

    .rc-person-row {
        flex-wrap: wrap;
        gap: 20px;
    }

    .rc-person-circle {
        width: 180px;
        height: 180px;
        padding: 14px;
    }

    .rc-person-circle-title {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .rc-person-circle-desc {
        font-size: 13px;
    }

    .rc-beginner {
        padding: 60px 0;
    }

    .rc-curriculum {
        flex-direction: column;
        gap: 20px;
    }

    .rc-curriculum-card {
        padding: 24px 20px;
    }

    .rc-curriculum-title {
        font-size: 18px;
    }

    .rc-curriculum-skills-body h4 {
        font-size: 13px;
    }

    .rc-curriculum-skills-body ul li {
        font-size: 12px;
    }

    .rc-experienced {
        padding: 50px 0;
    }

    .rc-requirements {
        padding: 60px 0;
    }

    .rc-table th,
    .rc-table td {
        display: block;
        width: 100%;
        padding: 10px 0;
    }

    .rc-table th {
        padding-bottom: 0;
        font-size: 14px;
    }

    .rc-table td {
        font-size: 13px;
        padding-top: 4px;
        padding-bottom: 16px;
    }

    .rc-message {
        padding: 60px 0;
    }

    .rc-message-body p {
        font-size: 13px;
    }
}


.ct-form {
    padding: 0 0 100px;
}

.ct-lead {
    margin-bottom: 60px;
}

.ct-lead p {
    font-size: 15px;
    line-height: 2;
    color: var(--text);
    margin-bottom: 8px;
}

.ct-form-wrap {
    max-width: 700px;
    margin: 0 auto;
}

.ct-field {
    display: flex;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.ct-field:first-child {
    border-top: 1px solid var(--border);
}

.ct-field-label {
    width: 200px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    padding-top: 8px;
}

.ct-field-label p {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
}

.ct-req {
    font-size: 13px;
    color: var(--white);
    background: #D85050;
    padding: 1px 8px;
    border-radius: 2px;
    letter-spacing: .05em;
}

.ct-field-input {
    flex: 1;
    margin-left: 40px;
}

.ct-field-input input[type="text"],
.ct-field-input input[type="email"],
.ct-field-input input[type="tel"],
.ct-field-input input[type="url"],
.ct-field-input select,
.ct-field-input textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--white);
    color: var(--text);
    font-family: inherit;
    line-height: 1.6;
    outline: none;
    transition: border-color .2s;
}

.ct-field-input input:focus,
.ct-field-input select:focus,
.ct-field-input textarea:focus {
    border-color: var(--text-sub);
}

.ct-field-input textarea {
    min-height: 140px;
    resize: vertical;
}

.ct-field-input select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.ct-field-input .wpcf7-not-valid-tip {
    font-size: 12px;
    color: #c0392b;
    margin-top: 4px;
}

.ct-privacy {
    margin-top: 40px;
}

.ct-privacy-box {
    border: 1px solid var(--border);
    padding: 24px;
}

.ct-privacy-box h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}

.ct-privacy-scroll {
    max-height: 160px;
    overflow-y: auto;
    padding-right: 12px;
}

.ct-privacy-scroll p {
    font-size: 12px;
    line-height: 1.9;
    color: var(--text);
    margin-bottom: 8px;
}

.ct-privacy-scroll::-webkit-scrollbar {
    width: 4px;
}

.ct-privacy-scroll::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.ct-privacy-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

.ct-privacy-check {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text);
}

.ct-privacy-check .wpcf7-list-item {
    margin: 0;
}

.ct-privacy-check input[type="checkbox"] {
    width: auto;
    margin-right: 6px;
    vertical-align: middle;
}

.ct-submit {
    margin-top: 30px;
    text-align: center;
}

.ct-submit input[type="submit"] {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .1em;
    padding: 14px 60px;
    background: var(--navy);
    color: var(--white);
    border: none;
    cursor: pointer;
    transition: opacity .3s;
    width: auto;
    border-radius: 0;
}

.ct-submit input[type="submit"]:hover {
    opacity: .8;
}

.wpcf7-response-output {
    font-size: 13px;
    text-align: center;
    margin-top: 20px;
    padding: 12px;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
}

.wpcf7 form.invalid .wpcf7-response-output {
    border-color: #c0392b;
}

.wpcf7-spinner {
    display: block;
    margin: 10px auto 0;
}

.nw-archive {
    padding: 80px 0 100px;
}

.nw-cat-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.nw-cat-link {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .06em;
    padding: 8px 28px;
    border-radius: 30px;
    border: 1px solid var(--text-sub);
    color: var(--text-sub);
    background: transparent;
    transition: all .3s;
}

.nw-cat-link:hover {
    opacity: 1;
    background: linear-gradient(90deg, #1c90af, #014190);
    color: var(--white);
}

.nw-cat-link.is-active {
    background: linear-gradient(90deg, #1c90af, #014190);
    color: var(--white);
    border-color: var(--text-sub);
}

.nw-list {
    max-width: 1000px;
    margin: 0 auto;
}

.nw-item {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px 20px;
    border-bottom: 1px solid var(--border);
    transition: background .2s;
}

.nw-item:first-child {
    border-top: 1px solid var(--border);
}

.nw-item:hover {
    opacity: 1;
    background: rgba(39, 91, 148, .03);
}

.nw-date {
    font-family: 'Roboto';
    font-size: 15px;
    color: #0c192d80;
    flex-shrink: 0;
    width: 90px;
}

.nw-cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto';
    font-size: 15px;
    color: var(--white);
    padding: 7px 0;
    line-height: 1;
    border-radius: 22px;
    flex-shrink: 0;
    width: 110px;
    text-align: center;
    background-image: linear-gradient(90deg, #1c90af, #014190);
}

.nw-title {
    flex: 1;
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
}

.nw-empty {
    text-align: center;
    font-size: 15px;
    color: var(--text);
    padding: 60px 0;
}

.nw-pagination {
    margin-top: 50px;
    text-align: center;
}

.nw-pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.nw-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    border: 1px solid var(--border);
    transition: all .2s;
}

.nw-pagination .page-numbers:hover {
    opacity: 1;
    border-color: var(--navy);
    color: var(--navy);
}

.nw-pagination .page-numbers.current {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}

.nw-pagination .prev,
.nw-pagination .next {
    border: none;
    font-size: 16px;
    color: var(--text-sub);
}

.nw-single {
    padding: 80px 0 100px;
}

.nw-single-inner {
    max-width: 800px;
    margin: 0 auto;
}

.nw-single-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 20px;
}

.nw-single-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.nw-single-body {
    font-size: 15px;
    line-height: 2.2;
    color: var(--text);
    margin-bottom: 80px;
}

.nw-single-body p {
    margin-bottom: 20px;
}

.nw-single-body h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-top: 48px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--navy);
}

.nw-single-body h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-top: 36px;
    margin-bottom: 12px;
    padding-left: 14px;
    border-left: 4px solid var(--text-sub);
}

.nw-single-body h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-top: 28px;
    margin-bottom: 10px;
}

.nw-single-body ul,
.nw-single-body ol {
    margin: 16px 0;
    padding-left: 24px;
    list-style: disc;
}

.nw-single-body ol {
    list-style: decimal;
}

.nw-single-body li {
    margin-bottom: 6px;
    line-height: 1.9;
}

.nw-single-body img {
    margin: 24px 0;
    border-radius: 2px;
}

.nw-single-body blockquote {
    margin: 24px 0;
    padding: 20px 24px;
    border-left: 4px solid var(--text-sub);
    background: var(--gray-bg);
    font-size: 14px;
    line-height: 2;
    color: var(--text);
}

.nw-single-body a {
    color: var(--text-sub);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nw-single-nav {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    border-top: 1px solid var(--border);
    padding-top: 40px;
}

.nw-single-nav-item {
    flex: 1;
    text-align: center;
    line-height: 1;
}

.nw-single-nav-item a,
.nw-single-nav-disabled {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--navy);
    transition: opacity .3s;
}

.nw-single-nav-disabled {
    color: var(--border);
    cursor: default;
}

.nw-single-nav-item a:hover {
    opacity: .6;
}

.nw-single-nav-arrow {
    font-size: 16px;
}

.nw-single-nav-prev {
    text-align: left;
}

.nw-single-nav-index {
    text-align: center;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 0 20px;
}

.nw-single-nav-next {
    text-align: right;
}

.single section.page-header {
    height: 300px;
    padding-top: 50px;
    text-align: center;
}
.pc{display:block;}
.sp{display:none;}
@media(max-width:1100px) {
h3.section-heading br {
    display: none;
}
h3.section-heading br.sp {
    display: block;
}
.sp{display:block;}
.pc{display:none;}
    .ct-form {
        padding: 0 0 60px;
    }

    .ct-lead {
        margin-bottom: 40px;
    }

    .ct-lead p {
        font-size: 13px;
    }

    .ct-field {
        flex-direction: column;
        gap: 13px;
        padding: 16px 0;
    }

    .ct-field-label {
        width: 100%;
        padding-top: 0;
        font-size: 13px;
    }

    .ct-field-input {
        margin: 0;
        width: 100%;
    }

    .ct-field-input input[type="text"],
    .ct-field-input input[type="email"],
    .ct-field-input input[type="tel"],
    .ct-field-input input[type="url"],
    .ct-field-input select,
    .ct-field-input textarea {
        font-size: 14px;
        padding: 10px 12px;
    }

    .ct-privacy-box {
        padding: 16px;
    }

    .ct-privacy-box h3 {
        font-size: 14px;
    }

    .ct-submit input[type="submit"] {
        font-size: 14px;
        padding: 12px 50px;
    }

    .nw-archive {
        padding: 50px 0 60px;
    }

    .nw-cat-nav {
        gap: 8px;
        margin-bottom: 30px;
    }

    .nw-cat-link {
        font-size: 12px;
        padding: 5px 18px 3px;
    }

    .nw-item {
        flex-wrap: wrap;
        gap: 0;
        padding: 14px 0;
    }

    .nw-date {
        font-size: 15px;
        width: auto;
        margin-right: 12px;
    }

    .nw-cat {
        font-size: 13px;
        width: auto;
        padding: 7px 12px;
    }

    .nw-title {
        width: 100%;
        flex: none;
        font-size: 16px;
        margin-top: 6px;
    }

    .nw-pagination {
        margin-top: 30px;
    }

    .nw-pagination .page-numbers {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .nw-single {
        padding: 50px 0 60px;
    }

    .nw-single-title {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .nw-single-meta {
        margin-bottom: 30px;
        padding-bottom: 14px;
    }

    .nw-single-body {
        font-size: 14px;
        margin-bottom: 50px;
    }

    .nw-single-body h2 {
        font-size: 18px;
        margin-top: 32px;
    }

    .nw-single-body h3 {
        font-size: 16px;
        margin-top: 24px;
    }

    .nw-single-nav {
        padding-top: 24px;
    }

    .nw-single-nav-item a,
    .nw-single-nav-disabled {
        font-size: 14px;
        line-height: 1;
    }

    .nw-single-nav-index {
        padding: 0 12px;
    }

    .single section.page-header {
        height: 150px;
        padding-top: 30px;
        text-align: center;
    }

    .rc-curriculum-skills-body {
        min-height: unset;
    }

    section.page-header {
        height: 228px;
    }

    section.page-header h1 {
        position: relative;
        z-index: 100;
        font-size: 16px;
    }

    section.page-header h1 span {
        font-size: 33px;
    }

    p.ec {
        right: -50px;
        top: 0;
        height: 250px;
    }
p.ec img{
    height:250px;
}
    section.page-content {
        padding-top: 60px;
        padding-bottom: 60px;
    }
	p.imgbg {
    display: none;
}
section.section.recruit {
    padding-top: 60px;
}
.value-content {
    display: contents;
}

p.mvv-body-main {
    font-size: 17px;
}

p.mvv-body-main br {
    display: none;
}
}

p.mvv-body-main {
    font-size: 19px;
    font-weight: 700;
    color: #0C192D;
    margin-bottom: 15px;
}



.hero{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 12% 18%,rgba(64,132,255,.34) 0%,rgba(64,132,255,.16) 18%,rgba(64,132,255,0) 34%),
radial-gradient(circle at 84% 16%,rgba(134,236,255,.28) 0%,rgba(134,236,255,.12) 16%,rgba(134,236,255,0) 32%),
linear-gradient(135deg,#031022 0%,#07245b 36%,#020a15 100%);
isolation:isolate;
}

.hero-orbit{
position:absolute;
inset:-10%;
pointer-events:none;
animation:none;
transform:none;
}

.hero-layer,
.hero-pulse{
position:absolute;
pointer-events:none;
mix-blend-mode:screen;
will-change:transform,opacity,background-position,filter;
}

.hero-layer-1{inset:-10%;background: radial-gradient(28% 24% at 12% 18%, rgb(142 220 255 / 0%) 0%, rgba(142, 238, 255, .42) 18%, rgba(142, 238, 255, 0) 42%), radial-gradient(32% 26% at 76% 12%, rgb(41 126 255 / 20%) 0%, rgba(41, 126, 255, .36) 22%, rgba(41, 126, 255, 0) 48%), radial-gradient(28% 24% at 70% 72%, rgb(66 198 255 / 19%) 0%, rgba(66, 198, 255, .24) 22%, rgba(66, 198, 255, 0) 46%), radial-gradient(24% 20% at 28% 80%, rgb(12 92 255 / 38%) 0%, rgba(12, 92, 255, .20) 24%, rgba(12, 92, 255, 0) 48%);filter:blur(24px) saturate(190%);opacity:.96;animation: fieldA 6.9s linear infinite alternate;}

.hero-layer-2{inset:-14%;background: repeating-linear-gradient(118deg, rgba(255, 255, 255, 0) 0 24px, rgb(142 234 255 / 0%) 24px 38px, rgba(255, 255, 255, 0) 38px 82px), repeating-linear-gradient(-62deg, rgba(255, 255, 255, 0) 0 30px, rgba(48, 142, 255, .13) 30px 46px, rgba(255, 255, 255, 0) 46px 96px);background-size: 26%;filter: blur(100px) saturate(185%);opacity:.62;animation: fieldB 5s linear infinite alternate,scanA 10.8s linear infinite;}

.hero-layer-3{inset:-12%;background:
repeating-radial-gradient(circle at 50% 50%,rgba(156,240,255,.18) 0 12px,rgba(255,255,255,0) 12px 44px,rgba(40,126,255,.12) 44px 60px,rgba(255,255,255,0) 60px 108px);background-size:118% 118%;filter: blur(26px) saturate(175%);opacity:.54;animation: fieldC 3.4s linear infinite alternate, scanB 2.2s linear infinite;}

.hero-pulse{
border-radius:999px;
}

.hero-pulse-1{width:92vw;height:18vw;left:-14%;top:4%;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(160, 240, 255, .18) 18%, rgba(34, 118, 255, .34) 48%, rgb(160 240 255 / 84%) 72%, rgba(255, 255, 255, 0) 100%);filter:blur(16px) saturate(180%);opacity:.50;animation: waveA 4.8s linear infinite alternate;}

.hero-pulse-2{width:86vw;height:16vw;right:-18%;top:28%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(150,234,255,.18) 16%,rgba(28,106,255,.30) 46%,rgba(150,234,255,.14) 70%,rgba(255,255,255,0) 100%);filter:blur(16px) saturate(176%);opacity:.46;animation: waveB 5s linear infinite alternate;}

.hero-pulse-3{width:78vw;height:18vw;left:8%;bottom:-2%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(176,244,255,.16) 16%,rgba(52,144,255,.28) 44%,rgba(176,244,255,.12) 66%,rgba(255,255,255,0) 100%);filter:blur(18px) saturate(172%);opacity:.40;animation: waveC 4.7s linear infinite alternate;}

.hero::before,
.hero::after{
content:'';
position:absolute;
inset:-12%;
pointer-events:none;
mix-blend-mode:screen;
will-change:transform,opacity,background-position,filter;
z-index:0;
}

.hero::before{
background:
repeating-linear-gradient(140deg,rgba(255,255,255,0) 0 28px,rgba(120,224,255,.10) 28px 40px,rgba(255,255,255,0) 40px 96px),
repeating-linear-gradient(-40deg,rgba(255,255,255,0) 0 24px,rgba(40,126,255,.08) 24px 34px,rgba(255,255,255,0) 34px 88px);
filter:blur(10px) saturate(170%);
opacity:.34;
animation:gridShift 1.6s linear infinite;
}

.hero::after{
background:
radial-gradient(22% 18% at 18% 24%,rgba(188,248,255,.18) 0%,rgba(188,248,255,0) 64%),
radial-gradient(20% 16% at 82% 20%,rgba(132,228,255,.16) 0%,rgba(132,228,255,0) 62%),
radial-gradient(22% 18% at 60% 76%,rgba(54,148,255,.16) 0%,rgba(54,148,255,0) 66%);
filter:blur(26px) saturate(170%);
opacity:.46;
animation:flickerField 2.2s linear infinite alternate;
}

.hero-img{
position:relative;
z-index:1;
}

.hero-overlay{
position:absolute;
inset:0;
z-index:2;
background:linear-gradient(90deg,rgba(2,8,20,.44) 0%,rgba(2,8,20,.20) 28%,rgba(2,8,20,.06) 52%,rgba(2,8,20,.14) 100%);
}

.hero-content{position: absolute;z-index:3;}

@keyframes fieldA{
0%{transform:translate3d(-6%,-4%,0) scale(1.04) rotate(-4deg);}
12%{transform:translate3d(4%,-8%,0) scale(1.12) rotate(3deg);}
24%{transform:translate3d(8%,-1%,0) scale(1.08) rotate(7deg);}
36%{transform:translate3d(-2%,5%,0) scale(1.14) rotate(-2deg);}
48%{transform:translate3d(-7%,2%,0) scale(1.06) rotate(-6deg);}
62%{transform:translate3d(5%,7%,0) scale(1.12) rotate(4deg);}
78%{transform:translate3d(2%,-5%,0) scale(1.09) rotate(8deg);}
100%{transform:translate3d(-5%,3%,0) scale(1.11) rotate(-3deg);}
}

@keyframes fieldB{
0%{transform:translate3d(3%,-2%,0) scale(1.00) rotate(2deg);opacity:.50;}
14%{transform:translate3d(-5%,4%,0) scale(1.06) rotate(-4deg);opacity:.68;}
28%{transform:translate3d(6%,6%,0) scale(1.02) rotate(6deg);opacity:.58;}
42%{transform:translate3d(8%,-3%,0) scale(1.08) rotate(1deg);opacity:.70;}
56%{transform:translate3d(-2%,-6%,0) scale(1.04) rotate(-7deg);opacity:.54;}
72%{transform:translate3d(-7%,2%,0) scale(1.09) rotate(3deg);opacity:.66;}
86%{transform:translate3d(4%,5%,0) scale(1.03) rotate(-2deg);opacity:.56;}
100%{transform:translate3d(-3%,-2%,0) scale(1.07) rotate(5deg);opacity:.64;}
}

@keyframes fieldC{
0%{transform:translate3d(-3%,3%,0) scale(.98) rotate(-2deg);opacity:.40;}
16%{transform:translate3d(6%,-4%,0) scale(1.06) rotate(4deg);opacity:.62;}
32%{transform:translate3d(-6%,-1%,0) scale(1.02) rotate(-5deg);opacity:.48;}
48%{transform:translate3d(4%,6%,0) scale(1.08) rotate(2deg);opacity:.66;}
64%{transform:translate3d(8%,-3%,0) scale(1.03) rotate(7deg);opacity:.46;}
82%{transform:translate3d(-4%,5%,0) scale(1.07) rotate(-3deg);opacity:.60;}
100%{transform:translate3d(3%,-4%,0) scale(1.01) rotate(4deg);opacity:.52;}
}

@keyframes scanA{
0%{background-position:0% 0%,0% 0%;}
20%{background-position:12% -8%,-8% 6%;}
40%{background-position:-10% 12%,8% -10%;}
60%{background-position:14% 6%,-12% -4%;}
80%{background-position:-6% -12%,10% 14%;}
100%{background-position:8% 10%,-8% -8%;}
}

@keyframes scanB{
0%{background-position:50% 50%;}
18%{background-position:42% 54%;}
36%{background-position:58% 44%;}
54%{background-position:46% 40%;}
72%{background-position:60% 56%;}
100%{background-position:48% 52%;}
}

@keyframes waveA{
0%{transform:translate3d(-10%,-4%,0) scaleX(.90) scaleY(.88) rotate(-14deg);opacity:.22;}
20%{transform:translate3d(-2%,2%,0) scaleX(1.04) scaleY(.98) rotate(-8deg);opacity:.60;}
40%{transform:translate3d(6%,-1%,0) scaleX(.96) scaleY(1.02) rotate(-16deg);opacity:.34;}
60%{transform:translate3d(10%,4%,0) scaleX(1.14) scaleY(1.08) rotate(-7deg);opacity:.64;}
80%{transform:translate3d(3%,-3%,0) scaleX(.98) scaleY(.94) rotate(-12deg);opacity:.40;}
100%{transform:translate3d(12%,5%,0) scaleX(1.16) scaleY(1.10) rotate(-6deg);opacity:.58;}
}

@keyframes waveB{
0%{transform:translate3d(10%,-3%,0) scaleX(.92) scaleY(.90) rotate(16deg);opacity:.18;}
22%{transform:translate3d(4%,4%,0) scaleX(1.08) scaleY(.96) rotate(10deg);opacity:.54;}
44%{transform:translate3d(-4%,1%,0) scaleX(.98) scaleY(1.02) rotate(18deg);opacity:.30;}
66%{transform:translate3d(-10%,6%,0) scaleX(1.12) scaleY(1.06) rotate(8deg);opacity:.56;}
84%{transform:translate3d(-3%,-2%,0) scaleX(.96) scaleY(.92) rotate(14deg);opacity:.34;}
100%{transform:translate3d(-12%,5%,0) scaleX(1.14) scaleY(1.08) rotate(6deg);opacity:.52;}
}

@keyframes waveC{
0%{transform:translate3d(-6%,6%,0) scaleX(.90) scaleY(.94) rotate(-8deg);opacity:.16;}
20%{transform:translate3d(0%,2%,0) scaleX(1.06) scaleY(1.02) rotate(-2deg);opacity:.44;}
42%{transform:translate3d(6%,-4%,0) scaleX(.98) scaleY(.96) rotate(-10deg);opacity:.24;}
66%{transform:translate3d(10%,-7%,0) scaleX(1.14) scaleY(1.08) rotate(4deg);opacity:.48;}
84%{transform:translate3d(2%,-1%,0) scaleX(.96) scaleY(.94) rotate(-6deg);opacity:.28;}
100%{transform:translate3d(12%,-8%,0) scaleX(1.16) scaleY(1.10) rotate(6deg);opacity:.42;}
}

@keyframes gridShift{
0%{transform:translate3d(-2%,-1%,0);opacity:.22;background-position:0% 0%,0% 0%;}
25%{transform:translate3d(2%,-2%,0);opacity:.42;background-position:8% -6%,-6% 4%;}
50%{transform:translate3d(-3%,3%,0);opacity:.28;background-position:-10% 8%,10% -8%;}
75%{transform:translate3d(3%,1%,0);opacity:.40;background-position:12% 4%,-8% 10%;}
100%{transform:translate3d(-1%,-2%,0);opacity:.26;background-position:-6% -8%,6% 8%;}
}

@keyframes flickerField{
0%{transform:translate3d(-2%,-1%,0) scale(1.00);opacity:.30;}
20%{transform:translate3d(4%,2%,0) scale(1.04);opacity:.56;}
38%{transform:translate3d(-3%,4%,0) scale(1.02);opacity:.34;}
56%{transform:translate3d(2%,-3%,0) scale(1.06);opacity:.62;}
74%{transform:translate3d(-4%,1%,0) scale(1.01);opacity:.40;}
100%{transform:translate3d(3%,-2%,0) scale(1.05);opacity:.58;}
}

@media screen and (max-width:767px){
.hero-layer-1{
filter:blur(18px) saturate(175%);
opacity:.88;
}
.hero-layer-2{
filter:blur(10px) saturate(170%);
opacity:.50;
}
.hero-layer-3{
filter:blur(14px) saturate(165%);
opacity:.42;
}
.hero-pulse-1,
.hero-pulse-2,
.hero-pulse-3{
height:28vw;
filter:blur(12px) saturate(165%);
}
.hero::before{
opacity:.24;
}
.hero::after{
opacity:.34;
}
}

@media screen and (max-width: 1100px){
.hero::before{filter: blur(20px) saturate(120%);opacity:.56;}
.hero::after{
filter:blur(22px);
opacity:.34;
}
.hero-layer-1,
.hero-layer-2{
width:92vw;
height:92vw;
min-width:0;
min-height:0;
}
.hero-layer-3{
width:120vw;
height:78vw;
min-width:0;
min-height:0;
left:-6%;
bottom:-8%;
}
.hero-pulse-1,
.hero-pulse-2,
.hero-pulse-3{
width:130vw;
height:30vw;
min-height:0;
filter:blur(20px) saturate(145%);
}
.hero-pulse-1{
left:-28%;
top:6%;
}
.hero-pulse-2{
right:-34%;
top:28%;
}
.hero-pulse-3{
left:-8%;
bottom:0;
}
}

p.imgbg {
    position: absolute;
    right: 0;
    top: -20px;
}

p.imgbg img {
    max-height: 530px;
    width: auto;
}
.kirarin,
.en-kirarin,
.section-label span:not(.slash){
display:inline-block;
opacity:0;
transform:translateX(20%);
letter-spacing:.1em;
--kirarin-base:var(--navy);
--kirarin-shine:#4a9ec0;
--kirarin-shine-soft:#b8e6f5;
--kirarin-end-bg:linear-gradient(90deg,var(--kirarin-base) 0%,var(--kirarin-base) 100%);
background-image:linear-gradient(90deg,
var(--kirarin-base) 0%,
var(--kirarin-base) 28%,
var(--kirarin-shine) 36%,
#ffffff 44%,
var(--kirarin-shine-soft) 50%,
var(--kirarin-shine) 58%,
var(--kirarin-base) 68%,
var(--kirarin-base) 100%);
background-size:330%;
background-position:100% 0;
background-repeat:no-repeat;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
-webkit-clip-path:inset(0 100% 0 0);
clip-path:inset(0 100% 0 0);
transition:
opacity .8s ease-out,
transform 1.03s cubic-bezier(.12,.21,.21,.93),
letter-spacing 1.1s cubic-bezier(.23,.46,.07,.73),
background-position 2s cubic-bezier(.3,.4,.31,.88) .8s,
clip-path 1.03s cubic-bezier(.12,.21,.21,.93);
}

.color-white .kirarin,
.color-white .en-kirarin,
.color-white .section-label span:not(.slash),
.rc-person .kirarin,
.rc-person .en-kirarin,
.rc-person .section-label span:not(.slash){
--kirarin-base:var(--white);
--kirarin-shine:#d8f5ff;
--kirarin-shine-soft:#ffffff;
--kirarin-end-bg:linear-gradient(90deg,var(--white) 0%,var(--white) 100%);
}

.kirarin.is-kirarin,
.en-kirarin.is-kirarin,
.section-label span:not(.slash).is-kirarin{
opacity:1;
transform:translateX(0);
letter-spacing:0;
background-position:0 0;
-webkit-clip-path:inset(0);
clip-path:inset(0);
}

.kirarin.kirarin-done,
.en-kirarin.kirarin-done,
.section-label span:not(.slash).kirarin-done{
opacity:1 !important;
transform:none !important;
letter-spacing:0 !important;
background-image:var(--kirarin-end-bg) !important;
background-size:100% 100% !important;
background-position:0 0 !important;
background-repeat:no-repeat !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important;
-webkit-clip-path:inset(0) !important;
clip-path:inset(0) !important;
}
.fade-in {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: opacity 600ms ease, transform 600ms ease;
    will-change: opacity, transform;
}
 
.fade-in.is-shown {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}