/* ============================================================
    BLADE & CO./css/style.css — BLADE & CO.
    大人の男のためのバーバーショップ LP
    ============================================================

    目次
    0.  CSS変数
    1.  BASE STYLE
    2.  LAYOUT
    3.  BUTTON
    4.  HEADER（NAVBAR）
    5.  HERO
    6.  CONCEPT
    7.  STYLE GALLERY
    8.  MENU
    9.  BARBER
    10. SHOP INFO
    11. CTA
    12. FOOTER / BACK TO TOP
    13. RESPONSE（BREAKPOINT）
    
============================================================ */

/* ======================
#00 CSS変数
====================== */
:root{
    /* ---- メインカラー ---- */
    --gold:        #B8966A;   /* ゴールド（メインアクセント）        */
    --gold-light:  #D4B48A;   /* ライトゴールド（hover・装飾）      */
    --gold-pale:   #EEE0C8;   /* ペールゴールド（下線・薄い装飾）       */

    /* ---- ベースカラー ---- */
    --black:       #0C0B09;   /* 最も深い黒（背景・強調）            */
    --dark:        #161410;   /* ダーク背景（セクション交互）        */
    --mid-dark:    #221F1A;   /* 中間ダーク（カード・フォーム）      */
    --border:      #2E2A24;   /* ボーダー・区切り線・装飾            */

    /* ---- テキストカラー ---- */
    --white:       #FFFFFF;
    --text-main:   #E8E2D9;   /* メインテキスト（オフホワイト）      */
    --text-mid:    #9A9187;   /* 中間テキスト（説明文・補助）        */
    --text-light:  #5C5550;   /* 薄いテキスト（メタ情報・注記）      */

    /* --- フォント --- */
    --font-display: 'Libre Baskerville', 'Noto Serif JP', serif;     /* 見出し・数字 */
    --font-body:    'Noto Serif JP', serif;                       /* 本文 */

    /* --- トランジション --- */
    --transition-fast: .3s ease;
    --transition-mid:  .5s ease;
    --transition-slow: .7s ease;
}

/* =======================
#01 BASE STYLE
======================= */
html {
    font-size: 100%;
}
body {
    background-color: var(--black);
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 0.85rem;
    line-height: 1.6;
}
img {
    max-width: 100%;
    display: block;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: var(--gold-light);
}

/* =======================
#02 LAYOUT
======================= */
.logo {
    width: 90px;
    line-height: 1;
}
.header__logo {
    text-align: center;
}
.section {
    padding: 60px 0;
}
.wrapper {
    width: 100%;
    max-width: 1200px;
    padding: 0 16px;
    margin: 0 auto;
}
.sec__header {
    text-align: center;
    margin: 0 auto 24px auto;
}
.sec__header::after {
    content: "";
    display: inline-block;
    background-color: var(--gold-pale);
    width: 100%; height: 1px;
    text-align: center;
}
.sec__header .sec__tag {
    display: block;
    color: var(--gold);
    font-size: 0.75rem;
    margin-bottom: 6px;
}
.sec__header .sec__title {
    display: block;
    font-size: 1.75rem;
}
.cta .sec__header {
    max-width: 90%;
}
.cta .sec__header .sec__title{
    font-size: 1.5rem;
    letter-spacing: 0.15rem;
}
.sns {
    display: flex;
    gap: 12px;
    font-size: 1.5rem;
}
.sns__icon, .info__icon, .back__icon {
    color: var(--gold);
}

