@charset "UTF-8";
/* カザスマートWeb専用。240617lpScroll2.css の後に読み込み、原本は変更しない。
   ページ内に限定した平坦なCSS。ネスト構文、外部フォント、外部画像、JS依存なし。 */


.kazasma-faq details > p,
.kazasma-faq details > ul {
  padding-inline: 1.2rem;
}

.kazasma-faq details > p {
  margin: 0;
  padding-bottom: 1rem;
}

.kazasma-faq details > ul {
  margin: 0;
  padding-left: 2.5rem; /* 黒丸分の余白 */
  padding-bottom: 1rem;
}

.kazasma-faq details ul {
  margin: 0;
  padding-left: 2rem;
  padding-bottom: 1rem;
  font-size: 0.8rem;
}

.kazasma-faq details li {
  margin-bottom: 0.3rem;
  line-height: 1.6;
}

.kazasma-color{
    color:#01807B !important;
    -webkit-text-fill-color: #01807B !important;
    font-size: clamp(2rem, 3.65vw, 3.1rem);
}


.kazasma-image2 {
     display: block; 
     inline-size: 80%; 
     max-inline-size: 80%; 
     block-size: auto; 
     margin: 0 auto; border-radius: var(--kazasma-radius); 
    }
    

.youtubeWrap{
    display:block;
    opacity:1;
    visibility:visible;
}

.youtubeFade.show{
    opacity:1;
    transform:translateX(0);
}
   .kazasma-target {
    display: block;
    width: 100%;
    max-width: 16rem;
    height: auto;
    margin: 0 auto;
}
.videoY{
    display: flex;
    justify-content: center;
    margin: 25px auto 0;
    width: 80%;
}

.videoSq{
    width: min(300px, 100%);
    height: 520px;
    border-radius: 15px;
    border: none;
}

.videoSq2{
    width: min(300px, 100%);
    height: 450px;
    border-radius: 15px;
    border: none;
}
.kazasma-page {
  --kazasma-ink: #354016;
  --kazasma-muted: #465e6e;
  --kazasma-brand: #005c83;
  --kazasma-brand-dark: #004462;
  --kazasma-surface: #F1F8EA;
  --kazasma-tint: #90D8E8;
  --kazasma-border: #689AB0;
  --kazasma-media: #D3EBE9;
  --kazasma-media-accent: #dce4fa;
  --kazasma-notice: #fff5df;
  --kazasma-notice-border: #98661b;
  --kazasma-focus: #7342ae;
  --kazasma-radius: 1rem;
  margin: 0;
  padding: 0;
  background: var(--kazasma-surface);
  color: var(--kazasma-ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.kazasma-page *, .kazasma-page *::before, .kazasma-page *::after {
    box-sizing: border-box;

}
.kazasma-page main { display: block; }
.kazasma-page p + p { margin-block-start: 0.8rem; }
.kazasma-page a { color: var(--kazasma-brand); text-decoration: underline; text-underline-offset: 0.22em; }
.kazasma-page a:hover { text-decoration-thickness: 0.14em; }
/* :focus を基本にし、:focus-visible 非対応環境でもフォーカスを隠さない。 */
/*.kazasma-page :focus { outline: 3px solid var(--kazasma-focus); outline-offset: 4px; box-shadow: 0 0 0 3px var(--kazasma-surface); }*/
/*.kazasma-page :focus-visible { outline: 3px solid var(--kazasma-focus); outline-offset: 4px; }*/
.kazasma-page h2 { font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height: 1.5; font-weight: 700; margin-block-end: 1.2rem; }
.kazasma-page h3 { font-size: 1.12rem; line-height: 1.65; font-weight: 700; margin-block-end: 0.7rem; }
.kazasma-page figure { margin: 0; }
.kazasma-page figcaption { margin-block-start: 0.65rem; color: var(--kazasma-muted); font-size: 0.875rem; line-height: 1.7; }
.kazasma-page [id] { scroll-margin-block-start: 1rem; }
.kazasma-container { inline-size: calc(100% - 3rem); max-inline-size: 72rem; margin-inline: auto; }
.kazasma-page .kazasma-note { font-size: 0.875rem; color: var(--kazasma-muted); line-height: 1.75; margin-block-start: 1rem; }
.kazasma-page .kazasma-eyebrow {
    color: #254D0E;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.03em;
    margin-block-end: 0.75rem;

}
.kazasma-page .kazasma-intro { max-inline-size: 54rem; margin-block-end: 1.8rem; }
.kazasma-skip { position: fixed; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 100; padding: 0.75rem 1rem; background: var(--kazasma-surface); transform: translateY(-180%); }
.kazasma-skip:focus { transform: translateY(0); }
.kazasma-draft { background: var(--kazasma-notice); border-block-end: 1px solid var(--kazasma-notice-border); padding-block: 0.5rem; font-size: 0.8rem; }
/* 既存 header の height:25px と .lptitleS の固定高さを解除。 */
.kazasma-page .kazasma-header { inline-size: 100%; block-size: auto; height: auto; margin: 0; }
.kazasma-page .lptitleS.kazasma-brandbar { height: auto; block-size: auto; padding: 0.9rem 0; color: var(--kazasma-surface); background: var(--kazasma-brand); font-size: 0.875rem; line-height: 1.7; }
.kazasma-brandrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kazasma-page .kazasma-company { margin: 0; }
.kazasma-page .kazasma-brandlink { color: var(--kazasma-surface); font-weight: 700; }
.kazasma-logo { max-inline-size: 11.25rem; block-size: auto; }
.kazasma-nav {
    padding: 0.1rem 0;
}

.kazasma-nav-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 2rem);

    list-style: none;
    padding: 0;
    margin: 0;
}

