/* 固定ページメインエリア */
.page:not(.top) .main-contents,
.blog .main-contents {
    background: url(../img/common/illust_page_header.webp) no-repeat right top;
    background-color: var(--color-white);
    background-size: 100%;
    margin-top: calc(var(--wh10) * 6.3);
}

@media (min-width: 1124px) {
    .page:not(.top) .main-contents,
    .blog .main-contents {
        margin-top: 0;
    }
}

/* キービジュアル */
.kv-bg {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 50px 0;
    margin: 0 auto;
    height: 85%;
    background: url(../img/kv_illust.png) no-repeat center top;
    background-size: contain;
}

.page:not(.top.page) main > *:not(iframe, .breadcrumb),
.blog main > *:not(iframe, .breadcrumb) {
    padding: 0 var(--wh20);
}

/* 全幅化ユーティリティ: フルブリード（左右のページガターを相殺） */
.page .full-bleed,
.blog .full-bleed {
    padding-inline: 0;
    margin-inline: calc(var(--wh20) * -1);
}

.page .kv,
.blog .kv {
    min-height: auto;
    position: relative;
    overflow: hidden;
}

@container kv (max-height: 680px) {
    .kv {
        height: auto;
    }
}

/* レスポンシブ対応 */
@media (max-width: 430px) {
    .recruiting-box { 
        display: none;
    }
}

@media (min-width: 431px) {
    .recruiting-box,
    .nav-illust { 
        display: none 
    }
    .main-contents {
        width: 430px;
        margin: 0 auto;
        background: var(--color-white);
        position: relative;
    }
    body::before {
        content: '';
        display: block;
        width: 100vw;
        height: 100svh;
        top: 0;
        left: 0;
        background: url(../img/common/bg_illust.webp) no-repeat center center;
        background-size: cover;
        position: fixed;
        z-index: -21;
    }
    body::after {
        content: '';
        display: block;
        width: 100vw;
        height: 100svh;
        top: 0;
        left: 0;
        background: #fffdf8;
        position: fixed;
        opacity: 0.85;
        z-index: -20;
    }
    
}

@media (min-width: 768px) {
    .layout-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        max-width: 100%;
        margin: 0 auto;
        gap: 0 1%;
        /* padding: 0 60px;
        gap: 0 60px; */
    }

    .main-contents {
        grid-column: 2;
        grid-row: 1;
        margin: 0 auto 0 0;
    }

    .recruiting-box {
        display: block;
        width: 310px;
        grid-column: 3;
        grid-row: 1;
        justify-self: start;
        margin-right: 1em;
    }

    .recruiting-info {
        width: 310px;
        position: fixed;
        background-color: var(--color-white);
        background-image: url('../img/common/deco_branch_cut.webp');
        background-position: 0 -0.75em;
        background-repeat: no-repeat;
        background-size: 120%;
        border-radius: 30px;
        box-shadow: 0px 2px 6px #81818129;
        margin-top: 120px;
        text-align: center;
        padding:0 10px 0 20px;
    }

    @media (orientation: landscape) {
        .recruiting-info {
            margin-top: 10%;
        }
    }

    .recruiting-info h3 {
        font-size: 22px;
        font-weight: 800;
        letter-spacing: 0.05em;
        color: var(--color-white);
        padding-top: 20px;
    }

    .recruiting-info p.lead-text {
        font-size: 15px;
        line-height: 1.4;
        position: relative;
        margin: var(--wh40) auto var(--wh30);
    }

    .recruiting-info p.lead-text::before,
    .recruiting-info p.lead-text::after {
        content: '';
        position: absolute;
        width: 32px;
        height: 34px;
        background-size: contain;
    }

    .recruiting-info p.lead-text::before {
        background: url('../img/common/icon_hozuki_l.svg') no-repeat center center;
        background-size: contain;
        left: 25px;
        top: 5px;
        /* animation: swingHozukiL 2.5s ease-in-out alternate-reverse infinite; */
    }

    .recruiting-info p.lead-text::after {
        background: url('../img/common/icon_hozuki.svg') no-repeat center center;
        background-size: contain;
        right: 25px;
        top: 5px;
        /* animation: swingHozukiR 2.75s ease-in-out alternate infinite; */
    }
    
    .recruiting-info .recruiting-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-bottom: 25px;
    }

    .recruiting-list a {
        color: var(--color-white);
        background-color: var(--color-accent);
        border-radius: 999px;
        text-align: left;
        display: flex;
        align-items: center;
        padding: 12px 15px 12px 30px;
        position: relative;
    }

    .recruiting-list a.green {
        background-color: var(--color-secondary);
    }

    .recruiting-list a::after {
        content: '▼';
        display: inline-block;
        font-size: 14px;
        transform: rotate(90deg);
        color: var(--color-accent);
        position: absolute;
        left: -12px;
        top: calc(50% - 6px);
    }

    .recruiting-list a.green::after {
        color: var(--color-secondary);
    }

    .recruiting-list h2 {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.08em;
        line-height: 1.5;
        color: currentColor;
        text-wrap: auto;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .recruiting-list .meta {
        font-family: var(--font-en);
        color: var(--color-white);
        font-size: 12px;
        letter-spacing: 0.03em;
        margin-bottom: 4px;
    }

    .recruiting-list .tag-cat {
        font-family: var(--font-base);
        background: var(--color-white);
        color: var(--color-accent);
        font-size: 11px;
        font-weight: 500;
        margin-left: 4px;
        padding: 1px 10px;
        border-radius: 15px;
    }

    .recruiting-list .green .tag-cat {
        color: var(--color-secondary);
    }

    .recruiting-list .item-wrapper{
        width: calc(100% - 68px);
    }

    .recruiting-list .thumb{
        width: calc(var(--wh10) * 6.8);
        height: calc(var(--wh10) * 6.8);
        border-radius: 50%;
        object-fit: cover;
    }
    
    .recruiting-list .no-thumb {
        width: calc(var(--wh10) * 6.8);
        height: calc(var(--wh10) * 6.8);
        padding: 10px;
        background: var(--color-white);
        border-radius: 50%;
        object-fit: cover;
    }
    
    .recruiting-list .thumb-icon {
        width: 100%;
        height: 100%;
    }
}

