/* Reset CSS */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base styles */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* Minimal recreation of layout & tone */
body{
  letter-spacing:.06rem;
  line-height:1.7;
  margin: 0;
  padding: 0;
  min-width: 100%;
}
.header-brand img{max-height:64px}
.site-header{position:relative;z-index:2;margin:0;padding:0;}
/* ハンバーガーメニューの背景透明化 */
#navi-menu-input:checked ~ #navi-menu {
  background-color: transparent !important;
}
.menu-drawer {
  background-color: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(5px);
}
.menu-content {
  background-color: transparent !important;
}
.menu-drawer a {
  color: #fff !important;
}
.navbar{display:flex;gap:1rem;align-items:center;justify-content:center;padding:.75rem 1rem}
.navbar a{color:#222;text-decoration:none}
.hero{position:relative;min-height:70vh;display:grid;place-items:center;background:#000;overflow:hidden}
.hero img.bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.85}
.hero .titles{position:relative;text-align:right;max-width:min(92vw,900px);margin-left:auto;margin-right:3vw;text-shadow:0 0 10px #fff,0 0 30px #fff}
.hero .titles img{display:block;margin:.25rem 0;max-width:60vw}
.section{padding:64px 0}
/* ヘッダー画像（ヒーロー）の上部余白を除去しつつ下部余白は保持 */
.hero.section{padding-top:0}
.section.full{width:100%}
.container{width:min(1100px,92vw);margin:0 auto}
.section h2{font-size:clamp(22px,2.8vw,32px);letter-spacing:.2rem;color:#3f3f3f;margin:0 0 24px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.grid.rev{grid-template-columns:1fr 1fr}
.accent{color:var(--accent);font-weight:700}
.cover{position:relative;color:#222}
.cover img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
.cover .inner{position:relative;padding:60px 0}
.message{background:var(--bg-muted);clip-path:polygon(20% 0,80% 0,100% 25%,100% 100%,0 100%,0 25%);padding:40px 0}
.message p{text-align:center;font-size:clamp(16px,2.2vw,22px)}
.flow .item{background:#fff;box-shadow:0 10px 25px rgba(216,205,190,.6);padding:1.5rem;border-radius:8px}
.flow .art{display:flex;justify-content:center}
.flow .art img{max-width:260px;height:auto}
.faq .q{font-weight:700;margin:.75rem 0 .25rem;display:flex;align-items:center;gap:.5rem}
.faq .q::before{content:"Q";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#eee}
.faq .a{display:flex;gap:.5rem;margin:0 0 1.25rem}
.faq .a::before{content:"A";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff}
.cta{display:grid;place-items:center;margin-top:24px}
.cta a{display:inline-block;background:var(--accent);color:#fff;padding:.85rem 1.4rem;border-radius:6px;text-decoration:none}
.footer{background:#3e3e3e;color:#fff;text-align:center;padding:24px 0;margin-top:32px;width:100%;}
@media (max-width: 767px){
  .grid{grid-template-columns:1fr;gap:18px}
  .hero .titles img{max-width:85vw;margin-left:auto}
  body.page #content .content .cf,
  body.page #content .content.cf,
  body.page #content .cf,
  #content .content .cf,
  .content .cf {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* ヘッダー画像の上部隙間を削除 */
  .header-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* フッターのレイアウト修正 */
  .footer {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    padding: 24px 5% !important;
    box-sizing: border-box !important;
  }
}

/* ========================= 
    kiyomeru – Landing Plus (修正版: ヘッダー画像フル幅・モバイル表示修正・ハンバーガーメニュー重ね・フッター調整・ナビメニュー追加)
    ========================= */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

.kiyomeru-lp-plus img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 色設定（背景白、アクセント #e6c87a, テキスト黒, 淡背景 #f7f7f9） */
.kiyomeru-lp-plus {
    background: #fff; /* 白背景統一 */
    color: #333;
}

.kiyomeru-lp-plus h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.kiyomeru-lp-plus h3 {
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
}

.kiyomeru-lp-plus .it-accent {
    color: #e6c87a;
}

.kiyomeru-lp-plus p {
    color: #333;
}

.kiyomeru-lp-plus .it-append {
    background: #f7f7f9;
}

.kiyomeru-lp-plus .it-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
    padding: clamp(20px, 5vw, 32px); /* モバイルでpaddingを広げてカードを広く表示 */
}

/* 【修正】ヘッダー/フッター: フル幅対応 + フッター左寄り解消強化（PC特化、重複クリーン） */
.site-header, header.header, .site-footer, footer.footer, #footer, .footer-container {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background: transparent !important; /* 透明でずれ隠し、白背景サイトに溶け込み */
    position: relative;
    z-index: 1 !important; /* Heroより下げ */
    text-align: center !important;
    left: 0 !important;
    right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
}

.site-footer, footer.footer, #footer {
    padding: 20px 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.footer-in, .wrap.cf, .footer-bottom {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 0 20px !important; /* 内部左右余白で中央 */
}

@media (min-width: 861px) {
    .kiyomeru-lp-plus .it-hero {
        min-height: 100vh !important;
        height: auto !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .kiyomeru-lp-plus .it-hero .bg {
        transition: none !important;
        object-fit: cover !important;
        object-position: center !important; /* PCで中央寄せ */
    }
    .site-footer, footer.footer, #footer, .footer-container {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .navi, #navi, .header-container .navi, .navi-in {
        display: none !important;
    }
}

/* PCコンテンツ幅1200px */
/* SPコンテンツ幅調整（padding狭めで広げる） */
@media (max-width: 860px) {
    .kiyomeru-lp-plus .lp-container,
    .kiyomeru-lp-plus .section .lp-container {
        max-width: 100%;
        padding: 0 8px; /* 狭めて広げ、カード幅を広く */
    }

    /* 特定セクション最大広げ */
    #nagare .lp-container,
    #append-about .lp-container,
    #company .lp-container,
    #contact .lp-container {
        padding: 0 !important;
    }

    /* モバイルフッター右寄り修正: 幅100% + 中央揃え強制 */
    .site-footer, footer.footer, #footer, .footer-in, .wrap.cf, .footer-bottom {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* 【修正】Hero (PC/SPフル幅 + 隙間完全除去 + ハンバーガー密着、重複クリーン） */
.kiyomeru-lp-plus .it-hero {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow: hidden;
    z-index: 1;
}

.kiyomeru-lp-plus .it-hero picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

.kiyomeru-lp-plus .it-hero .bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* デフォルト中央寄せ */
    display: block;
}

/* 【追加】Heroテキスト（画像似フォント、想う人がいる / 想ってくれる人がいる） */
@media screen and (max-width: 767px) {
    .it-hero-text {
        position: absolute;
        bottom: 10%;
        left: 10%;
        transform: none;
        text-align: left;
        color: rgba(0,0,0,0.9);
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        font-family: 'serif', serif;
        font-size: clamp(1.2rem, 4vw, 2rem);
        z-index: 2;
        line-height: 1.6;
        max-width: 100%;
        white-space: nowrap;
    }

    .it-hero-text span {
        display: block;
        margin-bottom: 0.5rem;
    }
}

.kiyomeru-lp-plus .it-hero .hero-content {
    display: none !important;
}

@media (max-width: 860px) {
    .kiyomeru-lp-plus .it-hero {
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .kiyomeru-lp-plus .it-hero .bg {
        object-position: center !important; /* モバイルで中央寄せに修正 */
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body, .site-header, #header-container, main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* ヘッダー上部隙間除去: body/htmlデフォルトmargin/paddingリセット + main/margin */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }

    main#main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .hamburger-menu {
        z-index: 1000002;
    }

    /* 検索関連非表示 */
    .search-menu-button,
    .search-menu-icon,
    .search-menu-caption,
    #search-menu-input,
    #search-menu-open,
    #search-menu-close,
    #search-menu-content,
    .search-box,
    .search-edit,
    .search-submit,
    .search-btn,
    .search-button,
    .search-icon,
    .search-form,
    .search-toggle,
    .search-field,
    .search-wrapper,
    .header-search {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .kiyomeru-lp-plus .flow .grid.item {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .kiyomeru-lp-plus .flow .grid.item .item { order: 1 !important; }
    .kiyomeru-lp-plus .flow .grid.item .art { order: 2 !important; }
    .kiyomeru-lp-plus .flow .grid.item .art img { width: 100% !important; height: auto !important; border-radius: 12px; }

    .kiyomeru-lp-plus .grid {
        grid-template-columns: 1fr;
    }
}

/* 【修正】ハンバーガーメニュー (top調整で画像上端密着 + 背景透明化 + buttonタグ対応 + z-index調整) */
.hamburger-menu {
    display: block;
    position: fixed;
    top: 0; /* 隙間除去のためtop:0に調整 */
    left: 15px;
    z-index: 1000003 !important; /* オーバーレイより高いz-index */
    background: transparent; /* 背景透明に変更 */
    border: 2px solid #333;
    border-radius: 8px;
    padding: 8px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.hamburger-menu span {
    display: block;
    width: 20px;
    height: 2px;
    background: #333;
    margin: 4px auto;
    transition: 0.3s;
    animation: randomStretch 2s infinite ease-in-out;
}

.hamburger-menu span:nth-child(1) { animation-delay: 0s; }
.hamburger-menu span:nth-child(2) { animation-delay: 0.3s; }
.hamburger-menu span:nth-child(3) { animation-delay: 0.6s; }

@keyframes randomStretch {
    0%, 100% { transform: scaleX(1); }
    20% { transform: scaleX(1.5); }
    40% { transform: scaleX(0.8); }
    60% { transform: scaleX(1.2); }
    80% { transform: scaleX(0.9); }
}

.hamburger-menu.open span {
    animation: none;
}

.hamburger-menu.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

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

.hamburger-menu.open span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* スライドメニュー */
.slide-menu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: #fff;
    z-index: 1000001 !important; /* オーバーレイより高いz-index */
    transition: left 0.3s ease;
    padding: 60px 20px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    display: block;
}

.slide-menu.active {
    left: 0;
}

.slide-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.slide-menu li {
    margin-bottom: 15px;
}

.slide-menu a,
.slide-menu button {
    color: #333;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    display: block;
    padding: 10px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.slide-menu button {
    background: none;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font: inherit;
}

.slide-menu a:hover,
.slide-menu button:hover {
    color: #e6c87a;
}

.slide-menu a:focus-visible,
.slide-menu button:focus-visible {
    color: #e6c87a;
    outline: 2px solid #e6c87a;
    outline-offset: 2px;
}

.slide-menu .menu-button {
    display: none;
}

@media (min-width: 861px) {
    .slide-menu .menu-link {
        display: none;
    }
    .slide-menu .menu-button {
        display: block;
    }
}

/* オーバーレイ (z-indexをメニューより低く調整) */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 1000000 !important; /* メニューより低いz-index */
    display: none;
}

.menu-overlay.active {
    display: block;
}

.it-btn-secondary i {
    margin-right: 8px;
    color: #e6c87a;
}

/* 【復旧】問い合わせ/Instagramボタンスタイル */
.it-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 0 10px 10px 0;
}

.it-cta-row {
    text-align: center;
    margin-top: 20px;
}

/* Grid・タイポ・アクセント */
.kiyomeru-lp-plus .grid {
    display: grid;
    gap: clamp(20px, 3vw, 28px);
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
}

/* Flow/Append/Card/FAQ 等 */
.kiyomeru-lp-plus .flow .grid.item {
    display: grid;
}

.kiyomeru-lp-plus .append { background: #f7f7f9; }
.kiyomeru-lp-plus .card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
    padding: clamp(20px, 3.2vw, 32px);
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

.kiyomeru-lp-plus .it-faq .it-q {
    font-weight: 700;
    color: #000;
    margin-top: 24px;
    margin-bottom: 8px;
}

.kiyomeru-lp-plus .it-faq .it-q:first-of-type {
    margin-top: 0;
}

.kiyomeru-lp-plus .it-faq .it-a {
    margin-bottom: 20px;
}

.kiyomeru-lp-plus .it-faq .it-a > div {
    border-left: 4px solid #c45b00;
    padding-left: 16px;
    color: #444;
    line-height: 1.7;
}

@media (min-width: 861px) {
    .kiyomeru-lp-plus .flow .grid.item {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
    }

    .kiyomeru-lp-plus .flow .grid.item.rev {
        grid-template-columns: 0.9fr 1.1fr;
    }

    #append-about .it-split {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 24px;
        align-items: start;
    }

    #append-about figure.it-portrait {
        max-width: 360px;
        width: 100%;
    }

    #append-about figure.it-portrait img {
        width: 100%;
        height: auto;
    }
}

/* メッセージセクション（中央表示） */
.kiyomeru-lp-plus .it-message {
    text-align: center;
}

.kiyomeru-lp-plus .it-message p {
    margin: 0 auto;
    max-width: 800px;
}

/* カバー（蓮の花）の調整 */
.kiyomeru-lp-plus .it-cover {
    position: relative;
    z-index: 0;
    min-height: 60vh;
    overflow: hidden;
}

.kiyomeru-lp-plus .it-cover img.bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
    z-index: -1;
}

.kiyomeru-lp-plus .it-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.25);
    z-index: 0;
}

.kiyomeru-lp-plus .it-cover .it-inner {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.kiyomeru-lp-plus .it-cover .it-inner h3,
.kiyomeru-lp-plus .it-cover .it-inner p {
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.kiyomeru-lp-plus .it-cover .it-inner h3 {
    color: #f5e6a1;
}

/* SP：フル幅のはみ出し防止 */
@media (max-width: 860px) {
    .kiyomeru-lp-plus .section.it-full,
    .kiyomeru-lp-plus .it-hero {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        max-width: none !important;
    }
    .kiyomeru-lp-plus .it-cover {
        margin: 0 !important;
    }
}

/*　ボタン　*/
.kiyomeru-lp-plus .it-btn-primary {
    background: #1a1a1a;
    color: #fff;
}

.kiyomeru-lp-plus .it-btn-secondary {
    background: transparent;
    border: 1px solid currentColor;
    color: currentColor;
}

@media screen and (max-width: 767px) {
    #kiyomeru .lp-container {
        width: 90%; /* 他の要素と同じ幅に調整 */
        margin: 0 auto; /* 中央揃え */
    }
    #kiyomeru .grid {
        display: block; /* フレックスボックスを解除 */
    }
    #kiyomeru .grid > div {
        width: 100%; /* 各要素を1列に */
        margin-bottom: 20px; /* 下部に余白を追加 */
    }
}

@media screen and (min-width: 768px) {
    .it-hero-text {
        display: none;
    }
}

/* PC表示時のコンテンツ上部の余白を削除 */
@media (min-width: 861px) {
    #content .content .cf {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

}

/* LP本体を包むCocoon側の余白を完全にリセット（モバイル・PC共通） */
body[class*="page-kiyomeru-landing"] #content,
body[class*="page-kiyomeru-landing"] #content.content,
body[class*="page-kiyomeru-landing"] #content .content,
body[class*="page-kiyomeru-landing"] #content .content.cf,
body[class*="page-kiyomeru-landing"] #content-in,
body[class*="page-kiyomeru-landing"] #content-in.content-in,
body[class*="page-kiyomeru-landing"] #content .content-in,
body[class*="page-kiyomeru-landing"] #content .content-in.wrap,
body[class*="page-kiyomeru-landing"] #content .wrap,
body[class*="page-kiyomeru-landing"] main#main,
body[class*="page-kiyomeru-landing"] main.kiyomeru-lp-plus {
    margin: 0 !important;
    padding: 0 !important;
}

/* 上部余白の最終調整（PCでのヘッダー直下の空白を除去） */
@media (min-width: 861px) {
    body[class*="page-kiyomeru-landing"] #content,
    body[class*="page-kiyomeru-landing"] #content .content,
    body[class*="page-kiyomeru-landing"] #content .content.cf,
    body[class*="page-kiyomeru-landing"] #content .content-in,
    body[class*="page-kiyomeru-landing"] #content-in,
    body[class*="page-kiyomeru-landing"] main#main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .kiyomeru-lp-plus .it-hero {
        margin-top: 0 !important;
    }
}