/* =======================
#03 BUTTON
======================= */
.btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.button {
    border-radius: 40px;
    font-weight: 700;
    font-size: 0.9rem;
    width: 140px;
    padding: 12px 24px;
    transition: transform var(--transition-mid),
                background-color var(--transition-mid),
                color var(--transition-mid);
}
.button--gold {
    background-color: var(--gold);
    color: var(--mid-dark);
}
.button--line {
    border: 1px solid var(--gold);
}
.button:hover {
    transform: translateY(-2px);
}
.sns__icon:hover {
    opacity: 0.7;
}
.cta__btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* =======================
#04 HEADER（NAVBAR）
======================= */
.header {
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    z-index: 70;
    background: transparent;
    transition: background-color var(--transition-fast);
}
.header__nav {
    width: 100%;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color var(--transition-mid),
                backdrop-filter var(--transition-mid);
}
.header__nav.is-scrolled {
    background-color: var(--border);
    backdrop-filter: blur(10px);
}
.header__logo {
    padding: 8px 0;
}
.header__menu {
    max-width: 180px;
    width: 80%; height: 100vh;
    background-color: var(--black);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    padding: 24px;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
}
.header__menu.is-open {
    transform: translateX(0);
}
.header__menu li {
    margin-bottom: 24px;
}
.header__menu a {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.10rem;
    letter-spacing: 0.1rem;
    padding: 8px 0;
}
.header__toggle {
    display: block;
    width: 25px; height: 16px;
    position: relative;
    z-index: 100;
    cursor: pointer;
}
.header__toggle span {
    background-color: var(--gold-light);
    width: 100%; height: 2px;
    position: absolute;
    transition: transform var(--transition-mid);
}
.header__toggle span:nth-of-type(1) {
    top: 0;
}
.header__toggle span:nth-of-type(2) {
    top: 8px;
    transition: transform var(--transition-slow),
                opacity var(--transition-slow);
}
.header__toggle span:nth-of-type(3) {
    top: 16px;
}
.header__toggle.is-open span:nth-of-type(1) {
    top: 8px;
    transform: rotate(225deg);
}
.header__toggle.is-open span:nth-of-type(2) {
    opacity: 0;
    transform: translateX(100px);
}
.header__toggle.is-open span:nth-of-type(3) {
    top: 8px;
    transform: rotate(-225deg);
}
.header__mask {
    display: none;
    transition: opacity var(--transition-slow);
}
.header__mask.is-open {
    display: block;
    width: 100%; height: 100vh;
    background-color: var(--mid-dark);
    opacity: 0.5;
    position: fixed;
    top: 0; left: 0;
    z-index: 80;
}
.header__sns {
    display: none;
}

/* =======================
#05 HERO
======================= */
.hero {
    width: 100%; height: calc(100vh - 15vh);
    background-image: url(../img/allef-vinicius-IvQeAVeJULw-unsplash.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    text-align: center;
    padding-top: 80px;
    position: relative;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
}
.hero__inner {
    max-width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 60;
}
.hero__lead {
    color: var(--gold);
    letter-spacing: 0.15rem;
    font-size: 0.75rem;
    margin-bottom: 16px;
    position: relative;
}
.hero__title {
    font-weight: bold;
    font-size: 2.0rem;
    margin-bottom: 24px;
}
/* =======================
## HERO ANIMATIONS
======================= */
.fadein {
    opacity: 0;
    transform: translateY(30px);
    animation: heroFade 1s .5s forwards;
}
@keyframes heroFade {
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.delay1 {
    animation-delay: .3s;
}
.delay2 {
    animation-delay: .6s;
}
.delay3 {
    animation-delay: .9s;
}

/* =======================
#06 CONCEPT
======================= */
.concept {
    width: 100%;
    background-color: var(--dark);
}
.concept__list {
    display: flex;
    flex-direction: column-reverse;
    gap: 32px;
}
.concept__text {
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 32px;
}
.concept__text strong {
    font-weight: 700;
    font-size: 1.1rem;
}
.concept__detail {
    font-size: 0.75rem;
}
.concept__detail li{
    position: relative;
    margin: 0 0 12px 12px;
}
.concept__detail li::before{
    content: "";
    width: 0; height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent var(--text-main);
    position: absolute;
    top: 20%; left: -12px; bottom: 0;
}
.concept__image {
    width: 100%; height: 300px;
}
.concept__image img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* =======================
#07 STYLE GALLERY
======================= */
.gallery {
    width: 100%;
}
.gallery__box {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 32px;
    padding: 0 16px;
}
.gallery__item--large {
    grid-column: auto;
}
.gallery__item {
    width: 100%; 
    height: auto;
    aspect-ratio: 4/3;
    position: relative;
    transition: transform var(--transition-mid);
}
.gallery__item:hover {
    transform: scale(1.05);
}
.gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.7;
    transition: transform var(--transition-mid),
                opacity var(--transition-mid);
}
.gallery__title {
    position: absolute;
    left: 10px; bottom: 0;
}

/* =======================
#08 MENU
======================= */
.menu {
    width: 100%;
    background-color: var(--dark);
}
.menu p {
    text-align: center;
    font-size: 0.9rem;
    margin-bottom: 32px;
}
.menu__container {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 16px;
    margin: 0 auto;
}
.menu__category {
    margin-bottom: 32px;
}
.menu__category:last-child {
    margin-bottom: 0;
}
.menu__title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}
.menu__list {
    display: grid;
    grid-template-columns: 1fr auto;
    border-bottom: 1px solid var(--border);
    padding: 20px 12px;
    margin: 0 auto;
}
.menu__list:hover {
    background-color: var(--mid-dark);
}
.menu__left {
    font-weight: 100;
    font-size: 0.9rem;
    text-align: left;
}
.menu__right {
    text-align: right;
}
.menu__left span,
.menu__right span {
    display: block;
    font-size: 0.7rem;
    opacity: 0.7;
}
.menu__right strong {
    display: block;
    color: var(--gold);
}