@media screen and (min-width: 1124px) {    
    .header {
        height: 48px;
        background-color: unset;
        box-shadow: none;
    }
    .kv {
        padding: 0;
    }

    .hamburger {
        display: none;
    }

    .header .contact-area {
        transform-origin: top right;
        transform: scale(1.3);
    }

    .header .reception-time {
        font-family: var(--font-base);
        font-size: 10px;
        font-weight: 500;
        display: block;
        letter-spacing: 0.02em;
    }

    .global-nav {
        left: 0;
        width: 240px;
        padding-top: 25px;
    }

    .global-nav .logo-img {
        position: relative;
        margin: 0px auto 15px;
        top: 0;
    }

    .global-nav .logo-img::after {
        content: '';
        display: inline-block;
        top: 0;
        left: 0;
        width: 72px;
        height: 72px;
        background: url(../img/common/illust_hozukinchan.webp) no-repeat center center;
        background-size: contain;
    }

    .nav-illust { 
        display: block;
        width: 48px;
        height: auto;
        margin: 0 auto;
    }

    .global-nav .nav-list a {
        font-size: 14px;
        font-weight: 600;
        padding: 15px 0;
    }

    .global-nav a[href*='privacy'] {
        font-size: 12px;
    }

    .layout-container {
        gap: 0 5%;
    }

    .recruiting-box {
        justify-self: left;
    }

    .recruiting-info {
        margin-top: 100px;
    }
}

/* ブログエリア */
.blog-list {
    background: var(--color-bg-light);
    margin: 0;
    padding: 0;
}

.blog-list li {
    padding: var(--wh10) var(--wh25);
}

.blog-list a {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
}

.blog-list .meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    font-size: calc(var(--wh10) * 1.2);
    line-height: 1;
    margin-bottom: 1em;
}

.blog-list .new-label {
    font-family: var(--font-en);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-accent);
}

.blog-list time {
    font-family: var(--font-en);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text);
    margin-left: 0.5em;
}

.blog-list .tag-cat {
    display: flex;
    align-items: center;
    padding: 2px 1em;
    font-size: var(--wh10);
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 1em;
    background-color: var(--color-primary);
    color: var(--color-white);
    margin-left: 0.8em;
}

