/*FONT
- 日本語見出し: "Zen Kaku Gothic Antique" → .ff-kaku
- 英字見出し: "Syncopate" R/B (400/700) → .ff-syncopate
- 本文テキスト: "Noto Sans JP" M/R (500/400) → body default
- トップ キャッチコピー: "Shippori Mincho B1" → .ff-mincho
*/
.ff-kaku {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
}

.ff-syncopate {
    font-family: "Syncopate", sans-serif;
}

.ff-mincho {
    font-family: "Shippori Mincho B1", serif;
}

/*LAYOUT NOTE
- Design canvas: 1480px. Content containers: .container (1200) / .container-1100 / .container-1000
- Elements placed on the 1480 canvas use calc(50% ± Npx) so they stay centered on any screen width
*/

/*COMPONENT: ARROW ICON
- .icon-arrow: navy box + white arrow (default)
- .icon-arrow-white: white box + blue arrow
- .icon-arrow-magenta: magenta box + white arrow
- .icon-arrow-blue: bright blue box + white arrow
- .icon-arrow-prev: left arrow
- Size: override width/height/background-size where used
*/
.icon-arrow {
    display: inline-block;
    flex-shrink: 0;
    width: 53px;
    height: 26px;
    padding: 0;
    border: 0;
    background: #1D4482 url(../img/index/arrow-right.svg) no-repeat center / 26px auto;
    cursor: pointer;
    transition: .3s;
}

.icon-arrow-prev {
    background-image: url(../img/index/arrow-left.svg);
}

.icon-arrow-white {
    background-color: #fff;
    background-image: url(../img/index/arrow-right-blue.svg);
}

.icon-arrow-white.icon-arrow-prev {
    background-image: url(../img/index/arrow-left-blue.svg);
}

.icon-arrow-magenta {
    background-color: #9E005D;
}

.icon-arrow-blue {
    background-color: #0071BC;
}

button.icon-arrow:hover,
a:hover > .icon-arrow,
a:hover .icon-arrow {
    background-color: #9E005D;
}

a:hover .icon-arrow-white {
    background-color: #fff;
}

a:hover .icon-arrow-magenta {
    background-color: #1D4482;
}

/*COMPONENT: BLOCK TITLE (EN + JA)*/
.block-title-en {
    margin: 0;
    color: #1D4482;
    font-family: "Syncopate", sans-serif;
    font-size: 8rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
}

.block-title-ja {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 20px 0 0;
    color: #1D4482;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.block-title-ja::before {
    content: "";
    flex-shrink: 0;
    width: 21px;
    height: 22px;
    background: url(../img/index/title-jp-blue.png) no-repeat center / contain;
}

.block-title-white .block-title-en,
.block-title-white .block-title-ja {
    color: #fff;
}

.block-title-white .block-title-ja::before {
    background-image: url(../img/index/title-jp-white.png);
}

.block-title-blue .block-title-en,
.block-title-blue .block-title-ja {
    color: #0071BC;
}

/* no bright-blue image: recolor the navy icon via mask */
.block-title-blue .block-title-ja::before {
    background: #0071BC;
    -webkit-mask: url(../img/index/title-jp-blue.png) no-repeat center / contain;
    mask: url(../img/index/title-jp-blue.png) no-repeat center / contain;
}

.block-title-center {
    text-align: center;
}

.block-title-center .block-title-ja {
    justify-content: center;
}

/*COMPONENT: CARD FEATURE (image + centered title + arrow)*/
.card-feature {
    position: relative;
    display: block;
}

a.card-feature:hover {
    opacity: 1;
}

.card-feature-img {
    display: block;
    width: 100%;
}

.card-feature-text {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    transform: translate(-50%, -50%);
    text-align: center;
}

.card-feature-title {
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.5;
    white-space: nowrap;
}

.card-feature .icon-arrow {
    width: 78px;
    height: 41px;
    background-size: 30px auto;
}

/* hover: white box -> navy box + white arrow */
a.card-feature:hover .icon-arrow-white {
    background-color: #1D4482;
    background-image: url(../img/index/arrow-right.svg);
}

/*COMPONENT: CARD LINK (image left + title + arrow bottom right)*/
.card-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 45px;
    padding: 18px;
    background-color: #fff;
    box-shadow: 6px 6px 17px rgba(9, 42, 94, 0.12);
}

a.card-link:hover {
    opacity: 1;
}

.card-link-img {
    flex-shrink: 0;
    width: 211px;
    overflow: hidden;
}

.card-link-img img {
    display: block;
    width: 100%;
    transition: .5s;
}

.card-link:hover .card-link-img img {
    transform: scale(1.05);
}

