body{
    background: #FFFAF4;              /* 背景色 */
}

header {
    position: relative;                 /* absolute要素の基準 */
    padding: clamp(0.5rem, 3vw, 1rem);  /* ページ内側の余白 (8px～16px) */
}

.companyinho
{
    display: flex;                              /* フレックスボックスレイアウトにする */
    color: #974257;                           /* 文字色 */
    align-items: center;                        /* 縦ズレ防止 */
    gap: clamp(0.5rem, 3vw, 1rem);              /* 要素間の余白（8px～16px） */
    margin: clamp(0.75rem, 5vw, 1.5rem);        /* 余白（12px～24px） */
    font-size: clamp(0.875rem, 4vw, 1.125rem);  /* 文字サイズ（14px～18px） */
}

.companyinho h1 {
    font-size: clamp(1.0rem, 4vw, 2.25rem);     /* 文字サイズ（16px～36px） */
}

.companyinho img
{
    width: clamp(6.25rem, 100%, 6.25rem);   /* 横幅を指定 */
    height: auto;                           /* アスペクト比を保つ */
}

/* 右上ブロック */
.address {
    position: absolute;                   /* 親（header）を基準にして指定する */
    top: clamp(0.75rem, 2vw, 1.25rem);    /* 上からの距離（12px～20px） */
    right: clamp(0.75rem, 2vw, 1.25rem);  /* 右からの距離（12px～20px） */
    display: flex;                        /* フレックスボックスレイアウトにする */
    align-items: center;                  /* 文字を中央寄せ */
    gap: clamp(0.75rem, 2vw, 1.25rem);    /* 左右の間隔（12px～20px） */
}

/* 電話番号 */
.header-tel {
    color: #77131B;                         /* 文字色 */
    font-weight: 600;                         /* 文字の太さ */
    text-decoration: none;                    /* 装飾（下線や上線）なし */
    font-size: clamp(1rem, 4vw, 1.25rem);     /* 文字サイズ（16px～20px）*/
    white-space: nowrap;                      /* 改行しない */
}

/* Instagram */
.address-instagram img {
    width: clamp(1.25rem, 3vw, 1.75rem);  /* 横幅(20px～28px） */
    height: auto;                         /* アスペクト比を保つ */
}

/* 三本線 */
.hamburger {
    display: none;      /* PCでは非表示 */
}

/* ×ボタン */
.close-btn {
    display: none;      /* PCでは非表示 */
}

/* ナビゲーションバー */
nav {
    display: flex;                      /* フレックスボックスレイアウトにする */
    justify-content: center;            /* ナビゲーションを中央揃えにする */
    flex-wrap: wrap;                    /* 要素が収まりきらないときに折り返す */
    gap: clamp(0.75rem, 2vw, 2.5rem);   /* 要素同士の間隔（12px～40px）*/
}

nav a {
    font-size: clamp(0.3rem, 3.5vw, 1.25rem);   /* 文字サイズ（14.4px～20px）*/
    color: #000;                              /* 文字色 */
    text-decoration: none;                      /* 装飾（下線や上線）なし */
    font-weight: bold;                          /* 文字の太さ */
    border-right: 1px solid #333;             /* 要素の右に縦線を引く */
    padding-right: 1.5rem;                      /* 線と文字の間に余白（24px） */
}


/* スマホ + タブレット対応 */
@media (max-width: 768px) {
    .companyinho
    {
        margin-bottom: 0        /* 余白（12px～24px） */
    }

    /* 三本線を表示 */
    .hamburger {
        display: flex;                    /* フレックスボックスレイアウトにする */
        flex-direction: column;           /* 要素を横並びにする */
        justify-content: space-between;   /* 要素同士を左右いっぱいに広げて配置する */
        width: 32px;                      /* 横幅 */
        height: 24px;                     /* 高さ */
        background: none;                 /* 背景色なし */
        border: none;                     /* 枠線なし */
        cursor: pointer;                  /* カーゾル変更 */
    }

    .hamburger span {
        height: 3px;          /* 高さ */
        background: #333;   /* 線の色 */
        border-radius: 2px;   /* 丸み */
    }

    /* ナビゲーションメニュー */
    .nav-menu {
        display: flex;                      /* フレックスボックスレイアウトにする */
        flex-direction: column;             /* 要素を横並びにする */
        justify-content: center;            /* 要素を中央寄せにする（縦方向） */
        align-items: center;                /* 要素を中央寄せにする（横方向） */
        position: fixed;                    /* スクロールしても常に画面に固定 */
        top: 0;                             /* 上部の余白なし */
        left: 0;                            /* 左部の余白なし */
        width: 100%;                        /* 画面横いっぱい */
        height: 100vh;                      /* 画面の高さ100% */
        background: #fff;                 /* 背景色 */
        z-index: 1000;                      /* 他の要素より前面に表示 */
        transform: translateX(100%);        /* 右に100%ずらす（三本線が押下されるまで、画面外に隠す） */
        transition: transform 0.3s ease;    /* メニューが表示されるアニメーション速度 */
    }

    .nav-menu a {
        font-size: 1.2rem;                    /* 文字サイズ（19.2px） */
        padding: 1.2rem 0;                    /* 上下：ページ内側の余白（19.2px）、左右：ページ内側の余白なし */
        text-decoration: none;                /* 下線を消す */
        color: #333;                        /* 文字色 */
        width: 100%;                          /* 横幅 */
        text-align: center;                   /* 文字を中央揃え */
        border-bottom: 1px solid #f2dede;   /* メニューの区切り線 */
    }

    .nav-menu.active {
        transform: translateX(0);       /* 三本線が押下された場合に、ナビゲーションを表示する */
    }

    /* ×ボタン */
    .close-btn {
        display: block;         /* ブロックレイアウトにする */
        position: absolute;     /* 親（.nav-menu）を基準にして指定する */
        top: 1rem;              /* 上部に余白（16px） */
        right: 1.2rem;          /* 右側に余白（19.2px） */
        font-size: 2rem;        /* 文字サイズ（32px） */
        background: none;       /* 背景色なし */
        border: none;           /* 枠線なし */
        cursor: pointer;        /* カーソル変更 */
        z-index: 1100;          /* 前面に表示する */
    }

    /* ナビは最初は隠す */
    nav {
        display: none;            /* 最初は非表示 */
        flex-direction: column;   /* 要素を横並びにする */
        gap: 0.75rem;             /* 要素同士の間隔（12px）*/
        margin-top: 1rem;         /* 上部の余白（16px） */
    }

    /* 三本線押下時だけ、ナビゲーションを表示 */
    nav.active {
        display: flex;    /* フレックスボックスレイアウトにする */
    }

    .companyinho img
    {
        width: clamp(3rem, 100%, 3rem);   /* 横幅を指定 */
        height: auto;                     /* アスペクト比を保つ */
    }
}