/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body{
    margin:0;
    font-family:sans-serif;
    background:#f6f6ff;
    padding-top:80px;
}

/* 公開ページ共通の読み込み演出（管理画面・タレント詳細は対象外） */
body.public-area:not(.talent-detail-page) > header{
    animation: public-header-enter 600ms cubic-bezier(.16, 1, .3, 1) both;
}

body.public-area:not(.talent-detail-page) .public-page-content{
    position:relative;
    isolation:isolate;
}

body.public-area:not(.talent-detail-page) .public-page-content::before{
    position:absolute;
    z-index:-1;
    top:0;
    left:50%;
    width:min(68vw, 760px);
    height:180px;
    border-radius:50%;
    background:radial-gradient(ellipse, rgba(126, 111, 245, 0.12), transparent 68%);
    content:"";
    filter:blur(8px);
    pointer-events:none;
    transform:translateX(-50%);
    animation: public-aura-drift 8s ease-in-out infinite alternate;
}

body.public-area:not(.talent-detail-page) .public-page-content :is(a, button, input[type="submit"]){
    transition:transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

body.public-area:not(.talent-detail-page) .public-page-content :is(a, button, input[type="submit"]):hover{
    filter:brightness(1.03);
}

@keyframes public-header-enter{
    from{ opacity:0; transform:translateY(-14px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes public-aura-drift{
    from{ transform:translateX(-54%) scale(.96); }
    to{ transform:translateX(-46%) scale(1.05); }
}

.public-page-content .scroll-reveal-item{
    opacity:0;
    transform:translateY(28px) scale(.985);
    transition:opacity 650ms cubic-bezier(.16, 1, .3, 1) var(--scroll-reveal-delay, 0ms), transform 650ms cubic-bezier(.16, 1, .3, 1) var(--scroll-reveal-delay, 0ms);
    will-change:opacity, transform;
}

.public-page-content .scroll-reveal-item.is-scroll-revealed{
    opacity:1;
    transform:translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
    body.public-area:not(.talent-detail-page) > header,
    body.public-area:not(.talent-detail-page) .public-page-content,
    body.public-area:not(.talent-detail-page) .public-page-content::before{
        animation:none;
    }

    body.public-area:not(.talent-detail-page) .public-page-content :is(a, button, input[type="submit"]){
        transition:none;
    }

    .public-page-content .scroll-reveal-item{
        opacity:1;
        transform:none;
        transition:none;
    }
}

/* ヘッダー */
header{
    position: fixed;      /* ヘッダー固定 */
    top: 0;
    left: 0;
    width: 100%;
    background: transparent; /*背景透明 */
    color: black;
    margin: auto;
    z-index: 1000;        /* 他の要素より前に表示 */
}

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

nav ul{
    list-style:none;
    display:flex;
    gap:20px;
}

nav a{
    color:black;
    text-decoration:none;
}

/* トップ */

.hero{
    text-align:center;
    padding:120px 20px;
    background:linear-gradient(135deg,#6a5acd,#9370db);
    color:white;
}

.hero h1{
    font-size:48px;
}

/* メンバー */

.members{
    padding:60px 20px;
    text-align:center;
}

.member-list{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

.member{
    background:white;
    width:200px;
    padding:20px;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.member img{
    width:100%;
    border-radius:10px;
}

/* 事務所紹介 */

.about{
    background:white;
    padding:60px 20px;
    text-align:center;
}

.contact-x-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    margin-top:8px;
    border-radius:50%;
    background:#000;
    color:#fff;
    font-size:22px;
    text-decoration:none;
    transition:transform 0.3s ease;
}

.contact-x-link:hover{
    transform:scale(1.1);
}

/* フッター */

footer{
    background:#333;
    color:white;
    text-align:center;
    padding:20px;
}

.top-footer{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    align-items:center;
    gap:24px;
    padding:20px;
    text-align:left;
}

.top-footer__brand{
    margin:0;
    font-weight:bold;
}

.top-footer__nav ul{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
}

.top-footer__nav a{
    color:white;
    text-decoration:none;
}

@media (max-width: 600px){
    .top-footer{
        flex-direction:column;
        text-align:center;
    }

    .top-footer__nav ul{
        align-items:center;
    }
}

.header-logo{
    padding: 10px;
}

/* カワリバ紹介 */
.kawariba-about{
    --kawariba-ink: #141426;
    --kawariba-accent: #6d5dfc;
    position: relative;
    min-height: calc(100vh - 80px);
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 18%, rgba(109, 93, 252, 0.16), transparent 27rem),
        radial-gradient(circle at 86% 73%, rgba(77, 201, 205, 0.18), transparent 24rem),
        #f8f8ff;
    color: var(--kawariba-ink);
}

.kawariba-about__frame{
    position: fixed;
    z-index: 1100;
    inset: 14px;
    border: 1px solid rgba(20, 20, 38, 0.35);
    border-radius: 18px;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.38);
    pointer-events: none;
}

.kawariba-about__intro{
    box-sizing: border-box;
    display: flex;
    min-height: calc(100vh - 80px);
    padding: 120px 32px 80px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.kawariba-about__logo{
    width: min(340px, 72vw);
    height: auto;
    margin-bottom: 30px;
    filter: drop-shadow(0 18px 28px rgba(44, 36, 118, 0.16));
    animation: kawariba-logo-in 900ms cubic-bezier(.16, 1, .3, 1) both;
}

.kawariba-about__eyebrow{
    margin: 0 0 12px;
    color: var(--kawariba-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.kawariba-about h1{
    margin: 0;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 500;
    letter-spacing: 0.12em;
}

.kawariba-about__scroll-cue{
    position: absolute;
    bottom: 42px;
    color: rgba(20, 20, 38, 0.55);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
}

.kawariba-about__scroll-cue::after{
    display: block;
    width: 1px;
    height: 35px;
    margin: 10px auto 0;
    background: currentColor;
    content: "";
    animation: kawariba-scroll 1.8s ease-in-out infinite;
}

.kawariba-about__statements{
    padding: 6vh clamp(28px, 10vw, 180px) 12vh;
}

.kawariba-about__line{
    max-width: 950px;
    min-height: 28vh;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.55rem, 2.1vw, 2.2rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.06em;
    text-align: center;
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 800ms ease, transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.kawariba-about__line.is-visible{
    opacity: 1;
    transform: translateY(0);
}

.kawariba-about__line--last{
    justify-content: center;
    color: var(--kawariba-accent);
    font-weight: 700;
}

@keyframes kawariba-logo-in{
    from{ opacity: 0; transform: translateY(20px) scale(0.96); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes kawariba-scroll{
    0%, 100%{ transform: scaleY(0.35); transform-origin: top; }
    50%{ transform: scaleY(1); transform-origin: top; }
}

@media (max-width: 600px){
    .kawariba-about__frame{ inset: 8px; border-radius: 12px; }
    .kawariba-about__intro{ padding-right: 24px; padding-left: 24px; }
    .kawariba-about__statements{ padding-right: 36px; padding-left: 36px; }
    .kawariba-about__line{ min-height: 24vh; }
}

@media (prefers-reduced-motion: reduce){
    .kawariba-about *, .kawariba-about *::after{
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}

/* Devise: public/member area */
.devise-page{
    box-sizing:border-box;
    display:grid;
    min-height:calc(100vh - 80px);
    padding:48px 20px;
    place-items:center;
    background:
        radial-gradient(circle at 15% 18%, rgba(109, 93, 252, 0.18), transparent 24rem),
        radial-gradient(circle at 84% 78%, rgba(77, 201, 205, 0.16), transparent 22rem),
        #f8f8ff;
}

.devise-card{
    box-sizing:border-box;
    width:min(100%, 440px);
    padding:36px;
    border:1px solid rgba(109, 93, 252, 0.18);
    border-radius:20px;
    background:rgba(255, 255, 255, 0.94);
    box-shadow:0 20px 45px rgba(44, 36, 118, 0.14);
}

.devise-card__header{ margin-bottom:28px; }
.devise-card__header h1{ margin:0; color:#141426; font-size:1.65rem; letter-spacing:.04em; }
.devise-card__eyebrow{ margin:0 0 8px; color:#6d5dfc; font-size:.7rem; font-weight:700; letter-spacing:.18em; }
.devise-description{ margin:0 0 22px; color:#5b5b70; font-size:.92rem; line-height:1.65; }
.devise-form{ max-width:none; margin:0; }
.devise-field{ margin-bottom:19px; }
.devise-field label{ display:block; margin-bottom:7px; color:#303047; font-size:.9rem; font-weight:700; }
.devise-field small{ display:block; margin:-2px 0 7px; color:#76768c; font-size:.78rem; }
.devise-field input:not([type="checkbox"]){ box-sizing:border-box; width:100%; padding:11px 12px; border:1px solid #d7d5ed; border-radius:9px; background:#fff; font:inherit; }
.devise-field input:focus{ border-color:#6d5dfc; outline:0; box-shadow:0 0 0 3px rgba(109, 93, 252, .15); }
.devise-check-field{ display:flex; align-items:center; gap:8px; margin:-2px 0 22px; color:#57576c; font-size:.86rem; }
.devise-check-field input{ width:auto; margin:0; accent-color:#6d5dfc; }
.devise-form .devise-submit{ width:100%; padding:12px 18px; border:0; border-radius:9px; background:#6d5dfc; color:#fff; cursor:pointer; font:inherit; font-weight:700; transition:background .2s ease, transform .2s ease; }
.devise-form .devise-submit:hover{ background:#5646e5; transform:translateY(-1px); }
.devise-links{ margin-top:23px; text-align:center; }
.devise-links p{ margin:9px 0; }
.devise-links a{ color:#5c4cf0; font-size:.88rem; text-decoration:none; }
.devise-links a:hover{ text-decoration:underline; }
.devise-errors{ margin:0 0 18px; padding:12px 14px; border:1px solid #f5aca6; border-radius:9px; background:#fff1f1; color:#a83333; font-size:.85rem; }
.devise-errors p{ margin:0 0 6px; font-weight:700; }
.devise-errors ul{ margin:0; padding-left:20px; }

.flash-message{
    box-sizing:border-box;
    width:min(100% - 40px, 720px);
    margin:18px auto;
    padding:12px 16px;
    border:1px solid;
    border-radius:10px;
    font-size:.92rem;
    font-weight:700;
}
.flash-message--notice{ border-color:#8ad5b0; background:#ecfdf3; color:#17643a; }
.flash-message--alert{ border-color:#f5aca6; background:#fff1f1; color:#a83333; }

@media (max-width: 480px){
    .devise-page{ padding:24px 14px; }
    .devise-card{ padding:26px 20px; border-radius:15px; }
    .flash-message{ width:calc(100% - 28px); }
}