/*
Theme Name: Rainbow Ours Entrance
Version: 1.0.0
Description: Cinematic responsive entrance page for RAINBOW OURS.
*/
:root{--ink:#f4f4f2;--muted:rgba(244,244,242,.52);--hair:rgba(244,244,242,.42)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:var(--ink);font-family:"Noto Sans JP","Yu Gothic",YuGothic,Meiryo,sans-serif}
body{min-height:100vh}
.entrance{position:relative;width:100%;height:100svh;min-height:620px;overflow:hidden;background:#000}
.visual{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center calc(50% + 50px);user-select:none;pointer-events:none}
.content{position:relative;z-index:2;width:100%;height:100%;padding:5.8vh 3.8vw 4.8vh;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto 1fr auto;align-items:start}
.tl{grid-column:1;grid-row:1;max-width:320px}
.tr{grid-column:3;grid-row:1;justify-self:end;text-align:right}
.bl{grid-column:1;grid-row:3;align-self:end}
.br{grid-column:3;grid-row:3;align-self:end;justify-self:end;text-align:right;max-width:300px}
.micro-jp{font-family:"Noto Serif JP","Yu Mincho",serif;font-size:clamp(12px,.95vw,16px);line-height:2.05;letter-spacing:.18em}
.micro-en{margin-top:18px;font-family:Arial,sans-serif;font-size:clamp(7px,.55vw,10px);line-height:2.05;letter-spacing:.42em;color:var(--muted);text-transform:uppercase}
.rule{width:23px;height:1px; margin-top:20px}
.tr .words{display:flex;flex-direction:column;gap:23px;font-family:Arial,sans-serif;font-size:clamp(8px,.62vw,11px);letter-spacing:.48em;color:var(--muted)}
.tr .words span{display:block}
.hero{position:absolute;z-index:3;left:50%;top:calc(42% + 50px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:min(52vw,760px)}
.logo{display:block;width:min(100%,660px);height:auto}
.tagline{margin-top:14px;font-family:"Noto Serif JP","Yu Mincho",serif;font-size:clamp(14px,1.25vw,20px);letter-spacing:.28em;white-space:nowrap;text-shadow:0 0 12px rgba(255,255,255,.12)}
.subline{margin-top:15px;font-family:Arial,sans-serif;font-size:clamp(7px,.55vw,10px);letter-spacing:.48em;color:var(--muted);text-transform:uppercase}
.enter{margin-top:64px;color:#eee;text-decoration:none;display:inline-flex;align-items:center;gap:25px;padding:0 0 12px; font-family:Arial,sans-serif;font-size:12px;letter-spacing:.5em;transition:opacity .25s,transform .25s}
.enter::after{content:"›";font-size:25px;font-weight:200;line-height:10px;letter-spacing:0;transform:translateY(-1px)}
.enter:hover{opacity:.7;transform:translateX(3px)}
.counter{font-family:Arial,sans-serif;font-size:10px;letter-spacing:.35em;color:var(--muted);display:flex;align-items:center;gap:14px}
.counter::after{content:"";display:block;width:76px;height:1px;background:var(--hair);order:1}.counter span:first-child{order:0}.counter span:last-child{order:2}
.company{margin-top:25px;font-family:Arial,sans-serif;font-size:8px;letter-spacing:.48em;color:var(--muted);text-transform:uppercase}
.br .micro-en{margin-top:20px}
@media (max-width:900px){
 .content{padding:5vh 5vw 4.5vh}
 .hero{top:50%;width:min(72vw,680px)}
 .enter{margin-top:52px}
 .tr .words{gap:17px}
}
@media (max-width:600px){
 .entrance{min-height:560px}
 .visual{object-position:58% center}
 .content{padding:28px 24px 28px;display:block}
 .tl{position:absolute;left:24px;top:28px;max-width:210px}
 .tr{position:absolute;right:24px;top:30px}
 .tr .words{gap:12px;font-size:7px;letter-spacing:.34em}
 .tl .micro-jp{color:#808080; font-size:10px;letter-spacing:.12em;line-height:1.9}
 .tl .micro-en{margin-top:10px;font-size:6px;letter-spacing:.25em;line-height:1.9}
 .tl .rule{margin-top:11px}
 .hero{top:46%;width:78vw}
 .logo{width:100%}
 .tagline{margin-top:10px;font-size:11px;letter-spacing:.18em}
 .subline{margin-top:9px;font-size:5.5px;letter-spacing:.3em}
 .enter{margin-top:42px;font-size:9px;letter-spacing:.38em;gap:15px;padding-bottom:9px}
 .enter::after{font-size:19px}
 .bl{position:absolute;left:24px;bottom:28px}
 .counter{font-size:7px;gap:8px}
 .counter::after{width:38px}
 .company{margin-top:13px;font-size:5.5px;letter-spacing:.3em}
 .br{position:absolute;right:24px;bottom:28px;max-width:190px}
 .br .micro-jp{font-size:9px;letter-spacing:.08em;line-height:1.8}
 .br .micro-en{margin-top:10px;font-size:5px;letter-spacing:.22em;line-height:1.8}
 .br .rule{margin-top:10px;margin-left:auto}
}
@media (max-height:700px) and (min-width:601px){
 .hero{top:40%}.enter{margin-top:35px}.tr .words{gap:12px}.micro-en{margin-top:10px}
}

/* micro Japanese text */
div.micro-jp {
    color: #808080 !important;
}



/* =========================================================
   RAINBOW OURS / GLOBAL SITE CHROME
   既存 style.css の末尾へ追記
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.ro-global-header,
.ro-global-footer,
.ro-outline-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.ro-global-header {
    position: relative;
    z-index: 100;
    background: #fff;
    color: #111;
    border-bottom: 1px solid #e7e7e7;
}

.ro-global-header__inner {
    width: min(1400px, calc(100% - 64px));
    min-width: 0;
    min-height: 74px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
}

.ro-global-header__logo {
    flex: 0 0 auto;
    color: #111;
    text-decoration: none;
    line-height: 1;
}

.ro-global-header__logo-main {
    display: block;
    font: 700 20px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .08em;
    white-space: nowrap;
}

.ro-global-header__logo-sub {
    display: block;
    margin-top: 6px;
    font: 400 7px/1 "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    letter-spacing: .13em;
    white-space: nowrap;
}

.ro-global-nav {
    min-width: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: clamp(13px, 1.8vw, 28px);
}

.ro-global-nav a {
    flex: 0 0 auto;
    color: #111;
    text-decoration: none;
    font: 600 9px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .12em;
    white-space: nowrap;
}

.ro-global-header__right {
    flex: 0 0 auto;
    margin-left: clamp(16px, 2vw, 30px);
    display: flex;
    align-items: center;
    gap: 7px;
}

.ro-global-header__tel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 7px;
    padding-right: 15px;
    border-right: 1px solid #ddd;
    color: #111;
    text-decoration: none;
    white-space: nowrap;
}

.ro-global-header__tel strong {
    font: 600 12px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .04em;
}

.ro-global-header__tel small {
    color: #777;
    font: 400 7px/1 "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}

.ro-global-header__button,
.ro-global-footer__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    height: 38px;
    min-width: 105px;
    padding: 0 12px;
    border: 1px solid #111;
    background: #fff;
    color: #111;
    text-decoration: none;
    font: 600 9px/1 "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    letter-spacing: .08em;
    white-space: nowrap;
    transition: opacity .2s ease;
}

.ro-global-header__button--black,
.ro-global-footer__button--black {
    background: #111;
    color: #fff;
}

.ro-global-header__button span,
.ro-global-footer__button b {
    font: 400 14px/1 Arial, Helvetica, sans-serif;
}

.ro-global-header__button:hover,
.ro-global-footer__button:hover {
    opacity: .72;
}

.ro-outline-shell {
    background: #fff;
    min-height: 1000px;
    overflow: hidden;
}

.ro-outline-shell__container {
    width: min(1400px, calc(100% - 64px));
    height: 1000px;
    margin: 0 auto;
    background: #fff;
}

.ro-global-footer {
    position: relative;
    overflow: hidden;
    background: #080808;
    color: #fff;
}

.ro-global-footer::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        #e85b72 0%,
        #f2c85b 25%,
        #67c98b 50%,
        #59a8e8 75%,
        #a77be8 100%
    );
}

.ro-global-footer__inner {
    width: min(1400px, calc(100% - 64px));
    min-width: 0;
    min-height: 220px;
    margin: 0 auto;
    padding: 42px 0 32px;
    display: grid;
    grid-template-columns: minmax(220px, 1.45fr) minmax(90px, .65fr) minmax(220px, 1.2fr) auto;
    gap: 35px;
    align-items: start;
}

.ro-global-footer__logo {
    font: 700 21px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .08em;
    white-space: nowrap;
}

.ro-global-footer__company {
    margin: 7px 0 0;
    color: #999;
    font: 400 8px/1.5 "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    letter-spacing: .08em;
}

.ro-global-footer__tagline {
    margin: 24px 0 0;
    font: 400 13px/1.8 "Noto Serif JP", "Yu Mincho", serif;
    letter-spacing: .12em;
}

.ro-global-footer__en {
    margin: 10px 0 0;
    color: #666;
    font: 400 7px/1.8 Arial, Helvetica, sans-serif;
    letter-spacing: .16em;
}

.ro-global-footer__links {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding-top: 3px;
}

.ro-global-footer__links a {
    color: #ddd;
    text-decoration: none;
    font: 500 9px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .15em;
    white-space: nowrap;
}

.ro-global-footer__contact {
    min-width: 0;
    padding-left: 28px;
    border-left: 1px solid #333;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #999;
    font: 400 8px/1.6 "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}

.ro-global-footer__contact strong {
    color: #fff;
    font: 500 15px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .04em;
}

.ro-global-footer__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ro-global-footer__button {
    min-width: 130px;
    border-color: #555;
    color: #fff;
    background: transparent;
}

.ro-global-footer__button--black {
    border-color: #fff;
    background: #fff;
    color: #111;
}

.ro-global-footer__bottom {
    position: relative;
    z-index: 3;
    width: min(1400px, calc(100% - 64px));
    min-width: 0;
    min-height: 47px;
    margin: 0 auto;
    padding: 13px 0 17px;
    border-top: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #666;
    font: 400 7px/1.5 "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}

.ro-global-footer__bottom a {
    color: #888;
    text-decoration: none;
}

.ro-global-footer__bottom i {
    margin: 0 5px;
    font-style: normal;
    color: #444;
}

.ro-global-footer__bottom small {
    font: inherit;
    letter-spacing: .12em;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .ro-global-header__inner,
    .ro-global-footer__inner,
    .ro-global-footer__bottom,
    .ro-outline-shell__container {
        width: calc(100% - 40px);
    }

    .ro-global-nav {
        gap: 12px;
    }

    .ro-global-header__right {
        margin-left: 14px;
    }

    .ro-global-header__tel {
        display: none;
    }

    .ro-global-header__button {
        min-width: 92px;
    }

    .ro-global-footer__inner {
        grid-template-columns: minmax(200px, 1.3fr) minmax(80px, .7fr) minmax(190px, 1fr) auto;
        gap: 22px;
    }
}

@media (max-width: 900px) {
    .ro-global-nav {
        gap: 9px;
    }

    .ro-global-nav a {
        font-size: 8px;
    }

    .ro-global-header__right {
        margin-left: 10px;
        gap: 5px;
    }

    .ro-global-header__button {
        min-width: 80px;
        height: 36px;
        padding: 0 9px;
        font-size: 8px;
    }

    .ro-global-footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    .ro-global-footer__contact {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #333;
        padding-top: 20px;
    }

    .ro-global-footer__actions {
        padding-top: 20px;
        flex-direction: row;
    }
}

@media (max-width: 700px) {
    .ro-global-header__inner {
        width: calc(100% - 32px);
        min-height: 66px;
    }

    .ro-global-nav {
        display: none;
    }

    .ro-global-header__right {
        margin-left: auto;
    }

    .ro-global-header__button {
        min-width: 88px;
        height: 34px;
    }

    .ro-outline-shell__container {
        width: calc(100% - 32px);
        height: 1000px;
    }

    .ro-global-footer__inner {
        width: calc(100% - 32px);
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px 0 28px;
    }

    .ro-global-footer__actions {
        padding-top: 0;
    }

    .ro-global-footer__bottom {
        width: calc(100% - 32px);
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
    }

    .ro-global-footer__bottom small {
        white-space: normal;
    }
}