/* =======================
#09 BARBER
======================= */
.barber {
    width: 100%;
}
.barber__box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.barber__card {
    background-color: var(--mid-dark);
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition-mid),
                border-color var(--transition-mid);
}
.barber__card:hover{
    transform: translateY(-4px);
    border: 1px solid var(--gold);
}
.barber__image{
    aspect-ratio: 3/4;
    overflow: hidden;
}
.barber__card img {
    width: 100%; height: 100%;
    background-color: var(--black);
    aspect-ratio: unset;
    object-fit: cover;
    object-position: top;
    transition: transform var(--transition-mid);
}
.barber__card:hover img {
    transform: scale(1.02);
}
.barber__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 16px;
}
.barber__name {
    color: var(--white);
    font-size: 1.1rem;
}
.barber__position {
    font-size: 0.8rem;
    opacity: 0.8;
}
.barber__text {
    color: var(--text-mid);
    opacity: 0.8;
    font-size: 0.9rem;
}
.barber__tags {
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.barber__tags span {
    color: var(--text-mid);
    border: 1px solid var(--border);
    padding: 2px 4px;
}
.barber__card:hover .barber__tags span {
    color: var(--gold);
    border: 1px solid var(--gold);
}

/* =======================
#10 SHOP INFO
======================= */
.info {
    width: 100%;
    background-color: var(--dark);
}
.info__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.info__item {
    width: 100%;
}
.info__addr dl {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}
.info__addr .fa-solid {
    font-size: 1.25rem;
}
.info__addr dd {
    display: flex;
    flex-direction: column;
}
.info__addr dd strong {
    font-size: 0.7rem;
    padding-bottom: 12px;
    opacity: 0.7;
}
.info__sns {
    font-size: 1.5rem;
    gap: 24px;
    display: flex;
    justify-content: center;
}
.info__map{
    width: 100%; height: 300px;
}
.info__map iframe {
    width: 100%; height: 100%;
    filter: grayscale(1);
}

/* =======================
#11 CTA
======================= */
.cta {
    width: 100%;
}

/* =======================
#12 FOOTER
======================= */
.footer {
    width: 100%;
    background-color: var(--dark);
    padding-top: 32px;
}
.footer__inner{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    border-bottom: 1px solid var(--border);
    padding: 24px;
}
.footer__nav{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer__nav a{
    margin-bottom: 24px;
}
.footer__nav a:last-child{
    margin-bottom: 0;
}
.footer .copyright{
    text-align: center;
    font-size: 0.7rem;
    padding: 20px 0;
}

/* =======================
BACK TO TOP
======================= */
.back__top {
    width: 40px; height: 40px;
    background-color: var(--border);
    border-radius: 50%;
    position: fixed;
    bottom: 16px; right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    transition: background-color var(--transition-fast),
                transform var(--transition-fast),
                opacity var(--transition-fast);
}
.back__top.is-visual {
    opacity: 1;
    visibility: visible;
}

/* =======================
#13 RESPONSE（BREAKPOINT）
======================= */
/* =======================
## Mobile Landscape（576px以上）
======================= */
@media (min-width: 576px) {
    /* BUTTON */
    .button {
        font-size: 0.95rem;
        width: 150px;
        padding: 14px 28px;
    }
    /* HERO */
    .hero__lead {
        letter-spacing: 0.2rem;
        font-size: 0.8rem;
        margin-bottom: 18px;
    }
    .hero__title {
        font-size: 2.5rem;
        margin-bottom: 26px;
    }
    /* STYLE GALLERY */
    .gallery__box {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .gallery__item:hover {
        transform: scale(1.08);
    }
}
/* =======================
## TABLET（768px以上）
======================= */
@media (min-width: 768px) {
    /* BASE STYLE */
    body {
        font-size: 0.95rem;
    }
    /* LAYOUT */
    .logo {
        width: 100px;
    }
    .section {
        padding: 95px 0;
    }
    .sns {
        font-size: 1.65rem;
        gap: 14px;
    }
    .sec__header {
        margin: 0 auto 28px auto;
    }
    .sec__header .sec__title {
        font-size: 1.9rem;
        margin-bottom: 14px;
    }
    .cta .sec__header {
        max-width: 550px;
    }
    .cta .sec__header .sec__title {
        letter-spacing: 0.25rem;
        font-size: 1.9rem;
    }
    /* BUTTON */
    .btns {
        gap: 32px;
    }
    .button {
        font-size: 1rem;
        width: 160px;
        padding: 15px 30px;
    }
    .hero__btns {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }
    .cta__btns {
        flex-direction: row;
        justify-content: center;
        gap: 32px;
    }
    /* HEADER（NAVBAR） */
    .header__nav {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        padding: 12px 24px;
    }
    .header__menu {
        position: static;
        width: auto; height: auto;
        max-width: none;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        transform: none;
        background: transparent;
        padding: 0;
    }
    .header__menu li {
        margin-bottom: 0;
    }
    .header__menu a {
        font-size: 0.85rem;
        letter-spacing: 0.1rem;
    }
    .header__sns {
        display: flex;
        justify-content: flex-end;
    }
    .header__toggle {
        display: none;
    }
    .header__mask {
        display: none;
    }
    /* HERO */
    .hero {
        height: 100vh;
        padding-top: 0;
    }
    .hero__inner {
        max-width: 700px;
    }
    .hero__lead {
        letter-spacing: 4px;
        font-size: 0.85rem;
        margin-bottom: 20px;
    }
    .hero__title {
        font-size: 3rem;
        margin-bottom: 28px;
    }
    /* CONCEPT */
    .concept__text {
        text-align: justify;
        line-height: 2.0;
        font-size: 1rem;
        margin-bottom: 40px;
    }
    .concept__text strong {
        font-size: 1.25rem;
    }
    .concept__detail {
        font-size: 0.8rem;
    }
    .concept__detail li {
        margin: 0 0 16px 16px;
    }
    .concept__detail li::before {
        border-width: 5px 0 5px 7px;
        left: -16px;
    }
    .concept__image {
        height: 400px;
    }
    .concept__item {
        padding: 0 80px;
    }
    /* STYLE GALLERY */
    .gallery__box {
        grid-template-columns: 2fr repeat(2, 1fr);
        grid-template-rows: 300px 260px;
        gap: 16px;
        padding: 0 5%;
    }
    .gallery__item--large {
        grid-row: 1/3;
    }
    .gallery__item {
        height: 100%;
        aspect-ratio: auto;
    }
    .gallery__item:hover {
        transform: scale(1.1);
    }
    /* MENU */
    .menu p {
        margin-bottom: 52px;
        font-size: 1rem;
    }
    .menu__container {
        max-width: 700px;
        gap: 40px;
        padding: 0;
    }
    .menu__category {
        margin-bottom: 40px;
    }
    .menu__title {
        font-size: 0.85rem;
        letter-spacing: 0.25em;
        padding-bottom: 16px;
    }
    .menu__list {
        padding: 24px 16px;
    }
    .menu__left {
        font-size: 1rem;
    }
    .menu__left span,
    .menu__right span {
        font-size: 0.75rem;
    }
    /* BARBER */
    .barber__box {
        grid-template-columns: repeat(2, 1fr);
    }
    .barber__card:hover {
        transform: translateY(-8px);
    }
    .barber__info {
        gap: 16px;
        padding: 32px 18px;
    }
    .barber__name {
        font-size: 1.2rem;
    }
    .barber__position {
        font-size: 0.85rem;
    }
    .barber__text {
        font-size: 1rem;
    }
    .barber__tags {
        font-size: 0.85rem;
        gap: 8px;
    }
    /* SHOP INFO */
    .info__list {
        flex-direction: column;
        gap: 40px;
    }
    .info__item {
        width: 100%;
        margin-bottom: 40px;
    }
    .info__addr dl {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 32px;
        margin-bottom: 32px;
    }
    .info__addr .fa-solid {
        font-size: 1.5rem;
    }
    .info__addr dd strong {
        font-size: 0.75rem;
        padding-bottom: 16px;
    }
    .info__sns {
        font-size: 2rem;
        gap: 32px;
        justify-content: flex-start;
    }
    .info__map {
        height: 400px;
    }
    /* FOOTER */
    .footer {
        padding-top: 40px;
    }
    .footer__inner {
        flex-direction: row;
        align-items: flex-start;
        padding: 32px;
        gap: 0;
    }
    .footer__nav {
        align-items: flex-start;
    }
    .footer__nav a {
        margin-bottom: 32px;
    }
    .footer .copyright {
        font-size: 0.75rem;
        padding: 24px 0;
    }
    /* BACK TO TOP */
    .back__top.is-visual {
        right: 32px;
        bottom: 32px;
        width: 48px;
        height: 48px;
    }
    .back__top.is-visual i {
        font-size: 1.5rem;
    }

}
/* =======================
## DESKTOP（1024px以上）
======================= */
@media (min-width: 1024px) {
    /* LAYOUT */
    .logo {
        width: 115px;
    }
    .footer__logo {
        font-size: 1.25rem;
    }
    .section {
        padding: 110px 0;
    }
    .wrapper {
        padding: 0 64px;
    }
    .sns {
        gap: 16px;
        font-size: 2rem;
    }
    .sec__header {
        margin: 0 auto 32px auto;
    }
    .sec__header .sec__tag {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }
    .sec__header .sec__title {
        font-size: 2.15rem;
        margin-bottom: 16px;
    }
    .cta .sec__header .sec__title {
        font-size: 2.25rem;
    }
    /* BUTTON */
    .button {
        font-size: 1.05rem;
        padding: 16px 32px;
    }
    /* HEADER（NAVBAR） */
    .header__nav {
        padding: 12px 36px;
    }
    .header__menu {
        gap: 20px;
    }
    /* HERO */
    .hero__inner {
        max-width: 880px;
    }
    .hero__lead {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    .hero__title {
        font-size: 4.25rem;
        margin-bottom: 30px;
    }
    /* CONCEPT */
    .concept__list {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        gap: 32px;
    }
    .concept__image {
        height: 100%;
        order: 0;
    }
    .concept__item {
        padding: 0;
    }
    /* STYLE GALLERY */
    .gallery__box {
        padding: 0 40px;
    }
    /* BARBER */
    .barber__box {
        grid-template-columns: repeat(3, 1fr);
    }
    /* SHOP INFO */
    .info__list {
        flex-direction: row;
        align-items: center;
    }
    .info__item {
        width: 50%;
        margin-bottom: 0;
    }
    .info__map {
        width: 60%; height: 450px;
    }
    /* FOOTER */
    .footer__inner {
        padding: 32px;
    }
}