@charset "UTF-8";

/* ==========================================================
   SPハンバーガーメニュー（maekawashoji用・Figma実測）
   基準幅390px → vw換算は px ÷ 3.9
========================================================== */

/* ハンバーガーボタン */
.hamburger {
    position: fixed;
    top: 0;
    right: 0;
    width: 15.38vw;
    height: 15.38vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* ラフ実測：線の中心間9px（太さ2.5を引いた空き6.5px） */
    gap: 1.67vw;
    border: none;
    background: none;
    cursor: pointer;
    /* ラフ実測：線の右端は画面右から19px（センター配置を左へ寄せる。UAのbutton既定paddingも打ち消す） */
    padding: 0 1.92vw 0 0;
    z-index: 1002;
}

.hamburger span {
    display: block;
    /* ラフ実測：パス長28px＋ROUNDキャップ両端1.25px＝見た目30.5px */
    width: 7.82vw;
    height: 0.64vw;
    background: var(--main-color);
    border-radius: 0.32vw;
    transition: .3s;
}

/* 開いた状態＝× */
.hamburger.active span:nth-child(1) {
    /* 移動量=線の中心間隔（gap 1.67vw + 線太0.64vw = 2.31vw）。ズレると×の交差点がねじれる */
    transform: translateY(2.31vw) rotate(31.6deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-2.31vw) rotate(-31.6deg);
}

/* メニュー本体（ヘッダー帯の下から全面） */
.sp-menu {
    position: fixed;
    top: 22.56vw;
    left: 0;
    width: 100%;
    height: calc(100% - 22.56vw);
    background: #F6F9FF;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sp-menu.active {
    opacity: 1;
    visibility: visible;
}

.sp-menu__inner {
    padding: 7.69vw 5.13vw 10vw;
}

.sp-menu__en-ttl {
    font-size: 7.18vw;
    letter-spacing: .04em;
    line-height: 1.25;
    color: #C5EAF7;
    /* ラフ実測：見出しボックス下端→罫線6px（ここだけ実線が正） */
    padding-bottom: 1.54vw;
    border-bottom: 1px solid #C6D4D9;
}