.kazasma-nav-row:first-child {
    margin-bottom: 0rem;
}

.kazasma-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 20px;
    padding: 0.25rem 0.5rem;

    font-size: clamp(0.9rem, 1.8vw, 1rem);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;

    color: var(--kazasma-ink);
    text-decoration: none;
}

.kazasma-nav a:hover {
    color: var(--kazasma-brand);
}

.kazasma-nav a:focus-visible {
    outline: 3px solid var(--kazasma-focus);
    outline-offset: 4px;
}
.kazasma-breadcrumb { padding-block: 0.1rem; font-size: 0.8rem; color: var(--kazasma-muted); }
.kazasma-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style-type: none;}
.kazasma-breadcrumb li + li::before { content: "/"; padding-inline: 0.3rem 0.7rem; }
/*.kazasma-hero { padding-block: 3.5rem 4.5rem; background-image: url(asset/261006ff_boy3.png); background-size:  cover; background-position: right center; }*/
.kazasma-hero {
    padding-block: 3.5rem 4.5rem;
    background: #D2F18E;
}
.kazasma-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
/* 既存 h1 の中央配置・透明グラデーション文字・固定50pxを局所的に解除。 */
.kazasma-page h1.kazasma-title { font-family: inherit; font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height: 1.45; margin: 0; margin-block-end: 1.25rem; text-align: start; background: none; color: var(--kazasma-ink); -webkit-text-fill-color: var(--kazasma-ink); }
.kazasma-page .kazasma-lead { font-size: 1.18rem; font-weight: 700; margin-block-end: 0.8rem; }
.kazasma-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1.2rem; color: var(--kazasma-brand); }
.kazasma-tags li { padding: 0.3rem 0.9rem; background: var(--kazasma-surface); border: 1px solid var(--kazasma-border); border-radius: 2rem; font-size: 0.875rem; font-weight: 700; 
list-style-type: none;}
.kazasma-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; margin-block-start: 1.5rem; }
.kazasma-page a.kazasma-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    padding: 0.9rem 1.25rem;
    border: #003b90;
    border-radius: 0.6rem;
    background: #29437e;
    color: var(--kazasma-surface);
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-decoration: none;

}
.kazasma-page a.kazasma-cta:hover {
    background: #9A86F0;
    border-color: var(--kazasma-brand-dark);
    text-decoration: underline;

}
.kazasma-page a.kazasma-cta-secondary { background: var(--kazasma-tint); color: var(--kazasma-brand); }
.kazasma-page a.kazasma-cta-secondary:hover { background: var(--kazasma-border); color: var(--kazasma-brand-dark); }
.kazasma-page a.kazasma-text-link { display: inline-block; padding-block: 0.5rem; min-block-size: 2.75rem; font-weight: 700; }
.kazasma-hero-media { min-inline-size: 0; }
.kazasma-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; padding: 1.5rem; border: 1px dashed var(--kazasma-brand); border-radius: var(--kazasma-radius); background: var(--kazasma-media); color: var(--kazasma-ink); text-align: center; line-height: 1.7; }
.kazasma-placeholder p, .kazasma-placeholder p + p { margin: 0; }
.kazasma-placeholder-hero { min-block-size: 24rem; padding: 2rem; background: linear-gradient(145deg, var(--kazasma-media), var(--kazasma-media-accent)); }
.kazasma-page .kazasma-placeholder-title { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.55; }
.kazasma-media-label { font-size: 0.8rem; font-weight: 700; }
.kazasma-section { padding-block: 4.5rem; }
.kazasma-section-tint {
    background: #D2F294;

}
/* .CardList のgridを再利用し、既存vw文字サイズ・外余白を置換する。 */
.kazasma-page .kazasma-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; font-size: 1rem; line-height: 1.85; color: var(--kazasma-ink); }
.kazasma-page .kazasma-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kazasma-page .kazasma-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-inline-size: 0;
    min-block-size: 0;
    padding: 1.6rem;
    border: 1px solid var(--kazasma-border);
    border-radius: var(--kazasma-radius);
    background: #ECFFCA;
    background-image: none;
    /* line-height: 1.85; */

}
.kazasma-needs .kazasma-card { border-block-start: 4px solid var(--kazasma-brand); }
.kazasma-method-figure { padding-block: 1rem; }
.kazasma-placeholder-diagram { min-block-size: 9.5rem; font-size: 0.9rem; }
.kazasma-facts { margin-block-start: 0.5rem; }
.kazasma-facts dt { font-weight: 700; color: var(--kazasma-brand); margin-block-start: 1rem; }
.kazasma-facts dd { margin-block-start: 0.3rem; }
.kazasma-notice, .kazasma-inline-notice {
    padding: 1rem 1.25rem;
    background: #d0dfff;
    border-inline-start: 4px solid #015d83;
    border-radius: 0.25rem;

}
.kazasma-notice { margin-block-start: 1.8rem; }
.kazasma-page .kazasma-inline-notice { margin-block-start: 1.2rem; }
.kazasma-experience {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;

    list-style: none;
    padding: 0;
    margin: 0;
}
.kazasma-experience li {
    padding: 1.2rem;
    background: #D4F3AF;
    border-radius: 0.7rem;
    list-style: none;

}
.kazasma-page .kazasma-experience h3 { font-size: 1rem; margin-block: 0.6rem 0.3rem; }
.kazasma-experience p { font-size: 0.875rem; }
.kazasma-step-number { display: inline-block; font-size: 1.1rem; font-weight: 700; color: var(--kazasma-brand); font-variant-numeric: tabular-nums; }
.kazasma-page .kazasma-label { font-size: 0.8rem; font-weight: 700; color: var(--kazasma-brand); margin-block-end: 0.6rem; }
.kazasma-page .kazasma-audience { font-size: 0.875rem; color: var(--kazasma-muted); margin-block-end: 0.8rem; }
.kazasma-page .kazasma-check { margin-block: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--kazasma-border); font-size: 0.9rem; }
.kazasma-check strong { display: block; margin-block-end: 0.35rem; }
.kazasma-use-card .kazasma-text-link { margin-block-start: auto; }
.kazasma-page .kazasma-qr-figure { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1.2rem; align-items: center; margin-block: 0.7rem 1.5rem; }
.kazasma-placeholder-qr { aspect-ratio: 1; padding: 1rem; border-style: dashed; }
.kazasma-qr { inline-size: 100%; max-inline-size: 15rem; block-size: auto; }
.kazasma-placeholder-movie { aspect-ratio: 16 / 9; min-block-size: 11rem; }
.kazasma-page .kazasma-image {
    display: block;
    inline-size: 90%;
    max-inline-size: 90%;
    block-size: auto;
    margin: 0 auto;
    border-radius: var(--kazasma-radius);
    filter: drop-shadow(10px 10px 1px rgba(0, 0, 0, 0.2));

}
.kazasma-page .videoY.kazasma-video, .kazasma-page .videoSq.kazasma-video { display: block; inline-size: 100%; width: 100%; max-inline-size: 100%; max-width: 100%; block-size: auto; border-radius: var(--kazasma-radius); background: var(--kazasma-ink); }
.kazasma-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.kazasma-flow li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; padding: 1.5rem; background: var(--kazasma-surface); border: 1px solid var(--kazasma-border); border-radius: 0.8rem; }
.kazasma-reason { padding: 1.5rem; border-block-start: 2px solid var(--kazasma-brand); }
.kazasma-samples-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.kazasma-placeholder-sample { aspect-ratio: 16 / 9; padding: 1rem; font-size: 0.875rem; margin-block-start: 0.4rem; }
.kazasma-samples-grid article > p:last-child { margin-block-start: 0.8rem; font-size: 0.9rem; }
.kazasma-pricing-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.kazasma-pricing-list li { border: 1px solid var(--kazasma-border); border-radius: 0.8rem; padding: 1.5rem;
list-style-type: none;}
.kazasma-pricing-list .kazasma-price-base { grid-column: 1 / -1; background: var(--kazasma-tint); border: 2px solid var(--kazasma-brand); }
.kazasma-page .kazasma-price-formula { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 700; line-height: 1.65; margin-block: 0.5rem 1rem; }
/* .widthS を再利用。FAQは読みやすい横幅に補完。 */
.kazasma-page .widthS.kazasma-faq-inner { width: calc(100% - 3rem); max-width: 54rem; margin-inline: auto; }
.kazasma-faq details { border-block-end: 1px solid var(--kazasma-border); background: var(--kazasma-surface); }
.kazasma-faq details:first-child { border-block-start: 1px solid var(--kazasma-border); }
.kazasma-faq summary { display: list-item; list-style-position: inside; cursor: pointer; padding: 1.2rem; font-weight: 700; min-block-size: 3rem; }
.kazasma-faq summary::marker { color: var(--kazasma-brand); }
.kazasma-faq details[open] summary { color: var(--kazasma-brand); }
.kazasma-faq details > p { margin: 0; padding: 0 1.2rem 1.4rem; }
.kazasma-contact { border-block-start: 4px solid var(--kazasma-brand); background: var(--kazasma-media); }
.kazasma-contact .kazasma-container { max-inline-size: 57rem; }
.kazasma-consult-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; color: var(--kazasma-ink); margin-block: 1.5rem; }
.kazasma-consult-list li { padding: 1rem; border-radius: 0.6rem; background: var(--kazasma-surface); 
list-style-type: none;}
.kazasma-consult-list strong, .kazasma-consult-list span { display: block; }
.kazasma-consult-list span { font-size: 0.9rem; margin-block-start: 0.4rem; }
.kazasma-contact .kazasma-cta { margin-block-start: 1.5rem; }
/* ID付き既存フッターのfloat・固定ページトップを持ち込まない。 */
#footer.kazasma-footer { width: 100%; background: var(--kazasma-surface); }
#footer.kazasma-footer .linkArea.kazasma-footer-links { background: var(--kazasma-brand-dark); padding: 1rem 0; }
#footer.kazasma-footer .linkArea ul { float: none; width: auto; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.8rem; }
#footer.kazasma-footer .linkArea ul li { margin: 0; font-size: 0.875rem; }
#footer.kazasma-footer .linkArea a { color: var(--kazasma-surface); display: inline-block; padding-block: 0.5rem; min-block-size: 2.75rem; }
#footer.kazasma-footer .copyright.kazasma-copyright { padding: 1.25rem 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; text-align: start; }
#footer.kazasma-footer .copyright p { float: none; margin: 0; font-size: 0.8rem; text-align: start; color: var(--kazasma-muted); }
@media (max-width: 64rem) {
  .kazasma-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .kazasma-placeholder-hero { min-block-size: 18rem; }
  .kazasma-page .kazasma-grid, .kazasma-samples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kazasma-experience { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 42rem) {
  .kazasma-container { inline-size: calc(100% - 2rem); }
  .kazasma-page .widthS.kazasma-faq-inner { width: calc(100% - 2rem); }
  .kazasma-section { padding-block: 3rem; }
  .kazasma-hero { padding-block: 2rem 3rem; }
  .kazasma-page .kazasma-grid, .kazasma-page .kazasma-grid-two, .kazasma-samples-grid,
  .kazasma-flow, .kazasma-pricing-list, .kazasma-consult-list { grid-template-columns: minmax(0, 1fr); }
  .kazasma-page .kazasma-card { padding: 1.25rem; }
  .kazasma-actions { flex-direction: column; align-items: stretch; }
  .kazasma-contact .kazasma-cta { display: flex; inline-size: 100%; }
  .kazasma-experience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kazasma-experience li { padding: 1rem; }
  .kazasma-qr-figure { grid-template-columns: minmax(0, 1fr); }
  .kazasma-placeholder-qr { inline-size: 10rem; max-inline-size: 100%; }
  .kazasma-placeholder-hero { min-block-size: 16rem; }
  .kazasma-flow li { padding: 1.2rem; }
  .kazasma-brandrow { gap: 0.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kazasma-page, .kazasma-page * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .kazasma-page a.kazasma-cta, .kazasma-placeholder { border: 2px solid CanvasText; }
  .kazasma-page h1.kazasma-title { color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .kazasma-page :focus-visible { outline-color: Highlight; }
}
@media print {
  .kazasma-draft, .kazasma-skip, .kazasma-nav { display: none; }
  .kazasma-section, .kazasma-hero { padding-block: 1.5rem; }
  .kazasma-container { inline-size: 100%; max-inline-size: none; }
  .kazasma-card, .kazasma-flow li, .kazasma-faq details { break-inside: avoid; }
  .kazasma-faq details > p { display: block !important; }
}