.blog-list .title {
    font-size: calc(var(--wh10) * 1.3);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-text);
    line-height: 1.5;
    text-wrap: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.blog-list .thumb{
    clip-path: path('M3,41a38,38,0,1,1,75.207,7.713l4.508,5.129a1,1,0,0,1-.431,1.607L75.034,57.9A38,38,0,0,1,3,41Z');
    object-fit: cover;
    /* フォールバック */
    @supports not (clip-path: path('')) {
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 77.4"><path d="M3,41a38,38,0,1,1,75.207,7.713l4.508,5.129a1,1,0,0,1-.431,1.607L75.034,57.9A38,38,0,0,1,3,41Z" fill="black"/></svg>');
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 77.4"><path d="M3,41a38,38,0,1,1,75.207,7.713l4.508,5.129a1,1,0,0,1-.431,1.607L75.034,57.9A38,38,0,0,1,3,41Z" fill="black"/></svg>');
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
    width: calc(var(--wh10) * 8);
    height: calc(var(--wh10) * 8);
}

.blog-list .thumb.icon {
    background: #fff;
}

.blog-list .no-thumb {
    position: relative;
    width: calc(var(--wh10) * 9);
    height: calc(var(--wh10) * 8.1);
}

.blog-list .thumb-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/common/clip_fukidashi.svg') no-repeat center center;
    background-size: contain;
    filter: brightness(0) invert(1);
}

.blog-list .thumb-icon {
    position: absolute;
    z-index: 1;
    width: 55%;
    transform: translate(35%, 20%);
}

/* パンくず */
.breadcrumb {
    display: flex;
    gap: 0 0.4em;
    font-size: calc(var(--wh10) * 1.3);
    padding: calc(var(--wh10) * 8) var(--wh20) var(--wh20);
    white-space: nowrap; /* テキストを折り返さない */
    overflow: hidden; /* はみ出た部分を非表示に */
    text-overflow: ellipsis; /* はみ出た部分を...で表示 */
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0 0.5em;
    color: var(--color-text);
}

.breadcrumb li:first-child::before {
    content: '';
    display: inline-block;
    width: calc(var(--wh10) * 1.3);
    height: calc(var(--wh10) * 1.3);
    background: url('../img/common/icon_home.png') no-repeat center center;
    background-size: contain;
}

.breadcrumb li:not(:first-child)::before {
    content: '';
    display: inline-block;
    width: calc(var(--wh10) * 0.5);
    height: calc(var(--wh10) * 0.5);
    border-radius: 50%;
    background-color: var(--color-primary);
    margin: 0 calc(var(--wh10) * 0.25);
}
    
.breadcrumb li a {
    color: var(--color-primary);
}

/* recruit-footer */
.recruit-footer {
    background-color: var(--color-bg-light);
    padding-top: 0 !important; /* 元のパディングをリセット */
    position: relative;
}

.recruit-footer h2 {
    font-size: calc(var(--wh10) * 2.4);
    font-weight: var(--font-extra-bold);
    line-height: 1.5;
    color: var(--color-white);
    text-align: center;
    background-image: url('../img/common/bg_footer_recruit_ttl.webp');
    background-size: 430px auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: var(--color-bg-light);
    padding: 165px 0 0;
    height: 400px;
    position: relative;
    z-index: 1;
}

.recruit-footer .footer-recruit-list {
    height: 490px;
    background-image: url('../img/common/bg_footer_recruit_hozuki.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 var(--wh15);
    position: relative;
    z-index: 2;
    margin-top: -55px;
    margin-bottom: 0;
}

.footer-recruit-list li {
    display: flex;
    min-height: calc(var(--wh10) * 18);
}

.footer-recruit-list li .card {
    display: flex;
    align-items: center;
    gap: 0 0.8em;
    width: 100%;
}
.footer-recruit-list li:last-child .card {
    align-items: flex-start;
}

.footer-recruit-list li:last-child .card {
    flex-direction: row-reverse;
}

.footer-recruit-list li .text-cont h3 {
    font-size: var(--wh20);
    font-weight: var(--font-extra-bold);
    color: var(--color-white);
    padding-bottom: var(--wh10);
    background-image: linear-gradient(
        to right,
        currentColor 0 2px,
        transparent 2px 10px
    );
    background-repeat: repeat-x;
    background-size: 10px 2px; 
    background-position: calc(100% - 7px) bottom
}

.footer-recruit-list li .img-cont {
    position: relative;
    width: 100%;
}

.footer-recruit-list li .img-cont img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    min-height: calc(var(--wh10) * 18);
    position: relative;
}