/* サービス内容グループ */
.sp-menu__group {
    /* 破線罫線（Figma実測：dash5+ROUNDキャップ＝見た目ダッシュ6px・間隔4px。border1px分はpaddingで補填） */
    padding: 7.69vw 0 calc(5.13vw + 1px);
    background: repeating-linear-gradient(90deg, #C6D4D9 0 6px, transparent 6px 10px) left bottom / 100% 1px no-repeat;
}

/* 開閉ボタン（swell親の枠線・reset.cssのtext-align:inheritを打ち消す） */
.sp-menu__group-ttl {
    position: relative;
    display: block;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 4.1vw;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.5;
    color: #333;
}

/* 開閉矢印（ラフ実測：14x7 stroke2.5＝視覚16.5x9.5・行中心+3.5px・右端はinner右から10.75px） */
.sp-menu__group-arrow {
    position: absolute;
    right: 2.76vw;
    top: 50%;
    transform: translateY(calc(-50% + 0.9vw)) rotate(180deg);
    width: 4.23vw;
    height: 2.44vw;
    transition: .3s;
}

.sp-menu__group.is-open .sp-menu__group-arrow {
    transform: translateY(calc(-50% + 0.9vw)) rotate(0deg);
}

/* サブメニューは初期閉・タップで開閉（margin復帰もtransitionに含める） */
.sp-menu__child-list {
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s, margin-top .3s;
}

.sp-menu__group.is-open .sp-menu__child-list {
    /* ラフ実測：見出し→サブ項目16px */
    margin-top: 4.1vw;
    max-height: 50vw;
}

.sp-menu__child-link {
    display: block;
    font-size: 3.33vw;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 2.15;
    color: #666;
}

.sp-menu__child-link .-dash {
    margin-right: .5em;
}

/* メインメニュー行 */
.sp-menu__item {
    /* 破線罫線（ラフ実測：dash6/gap4。border1px分はpaddingで補填） */
    padding-bottom: 1px;
    background: repeating-linear-gradient(90deg, #C6D4D9 0 6px, transparent 6px 10px) left bottom / 100% 1px no-repeat;
}

.sp-menu__link {
    position: relative;
    display: block;
    font-size: 4.1vw;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.5;
    color: #333;
    padding: 3.85vw 0;
}

.sp-menu__link::after {
    content: '';
    position: absolute;
    /* ラフ実測：シェブロン視覚右端はinner右から14.75px */
    right: 3.78vw;
    top: 50%;
    transform: translateY(-50%);
    /* SVGのviewBox実寸10.5x17.5で表示（パスbbox7x14指定は線まで細く縮むため禁止） */
    width: 2.69vw;
    height: 4.49vw;
    background: url(../../image/icon/arrow_chevron_blue.svg) no-repeat center / contain;
}

/* 会社情報カード */
.sp-menu__info-card {
    background: #fff;
    border-radius: 2.56vw;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
    /* ラフ実測：ボタン下端→カード下端20px */
    padding: 5.9vw 5.13vw 5.13vw;
    margin-top: 11.54vw;
    text-align: center;
}

.sp-menu__info-logo img {
    width: 46.41vw;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

.sp-menu__info-address {
    font-size: 3.08vw;
    letter-spacing: .09em;
    line-height: 1.5;
    color: #666;
    margin-top: 2.82vw;
}

.sp-menu__info-divider {
    border: none;
    /* 破線罫線（TOPフッターと同型：dash2+ROUNDキャップ＝見た目ダッシュ4px・間隔3px） */
    height: 2px;
    background: repeating-linear-gradient(90deg, #CBD3E1 0, #CBD3E1 4px, transparent 4px, transparent 7px);
    /* ラフ実測：住所→破線12px */
    margin: 3.08vw 0 0;
}

.sp-menu__info-lead {
    font-size: 3.33vw;
    font-weight: 500;
    letter-spacing: .06em;
    /* ラフはlh27px固定 */
    line-height: calc(27 / 13);
    color: #444;
    /* ラフ実測：破線→文字ボックス6px */
    margin-top: 1.54vw;
}

.sp-menu__info-btns {
    display: flex;
    justify-content: space-between;
    /* ラフ実測：文字ボックス下端→ボタン3px */
    margin-top: 0.77vw;
}

.sp-menu__info-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38.46vw;
    height: 10.77vw;
    border-radius: 1.03vw;
    color: #fff;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 900;
    font-size: 3.85vw;
    letter-spacing: .06em;
    /* ラフ実測：文字はボタン中心より+4.5px右（TOPフッターと同構成） */
    padding-left: 3.08vw;
}

.sp-menu__info-btn.-soudan {
    background: var(--sub-color);
}

.sp-menu__info-btn.-contact {
    background: #2FBBEC;
    /* ラフ実測：お問い合わせは文字が中心より+11.5px右（アイコンとの間8px） */
    padding-left: 5.9vw;
}

/* ラフはアイコン左端固定（文字と一体センターではない） */
.sp-menu__info-btn-icon {
    position: absolute;
    left: 3.33vw;
    top: 50%;
    transform: translateY(-50%);
    width: 4.36vw;
    height: auto;
    object-fit: contain;
}

.sp-menu__info-btn.-contact .sp-menu__info-btn-icon {
    left: 3.59vw;
}

/* 下部リンク・コピーライト */
.sp-menu__sub-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5.13vw;
    margin-top: 4.1vw;
}

.sp-menu__sub-link {
    font-size: 3.08vw;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 2;
    color: #666;
}

.sp-menu__sub-divider {
    width: 1px;
    height: 3.59vw;
    background: #B4B4B4;
}

.sp-menu__copyright {
    font-size: 3.08vw;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 2;
    color: #8B8B8B;
    text-align: center;
    /* ラフ実測：リンク行ボックス下端→©10px */
    margin-top: 2.56vw;
}

/* メニュー展開中は背面スクロールを止める */
body.is-menu-open {
    overflow: hidden;
}