@charset "UTF-8";

:root {
    --bg: #f8f8ff;
    --ink: #333333;
    --mute: #6B7280;
    --border: #E5E7EB;
    --accent: #D62828;
    --blue: #4F65FF;

    --line-works: #002FFF;
    --line-about: #FF8800;
    --line-contact: #FF0000;

    --feature-ratio: 16 / 10;

    /* 上段の横長カード比率 */

    --sidebar-w: min(16.666vw, 320px);
    --content-max: 1500px;
    --sp-content: 330px;

    --ff-en: "Aboreto", system-ui, sans-serif;
    --ff-ja: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fs-body: 16px;
    --fs-nav: 24px;
    --fs-title: clamp(24px, 6vw, 40px);

    --shadow-1: 0 6px 18px rgba(0, 0, 0, .08);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    scroll-behavior: smooth;
}


body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font-family: var(--ff-ja);
    line-height: 1.8;
    font-size: var(--fs-body);
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    text-decoration: none;
}

.section_title {
  font-size: clamp(2rem, 0.724rem + 5.446vw, 5.625rem);
  ;
  font-weight: 700;
  letter-spacing: 2px;
  display: inline-block;
}


.section_title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  animation: charFade 0.6s ease forwards;
}



.section_title span:nth-child(1) {
  animation-delay: 0.1s;
}

.section_title span:nth-child(2) {
  animation-delay: 0.25s;
}

.section_title span:nth-child(3) {
  animation-delay: 0.4s;
}

.section_title span:nth-child(4) {
  animation-delay: 0.55s;
}

.section_title span:nth-child(5) {
  animation-delay: 0.7s;
}

.reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}

.reveal.in,
.in2 {
    opacity: 1;
    transform: none;
}

.cat,
.cat2 {
    font-size: 20px;
    letter-spacing: .12em;

    text-transform: uppercase;
}

.cat {
    color: var(--blue);
}

.cat2 {
    color: var(--accent);
}

.footer {
    margin-top: clamp(5.625rem, 3.204rem + 10.329vw, 12.5rem);
    ;
}


h4 {
    margin-top: clamp(1.875rem, 0.775rem + 4.695vw, 5rem);
    ;
}


/* ====== Sidebar ====== */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    padding: 24px 22px;
    /* border-right: 1px solid rgba(0, 0, 0, .06); */
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--bg);
}


.nav_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}


.nav_link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #111;
    font-family: var(--ff-en);
    text-decoration: none;
    font-size: var(--fs-nav);
    letter-spacing: .08em;
    line-height: 1;
    white-space: nowrap;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background .2s ease;
}



.nav_link:hover {
    background: #F3F4F6;
}

.nav_link.is-active {
    background: #EEF2FF;
}


.nav_heart {
    color: var(--accent);

    opacity: 0;
    transform: translateX(-4px) scale(.9);
    transition: transform .18s ease, opacity .18s ease;
    font-size: 20px;
}



.backtop-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    bottom: 10px;
    left: 100px;
}











@media (hover:hover) and (pointer:fine) {
    .nav_link:hover .nav_heart {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.pageindex {
    margin-top: auto;
    color: var(--mute);
    display: grid;
    gap: 4px;
}

.pageindex_num {
    font-size: 48px;
    line-height: 1;
    color: #000;
    opacity: .15;
}


.pageindex_labe {
    font-size: 10px;
    letter-spacing: .2em;
}

.backtop-wrap {
    display: grid;
    gap: 6px;
}

.backtop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #111;
    font-size: 14px;
}






/* ====== はんんバーガー ====== */

.sp-header {
    display: none;
}

.hamburger {
    position: fixed;
    right: 12px;
    top: 12px;
    z-index: 50;
    width: 32px;
    height: 28px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;

}

.hamburger span,
.hamburger::before,
.hamburger::after {
    content: "";
    display: block;
    height: 2px;
    background: #111;
    margin: 7px 0;
    transition: transform .24s, opacity .24s, background .24s
}


.hamburger[aria-expanded="true"] span {
    opacity: 0
}

.hamburger[aria-expanded="true"]::before {
    transform: translateY(9px) rotate(45deg)
}

.hamburger[aria-expanded="true"]::after {
    transform: translateY(-9px) rotate(-45deg)
}


.sp-menu {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    clip-path: circle(0 at 100% 0);
    background: #fff;
    transition: clip-path .36s ease-in-out;
}

.sp-menu.is-open {
    pointer-events: auto;
    clip-path: circle(140% at 100% 0);
}

.sp-menu_inner {
    padding: 80px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sp-menu_nav {
    margin-top: 40%;
    display: grid;
    gap: 24px;
}

.sp-menu_nav a {
    color: var(--accent);
    text-decoration: none;
    font-family: var(--ff-en);
    font-size: 32px;
    letter-spacing: .12em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s;
}

.sp-menu.is-open .sp-menu_nav a {
    opacity: 1;
    transform: none;
}

.sp-menu.is-open .sp-menu_nav a:nth-child(1) {
    transition-delay: .06s
}

.sp-menu.is-open .sp-menu_nav a:nth-child(2) {
    transition-delay: .12s
}

.sp-menu.is-open .sp-menu_nav a:nth-child(3) {
    transition-delay: .18s
}

.sp-menu.is-open .sp-menu_nav a:nth-child(4) {
    transition-delay: .24s
}

body.is-locked {
    overflow: hidden;
}






.footer {
    border-top: 1px solid var(--border);
    background-color: var(--bg);
}

.footer .wrapper {
    padding: 20px 60px
}

.footer small {
    color: #6B7280
}