.card-link-title {
    color: #1D4482;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

.card-link .icon-arrow {
    position: absolute;
    right: 35px;
    bottom: 28px;
}

/*COMPONENT: BUTTON VIEW MORE*/
.btn-view-more {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 299px;
    height: 67px;
    padding: 0 22px 0 28px;
    border: 1px solid #9FB0D6;
    border-radius: 4px;
    background-color: #fff;
    color: #1D4482;
    font-family: "Syncopate", sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    text-transform: lowercase;
}

/* hover: light blue box + navy border */
.btn-view-more:hover {
    border-color: #1D4482;
    background-color: #E6EEF8;
    color: #1D4482;
    opacity: 1 !important;
}

.btn-view-more:hover .icon-arrow {
    background-color: #1D4482;
}

/*COMPONENT: SLIDER LOOP (continuous marquee, init in custom.js)*/
.slider-loop {
    overflow: hidden;
}

.slider-loop-item {
    width: 303px;
    margin-right: 16px;
}

.slider-loop-item img {
    display: block;
    width: 100%;
}

/* .slider-loop-sm: smaller items with narrow gap */
.slider-loop-sm .slider-loop-item {
    width: 261px;
    margin-right: 8px;
}

/*COMPONENT: CARD NUM (number | title with underline + text + arrow; the photo of .media-row overlaps its right side)*/
.card-num {
    position: relative;
    display: block;
    width: 578px;
    min-height: 283px;
    padding: 40px 158px 30px 40px;
    background-color: rgba(255, 255, 255, 0.7);
}

a.card-num:hover {
    opacity: 1;
}

.card-num-head {
    display: flex;
    align-items: center;
    padding-bottom: 23px;
    border-bottom: 1px solid #1D4482;
}

.card-num-no {
    flex-shrink: 0;
    padding-right: 32px;
    border-right: 1px solid #1D4482;
    color: #1D4482;
    font-family: "Syncopate", sans-serif;
    font-size: 4.8rem;
    line-height: 65px;
}

.card-num-title {
    padding-left: 22px;
    color: #1D4482;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.card-num-text {
    display: block;
    margin-top: 22px;
    color: #1D4482;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 27px;
}

/* arrow sits on the left edge of the photo */
.card-num .icon-arrow {
    position: absolute;
    top: 57px;
    left: 426px;
    z-index: 2;
    width: 70px;
    height: 36px;
    background-size: 28px auto;
}

/*COMPONENT: MEDIA ROW (card + photo overlapping it; .media-row-reverse = card right, photo left)*/
.media-row {
    position: relative;
}

.media-row-img {
    position: absolute;
    top: 21px;
    left: 468px;
    z-index: 1;
    width: 521px;
}

.media-row-img img {
    display: block;
    width: 100%;
}

.media-row-reverse .card-num {
    margin-left: auto;
    padding: 40px 50px 30px 160px;
}

.media-row-reverse .card-num .icon-arrow {
    top: 53px;
    left: 65px;
}

.media-row-reverse .media-row-img {
    top: 23px;
    left: 210px;
}

/*COMPONENT: LABEL VERTICAL (department tag)*/
.label-vertical {
    display: inline-block;
    padding: 9px 5px;
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    writing-mode: vertical-rl;
}

.label-purple { background-color: #8A5C9E; }
.label-green { background-color: #00965E; }
.label-orange { background-color: #D9730D; }
.label-teal { background-color: #1A9A9A; }
.label-blue { background-color: #3B6BC4; }

/*COMPONENT: CARD INTERVIEW (used in .slider-interview)*/
.card-interview {
    display: block;
}

a.card-interview:hover {
    opacity: 1;
}

.card-interview-img {
    position: relative;
    display: block;
}

.card-interview-img img {
    display: block;
    width: 100%;
}

.card-interview-img .label-vertical {
    position: absolute;
    top: -17px;
    right: 13px;
}

.card-interview-catch {
    position: absolute;
    top: 33px;
    left: -21px;
    display: flex;
    flex-direction: row-reverse;
    gap: 9px;
}

.card-interview-catch span {
    padding: 7px 3px;
    background-color: #fff;
    color: #1D4482;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    writing-mode: vertical-rl;
}

.card-interview-info {
    position: relative;
    display: block;
    margin-top: 28px;
    padding-bottom: 17px;
    border-bottom: 2px solid #1D4482;
    color: #1D4482;
}

.card-interview-name {
    display: block;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.card-interview-name small {
    margin-left: 9px;
    font-size: 1.3rem;
}

.card-interview-office {
    display: block;
    margin-top: 9px;
    font-size: 1.4rem;
    font-weight: 500;
}

.card-interview-info .icon-arrow {
    position: absolute;
    right: 13px;
    bottom: 22px;
    width: 56px;
    height: 28px;
}

/*COMPONENT: SLIDER INTERVIEW (slick centerMode, position classes set in custom.js)
- .is-pos-0: center / .is-pos-1: next to center / .is-pos-2: outer
*/
/* fixed height = center card (largest) so the section below does not jump while cards resize */
.slider-interview .slick-list {
    overflow: visible;
    height: 559px;
}

.slider-interview-item {
    width: 395px;
    transition: transform .5s;
}

.slider-interview-item .card-interview {
    width: 281px;
    margin: 0 auto;
    transition: width .5s;
}

.slider-interview-item.is-pos-0 .card-interview {
    width: 362px;
}

.slider-interview-item.is-pos-1 {
    transform: translateY(121px);
}

.slider-interview-item.is-pos-2 {
    transform: translateY(183px);
}

.slider-interview-item .card-interview-catch,
.slider-interview-item .card-interview-info {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s, visibility .5s;
}

.slider-interview-item.is-pos-0 .card-interview-catch,
.slider-interview-item.is-pos-0 .card-interview-info {
    opacity: 1;
    visibility: visible;
}

/*COMPONENT: SLIDER PROGRESS (bar width/left set in custom.js)*/
.slider-progress {
    position: relative;
    height: 2px;
    background-color: #DADDE3;
}

.slider-progress-bar {
    position: absolute;
    top: -1px;
    left: 0;
    height: 4px;
    background-color: #9E005D;
    transition: left .5s;
}

/*COMPONENT: BOX LEAD (white text box with offset white layer behind)*/
.box-lead {
    position: relative;
    z-index: 0;
    padding: 30px 24px 32px 49px;
    background-color: #fff;
}

.box-lead::before {
    content: "";
    position: absolute;
    top: 77px;
    left: -67px;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: -1;
}

.box-lead p {
    margin: 0;
    text-align: justify;
    color: #1D4482;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 2.35;
}

/* .box-lead-top: offset layer sticks out above the right side */
.box-lead-top::before {
    top: -26px;
    left: 239px;
    bottom: 0;
}

/*COMPONENT: CARD ICON LINK (icon + title + arrow in a bordered box)*/
.card-icon-link {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 467px;
    height: 109px;
    padding: 0 28px;
    border: 1px solid #9FB0D6;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 6px 17px rgba(9, 42, 94, 0.12);
    color: #1D4482;
}

/* hover: light blue box + navy border */
a.card-icon-link:hover {
    opacity: 1;
    border-color: #1D4482;
    background-color: #E6EEF8;
}

a.card-icon-link:hover .icon-arrow {
    background-color: #1D4482;
}

.card-icon-link-icon {
    flex-shrink: 0;
    width: 61px;
}

.card-icon-link-title {
    flex: 1;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/*COMPONENT: BUTTON CIRCLE (icon + text + arrow)*/
.btn-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 265px;
    height: 265px;
    border-radius: 50%;
    background-color: #0071BC;
    box-shadow: 0 11px 26px rgba(0, 61, 120, 0.25);
    color: #fff;
    text-align: center;
    transition: .3s;
}

/* hover: white circle + blue border, blue icon / text (2nd icon img swaps in) */
a.btn-circle:hover {
    opacity: 1;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #0071BC, 0 11px 26px rgba(0, 61, 120, 0.25);
    color: #0071BC;
}

.btn-circle-icon-hover,
a.btn-circle:hover .btn-circle-icon {
    display: none;
}

a.btn-circle:hover .btn-circle-icon-hover {
    display: block;
}

.btn-circle-icon {
    width: 70px;
}

.btn-circle-text {
    margin-top: 13px;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.btn-circle .icon-arrow {
    margin-top: 17px;
    width: 55px;
}

a.btn-circle:hover .icon-arrow-white {
    background-color: #0071BC;
    background-image: url(../img/index/arrow-right.svg);
}

/*COMPONENT: LINK GRID (row of equal link boxes, .is-active = filled)*/
.link-grid {
    display: flex;
    border: 1px solid #0071BC;
    background-color: #fff;
}

.link-grid-item {
    position: relative;
    flex: 1;
    min-height: 139px;
    padding: 26px 24px 54px;
    color: #0071BC;
    transition: .3s;
}

.link-grid-item + .link-grid-item {
    border-left: 1px solid #0071BC;
}

.link-grid-item.is-active,
.link-grid-item:hover {
    background-color: #0071BC;
    color: #fff;
    opacity: 1 !important;
}

.link-grid-title {
    display: block;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.link-grid-item .icon-arrow {
    position: absolute;
    right: 26px;
    bottom: 24px;
    width: 49px;
    height: 24px;
    background-size: 20px auto;
}

.link-grid-item:hover .icon-arrow-blue {
    background-color: #fff;
    background-image: url(../img/index/arrow-right-blue.svg);
}

/*COMPONENT: NEWS TAB CARD (tab label + date/tag/text box)
- default: magenta / .news-tab-card-navy: navy
*/
.news-tab-card {
    --tab-color: #9E005D;
    --tab-bg: #F7E9F1;
}

.news-tab-card-navy {
    --tab-color: #1D4482;
    --tab-bg: #E0E9F5;
}

.news-tab-card-label {
    display: inline-block;
    margin: 0;
    padding: 9px 33px 7px;
    border-radius: 6px 6px 0 0;
    background-color: var(--tab-color);
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.news-tab-card-body {
    display: block;
    min-height: 121px;
    padding: 24px 35px;
    border: 1px solid var(--tab-color);
    border-radius: 0 9px 9px 9px;
    background-color: var(--tab-bg);
}

a.news-tab-card-body:hover {
    opacity: 0.7;
}

.news-tab-card-meta {
    display: flex;
    align-items: center;
    gap: 22px;
}

.news-tab-card-date {
    color: var(--tab-color);
    font-family: "Syncopate", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.news-tab-card-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 121px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--tab-color);
    background-color: #fff;
    color: var(--tab-color);
    font-size: 1.3rem;
    font-weight: 700;
}

.news-tab-card-text {
    display: block;
    margin-top: 13px;
    color: #1D4482;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/*COMPONENT: BANNER INSTAGRAM*/
.banner-insta {
    display: flex;
    height: 172px;
    border: 1px solid #9E005D;
    background-color: #fff;
}

a.banner-insta:hover {
    opacity: 0.8;
}

.banner-insta-body {
    flex: 1;
    padding: 30px 0 0 37px;
}

.banner-insta-head {
    display: flex;
    align-items: center;
    gap: 15px;
}

.banner-insta-logo {
    width: 49px;
}

.banner-insta-title {
    color: #9E005D;
    font-family: "Syncopate", sans-serif;
    font-size: 3.9rem;
    line-height: 1;
}

.banner-insta-head .icon-arrow {
    margin-left: 9px;
    width: 49px;
    height: 24px;
    background-size: 20px auto;
}

.banner-insta-text {
    display: block;
    margin: 15px 0 0 64px;
    color: #1D4482;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

.banner-insta-img {
    flex-shrink: 0;
    width: 493px;
}

.banner-insta-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .block-title-right: right aligned title */
.block-title-right {
    text-align: right;
}

.block-title-right .block-title-ja {
    justify-content: flex-end;
}

/*COMPONENT: SUB VISUAL (sub page hero: gradient bg + photo + title)*/
.sub-visual {
    position: relative;
    height: 490px;
    overflow: hidden;
    background: linear-gradient(100deg, #0A4C9A 0%, #2D74BE 32%, #A8C7E9 66%, #E4EEF8 100%);
}

.sub-visual-bg {
    position: absolute;
    top: 0;
    left: calc(50% - 740px);
    width: 1481px;
    pointer-events: none;
}

.sub-visual-bg img {
    display: block;
    width: 100%;
}

.sub-visual-title {
    position: absolute;
    top: 272px;
    right: calc(50% - 650px);
}

.sub-visual-title .block-title-en {
    font-size: 8.8rem;
}

/*COMPONENT: PAGE BREADCRUMB*/
.page-breadcrumb {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    color: #666;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.page-breadcrumb li + li::before {
    content: ">";
    margin-right: 6px;
}

.page-breadcrumb a {
    color: #1D4482;
    font-weight: 700;
    text-decoration: underline;
}

/*COMPONENT: ANCHOR LIST (in-page links with magenta arrow icon)*/
.anchor-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 55px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.anchor-list-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #1D4482;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.anchor-list-item::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: url(../img/about/arrow-right.png) no-repeat center / contain;
}

/*COMPONENT: TITLE BAR (gradient bar + EN small + JA heading, full width underline)*/
.title-bar {
    border-bottom: 1px solid #DADADA;
}

.title-bar-inner {
    position: relative;
    padding: 0 0 16px 50px;
}

.title-bar-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 23px;
    height: 74px;
    background: linear-gradient(to bottom, #0071BC 0%, #E1F0FA 100%);
}

.title-bar-en {
    margin: 0;
    color: #9CC3E6;
    font-family: "Syncopate", sans-serif;
    font-size: 1.6rem;
    line-height: 1;
}

.title-bar-ja {
    margin: 10px 0 0;
    color: #333;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/*COMPONENT: BIZ BLOCK (colored band: EN title + head + card grid + corner photo)
- default colors = semiconductor / .biz-block-sustain overrides them
*/
.biz-block {
    --biz-bg: #E3EEF8;
    --biz-en: #2F57A8;
    --biz-accent: #1D4482;
    --biz-card-title: #4077BE;
    position: relative;
    z-index: 0;
    padding: 56px 0 49px;
    background-color: var(--biz-bg);
}

.biz-block-sustain {
    --biz-bg: #E2F3EF;
    --biz-en: #2EB5A2;
    --biz-accent: #1A9A8A;
    --biz-card-title: #29AFA1;
}

.biz-block-en {
    position: absolute;
    top: -22px;
    right: calc(50% - 600px);
    margin: 0;
    color: var(--biz-en);
    font-family: "Syncopate", sans-serif;
    font-size: 5rem;
    line-height: 1;
}

.biz-block-bg {
    position: absolute;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
}

.biz-block-bg img {
    display: block;
    width: 100%;
}

.biz-block-semi .biz-block-bg {
    left: calc(50% - 740px);
    width: 831px;
}

.biz-block-sustain .biz-block-bg {
    left: calc(50% - 92px);
    width: 832px;
}

.biz-block-head {
    display: flex;
    align-items: flex-start;
}

.biz-block-head-left {
    flex-shrink: 0;
    width: 497px;
}

.biz-block-label {
    margin: 0;
    color: #333;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.biz-block-title {
    margin: 10px 0 0;
    color: #333;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.biz-block-head .btn-view-more {
    margin-top: 40px;
}

.biz-block .btn-view-more .icon-arrow {
    background-color: var(--biz-accent);
}

.biz-block-head-right {
    margin-top: 58px;
}

.biz-block-lead {
    margin: 0;
    color: #222;
    font-family: "Shippori Mincho B1", serif;
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

.biz-block-text {
    margin: 22px 0 0;
    color: #333;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 2.1;
}

.biz-block-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 45px;
}

/*COMPONENT: CARD BIZ (icon + title + text, title color from .biz-block)*/
.card-biz {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 161px;
    padding: 22px 22px 22px 14px;
    background-color: #fff;
    box-shadow: 4px 4px 12px rgba(9, 42, 94, 0.12);
}

.card-biz-icon {
    flex-shrink: 0;
    width: 96px;
    text-align: center;
}

.card-biz-icon img {
    max-width: 78px;
    max-height: 72px;
}

.card-biz-title {
    margin: 0;
    color: var(--biz-card-title, #4077BE);
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.card-biz-text {
    margin: 8px 0 0;
    color: #1D4482;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.75;
}

/*COMPONENT: SECTION LINE (decorative line from the screen edge at the top of a section)
- .section-line-right / .section-line-left: side / .section-line-navy: color (default magenta)
*/
.section-line {
    position: absolute;
    top: 0;
    height: 2px;
    background-color: #9E005D;
}

.section-line-right {
    right: 0;
    width: calc(50% - 248px);
}

/* .section-line-left: from the left edge to 499px on the 1480 canvas */
.section-line-left {
    left: 0;
    width: calc(50% - 241px);
}

.section-line-navy {
    background-color: #1D4482;
}

/*COMPONENT: DATA GRID (rows of infographic cards, widths come from each SVG)*/
.data-grid {
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.data-grid-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.data-grid-item {
    display: block;
    max-width: none;
}

/*COMPONENT: BOX WELFARE (heart icon + title + 3 column item list)*/
.box-welfare {
    position: relative;
    padding: 58px 49px 50px 58px;
    border: 2px solid #E7A6C8;
    border-radius: 9px;
    background-color: #F6E6EF;
    text-align: center;
}

.box-welfare-heart {
    position: absolute;
    top: -22px;
    left: 50%;
    width: 54px;
    transform: translateX(-50%);
}

.box-welfare-title {
    margin: 0;
    color: #9E005D;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.box-welfare-sub {
    margin: 12px 0 0;
    color: #333;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.box-welfare-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 18px;
    margin-top: 32px;
    text-align: left;
}

.box-welfare-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 170px;
    padding: 29px 18px 20px 24px;
    border-radius: 9px;
    background-color: #fff;
    box-shadow: 3px 3px 10px rgba(158, 0, 93, 0.12);
}

.box-welfare-icon {
    flex-shrink: 0;
    width: 72px;
    text-align: center;
}

.box-welfare-icon img {
    max-width: 72px;
    max-height: 72px;
}

.box-welfare-item-title {
    margin: 0;
    color: #9E005D;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.45;
}

.box-welfare-item-text {
    margin: 10px 0 0;
    color: #333;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.7;
}

/*COMPONENT: ADVANTAGE ITEM (photo + number + mincho heading + text, lines above/below heading)
- default: photo left / .advantage-item-reverse: photo right
- positions are relative to .container (1200)
*/
.advantage-item {
    position: relative;
    height: 563px;
}

.advantage-item::before,
.advantage-item::after {
    content: "";
    position: absolute;
    height: 1px;
    background-color: #333;
}

/* line above heading */
.advantage-item::before {
    top: 0;
    left: 264px;
    right: 50px;
}

/* line below heading */
.advantage-item::after {
    top: 178px;
    left: 437px;
    right: 50px;
}

.advantage-item-label {
    position: absolute;
    top: 25px;
    left: 0;
    width: 426px;
    margin: 0;
    color: #1D4482;
    font-family: "Syncopate", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    text-align: right;
}

.advantage-item-img {
    position: absolute;
    top: 56px;
    left: 0;
    width: 436px;
}

.advantage-item-img img {
    display: block;
    width: 100%;
}

/* number + vertical divider (border) between number and heading */
.advantage-item-no {
    position: absolute;
    top: 46px;
    left: 412px;
    width: 142px;
    margin: 0;
    border-right: 1px solid #333;
    color: #1D4482;
    font-family: "Syncopate", sans-serif;
    font-size: 9rem;
    line-height: 89px;
}

.advantage-item-title {
    position: absolute;
    top: 42px;
    left: 591px;
    margin: 0;
    color: #333;
    font-family: "Shippori Mincho B1", serif;
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 50px;
}

.advantage-item-text {
    position: absolute;
    top: 224px;
    left: 513px;
    width: 551px;
}

.advantage-item-text p {
    margin: 0;
    color: #333;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 37px;
}

/* reverse: photo right */
.advantage-item-reverse {
    height: 562px;
}

.advantage-item-reverse::before {
    left: 52px;
    right: 276px;
}

.advantage-item-reverse::after {
    left: 52px;
    right: 437px;
}

.advantage-item-reverse .advantage-item-label {
    top: 22px;
    left: 768px;
    text-align: left;
}

.advantage-item-reverse .advantage-item-img {
    top: 57px;
    left: 763px;
    width: 435px;
}

.advantage-item-reverse .advantage-item-no {
    left: 602px;
    width: auto;
    padding-left: 43px;
    border-right: 0;
    border-left: 1px solid #333;
}

.advantage-item-reverse .advantage-item-title {
    top: 42px;
    left: 100px;
}

.advantage-item-reverse .advantage-item-text {
    top: 219px;
    left: 99px;
    width: 540px;
}

/*COMPONENT: TITLE LEAF (leaf icon + navy heading + navy underline)*/
.title-leaf {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 1px solid #1D4482;
    color: #1D4482;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.title-leaf::before {
    content: "";
    flex-shrink: 0;
    width: 25px;
    height: 26px;
    background: url(../img/index/title-jp-blue.png) no-repeat center / contain;
}

/*COMPONENT: BOX BALLOON (white box: image + title + text, speech tail at the bottom)*/
.box-balloon {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 60px;
    padding: 45px 60px 43px 61px;
    background-color: #fff;
    box-shadow: 0 10px 40px rgba(9, 42, 94, 0.18);
}

.box-balloon::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - 15px);
    border-top: 46px solid #fff;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

.box-balloon-img {
    flex-shrink: 0;
    width: 387px;
}

.box-balloon-img img {
    display: block;
    width: 100%;
}

.box-balloon-title {
    margin: 0;
    color: #2F5C9A;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 35px;
}

.box-balloon-text {
    margin: 18px 0 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 33px;
}

/*COMPONENT: TABLE COMPARE (label column + 2 colored columns)*/
.table-compare {
    width: calc(100% + 16px);
    margin: -8px;
    border-collapse: separate;
    border-spacing: 8px;
    table-layout: fixed;
}

.table-compare thead th {
    height: 70px;
    border-radius: 12px 12px 0 0;
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
}

.table-compare thead th:first-child {
    width: 263px;
}

.table-compare-head-magenta {
    background-color: #9E005D;
}

.table-compare-head-navy {
    background-color: #234E86;
}

.table-compare tbody th {
    height: 90px;
    padding: 0 0 0 23px;
    border-radius: 8px;
    background-color: #E6E6E6;
    color: #555;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: left;
}

.table-compare tbody th img {
    width: 48px;
    height: 48px;
    margin-right: 15px;
    object-fit: contain;
    vertical-align: middle;
}

.table-compare td {
    padding: 22px 30px 22px 36px;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 24px;
    vertical-align: top;
}

.table-compare-magenta {
    background-color: #F4E3EE;
    color: #9E005D;
}

.table-compare-navy {
    background-color: #DCE7F3;
    color: #2F5C9A;
}

/*COMPONENT: TITLE CENTER LINE (centered heading + short line below)*/
.title-center-line {
    margin: 0;
    color: #2F5C9A;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.6rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.4;
    text-align: center;
}

.title-center-line::after {
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    margin: 20px auto 0;
    background-color: #2F5C9A;
}

/*COMPONENT: PILLAR ITEM (photo overlapping a white box: number | title, mincho lead, text)
- default: photo left / .pillar-item-reverse: photo right
- positions are relative to .container (1200)
*/
.pillar-item {
    position: relative;
    min-height: 439px;
}

.pillar-item-img {
    position: absolute;
    top: 59px;
    left: 0;
    z-index: 1;
    width: 530px;
    box-shadow: 30px 40px 40px rgba(0, 0, 0, 0.12);
}

.pillar-item-img img {
    display: block;
    width: 100%;
}

.pillar-item-box {
    position: relative;
    width: 860px;
    min-height: 439px;
    margin-left: 360px;
    padding: 64px 80px 41px 240px;
    background-color: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.pillar-item-head {
    display: flex;
    align-items: center;
}

.pillar-item-no {
    margin: 0;
    padding-right: 38px;
    border-right: 1px solid #555;
    color: #1D4482;
    font-family: "Syncopate", sans-serif;
    font-size: 6.4rem;
    line-height: 56px;
}

.pillar-item-title {
    margin: 0 0 0 32px;
    color: #1D4482;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 3.2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.pillar-item-lead {
    margin: 32px 0 0;
    color: #2F5C9A;
    font-family: "Shippori Mincho B1", serif;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 33px;
}

.pillar-item-text {
    margin: 32px 0 0;
    color: #333;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 30px;
    font-feature-settings: "palt";
}

.pillar-item-reverse .pillar-item-img {
    left: 670px;
}

.pillar-item-reverse .pillar-item-box {
    margin-left: -20px;
    padding: 64px 255px 41px 70px;
}

/*COMPONENT: CIRCLE LIST (numbered circles, 3 + 2 per row)*/
.circle-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 25px;
}

.circle-item {
    position: relative;
    width: 350px;
    height: 350px;
    padding: 55px 55px 0;
    border-radius: 50%;
    background: linear-gradient(to bottom, #DCEBF5 0%, #E9F2F8 55%, rgba(255, 255, 255, 0) 95%);
    text-align: center;
}

.circle-item-no {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    margin: 0;
    color: #1D4482;
    font-family: "Syncopate", sans-serif;
    font-size: 6.4rem;
    line-height: 1;
}

/* 2nd row (items 4, 5) has a wider gap */
.circle-item:nth-child(4) {
    margin-right: 25px;
}

.circle-item-title {
    margin: 0;
    color: #2F5C9A;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 30px;
}

.circle-item-text {
    margin: 18px 0 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 30px;
    text-align: left;
}

/*COMPONENT: BIZ INTRO (business page intro: title + gradient band with photo, big EN word, lead, text)
- default colors = semiconductor / .biz-intro-teal = sustainable
- photo position (.biz-intro-bg) and EN position (.biz-intro-en) are tuned per page
*/
.biz-intro {
    padding-top: 150px;
}

.biz-intro-title {
    margin: 0;
    color: #1D4482;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.biz-intro-band {
    position: relative;
    z-index: 0;
    height: 521px;
    margin-top: 18px;
    overflow: hidden;
    background: linear-gradient(90deg, #B7D2EF 0%, #E9F2FC 30%, #fff 55%);
}

.biz-intro-bg {
    position: absolute;
    top: 0;
    left: calc(50% - 221px);
    z-index: -1;
    width: 961px;
}

.biz-intro-bg img {
    display: block;
    width: 100%;
}

.biz-intro-en {
    position: absolute;
    top: 456px;
    left: calc(50% - 170px);
    margin: 0;
    color: rgba(160, 199, 236, 0.75);
    font-family: "Syncopate", sans-serif;
    font-size: 7.9rem;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.biz-intro-body {
    width: 600px;
    padding-top: 62px;
}

.biz-intro-lead {
    margin: 0;
    color: #2F5C9A;
    font-family: "Shippori Mincho B1", serif;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.biz-intro-text {
    margin: 30px 0 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 37px;
}

/* .biz-intro-teal: sustainable colors (title, band, EN, sans-serif lead) */
.biz-intro-teal .biz-intro-title {
    color: #00A895;
}

.biz-intro-teal .biz-intro-band {
    background: linear-gradient(90deg, #B4ECE5 0%, #E6F7F5 35%, #fff 55%);
}

.biz-intro-teal .biz-intro-en {
    color: rgba(150, 225, 215, 0.75);
}

.biz-intro-teal .biz-intro-lead {
    color: #00A895;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
}

/* .title-bar-teal: teal accent bar + EN */
.title-bar-teal .title-bar-inner::before {
    background: linear-gradient(to bottom, #12B4A1 0%, #DCDCDC 100%);
}

.title-bar-teal .title-bar-en {
    color: #98D6CF;
}

/*COMPONENT: CARD THEME (circle label + slanted photo + title over photo + text, 2 columns with dividers)
- default label: green / .card-theme-teal: teal label
*/
.card-theme-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 36px;
}

.card-theme {
    --theme-pad: 8px;
    position: relative;
    min-height: 324px;
    padding: 237px 24px 0 var(--theme-pad);
    border-bottom: 1px solid #B8B8B8;
}

.card-theme:nth-child(even) {
    --theme-pad: 42px;
}

/* vertical divider between the 2 columns */
.card-theme:nth-child(even)::before {
    content: "";
    position: absolute;
    top: 32px;
    bottom: 19px;
    left: -18px;
    width: 1px;
    background-color: #B8B8B8;
}

.card-theme:nth-child(n+3) {
    border-bottom: 0;
}

.card-theme:nth-child(n+3)::before {
    top: -10px;
    bottom: 0;
}

.card-theme-label {
    position: absolute;
    top: 0;
    left: calc(var(--theme-pad) + 19px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    margin: 0;
    border-radius: 50%;
    background-color: #8FC956;
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-indent: 0.15em;
}

.card-theme-teal .card-theme-label {
    background-color: #0BB39F;
}

.card-theme-img {
    position: absolute;
    top: 17px;
    right: 24px;
    width: 358px;
    height: 200px;
    clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%);
}

.card-theme-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* centered under the circle label, on top of the photo */
.card-theme-title {
    position: absolute;
    top: 130px;
    left: calc(var(--theme-pad) + 75px);
    z-index: 1;
    margin: 0;
    color: #333;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 28px;
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%);
}

.card-theme-text {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 25px;
}

/*COMPONENT: NOTE TEXT (gray note, hanging ※)*/
.note-text {
    position: relative;
    margin: 0;
    padding-left: 1.2em;
    color: #999;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 25px;
}

.note-text::before {
    content: "※";
    position: absolute;
    top: 0;
    left: 0;
}

/*COMPONENT: PHOTO PAIR (2 photos side by side, caption right aligned)*/
.photo-pair {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.photo-pair-item {
    margin: 0;
}

.photo-pair-item img {
    display: block;
    max-width: none;
}

.photo-pair-item figcaption {
    margin-top: 12px;
    color: #333;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: right;
}

/*COMPONENT: CHART BOX (centered heading + rounded bordered box holding a chart image)
- default: navy / .chart-box-teal + .chart-box-title-teal: sustainable
- .chart-box-inner gets .js-scrollable: horizontal scroll with ScrollHint on mobile
*/
.chart-box-title {
    margin: 0;
    color: #1D4482;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
    text-align: center;
}

.chart-box-title-teal {
    color: #00A895;
    font-weight: 500;
}

.chart-box {
    margin-top: 18px;
    border: 1px solid #1D4482;
    border-radius: 12px;
    background-color: #fff;
    overflow: hidden;
}

.chart-box-teal {
    border-color: #12B4A1;
}

.chart-box-inner img {
    display: block;
    width: 100%;
}

/*COMPONENT: JOB ACC (accordion: thumb + mincho title + EN, +/- button; open/close by .toggle-pc in main.js)*/
.job-acc + .job-acc {
    margin-top: 42px;
}

.job-acc-hd {
    position: relative;
    display: flex;
    align-items: center;
    gap: 54px;
    min-height: 141px;
    padding: 0 90px 0 40px;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    background-color: #F4F4F4;
}

.job-acc-thumb {
    flex-shrink: 0;
    width: 144px;
}

.job-acc-thumb img {
    display: block;
    width: 100%;
}

.job-acc-title {
    margin: 0;
    color: #333;
    font-family: "Shippori Mincho B1", serif;
    font-size: 3.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.job-acc-en {
    margin: 10px 0 0;
    color: #8FB5DF;
    font-family: "Syncopate", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* +/- icon: ::before = horizontal bar, ::after = vertical bar (hidden when open) */
.job-acc-btn {
    position: absolute;
    top: 50%;
    right: 42px;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
}

.job-acc-btn::before,
.job-acc-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #333;
    transition: transform .3s;
}

.job-acc-btn::after {
    transform: rotate(90deg);
}

.job-acc.toggle-open .job-acc-btn::after {
    transform: rotate(0);
}

.job-acc-body {
    display: flex;
    align-items: flex-start;
    gap: 52px;
    padding: 41px 0 26px;
}

.job-acc-img {
    flex-shrink: 0;
    width: 390px;
}

.job-acc-img img {
    display: block;
    width: 100%;
}

.job-acc-text {
    margin: -9px 0 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 37px;
}

/*COMPONENT: FILTER BOX (selects on light blue + style chips on white)*/
.filter-box {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(9, 42, 94, 0.15);
}

.filter-box-top {
    display: flex;
    justify-content: center;
    gap: 72px;
    padding: 33px 0 31px;
    background-color: #DCE7F4;
}

.filter-select {
    display: flex;
    align-items: center;
    gap: 25px;
}

.filter-select-label {
    color: #333;
    font-size: 1.7rem;
    font-weight: 700;
}

.filter-select select {
    width: 281px;
    height: 56px;
    padding: 0 50px 0 25px;
    border: 1px solid #333;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M0 0h16L8 14z' fill='%23333'/%3E%3C/svg%3E") no-repeat right 24px center / 17px auto;
    color: #666;
    font-family: inherit;
    font-size: 1.7rem;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.filter-box-bottom {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 31px 50px 33px;
}

.filter-box-label {
    margin: 0;
    color: #333;
    font-size: 1.6rem;
    font-weight: 500;
    white-space: nowrap;
}

.filter-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-chip {
    height: 35px;
    padding: 0 15px;
    border: 0;
    border-radius: 3px;
    background-color: #E6E6E6;
    color: #333;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: .3s;
}

.filter-chip.is-active,
.filter-chip:hover {
    background-color: #005B91;
    color: #fff;
}

/*COMPONENT: INTERVIEW GRID (card-interview in 3 columns, catch strip sticks out on the left)*/
.interview-grid {
    display: grid;
    grid-template-columns: repeat(3, 327px);
    justify-content: space-between;
    gap: 84px 0;
    padding-left: 24px;
}

.interview-grid .card-interview-catch span {
    font-size: 1.9rem;
}

.interview-grid .card-interview-img .label-vertical {
    top: -16px;
    right: 13px;
    padding: 9px 9px;
    border-radius: 3px;
    font-size: 1.6rem;
}

.interview-grid .card-interview-name {
    font-size: 3rem;
}

.interview-grid .card-interview-name small {
    font-size: 1.7rem;
}

.interview-grid .card-interview-office {
    font-size: 1.5rem;
    font-weight: 700;
}

.interview-grid .card-interview-info {
    padding: 0 11px 18px 16px;
}

.interview-grid .card-interview-info .icon-arrow {
    right: 11px;
    bottom: 23px;
    width: 51px;
    height: 26px;
}

/*COMPONENT: PAGER (arrow boxes + numbers, current page = blue leaf)*/
.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 47px;
}

.pager-arrow {
    width: 70px;
    height: 35px;
    margin: 0 40px;
    background-color: #005B91;
}

.pager-num {
    position: relative;
    z-index: 0;
    min-width: 26px;
    color: #333;
    font-family: "Syncopate", sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    text-align: center;
}

.pager-num.is-current {
    color: #fff;
}

.pager-num.is-current::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 62px;
    height: 46px;
    border-radius: 50%;
    background-color: #005B91;
    transform: translate(-50%, -50%) rotate(-25deg);
}

/*COMPONENT: TITLE OFFICE (big EN + JA, centered)*/
.title-office {
    text-align: center;
}

.title-office-en {
    margin: 0;
    color: #005B91;
    font-family: "Syncopate", sans-serif;
    font-size: 6rem;
    line-height: 1;
}

.title-office-ja {
    margin: 14px 0 0;
    color: #333;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2rem;
    font-weight: 700;
}

/*COMPONENT: OFFICE LINK LIST (4 column buttons with hard shadow)*/
.office-link-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.office-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border: 1px solid #333;
    border-radius: 3px;
    background-color: #E8F0FA;
    box-shadow: 3px 3px 0 #C9C9C9;
    color: #0B4170;
    font-size: 1.6rem;
    font-weight: 500;
}

a.office-link:hover {
    opacity: 1;
    background-color: #fff;
}

/*COMPONENT: OFFICE ACC (accordion: gradient header + white body; open/close by .toggle-pc)*/
.office-acc + .office-acc {
    margin-top: 28px;
}

.office-acc-hd {
    position: relative;
    display: flex;
    align-items: center;
    height: 90px;
    padding: 0 90px 0 36px;
    border: 1px solid #333;
    border-radius: 3px;
    background: linear-gradient(90deg, #fff 0%, #F3F3F3 30%, #E8F0FA 75%);
    box-shadow: 3px 3px 0 #C9C9C9;
}

.office-acc-title {
    flex-shrink: 0;
    width: 313px;
    margin: 0;
    color: #0B4170;
    font-family: "Shippori Mincho B1", serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.2;
}

.office-acc-en {
    margin: 0;
    color: #999;
    font-family: "Syncopate", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
}

/* square button with chevron: down when closed, up when open */
.office-acc-btn {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 35px;
    height: 35px;
    background-color: #005B91;
    transform: translateY(-50%);
}

.office-acc-btn::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 11px;
    width: 12px;
    height: 12px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
    transition: transform .3s, top .3s;
}

.office-acc.toggle-open .office-acc-btn::before {
    top: 14px;
    transform: rotate(-135deg);
}

.office-acc-body {
    margin-top: 28px;
    padding: 42px 35px 53px;
    background-color: #fff;
}

.office-acc-top {
    display: flex;
    align-items: flex-start;
    gap: 55px;
}

.office-acc-img {
    flex-shrink: 0;
    width: 410px;
}

.office-acc-img img {
    display: block;
    width: 100%;
}

.office-acc-feature {
    flex: 1;
}

.office-acc-text {
    margin: 36px 0 0;
    color: #555;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 30px;
}

.office-acc-body > .title-square {
    margin: 55px 0 0 13px;
}

/*COMPONENT: TITLE SQUARE (blue square + heading + gray underline)*/
.title-square {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0 0 13px;
    border-bottom: 1px solid #B8B8B8;
    color: #222;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.title-square::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background-color: #005B91;
}

/*COMPONENT: NUM BOX (outlined big number overlapping the top + short line + text)*/
.num-box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-left: 13px;
    padding-top: 48px;
}

.num-box {
    position: relative;
    min-height: 230px;
    padding: 45px 25px 30px 32px;
    border-radius: 10px;
    background-color: #E8F0FA;
}

.num-box-no {
    position: absolute;
    top: -30px;
    left: 32px;
    width: 90px;
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #005B91;
    color: #005B91;
    font-family: "Syncopate", sans-serif;
    font-size: 5.6rem;
    line-height: 1;
    text-align: center;
}

.num-box-text {
    margin: 0;
    color: #333;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 27px;
}

/*COMPONENT: ACCESS BOX (label | address | map button)*/
.access-box {
    display: flex;
    align-items: center;
    min-height: 80px;
    margin: 43px 0 0 13px;
    padding: 12px 17px 12px 23px;
    border: 1px solid #999;
    border-radius: 6px;
}

.access-box-label {
    margin: 0 23px 0 0;
    padding-right: 22px;
    border-right: 1px solid #B8B8B8;
    color: #005B91;
    font-family: "Syncopate", sans-serif;
    font-size: 2.2rem;
    line-height: 48px;
    text-transform: uppercase;
}

.access-box-address {
    flex: 1;
    margin: 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 24px;
}

/*COMPONENT: BUTTON MAP (blue pill with pin icon)*/
.btn-map {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    width: 190px;
    height: 55px;
    border-radius: 28px;
    background-color: #005B91;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.btn-map::before {
    content: "";
    width: 20px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M10 0C4.5 0 0 4.4 0 9.8 0 17 10 26 10 26s10-9 10-16.2C20 4.4 15.5 0 10 0zm0 13.5a4 4 0 1 1 0-8 4 4 0 0 1 0 8z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
}

a.btn-map:hover {
    opacity: 1;
    background-color: #9E005D;
}

/* .title-office modifiers: white / left aligned / magenta */
.title-office-white .title-office-en,
.title-office-white .title-office-ja {
    color: #fff;
}

.title-office-left {
    text-align: left;
}

.title-office-magenta .title-office-en {
    color: #9E005D;
}

.title-office-magenta .title-office-ja {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
}

/*COMPONENT: LABEL TAG (small horizontal tag, colors from .label-*)*/
.label-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 83px;
    height: 40px;
    padding: 0 12px;
    border-radius: 3px;
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
}

/*COMPONENT: PROFILE BAR (office tag | divider | person info, gray lines top and bottom)*/
.profile-bar {
    border-top: 1px solid #C9C9C9;
    border-bottom: 1px solid #C9C9C9;
}

.profile-bar-inner {
    display: flex;
    align-items: center;
    min-height: 193px;
    padding-left: 545px;
}

.profile-bar-office {
    flex-shrink: 0;
    width: 95px;
    text-align: center;
}

.profile-bar-office-name {
    margin: 12px 0 0;
    color: #333;
    font-size: 2.2rem;
    font-weight: 700;
    white-space: nowrap;
}

.profile-bar-person {
    margin-left: 48px;
    padding: 10px 0 8px 49px;
    border-left: 1px solid #C9C9C9;
    color: #333;
}

.profile-bar-dept,
.profile-bar-origin {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.profile-bar-origin {
    font-size: 1.5rem;
}

.profile-bar-name {
    display: flex;
    align-items: baseline;
    margin: 6px 0 8px;
    font-size: 4.4rem;
    font-weight: 500;
    line-height: 1.1;
}

.profile-bar-name small {
    margin-left: 14px;
    font-size: 2rem;
}

.profile-bar-join {
    margin-left: 70px;
    font-size: 1.6rem;
    font-weight: 700;
}

/*COMPONENT: QA ITEM (Q head between 2 lines + A no + mincho quote + text, photo bleeds to the screen edge)
- default: photo right / .qa-item-reverse: photo left / .qa-item-wide: no photo, inside .container-1100
- positions are relative to .container (1200)
*/
.qa-item {
    position: relative;
    min-height: 570px;
}

.qa-item-body {
    width: 600px;
}

.qa-item-img {
    position: absolute;
    top: 0;
    left: 680px;
    width: 660px;
}

.qa-item-img img {
    display: block;
    width: 100%;
}

.qa-item-reverse .qa-item-body {
    margin-left: 600px;
}

.qa-item-reverse .qa-item-img {
    left: -140px;
}

.qa-item-wide {
    min-height: 0;
}

.qa-item-wide .qa-item-body {
    width: auto;
    margin: 0 50px;
}

.qa-item-q {
    display: flex;
    align-items: center;
    height: 120px;
    padding-left: 25px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
}

.qa-item-q-no {
    margin: 0;
    padding-right: 30px;
    border-right: 1px solid #333;
    color: #333;
    font-family: "Syncopate", sans-serif;
    font-size: 5.4rem;
    line-height: 56px;
}

.qa-item-q-title {
    margin: 0 0 0 30px;
    color: #222;
    font-family: "Shippori Mincho B1", serif;
    font-size: 2.2rem;
    font-weight: 600;
}

.qa-item-a {
    padding: 36px 0 0 50px;
}

.qa-item-a-no {
    margin: 0;
    color: #005B91;
    font-family: "Syncopate", sans-serif;
    font-size: 5.4rem;
    line-height: 1;
}

/* mincho quote with “ ” marks */
.qa-item-quote {
    position: relative;
    margin: 22px 0 0;
    padding: 0 50px 0 72px;
    color: #005B91;
    font-family: "Shippori Mincho B1", serif;
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 35px;
}

.qa-item-quote::before,
.qa-item-quote::after {
    position: absolute;
    font-family: Georgia, serif;
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
}

.qa-item-quote::before {
    content: "\201C";
    top: -4px;
    left: 0;
}

.qa-item-quote::after {
    content: "\201D";
    right: 0;
    bottom: -46px;
}

.qa-item-text {
    margin: 52px 0 0;
    color: #222;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 35px;
}

/*COMPONENT: SCHEDULE LIST (2 columns of time + white box, dotted line between times)*/
.schedule-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}

.schedule-col {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.schedule-col::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 58px;
    border-left: 2px dotted rgba(255, 255, 255, 0.7);
}

.schedule-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 17px;
}

.schedule-item-time {
    flex-shrink: 0;
    width: 116px;
    padding: 4px 0;
    color: #fff;
    font-family: "Syncopate", sans-serif;
    font-size: 2.8rem;
    line-height: 1;
    text-align: center;
}

.schedule-item-text {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 12px 20px;
    background-color: #fff;
    color: #222;
    font-size: 1.4rem;
    letter-spacing: 0;
    font-weight: 500;
    line-height: 22px;
}

/*COMPONENT: MESSAGE BOX (photo + title, text on a blue grid band bleeding right)*/
.message-box {
    position: relative;
}

.message-box-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 385px;
}

.message-box-img img {
    display: block;
    width: 100%;
}

.message-box-title {
    height: 136px;
    margin-left: 500px;
}

.message-box-title .title-office-ja {
    font-size: 2.2rem;
}

.message-box-body {
    margin: 0 calc(600px - 50vw) 0 100px;
    padding: 49px 0 75px 397px;
    background-color: #005B91;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 37px 37px;
}

.message-box-body p {
    max-width: 600px;
    margin: 0;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 38px;
}

/*COMPONENT: BOX LIFE (rounded magenta box with an offset second outline)*/
.box-life {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: flex-start;
    gap: 42px;
    padding: 53px 78px 60px;
    border: 1px solid #9E005D;
    border-radius: 50px;
    background-color: #fff;
}

.box-life::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    right: -7px;
    bottom: -7px;
    z-index: -1;
    border: 1px solid #9E005D;
    border-radius: 50px;
}

.box-life-body {
    flex: 1;
    padding-top: 12px;
}

.box-life-body .title-office-ja {
    margin-top: 14px;
    font-size: 2.4rem;
}

/* dashed line below the title */
.box-life-body .title-office::after {
    content: "";
    display: block;
    width: 182px;
    height: 4px;
    margin-top: 30px;
    background: repeating-linear-gradient(90deg, #9E005D 0 8px, transparent 8px 14px);
}

.box-life-text {
    margin: 50px 0 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 38px;
}

.box-life-img {
    flex-shrink: 0;
    width: 380px;
}

.box-life-img img {
    display: block;
    width: 100%;
}

/*COMPONENT: SLIDER CENTER (slick centerMode cards + .slider-progress, init in custom.js)*/
.slider-center-item {
    width: 350px;
}

.slider-center-item .card-interview {
    width: 280px;
    margin: 0 auto;
}

.slider-center .slick-list {
    padding-top: 16px;
}

/* .title-leaf-sm: smaller leaf heading (2.4rem, navy) */
.title-leaf-sm {
    gap: 18px;
    padding-bottom: 14px;
    color: #1F3F87;
    font-size: 2.4rem;
}

/*COMPONENT: ACC BOX (accordion: icon + title + -/+ on light blue; open/close by .toggle-pc)*/
.acc-box + .acc-box {
    margin-top: 106px;
}

.acc-box-hd {
    position: relative;
    display: flex;
    align-items: center;
    gap: 36px;
    height: 122px;
    padding: 0 90px 0 40px;
    border: 2px solid #005B91;
    border-radius: 8px;
    background-color: #EBF3FC;
}

.acc-box-icon {
    flex-shrink: 0;
    width: 72px;
}

.acc-box-title {
    margin: 0;
    color: #333;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* -/+ icon: ::before = horizontal bar, ::after = vertical bar (hidden when open) */
.acc-box-btn {
    position: absolute;
    top: 50%;
    right: 42px;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
}

.acc-box-btn::before,
.acc-box-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #005B91;
    transition: transform .3s;
}

.acc-box-btn::after {
    transform: rotate(90deg);
}

.acc-box.toggle-open .acc-box-btn::after {
    transform: rotate(0);
}

.acc-box-body {
    padding-top: 41px;
}

.acc-box-body > .title-leaf {
    margin-top: 38px;
}

/*COMPONENT: JOB INTRO (photo left + blue lead + text)*/
.job-intro {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.job-intro-img {
    flex-shrink: 0;
    width: 470px;
}

.job-intro-img img {
    display: block;
    width: 100%;
}

.job-intro-lead {
    margin: 10px 0 0;
    color: #005B91;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.job-intro-text {
    margin: 30px 0 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 35px;
}

/*COMPONENT: POINT LIST (blue pill title with white dot + description)*/
.point-list {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.point-list-item + .point-list-item {
    margin-top: 40px;
}

.point-list-title {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 65px;
    margin: 0;
    padding: 0 20px;
    border-radius: 12px;
    background-color: #005B91;
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
}

.point-list-title::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
}

.point-list-text {
    margin: 14px 0 0 43px;
    color: #333;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
}

/*COMPONENT: BOX SENPAI (bordered box: leaf heading + photo + title, name, text)*/
.box-senpai {
    margin-top: 63px;
    padding: 30px 38px 66px 50px;
    border: 2px solid #1F3F87;
}

.box-senpai .title-leaf {
    margin-left: 6px;
}

.box-senpai-main {
    display: flex;
    align-items: flex-start;
    gap: 45px;
    margin-top: 30px;
}

.box-senpai-img {
    flex-shrink: 0;
    width: 203px;
}

.box-senpai-img img {
    display: block;
    width: 100%;
}

.box-senpai-title {
    margin: 2px 0 0;
    color: #1F3F87;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.4;
}

.box-senpai-name {
    margin: 8px 0 0;
    color: #333;
    font-size: 1.7rem;
    font-weight: 700;
    text-align: right;
}

.box-senpai-text {
    margin: 30px 0 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 33px;
}

/*COMPONENT: FLOW LIST (arrow cards in 3 colors + ground image with runners on top)*/
.flow-area {
    position: relative;
    padding-bottom: 155px;
}

.flow-list {
    display: flex;
    gap: 13px;
    margin: 0 0 0 50px;
    padding: 0;
    list-style: none;
}

.flow-card {
    width: 358px;
    height: 450px;
    padding: 45px 80px 0 33px;
    border-radius: 15px 0 0 15px;
    background-color: #00A6D1;
    clip-path: polygon(0 0, 81% 0, 100% 50%, 81% 100%, 0 100%);
    color: #fff;
}

.flow-card-02 {
    background-color: #0079C1;
}

.flow-card-03 {
    background-color: #004F8F;
}

.flow-card-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 50px;
    margin: 0 0 0 5px;
    border-radius: 25px;
    background-color: #fff;
    color: #00A6D1;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.flow-card-02 .flow-card-label {
    color: #0079C1;
}

.flow-card-03 .flow-card-label {
    color: #004F8F;
}

/* width fits 12 characters per line */
.flow-card-text {
    max-width: 225px;
    margin: 30px 0 0;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 33px;
}

/* ground image already contains the bottom of the cards, so it sits on top (361px below the card top) */
.flow-ground {
    position: absolute;
    top: 361px;
    left: 0;
    width: 1150px;
}

.flow-ground img {
    display: block;
    width: 100%;
}

/*COMPONENT: ENV BOX (colored header + 4 icon tiles; default blue / .env-box-magenta)*/
.env-box {
    --env-color: #005B91;
    --env-bg: #E0EDFA;
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--env-bg);
}

.env-box-magenta {
    --env-color: #9E005D;
    --env-bg: #F5E1EA;
}

.env-box + .env-box {
    margin-top: 35px;
}

.env-box-title {
    margin: 0;
    padding: 12px 0;
    background-color: var(--env-color);
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 31px;
    text-align: center;
}

.env-box-list {
    display: grid;
    grid-template-columns: repeat(4, 180px);
    justify-content: center;
    gap: 0 47px;
    margin: 0;
    padding: 32px 0 30px;
    list-style: none;
}

.env-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    border-radius: 8px;
    background-color: #fff;
}

.env-box-icon img {
    display: block;
    width: 156px;
}

.env-box-label {
    display: block;
    margin-top: 12px;
    color: var(--env-color);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

/*COMPONENT: CARD ICON TEXT (2 column list: pink icon tile + magenta title + text)*/
.card-icon-text-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.card-icon-text {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 25px 25px 25px 25px;
    border: 1px solid #B8B8B8;
    border-radius: 8px;
    background-color: #fff;
}

.card-icon-text-icon {
    flex-shrink: 0;
    width: 100px;
}

.card-icon-text-icon img {
    display: block;
    width: 100%;
}

.card-icon-text-title {
    display: block;
    margin-top: 4px;
    color: #9E005D;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.card-icon-text-text {
    display: block;
    margin-top: 9px;
    color: #222;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 23px;
}

/*COMPONENT: BOX COMMENT (bordered box: title + 2 balloons)*/
.box-comment {
    padding: 44px 66px 50px 55px;
    border: 1px solid #005B91;
    border-radius: 8px;
    background-color: #fff;
}

.box-comment-title {
    margin: 0;
    color: #005B91;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-align: center;
}

.box-comment-list {
    display: grid;
    grid-template-columns: repeat(2, 410px);
    justify-content: space-between;
    margin-top: 43px;
}

/*COMPONENT: BALLOON (light blue box, "coment" label on the top border, tail line + round avatar below)*/
.balloon {
    position: relative;
    min-height: 235px;
    margin-bottom: 125px;
    padding: 30px 27px 30px 27px;
    border: 1px solid #4A80B5;
    border-radius: 5px;
    background-color: #E8F1F8;
}

.balloon-label {
    position: absolute;
    top: -13px;
    left: 18px;
    margin: 0;
    padding: 0 10px;
    background-color: #fff;
    color: #005B91;
    font-family: "Syncopate", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 22px;
}

/* tail: thin diagonal line from the bottom edge toward the avatar */
.balloon::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 180px;
    width: 1px;
    height: 46px;
    background-color: #005B91;
    transform: rotate(-38deg);
    transform-origin: top center;
}

.balloon-lead {
    margin: 0;
    padding-left: 0.5em;
    color: #005B91;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 27px;
    text-indent: -0.5em;
}

.balloon-text {
    margin: 15px 0 0;
    color: #222;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 27px;
}

.balloon-avatar {
    position: absolute;
    top: calc(100% - 16px);
    left: 241px;
    width: 144px;
}

/*COMPONENT: RECRUIT BOX (colored box: leaf title + EN label + white news row)
- default: magenta / .recruit-box-navy: navy
*/
.recruit-box {
    --rb-color: #9E005D;
    --rb-bg: #F4E5EC;
    padding: 33px 50px 45px;
    border: 1px solid var(--rb-color);
    border-radius: 10px;
    background-color: var(--rb-bg);
}

.recruit-box-navy {
    --rb-color: #1D4482;
    --rb-bg: #DFE9F5;
}

.recruit-box + .recruit-box {
    margin-top: 38px;
}

.recruit-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.recruit-box-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    color: var(--rb-color);
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 44px;
}

/* leaf icon: png used as mask so it takes the box color */
.recruit-box-title::before {
    content: "";
    flex-shrink: 0;
    width: 25px;
    height: 26px;
    background-color: currentColor;
    -webkit-mask: url(../img/index/title-jp-blue.png) no-repeat center / contain;
    mask: url(../img/index/title-jp-blue.png) no-repeat center / contain;
}

.recruit-box-en {
    margin: 0;
    color: var(--rb-color);
    font-family: "Syncopate", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: lowercase;
}

.recruit-box-body {
    margin-top: 18px;
    padding: 0 25px;
    border-radius: 8px;
    background-color: #fff;
}

.recruit-box-body .news-row {
    min-height: 80px;
}

/*COMPONENT: NEWS ROW (date + tag + 1 line text; .news-list = rows with gray bottom line)*/
.news-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-list > li {
    border-bottom: 1px solid #C8C8C8;
}

.news-list .news-row {
    min-height: 90px;
    padding: 0 45px 0 17px;
}

.news-list > li:first-child .news-row {
    min-height: 100px;
    padding-top: 10px;
}

.news-row {
    display: flex;
    align-items: center;
}

a.news-row:hover {
    opacity: 0.7;
}

.news-row-date {
    flex-shrink: 0;
    width: 120px;
    color: #1D4482;
    font-family: "Syncopate", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.news-row-tag {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 141px;
    height: 31px;
    border: 1px solid #9E005D;
    border-radius: 2px;
    background-color: #fff;
    color: #9E005D;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.news-row-text {
    overflow: hidden;
    min-width: 0;
    margin-left: 20px;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*COMPONENT: TITLE GRAD (heading on a gradient band fading to the right)
- default: blue / .title-grad-magenta: magenta
*/
.title-grad {
    margin: 0;
    padding: 0 33px;
    background: linear-gradient(90deg, #3373BF 0%, #94B3D3 35%, #DCDCDC 55%, rgba(220, 220, 220, 0) 100%);
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 60px;
}

.title-grad-magenta {
    background: linear-gradient(90deg, #CB4597 0%, #D9A3C4 35%, #DCDCDC 55%, rgba(220, 220, 220, 0) 100%);
}

/*COMPONENT: BUTTON VIEW MORE JA (.btn-view-more + .btn-view-more-ja: japanese label, navy border)*/
.btn-view-more-ja {
    border-color: #1D4482;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: none;
}

/*COMPONENT: POST META (date + category tag above a post title)*/
.post-meta {
    display: flex;
    align-items: center;
    gap: 25px;
}

.post-meta-date {
    color: #1D4482;
    font-family: "Syncopate", sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.post-meta-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 162px;
    height: 36px;
    border: 1px solid #9E005D;
    border-radius: 2px;
    color: #9E005D;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/*COMPONENT: BOX FRAME (rounded navy frame around a .title-leaf block; .box-frame-blue: light blue bg)*/
.box-frame {
    padding: 40px 50px 43px;
    border: 1px solid #1D4482;
    border-radius: 15px;
    background-color: #fff;
}

.box-frame-blue {
    border-color: #8299BE;
    background-color: #E8F0FA;
}

.box-frame .title-leaf {
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.box-frame-note {
    margin-left: 10px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/*COMPONENT: REQ TABLE (gradient label cell + text cell with gray underline)*/
.req-table {
    margin: 35px 0 0;
}

.req-table-row {
    display: flex;
    gap: 10px;
}

.req-table-row + .req-table-row {
    margin-top: 8px;
}

.req-table-th {
    flex-shrink: 0;
    width: 250px;
    margin: 0;
    padding: 15px 20px 15px 30px;
    background: linear-gradient(90deg, #3477C0 0%, #8FAECF 50%, #DADBDC 100%);
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 30px;
}

.req-table-td {
    flex: 1;
    min-height: 60px;
    margin: 0;
    padding: 15px 0 15px 22px;
    border-bottom: 2px solid #D9D9D9;
    color: #333;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 28px;
}

.req-table-td p {
    margin: 0;
}

.req-table-td p + p {
    margin-top: 28px;
}

.req-table-small {
    display: block;
    font-size: 1.4rem;
    line-height: 22px;
}

.req-table-pay {
    display: grid;
    grid-template-columns: 108px auto;
    justify-content: start;
}

/*COMPONENT: RESULT LIST (year cards: year + male/female labels + counts)*/
.result-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.result-card {
    padding: 13px 20px 18px;
    background-color: #FCFCFC;
    text-align: center;
}

.result-card-year {
    display: block;
    color: #1D4482;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 26px;
}

.result-card-year span {
    font-family: "Syncopate", sans-serif;
    font-weight: 400;
}

.result-card-data {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 8px 0 0;
}

.result-card-data div {
    width: 110px;
}

.result-card-data dt {
    height: 44px;
    background-color: #1D4482;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 44px;
}

.result-card-data dd {
    margin: 7px 0 0;
    color: #222;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 26px;
}

/*COMPONENT: SCHOOL ACC (accordion with dark lines and -/+ mark; open/close by .toggle-pc)*/
.school-acc {
    margin-top: 37px;
}

.school-acc-hd {
    position: relative;
    margin: 0;
    padding: 0 80px 0 35px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    background-color: #FCFCFC;
    color: #333;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 63px;
    cursor: pointer;
}

.school-acc-hd::before,
.school-acc-hd::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 30px;
    height: 1px;
    background-color: #333;
    transition: transform 0.3s;
}

/* vertical bar of the +, hidden while open */
.school-acc-hd::after {
    transform: rotate(90deg);
}

.school-acc-hd.active::after {
    transform: rotate(0);
}

.school-acc-cont {
    padding: 22px 25px 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 35px;
}

.school-acc-cont p {
    margin: 0;
}

/*COMPONENT: STEP LIST (recruit flow: vertical cards + arrows; colors navy -> magenta)*/
.step-list {
    display: flex;
    justify-content: center;
    gap: 75px;
    margin: 35px 0 0;
    padding: 0;
    list-style: none;
}

.step-list-item {
    --step-color: #36367B;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 90px;
    height: 205px;
    padding-top: 18px;
    border: 1px solid rgba(var(--step-rgb, 54, 54, 123), 0.36);
    background-color: rgba(var(--step-rgb, 54, 54, 123), 0.15);
    color: var(--step-color);
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 24px;
    writing-mode: vertical-rl;
}

/* arrow to the next step */
.step-list-item + .step-list-item::before {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    left: -59px;
    width: 33px;
    height: 16px;
    background: url(../img/index/arrow-right-blue.svg) no-repeat center / contain;
}

.step-list-item:nth-child(1) {
    border-color: #1C4382;
    background-color: #1C4382;
    color: #fff;
}

.step-list-item:nth-child(2) {
    --step-rgb: 54, 54, 123;
    --step-color: #36367B;
}

.step-list-item:nth-child(3) {
    --step-rgb: 80, 40, 115;
    --step-color: #502873;
}

.step-list-item:nth-child(4) {
    --step-rgb: 106, 27, 108;
    --step-color: #6A1B6C;
}

.step-list-item:nth-child(5) {
    --step-rgb: 132, 13, 100;
    --step-color: #840D64;
}

.step-list-item:nth-child(6) {
    border-color: #9E005D;
    background-color: #9E005D;
    color: #fff;
}

/*COMPONENT: BANNER ENTRY (magenta box: big EN "ENTRY" + JA catch + button)*/
.banner-entry {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 20px 35px;
    border-radius: 15px;
    background-color: rgba(158, 0, 93, 0.5);
    text-align: center;
}

.banner-entry-en {
    display: block;
    color: rgba(255, 255, 255, 0.35);
    font-family: "Syncopate", sans-serif;
    font-size: 9rem;
    font-weight: 400;
    line-height: 80px;
    text-transform: uppercase;
}

.banner-entry-title {
    margin: -35px 0 0;
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 40px;
}

.banner-entry .btn-view-more {
    width: 310px;
    margin-top: 25px;
}

/*COMPONENT: FORM ENTRY (label column + field column, required/optional badge)*/
.form-intro {
    margin: 40px 20px 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.form-list {
    margin: 32px 0 0;
    padding: 0 20px;
}

.form-row {
    display: flex;
    align-items: flex-start;
}

.form-row + .form-row {
    margin-top: 54px;
}

.form-label {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 16px;
    width: 270px;
    margin: 0;
    padding-top: 11px;
    color: #333;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.form-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 28px;
    border-radius: 3px;
    background-color: #EC2028;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-indent: 0.15em;
}

.form-badge-optional {
    background-color: #AEAEAE;
}

.form-field {
    position: relative;
    flex: 1;
    margin: 0;
}

.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #C6C6C6;
    border-radius: 0;
    background-color: #F9F9F9;
    color: #333;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #1D4482;
    outline: none;
}

.form-input-short {
    width: 344px;
}

.form-select {
    padding: 0 60px 0 23px;
    border-color: #333;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 0h20L10 14z'/%3E%3C/svg%3E") no-repeat right 25px center / 20px 14px;
    cursor: pointer;
}

.form-textarea {
    height: 232px;
    padding: 14px 16px;
    resize: vertical;
}

/* example text under the field: absolute so all rows keep the same rhythm */
.form-note {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    margin: 0;
    color: #666;
    font-size: 1.4rem;
    font-weight: 500;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 58px;
    padding: 0 18px;
    background-color: #F2F2F2;
    color: #333;
    font-size: 1.6rem;
    font-weight: 500;
    cursor: pointer;
}

.form-check input {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin: 0;
    border: 1px solid #000;
    border-radius: 50%;
    background-color: #fff;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.form-check input:checked {
    background: radial-gradient(circle, #1D4482 0 7px, #fff 8px);
}

.form-check a {
    color: #333;
    text-decoration: underline;
}

.form-alert {
    margin: 52px 0 0;
    color: #EC2028;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
}

.form-submit {
    margin-top: 40px;
    text-align: center;
}

.form-submit .btn-view-more {
    cursor: pointer;
}

/*COMPONENT: BOX POLICY (centered heading + line + text, e.g. access analytics note)*/
.box-policy-title {
    margin: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid #AEAEAE;
    color: #333;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
}

.box-policy-text {
    margin: 16px 0 0;
    padding: 0 4px;
    color: #222;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 29px;
}

/*COMPONENT: TEL BOX (light blue box: phone icon + title + office cards)*/
.tel-box {
    position: relative;
    padding: 64px 50px 47px;
    border-radius: 15px;
    background-color: #E8F0F9;
}

.tel-box::before {
    content: "";
    position: absolute;
    top: -13px;
    left: calc(50% - 30px);
    width: 64px;
    height: 62px;
    background: url(../img/contact/icon-tel-wave.svg) no-repeat center / contain;
}

.tel-box-title {
    margin: 0;
    color: #005B91;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
}

.tel-box-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.tel-card-head {
    margin: 0;
    background-color: #005B91;
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    line-height: 48px;
    text-align: center;
}

.tel-card-body {
    margin-top: 11px;
    padding: 18px 10px 22px;
    background-color: #fff;
    color: #222;
    text-align: center;
}

.tel-card-num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #222;
    font-family: "Syncopate", sans-serif;
    font-size: 3rem;
    letter-spacing: 0.02em;
    line-height: 36px;
}

.tel-card-num::before {
    content: "";
    flex-shrink: 0;
    width: 30px;
    height: 32px;
    background: url(../img/contact/icon-tel.svg) no-repeat center / contain;
}

.tel-card-note {
    margin: 2px 0 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.tel-card-time {
    margin: 8px 0 0;
    font-size: 1.5rem;
    font-weight: 500;
}

.tel-card-fax {
    margin: 10px 0 0;
    font-family: "Syncopate", sans-serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
}

/*COMPONENT: POLICY (privacy policy text: mincho title, numbered headings, kana list)*/
.policy-title {
    margin: 0;
    padding-bottom: 22px;
    border-bottom: 1px solid #8FA9CC;
    color: #1D4482;
    font-family: "Shippori Mincho B1", serif;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
}

.policy-text {
    margin: 0;
    color: #333;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 34px;
}

.policy-title + .policy-text {
    margin-top: 32px;
}

.policy-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 50px 0 0;
    padding-bottom: 6px;
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, #5B8DC8 0%, #C9D6E6 60%, #E5E9EE 100%) 1;
    color: #1D4482;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.policy-head-num {
    font-family: "Syncopate", sans-serif;
    font-size: 2.4rem;
    font-weight: 400;
}

.policy-head + .policy-text {
    margin-top: 14px;
}

.policy-list {
    margin: 30px 0 0;
    padding: 0 0 0 23px;
    list-style: none;
}

.policy-list li {
    display: flex;
    color: #333;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 30px;
}

.policy-list-kana {
    flex-shrink: 0;
    width: 39px;
    color: #1D4482;
    font-weight: 700;
}

/*COMPONENT: ICON MASK (svg file as mask, takes the text color; size comes from the element class)
- header / footer use these instead of inline <svg> (Live Server injects its script into inline svg of fetched elements)
*/
.icon-mail,
.icon-external {
    display: inline-block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
}

.icon-mail {
    -webkit-mask-image: url(../img/index/icon-mail.svg);
    mask-image: url(../img/index/icon-mail.svg);
}

.icon-external {
    -webkit-mask-image: url(../img/index/icon-external.svg);
    mask-image: url(../img/index/icon-external.svg);
}

/*HEADER*/

header#site-header.hide {
    transform: translateY(-100%);
}

.header-main .logo-left .logo {
    width: 290px;
}

.header-main .logo h1 {
    margin: 0;
    line-height: 1;
}

.header-inner {
    padding: 0 30px 0 50px;
}

.header-top {
    min-height: 135px;
}

.box-main-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/*HEADER TOP BUTTONS*/
.box-top-header {
    display: flex;
    justify-content: flex-end;
    gap: 22px;
    margin-bottom: 26px;
}

.btn-top-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px 8px;
    border-bottom: 1px solid #092A5E;
    color: #092A5E;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    transition: .3s;
}

.btn-top-header-icon {
    width: 18px;
    height: 16px;
    color: #9E005D;
    flex-shrink: 0;
}

.btn-top-header:hover {
    color: #9E005D;
    border-bottom-color: #9E005D;
}

/*NAV*/
.header-main .main-menu .nav {
    margin: 0 0 0 auto;
}

.header-main .main-menu .nav>li {
    position: relative;
    margin-right: 36px;
}

.header-main .main-menu .nav>li:last-child {
    margin-right: 0;
}

.header-main .main-menu .nav>li>a {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0 0 6px;
    color: #092A5E;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    min-height: 0;
}

.header-main .main-menu .nav>li>a::after {
    bottom: 0;
    height: 2px;
    background: #9E005D;
}

.nav-arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #9E005D;
    position: relative;
    flex-shrink: 0;
}

.nav-arrow::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: translateX(-50%) rotate(45deg);
}

.header-main .main-menu .nav>li>a:hover,
.header-main .main-menu .nav>li.current>a {
    color: #9E005D;
}

/*MEGA MENU*/
.mega-menu {
    top: calc(100% + 10px);
    width: auto;
    min-width: 260px;
    text-align: left;
    background-color: #fff;
    border-top: 3px solid #9E005D;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 6px 16px rgba(9, 42, 94, 0.12);
}

.header-main .main-menu .nav>li.nav-mega:hover .mega-menu {
    top: calc(100% + 4px);
}

.nav-sub-list {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.nav-sub-list li a {
    display: block;
    padding: 10px 24px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #092A5E;
    transition: .3s;
}

.nav-sub-list li a:hover {
    color: #9E005D;
    opacity: 1;
}

/*FOOTER*/
.footer-wrap {
    position: relative;
    min-height: 490px;
    padding: 61px 0 174px;
    background: #1D4482 url(../img/index/bg-footer.svg) no-repeat center bottom / 1480px auto;
}

.footer-nav {
    display: flex;
    gap: 78px;
}

.footer-nav-col {
    display: flex;
    flex-direction: column;
    width: 261px;
}

.footer-nav-link {
    display: block;
    padding: 0 9px 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.footer-nav-link + .footer-nav-link {
    margin-top: 37px;
}

.footer-nav-sub {
    list-style: none;
    margin: 0;
    padding: 13px 0 24px 24px;
}

.footer-nav-sub li a {
    display: block;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 2.2;
}

.btn-footer-corporate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 311px;
    height: 61px;
    margin-top: 54px;
    padding: 0 20px 0 28px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: .3s;
}

.btn-footer-corporate-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.btn-footer-corporate:hover {
    background-color: #fff;
    color: #1D4482;
}

.footer-bottom {
    padding: 33px 0 30px;
    background-color: #fff;
}

.footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-logo img {
    display: block;
    width: 384px;
}

.footer-office-list {
    display: flex;
    gap: 54px;
}

.footer-office {
    display: flex;
    align-items: flex-start;
}

.footer-office-label {
    margin: 0 17px 0 0;
    color: #9E005D;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

.footer-office-body {
    padding-left: 17px;
    border-left: 2px solid #E7A6C8;
}

.footer-office-body p {
    margin: 0;
    color: #3F3F3F;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.6;
}

.footer-office-body a {
    color: inherit;
}

.footer-office-key {
    display: inline-block;
    width: 54px;
}

.footer-copyright {
    margin-top: 33px;
    text-align: right;
}

.footer-copyright p {
    margin: 0;
    color: #9E005D;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

/*GO TOP (override common.css)*/
#go-top {
    right: 30px;
    border-radius: 4px;
}

#go-top.show {
    bottom: 30px;
}

#go-top a.btn-go-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 77px;
    height: 111px;
    border-radius: 4px;
    background-color: #9E005D;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    color: #fff;
    font-family: "Syncopate", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
}

/* arrow = background image (swapped to the magenta one on hover) */
#go-top .btn-go-top-icon {
    display: block;
    width: 15px;
    height: 28px;
    margin: 0;
    background: url(../img/index/arrow-top.svg) no-repeat center / contain;
}

/* hover: white box + magenta border / arrow / text (2nd icon img swaps in) */
#go-top a.btn-go-top:hover {
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #9E005D, 0 4px 10px rgba(0, 0, 0, 0.15);
    color: #9E005D;
    opacity: 1;
}

#go-top a.btn-go-top:hover .btn-go-top-icon {
    background-image: url(../img/index/arrow-top-magenta.svg);
}

/*HEADER OVERLAY (body.header-overlay: header sits on top of the first visual)*/
.header-overlay #site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.header-overlay .header-inner {
    padding-right: 0;
}

.header-overlay .header-top {
    align-items: flex-start;
    min-height: 0;
}

.header-overlay .header-main #logo {
    padding-top: 30px;
}

.header-overlay .header-main .main-menu {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 20px 30px 22px 40px;
    background-color: #fff;
    border-radius: 0 0 0 20px;
}

/*MAIN VISUAL*/
.main-visual {
    position: relative;
    overflow: hidden;
    padding-bottom: 160px;
    background: #F9F9F9 url(../img/index/bg-header.png) no-repeat center 699px / 1661px auto;
}

.main-visual-inner {
    position: relative;
    height: 941px;
}

.main-visual-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* outgoing slide (.is-prev, set in custom.js) stays opaque; the incoming one fades in on top */
.main-visual-slider .slick-slide.is-prev {
    opacity: 1 !important;
}

.main-visual-slide img {
    display: block;
    width: 100%;
    height: 941px;
    object-fit: cover;
}

.main-visual-icon {
    position: absolute;
    top: 355px;
    right: 40px;
    width: 892px;
    z-index: 2;
    pointer-events: none;
}

.main-visual-icon img {
    display: block;
    width: 100%;
}

.main-visual-text {
    position: absolute;
    top: 227px;
    left: 88px;
    z-index: 3;
}

.main-visual-title {
    margin: 0;
    color: #092A5E;
    font-family: "Shippori Mincho B1", serif;
    font-size: 5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 120px;
    transition: color 1.5s;
}

.main-visual-title-lg {
    font-size: 7rem;
}

.main-visual.is-text-white .main-visual-title {
    color: #fff;
}

/*MAIN VISUAL DOTS*/
.main-visual-slider .slick-dots {
    position: absolute;
    top: 440px;
    right: 56px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 3;
}

.main-visual-slider .slick-dots li {
    margin: 0;
    line-height: 0;
}

.main-visual-slider .slick-dots button {
    display: block;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 0;
    cursor: pointer;
    transition: .3s;
}

.main-visual-slider .slick-dots .slick-active button {
    background-color: #fff;
}

/*PICK UP*/
.main-visual-pickup {
    position: absolute;
    top: 731px;
    left: 0;
    width: 511px;
    height: 121px;
    padding: 30px 33px 0 47px;
    background-color: #fff;
    z-index: 3;
}

.main-visual-pickup-label {
    position: absolute;
    top: -16px;
    left: 47px;
    margin: 0;
    padding: 3px 22px;
    background-color: #9E005D;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
}

.main-visual-pickup-item {
    display: flex !important;
    align-items: flex-start;
    color: #333;
}

/* fade: hide the outgoing news at once so 2 texts never overlap (incoming one still fades in) */
.main-visual-pickup-list .slick-slide:not(.slick-current) {
    opacity: 0 !important;
    transition: none !important;
}

.main-visual-pickup-date {
    flex-shrink: 0;
    width: 146px;
    color: #092A5E;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.8;
}

.main-visual-pickup-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 1.4rem;
    line-height: 1.8;
}

.main-visual-pickup-nav {
    position: absolute;
    left: 52px;
    bottom: 17px;
    display: flex;
    gap: 24px;
}

.main-visual-pickup-arrow {
    width: 37px;
    height: 23px;
    background-size: 15px auto;
}

/* hover: light blue box + navy border (inset shadow so the size does not change) + navy arrow
   - used by: pick up arrows, .card-link arrow */
button.main-visual-pickup-arrow:hover,
a.card-link:hover .icon-arrow {
    border-radius: 3px;
    background-color: #E6EEF8;
    background-image: url(../img/index/arrow-right-blue.svg);
    box-shadow: inset 0 0 0 1px #1D4482;
}

button.main-visual-pickup-arrow.icon-arrow-prev:hover {
    background-image: url(../img/index/arrow-left-blue.svg);
}

/*MAIN VISUAL EN TEXT*/
.main-visual-en {
    position: absolute;
    top: 912px;
    left: 35px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-family: "Syncopate", sans-serif;
    font-size: 7.6rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    z-index: 4;
    pointer-events: none;
}

/*INDEX 01 (title + 2 column grid inside .container: text|photo / photo|text)*/
.index-01 {
    position: relative;
    overflow-x: clip;
    z-index: 1;
}

.index-01-bg {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.index-01-bg img {
    display: block;
    width: 100%;
}

.index-01-bg-line {
    top: -87px;
    left: calc(50% - 814px);
    width: 1726px;
}

.index-01-bg-left {
    top: 102px;
    left: calc(50% - 857px);
    width: 841px;
}

.index-01-bg-right {
    top: 0;
    left: calc(50% + 229px);
    width: 558px;
}

/* .container-1100: title / left column on the 1100 guide */
.index-01-inner {
    padding-top: 109px;
    padding-bottom: 190px;
}

.index-01-title {
    margin: 0;
    font-family: "Shippori Mincho B1", serif;
    font-size: 4.1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.65;
    background: linear-gradient(90deg, #092A5E 0%, #2B3C8C 45%, #9E005D 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.index-01-cont {
    display: grid;
    grid-template-columns: 1fr 481px;
    grid-template-areas:
        "text-left img-01"
        "img-02 text-right";
    /* right column reaches the 1200 guide: (1200 - 1100) / 2 = 50px */
    margin-top: 71px;
    margin-right: -50px;
}

.index-01-text p {
    margin: 0;
    color: #092A5E;
    font-family: "Shippori Mincho B1", serif;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 50px;
    white-space: nowrap;
}

.index-01-text-left {
    grid-area: text-left;
}

.index-01-text-right {
    grid-area: text-right;
    margin-top: -5px;
}

.index-01-img {
    width: 481px;
}

.index-01-img img {
    display: block;
    width: 100%;
}

.index-01-img-01 {
    grid-area: img-01;
    margin-top: 19px;
}

.index-01-img-02 {
    grid-area: img-02;
    margin-top: 71px;
}

/*INDEX 02*/
.index-02-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.index-02-head .box-lead {
    width: 576px;
    margin-top: 39px;
}

.index-02-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 5px;
}

.index-02-body .card-feature {
    width: 668px;
    margin-left: -42px;
}

.index-02-cards {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 520px;
    margin-top: 51px;
}

/*INDEX 03*/
.index-03-main {
    background: #0F1E3D url(../img/index/bg-business.png) no-repeat center top / cover;
}

.index-03-lead {
    max-width: 770px;
    margin: 46px auto 0;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 2;
    text-align: justify;
}

/* .container: rows sit on the 1200 guide */
.index-03-list {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-top: 75px;
}

/*INDEX 04*/
.index-04 {
    position: relative;
    overflow-x: clip;
    z-index: 1;
}

.index-04-bg {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.index-04-bg img {
    display: block;
    width: 100%;
}

.index-04-bg-left {
    top: 741px;
    left: calc(50% - 885px);
    width: 521px;
}

.index-04-bg-right {
    top: 45px;
    left: calc(50% + 403px);
    width: 596px;
}

.index-04 .slider-progress {
    margin-top: 52px;
}

/*INDEX 05*/
.index-05 {
    background-color: #E1F0FA;
}

.index-05-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.index-05-head .block-title-en {
    line-height: 1.05;
}

.index-05-head .box-lead {
    width: 603px;
    margin-top: 84px;
    padding: 30px 24px 30px 60px;
}

.index-05-head .box-lead::before {
    top: 95px;
    left: -60px;
}

.index-05-body {
    position: relative;
    height: 513px;
    margin-top: -23px;
}

.index-05-img {
    position: absolute;
    top: 0;
    left: 58px;
    width: 831px;
    border-radius: 11px;
    overflow: hidden;
}

.index-05-img img {
    display: block;
    width: 100%;
}

.index-05-body .btn-circle {
    position: absolute;
    top: 49px;
    left: 847px;
}

.index-05-body .link-grid {
    position: absolute;
    top: 374px;
    left: 50px;
    width: 1100px;
}

/*INDEX 06*/
.index-06 {
    position: relative;
    overflow-x: clip;
    z-index: 1;
    background-color: #F8F8F8;
}

.index-06-bg {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.index-06-bg img {
    display: block;
    width: 100%;
}

.index-06-bg-right {
    top: -141px;
    left: calc(50% + 482px);
    width: 354px;
}

.index-06-bg-left {
    top: 914px;
    left: calc(50% - 853px);
    width: 520px;
    z-index: 1;
}

.index-06-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* the long EN title may run over the lead box column (it sits above the box), so it must not push the box */
.index-06-head > div:first-child {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.index-06-head .box-lead {
    flex-shrink: 0;
    width: 660px;
    margin-top: 93px;
    padding: 42px 64px 36px 60px;
}

.index-06-links {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 62px;
    margin: 58px 0 -32px 102px;
}

.index-06-img img {
    display: block;
    width: 100%;
    height: 451px;
    object-fit: cover;
}

/*INDEX 07*/
.index-07 {
    position: relative;
    overflow-x: clip;
    padding: 214px 0 165px;
    background: linear-gradient(to bottom, #ECECEC 0, #FAFAFA 215px) #FAFAFA;
}

.index-07-bg {
    position: absolute;
    top: 1223px;
    left: calc(50% + 396px);
    width: 362px;
    pointer-events: none;
}

.index-07-bg img {
    display: block;
    width: 100%;
}

.index-07-news {
    display: flex;
    justify-content: space-between;
    margin-top: 61px;
}

.index-07-news .news-tab-card {
    width: 532px;
}

.index-07-more {
    margin-top: 37px;
    text-align: right;
}

.index-07 .banner-insta {
    position: relative;
    margin-top: 93px;
}

/*PAGE ABOUT*/
.page-about .header-main .logo img {
    filter: brightness(0) invert(1);
}

.page-about .about-01 {
    padding-top: 130px;
}

.page-about .about-01-text {
    margin: 40px 0 0;
    color: #333;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 2.6;
}

.page-about .about-01-img {
    width: 1300px;
    margin: 45px 0 0 calc(50% - 650px);
}

.page-about .about-01-img img {
    display: block;
    width: 100%;
}

.page-about .biz-block-semi {
    margin-top: 110px;
}

.page-about .biz-block-sustain {
    margin-top: 87px;
}

.page-about .about-02 {
    position: relative;
    padding-top: 70px;
    background-color: #F5F5F5;
}

.page-about .about-02 .data-grid {
    margin-top: 100px;
}

.page-about .about-02 .box-welfare {
    margin-top: 80px;
}

.page-about .about-03 {
    position: relative;
    padding-top: 75px;
}

.page-about .about-03 .advantage-item {
    margin-top: 104px;
}

.page-about .about-03 .advantage-item-reverse {
    margin-top: 98px;
}

/*PAGE SEMICONDUCTOR*/
.page-semiconductor .header-main .logo img {
    filter: brightness(0) invert(1);
}

.page-semiconductor .sub-visual-title .block-title-ja {
    color: #333;
}

/* 01 */
.page-semiconductor .semi-01 {
    padding: 88px 0 123px;
}

.page-semiconductor .semi-01 .title-leaf {
    margin-top: 68px;
}

.page-semiconductor .semi-01-what {
    position: relative;
    z-index: 0;
    margin-top: 42px;
}

.page-semiconductor .semi-01-what .box-balloon {
    z-index: 1;
}

/* bg-semi-01.png (band + photo) starts 174px below the balloon top and ends at the section bottom */
.page-semiconductor .semi-01-what {
    overflow-x: clip;
}

.page-semiconductor .semi-01-things {
    position: relative;
    z-index: 0;
    height: 561px;
}

.page-semiconductor .semi-01-things-bg {
    position: absolute;
    bottom: 0;
    left: calc(50% - 740px);
    z-index: -1;
    width: 1481px;
}

.page-semiconductor .semi-01-things-bg img {
    display: block;
    width: 100%;
}

.page-semiconductor .semi-01-things-title {
    margin: 0;
    padding-top: 81px;
    color: #fff;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-align: center;
    text-shadow: 0 0 10px rgba(9, 42, 94, 0.3);
}

.page-semiconductor .semi-01-what + .container .title-leaf {
    margin-top: 110px;
}

.page-semiconductor .semi-01-text {
    margin: 45px 0 0;
    color: #222;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 35px;
}

.page-semiconductor .semi-01 .js-scrollable {
    margin-top: 43px;
}

.page-semiconductor .semi-01-role {
    margin-top: 123px;
    padding: 77px 0 103px;
    background-color: #E3EEFA;
}

.page-semiconductor .semi-01-role-text {
    margin: 32px 50px 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 35px;
}

.page-semiconductor .semi-01-role-img {
    margin-top: 45px;
}

.page-semiconductor .semi-01-role-img img {
    display: block;
    width: 100%;
}

/* 02 */
.page-semiconductor .semi-02 {
    position: relative;
    padding: 98px 0 195px;
    background-color: #F5F5F5;
}

.page-semiconductor .semi-02-text {
    margin: 50px 0 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 35px;
}

.page-semiconductor .semi-02 .pillar-item {
    margin-top: 66px;
}

.page-semiconductor .semi-02 .pillar-item-reverse {
    margin-top: 46px;
}

.page-semiconductor .semi-02 .pillar-item-reverse + .pillar-item {
    margin-top: 90px;
}

/* 03 */
.page-semiconductor .semi-03 {
    position: relative;
    overflow-x: clip;
    padding: 109px 0 90px;
}

.page-semiconductor .semi-03-lead {
    margin: 76px 0 0;
    color: #1D4482;
    font-family: "Shippori Mincho B1", serif;
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 40px;
    text-align: center;
}

.page-semiconductor .semi-03-text {
    margin: 23px 0 0;
    color: #222;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 35px;
}

.page-semiconductor .semi-03-map {
    position: relative;
    height: 507px;
    margin-top: 22px;
}

.page-semiconductor .semi-03-map img {
    position: absolute;
    top: 0;
    left: calc(50% - 1216px);
    width: 2129px;
    max-width: none;
}

.page-semiconductor .semi-03-sub {
    margin: 45px 0 0;
    color: #1D4482;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
}

.page-semiconductor .semi-03 .circle-list {
    margin-top: 51px;
}

/*PAGE SUSTAINABLE*/
.page-sustainable .header-main .logo img {
    filter: brightness(0) invert(1);
}

.page-sustainable .sub-visual-title .block-title-ja {
    color: #333;
}

.page-sustainable .biz-intro-band {
    height: 460px;
}

.page-sustainable .biz-intro-bg {
    left: calc(50% + 80px);
    width: 660px;
}

.page-sustainable .biz-intro-en {
    top: 395px;
    left: 50%;
}

/* 01 */
.page-sustainable .sustain-01 {
    padding: 93px 0 132px;
}

.page-sustainable .sustain-01-lead {
    margin: 85px 0 0;
    color: #00A895;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-align: center;
}

.page-sustainable .sustain-01-text {
    margin: 42px 0 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 35px;
}

.page-sustainable .card-theme-list {
    margin-top: 45px;
}

.page-sustainable .sustain-01-closing {
    margin: 70px 0 0;
    color: #00A895;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 33px;
    text-align: center;
}

/* 02 */
.page-sustainable .sustain-02 {
    position: relative;
    padding: 98px 0 110px;
    background-color: #F5F5F5;
}

.page-sustainable .sustain-02-main {
    margin-top: 74px;
}

.page-sustainable .sustain-02-main img {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.page-sustainable .sustain-02-text {
    margin: 34px 0 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 40px;
}

.page-sustainable .sustain-02-text p {
    margin: 0;
}

.page-sustainable .sustain-02 .note-text {
    margin-top: 64px;
}

.page-sustainable .sustain-02 .photo-pair {
    margin-top: 55px;
}

.page-sustainable .sustain-02-text-last {
    margin-top: 85px;
}

/*PAGE WORK*/
.page-work .header-main .logo img {
    filter: brightness(0) invert(1);
}

.page-work .sub-visual-title .block-title-ja {
    color: #333;
}

.page-work .work-text {
    margin: 45px 0 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 35px;
}

.page-work .work-text-bold {
    color: #222;
    font-weight: 700;
}

.page-work .chart-box-title {
    margin-top: 65px;
}

.page-work .work-01 {
    padding: 130px 0 153px;
}

.page-work .work-02 {
    position: relative;
    padding: 100px 0 191px;
    background-color: #F5F5F5;
}

.page-work .work-03 {
    position: relative;
    padding: 205px 0 140px;
}

.page-work .job-acc-list {
    margin-top: 63px;
}

/*PAGE INTERVIEW*/
.page-interview .header-main .logo img {
    filter: brightness(0) invert(1);
}

.page-interview .sub-visual-title .block-title-ja {
    color: #333;
}

.page-interview .interview-01 {
    position: relative;
    padding: 64px 0 140px;
}

/* blue band behind the filter box and the first card row (curved top and bottom) */
.page-interview .interview-01-band {
    position: absolute;
    top: 190px;
    left: 0;
    right: 0;
    height: 1060px;
    border-radius: 50% 50% 50% 50% / 60px 60px 90px 90px;
    background: linear-gradient(to bottom, #4A90E2 0%, #CFDDEE 20%, #F3F3F3 38%, #F8F8F8 100%);
}

.page-interview .interview-grid {
    position: relative;
    margin-top: 153px;
}

.page-interview .pager {
    margin-top: 95px;
}

.page-interview .interview-02 {
    position: relative;
    padding: 95px 0 140px;
    background-color: #F4F4F4;
}

.page-interview .office-link-list {
    margin-top: 45px;
}

.page-interview .office-acc-list {
    margin-top: 58px;
}

/*PAGE INTERVIEW DETAIL*/
.page-interview-detail .header-main .logo img {
    filter: brightness(0) invert(1);
}

.page-interview-detail .sub-visual-title .block-title-ja {
    color: #333;
}

/* vertical gray line on the left of the head, hidden behind the hero photo */
.page-interview-detail .ivd-top {
    position: relative;
    margin-top: 70px;
    padding-bottom: 40px;
}

.page-interview-detail .ivd-top::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 600px);
    border-left: 1px solid #C9C9C9;
}

.page-interview-detail .ivd-head {
    padding: 0 0 36px 60px;
}

.page-interview-detail .ivd-head-en {
    margin: 0;
    color: #005B91;
    font-family: "Syncopate", sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

.page-interview-detail .ivd-head-title {
    margin: 26px 0 0;
    color: #222;
    font-family: "Shippori Mincho B1", serif;
    font-size: 4.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 68px;
    font-feature-settings: "palt";
}

.page-interview-detail .ivd-hero {
    position: relative;
    z-index: 1;
}

.page-interview-detail .ivd-hero img {
    display: block;
    width: 100%;
    height: 565px;
    object-fit: cover;
}

.page-interview-detail .profile-bar {
    position: relative;
    z-index: 1;
    background-color: #fff;
    border-top: 0;
}

.page-interview-detail .ivd-01 {
    padding: 63px 0 151px;
    overflow-x: clip;
}

.page-interview-detail .qa-item + .qa-item {
    margin-top: 96px;
}

.page-interview-detail .qa-item-wide + .qa-item {
    margin-top: 116px;
}

.page-interview-detail .ivd-02 {
    position: relative;
    z-index: 0;
    padding: 60px 0 79px;
    overflow: hidden;
    background-color: #00233D;
}

/* building photo with dark overlay, navy band below it */
.page-interview-detail .ivd-02-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 179px;
    z-index: -1;
}

.page-interview-detail .ivd-02-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(30, 40, 60, 0.6);
}

.page-interview-detail .ivd-02-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-interview-detail .ivd-02 .title-office-en {
    font-size: 6.6rem;
}

.page-interview-detail .ivd-02 .title-office-ja {
    font-weight: 500;
}

.page-interview-detail .schedule-list {
    margin-top: 66px;
}

.page-interview-detail .ivd-03 {
    padding-top: 106px;
    overflow-x: clip;
}

.page-interview-detail .ivd-03 .title-office-en {
    font-size: 6.6rem;
}

.page-interview-detail .ivd-04 {
    padding-top: 91px;
}

.page-interview-detail .ivd-04 .title-office-en {
    font-size: 6.6rem;
}

.page-interview-detail .ivd-05 {
    margin-top: 225px;
    padding-bottom: 84px;
    overflow: hidden;
    background: linear-gradient(to bottom, #fff 0, #fff 504px, #F4F4F4 504px);
}

.page-interview-detail .ivd-05 .title-office-en {
    font-size: 5.8rem;
}

.page-interview-detail .slider-center {
    margin-top: 50px;
}

.page-interview-detail .ivd-05 .slider-progress {
    margin-top: 40px;
}

.page-interview-detail .ivd-05 .btn-view-more {
    margin-top: 70px;
}

/*PAGE HIGHSCHOOL*/
.page-highschool .header-main .logo img {
    filter: brightness(0) invert(1);
}

.page-highschool .sub-visual-title .block-title-ja {
    color: #333;
}

.page-highschool .hs-text {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 35px;
}

.page-highschool .hs-01 {
    padding: 125px 0 0;
    overflow-x: clip;
}

.page-highschool .hs-01-main {
    position: relative;
    min-height: 421px;
    margin-top: 87px;
    font-feature-settings: "palt";
}

.page-highschool .hs-01-body {
    width: 600px;
    padding: 12px 0 0 50px;
}

.page-highschool .hs-01-lead {
    margin: 0 0 47px;
    color: #005B91;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.page-highschool .hs-01-body .hs-text {
    line-height: 40px;
}

.page-highschool .hs-01-img {
    position: absolute;
    top: 0;
    left: 670px;
    width: 670px;
}

.page-highschool .hs-01-img img {
    display: block;
    width: 100%;
}

.page-highschool .hs-02 {
    padding: 185px 0 0;
}

.page-highschool .hs-02 .acc-box:first-child {
    margin-top: 50px;
}

.page-highschool .hs-03 {
    padding: 150px 0 0;
}

.page-highschool .flow-area {
    margin-top: 67px;
    padding-bottom: 205px;
}

.page-highschool .hs-04 {
    padding: 80px 0 0;
}

.page-highschool .hs-04 .hs-text {
    margin: 78px 0 47px;
}

.page-highschool .hs-05 {
    padding: 165px 0 238px;
}

.page-highschool .hs-05-main {
    display: flex;
    align-items: flex-start;
    gap: 57px;
    margin-top: 62px;
}

.page-highschool .hs-05-img {
    flex-shrink: 0;
    width: 490px;
}

.page-highschool .hs-05-img img {
    display: block;
    width: 100%;
}

/*PAGE ENVIRONMENT*/
.page-environment .header-main .logo img {
    filter: brightness(0) invert(1);
}

.page-environment .sub-visual-title .block-title-ja {
    color: #333;
}

.page-environment .env-text {
    margin: 50px 0 47px;
    color: #222;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 35px;
}

.page-environment .env-02 .env-text {
    color: #333;
    font-weight: 500;
}

.page-environment .box-comment {
    margin-top: 76px;
}

.page-environment .env-01 {
    padding: 128px 0 140px;
}

.page-environment .env-02 {
    position: relative;
    padding: 100px 0 135px;
    background-color: #F4F4F4;
}

.page-environment .env-02 .section-line {
    top: 1px;
    height: 3px;
    width: calc(50% - 234px);
    right: 6px;
}

/*PAGE RECRUIT*/
.page-recruit .header-main .logo img {
    filter: brightness(0) invert(1);
}

.page-recruit .sub-visual-title .block-title-ja {
    color: #333;
}

.page-recruit .rec-01 {
    padding: 118px 0 180px;
}

.page-recruit .rec-01 .recruit-box:first-child {
    margin-top: 65px;
}

.page-recruit .rec-02 {
    position: relative;
    padding: 97px 0 140px;
    background-color: #F4F4F4;
}

.page-recruit .rec-02 .section-line {
    top: -2px;
    width: calc(50% - 240px);
}

.page-recruit .rec-news {
    margin-top: 65px;
}

.page-recruit .rec-news + .rec-news {
    margin-top: 85px;
}

.page-recruit .rec-news .news-list {
    margin: 0 50px;
}

.page-recruit .rec-more {
    margin: 30px 50px 0;
    text-align: right;
}

/*PAGE RECRUIT DETAIL*/
.page-recruit-detail .header-main .logo img,
.page-entry .header-main .logo img {
    filter: brightness(0) invert(1);
}

.page-recruit-detail .sub-visual-title .block-title-ja,
.page-entry .sub-visual-title .block-title-ja {
    color: #333;
}

.page-recruit-detail .rd-01 {
    padding: 100px 0 140px;
}

.page-recruit-detail .rd-01 .title-bar {
    margin-top: 40px;
    border-color: #6E6E6E;
}

.page-recruit-detail .rd-01 .title-bar-inner {
    padding: 13px 0 12px 50px;
}

.page-recruit-detail .rd-01 .title-bar-ja {
    margin: 0;
    font-weight: 500;
}

.page-recruit-detail .rd-text {
    margin: 58px 0 0;
    color: #333;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 40px;
}

.page-recruit-detail .box-frame {
    margin-top: 44px;
}

.page-recruit-detail .rd-01 .box-frame:first-of-type {
    margin-top: 68px;
}

.page-recruit-detail .box-frame-blue {
    padding-bottom: 72px;
}

.page-recruit-detail .banner-entry {
    margin-top: 45px;
}

.page-recruit-detail .rd-back {
    margin-top: 75px;
    padding-top: 47px;
    border-top: 1px solid #6E6E6E;
    text-align: center;
}

/*PAGE ENTRY (form)*/
.page-entry .entry-01 {
    padding: 100px 0 140px;
}

.page-entry .box-frame {
    padding: 40px 50px 50px;
    border-color: #3B7BB0;
}

.page-entry .box-frame .title-leaf {
    letter-spacing: 0.15em;
}

.page-entry .box-policy {
    margin: 65px 50px 0;
}

/*PAGE CONTACT*/
.page-contact .header-main .logo img {
    filter: brightness(0) invert(1);
}

.page-contact .sub-visual-title .block-title-ja {
    color: #333;
}

.page-contact .sub-visual-title .block-title-en {
    text-transform: uppercase;
}

.page-contact .ct-01 {
    padding: 147px 0 187px;
}

.page-contact .tel-box {
    margin-top: 84px;
}

.page-contact .ct-02 {
    position: relative;
    padding: 103px 0 190px;
    background-color: #F4F4F4;
}

.page-contact .ct-02 .section-line {
    top: -2px;
    width: calc(50% - 240px);
}

.page-contact .policy-title {
    margin-top: 63px;
}

/*LOADING (top page only, fade sequence in sub.js)*/
#loading {
    background: linear-gradient(to bottom, #fff 0%, #fff 73%, #DCE7F1 100%);
}

#loading .loading-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.loading-title {
    margin: 0;
    color: #092A5E;
    font-family: "Shippori Mincho B1", serif;
    font-size: 3.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 72px;
    white-space: nowrap;
}

.loading-title-lg {
    font-size: 5.2rem;
}

.loading-logo {
    display: block;
    width: 335px;
    margin: 95px auto 0;
}