.footer-recruit-list li:last-child .img-cont img {
    top: -30px
}

.footer-recruit-list li .text-cont p {
    color: var(--color-white);
    font-weight: var(--font-bold);
    margin: var(--wh10) 0 0 0;
}

.recruit-footer .btn {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) translateY(60%);
    z-index: 2;
    text-align: center;
    /* 既存のボタンスタイルを維持 */
    width: calc(var(--wh10) * 14.6);
    height: var(--wh50);
    color: var(--color-accent);
    font-size: calc(var(--wh10) * 1.6);
    letter-spacing: 0.05em;
    padding: var(--wh15);
}

.recruit-footer li:first-child .card {
    position: relative;
    top: -20px;
}
.recruit-footer li:first-child .btn {
    bottom: -20px;
}

.recruit-footer .btn::after {
    width: calc(var(--wh10) * 2.2);
    height: calc(var(--wh10) * 2.2);
    font-size: calc(var(--wh10) * 0.9);
    padding-top: calc(var(--wh10) * 0.3);
    padding-left: calc(var(--wh10) * 0.1);
    background-color: var(--color-accent);
}

/* 賛助会員 */

.section.supporting {
    background-color: var(--color-secondary);
    background-image: linear-gradient(0deg, rgb(30 184 115) 0%, rgb(103 202 36) 60%, rgb(255 255 255) 61%, rgba(254 249 236) 100%);
    margin-top: calc(var(--wh20) * -1);
}

.home .section.supporting,
.contact .section.supporting {
    background-image: linear-gradient(0deg, rgb(30 184 115) 0%, rgb(103 202 36) 60%, rgb(255 255 255) 61%, rgba(255 255 255) 100%);
    margin-top: 0;
}

.section.supporting .section-wrapper {
    position: relative;
    padding-bottom: var(--wh30);
}

.section.supporting .illust-hozukinchan {
    position: absolute;
    top: calc(var(--wh10) * 0.8);
    left: calc(var(--wh10) * 6);
    z-index: 1;
}

.section.supporting .bg-branch {
    transform: rotate(96deg);
    background: url(../img/common/deco_branch.webp) no-repeat left top;
    background-size: 40%;
    top: var(--wh10);
    left: calc(var(--wh10) * -1.5);
    padding-top: 8em;
}

.section.supporting .section-title {
    font-size: var(--wh20);
    font-weight: 800;
    color: var(--color-white);
    margin: 8em var(--wh40) var(--wh30);
    text-align: left;
    position: relative;
}

.section.supporting .section-title::before {
    content: '';
    position: absolute;
    display: block;
    top: -3.5em;
    left: -1em;
    width: calc(var(--wh10) * 9.6);
    height: calc(var(--wh10) * 5.8);
    background: url(../img/common/supporting_illust.png) no-repeat center center;
    background-size: contain;
    overflow: hidden;
}

.section.supporting .deco {
    position: relative;
    top: calc(var(--wh10) * -13.5)
}

.section.supporting .deco::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: calc(var(--wh10) * 8);
    right: calc(var(--wh10) * 6);
    width: calc(var(--wh10) * 6);
    height: calc(var(--wh10) * 4.9);
    background: url(../img/common/deco_supporting.svg) no-repeat center center;
    background-size: contain;
}

.section.supporting img {
    position: absolute;
    z-index: 0;
    right: calc(var(--wh10) * -9);
    width: calc(var(--wh10) * 18);
    transform: rotate(8deg);
}

.section.supporting p.text {
    padding: 0 var(--wh30) 0 var(--wh40)
}

.section.supporting .btn-s {
    color: var(--color-white);
    padding: 0 var(--wh40) 0 0;
}

.section.supporting .btn-s::after {
    background: var(--color-white);
    color: var(--color-primary);
}

/* タイトル雲イラスト */
.move-kumo {
    position: relative;
}
.move-kumo::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: var(--wh10);
    right: calc(var(--wh10) * -8);
    width: calc(var(--wh10) * 14);
    height: calc(var(--wh10) * 6.1);
    background: url(../img/common/illust_kumo.webp) no-repeat;
    background-size: contain;
    animation: floatX 6s ease-in-out infinite;
}