@charset "utf-8";
/* Guide page content. Header, page FV and footer use shared CSS. */
.guide-page{--g:#a78f18;--line:#d9cc91;--pink:#ff7f88;--blue:#56b9e8;--ink:#404040;color:var(--ink);background:#fdfcf8}
.guide-page *,.guide-page *::before,.guide-page *::after{box-sizing:border-box}
.guide-page img{display:block;max-width:100%}
.guide-page p,.guide-page h2,.guide-page h3{margin:0}
.guide-page p{font-size:14px;line-height:1.85}
.guide-page h2,.guide-page h3{font-family:"Shippori Mincho",serif;font-weight:500;color:var(--g)}
.guide-page h2{font-size:24px;line-height:1.5}
.guide-page h3{font-size:18px;line-height:1.55}
.guide-page__inner{width:min(1110px,calc(100% - 40px));margin-inline:auto}
.guide-page__inner--narrow{width:min(800px,calc(100% - 40px))}
.guide-page__inner--faq{width:min(930px,calc(100% - 40px))}
.guide-section-title{text-align:center}
.guide-section-title::before{content:"✧";display:block;margin-bottom:8px;color:var(--g);font:36px/1 serif}
.guide-section-title::after{content:"";display:block;width:46px;height:1px;margin:14px auto 0;background:var(--g)}
/* Introduction */
.guide-intro{padding:68px 20px 72px;text-align:center}
.guide-intro__title{margin-bottom:28px!important}
.guide-intro__title::before,.guide-intro__title::after{display:none}
.guide-intro__title span::before,.guide-intro__title span::after{content:"✦";color:var(--g)}
.guide-intro__title span::before{margin-right:14px}.guide-intro__title span::after{margin-left:14px}
.guide-intro__lead{margin-bottom:18px!important}
/* Consultation topics */
.guide-concerns{padding:64px 0 72px;background:#fff}
.guide-concerns .guide-section-title{margin-bottom:30px}
.guide-concerns__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 34px;width:min(900px,100%);margin-inline:auto}
.guide-concern{display:flex;align-items:center;gap:26px;min-width:0}
.guide-concern__icon{flex:0 0 112px;width:112px;height:112px;border-radius:50%;background:#fff2f2;object-fit:contain}
.guide-concern h3{margin-bottom:5px}
/* Four promises */
.guide-promises{padding:82px 0 92px}
.guide-promises__heading{display:flex;align-items:center;gap:4px;margin-bottom:32px}
.guide-promises__number{color:var(--pink);font:84px/1 "Playfair Display",serif}
.guide-promises__heading small{display:block;color:var(--g);font-size:14px;line-height:1.4}
.guide-promises__heading h2{margin-top:4px}
.guide-promises__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.guide-promise{position:relative;display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:24px;min-height:258px;padding:46px 26px 28px;border-radius:24px;background:#fff1f2}
.guide-promise__number{position:absolute;top:14px;left:22px;color:var(--pink);font:italic 40px/1 "Playfair Display",serif}
.guide-promise__image{width:170px;height:170px;border-radius:50%;object-fit:cover}
.guide-promise h3{margin-bottom:12px}
/* First visit flow */
.guide-flow{padding:76px 0 90px;background:#fff}
.guide-flow .guide-section-title{margin-bottom:34px}
.guide-flow__bring{margin-bottom:24px;padding:22px 28px;background:#fbf7e9;text-align:center}
.guide-flow__bring h3{margin-bottom:13px;font-size:16px}
.guide-flow__bring ul{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:10px 40px;margin:0;padding:0;list-style:none;text-align:left}
.guide-flow__bring li{font-size:14px;line-height:1.7}.guide-flow__bring li::before{content:"・"}
.guide-flow__list{margin:0;padding:0;list-style:none}
.guide-flow__item{display:grid;grid-template-columns:225px minmax(0,1fr);align-items:center;gap:40px;padding:18px 0;border-bottom:1px solid var(--line)}
.guide-flow__item:first-child{padding-top:0}
.guide-flow__item img{width:225px;height:120px;border-radius:7px;object-fit:cover}
.guide-flow__item h3{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.guide-flow__step{display:inline-grid;flex:0 0 24px;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pink);color:#fff;font:700 13px sans-serif}
/* FAQ */
.guide-faq{padding:82px 0 112px}
.guide-faq .guide-section-title{margin-bottom:36px}
.guide-faq__list{display:grid;gap:22px}
.guide-faq__item{padding:0 30px;border:1px solid var(--g);border-radius:9px;background:#fff}
.guide-faq__item summary{position:relative;display:flex;align-items:center;gap:14px;min-height:58px;padding:14px 30px 14px 0;color:var(--g);font-size:16px;line-height:1.5;cursor:pointer;list-style:none}
.guide-faq__item summary::-webkit-details-marker{display:none}
.guide-faq__item summary::after{content:"";position:absolute;top:50%;right:1px;width:17px;height:17px;border-radius:50%;background:var(--g);transform:translateY(-50%)}
.guide-faq__item summary::before{content:"";position:absolute;z-index:1;top:50%;right:7px;width:5px;height:5px;border-top:1.5px solid #fff;border-left:1.5px solid #fff;transform:translateY(-30%) rotate(45deg)}
.guide-faq__item:not([open]) summary::before{transform:translateY(-65%) rotate(225deg)}
.guide-faq__badge{display:inline-grid;flex:0 0 24px;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font-size:13px;font-weight:700}
.guide-faq__badge--q{background:var(--pink)}.guide-faq__badge--a{background:var(--blue)}
.guide-faq__answer{display:flex;align-items:flex-start;gap:14px;padding:16px 0 19px;border-top:1px solid var(--line)}
.guide-faq__answer>div{min-width:0}.guide-faq__answer p+p{margin-top:12px}
.guide-faq__answer ul{margin:12px 0;padding-left:1.5em;font-size:14px;line-height:1.85}
.guide-faq__answer a{color:var(--blue);text-decoration:underline}
@media(max-width:900px){.guide-concern{gap:16px}.guide-concern__icon{flex-basis:88px;width:88px;height:88px}.guide-promise{grid-template-columns:120px minmax(0,1fr);gap:18px;padding-inline:20px}.guide-promise__image{width:120px;height:120px}}
@media(max-width:767px){.guide-page__inner,.guide-page__inner--narrow,.guide-page__inner--faq{width:calc(100% - 32px)}.guide-page h2{font-size:22px}.guide-page h3{font-size:17px}.guide-intro{padding:48px 16px 56px}.guide-intro__title span::before{margin-right:8px}.guide-intro__title span::after{margin-left:8px}.guide-concerns{padding:54px 0 60px}.guide-concerns__grid{gap:22px}.guide-concern__icon{flex-basis:70px;width:70px;height:70px}.guide-promises{padding:60px 0 70px}.guide-promises__grid{gap:16px}.guide-promise{display:block;min-height:0;padding:50px 18px 22px}.guide-promise__image{width:120px;height:120px;margin:0 auto 16px}.guide-flow{padding:60px 0 70px}.guide-flow__item{grid-template-columns:160px minmax(0,1fr);gap:22px}.guide-flow__item img{width:160px;height:105px}.guide-faq{padding:64px 0 80px}.guide-faq__item{padding-inline:18px}}
@media(max-width:560px){.guide-concerns__grid,.guide-promises__grid{grid-template-columns:1fr}.guide-concern{align-items:center}.guide-promise{display:grid;grid-template-columns:105px minmax(0,1fr);gap:16px;padding:46px 16px 20px}.guide-promise__image{width:105px;height:105px;margin:0}.guide-promises__number{font-size:70px}.guide-flow__bring{padding:20px 16px}.guide-flow__bring ul{grid-template-columns:1fr;gap:4px}.guide-flow__item{grid-template-columns:110px minmax(0,1fr);gap:14px}.guide-flow__item img{width:110px;height:88px}.guide-flow__item h3{gap:7px;font-size:15px}.guide-flow__item p{font-size:12px}.guide-faq__item summary{font-size:14px}.guide-faq__answer p,.guide-faq__answer ul{font-size:12px}}

.guide-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Typography and number sizing for the Promise section */
.guide-page h3 { font-family: "Noto Sans JP", "Noto Sans", sans-serif !important; font-weight: 500; }
.guide-promises__number, .guide-promise__number { font-family: "Playfair Display", serif !important; font-size: 48px !important; line-height: 1; }
@media (max-width: 560px) { .guide-promises__number, .guide-promise__number { font-size: 48px !important; } }

.guide-promises-title > span:first-child { font-family: "Playfair Display", serif !important; font-size: 48px !important; }

/* Flow: use div/p markup for the yellow visit checklist */
.guide-flow__bring-title { display:block; margin:0 0 13px !important; color:var(--guide-gold) !important; font-family:"Noto Sans JP","Noto Sans",sans-serif; font-size:16px !important; line-height:1.6; text-align:center; }
.guide-flow__bring-items { display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); justify-content:center; gap:8px 40px; text-align:left; }
.guide-flow__bring-items p { position:relative; margin:0; padding-left:1em; font-size:14px; line-height:1.7; }
.guide-flow__bring-items p:before { content:"・"; position:absolute; left:0; }
.guide-flow__list { display:grid; margin:0; padding:0; }
.guide-flow__item { list-style:none; }
@media (max-width:560px) { .guide-flow__bring-items { grid-template-columns:1fr; gap:4px; } }

.guide-promises__number, .guide-promise__number { line-height: 1 !important; }

/* Replace text star glyphs with the supplied image assets */
.guide-section-title:before { content:"" !important; display:block; width:36px; height:36px; margin:0 auto 8px; background:url("https://nikolino-shika.com/system_panel/uploads/images/star01.png") center / contain no-repeat; }
.guide-intro__title:before, .guide-intro__title:after { content:"" !important; display:inline-block; width:16px; height:16px; vertical-align:.12em; background:url("https://nikolino-shika.com/system_panel/uploads/images/star02.png") center / contain no-repeat; }
.guide-intro__title:before { margin-right:14px; }
.guide-intro__title:after { margin-left:14px; }
@media (max-width:767px) { .guide-intro__title:before { margin-right:8px; } .guide-intro__title:after { margin-left:8px; } }

.guide-flow__bring-items p:before { content:none !important; }

/* Flow step number is a paragraph beside the h3, not nested in it */
.guide-flow__item > div { display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:12px; align-items:center; }
.guide-flow__item > div > .guide-flow__step { display:grid; grid-column:1; grid-row:1; place-items:center; width:24px; height:24px; margin:0; border-radius:50%; background:var(--pink); color:#fff; font:700 16px/1 sans-serif; }
@media (max-width:560px) { .guide-flow__item > div > .guide-flow__step { font-size:15px; } }
.guide-flow__item > div > h3 { display:block; grid-column:2; grid-row:1; margin:0 0 6px; font-family:"Noto Sans JP","Noto Sans",sans-serif !important; }
.guide-flow__item > div > p:not(.guide-flow__step) { grid-column:2; grid-row:2; }

/* Correct star asset placement and replace all generated star glyphs */
.guide-section-title:before { content:"" !important; background-image:url("https://nikolino-shika.com/system_panel/uploads/images/star02.png") !important; }
.guide-intro__title:before, .guide-intro__title:after { content:none !important; display:none !important; background:none !important; }
.guide-intro__title span:before, .guide-intro__title span:after { content:"" !important; display:inline-block !important; width:16px; height:16px; vertical-align:.12em; background:url("https://nikolino-shika.com/system_panel/uploads/images/star01.png") center / contain no-repeat !important; color:transparent !important; }
.guide-intro__title span:before { margin-right:14px; }
.guide-intro__title span:after { margin-left:14px; }
@media (max-width:767px) { .guide-intro__title span:before { margin-right:8px; } .guide-intro__title span:after { margin-left:8px; } }

.guide-promises__eyebrow { color:#a78f18 !important; }

.guide-flow { background:#FFFFFF !important; }

/* FAQ with div/p only (no summary or b elements) */
.guide-faq__item { position:relative; padding:0 30px; border:1px solid #a78f18; border-radius:9px; background:#fff; }
.guide-faq__question { position:relative; display:flex; align-items:center; min-height:58px; margin:0; padding:14px 30px 14px 38px; color:#a78f18; font-size:16px; line-height:1.5; }
.guide-faq__question:before { content:"Q"; position:absolute; left:0; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#ff7f88; color:#fff; font-size:13px; font-weight:700; }
.guide-faq__question:after { content:"›"; position:absolute; top:50%; right:1px; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:#a78f18; color:#fff; font-size:16px; line-height:1; transform:translateY(-50%); }
.guide-faq__answer { position:relative; display:flex; padding:16px 0 19px 38px; border-top:1px solid #d9cc91; }
.guide-faq__answer:before { content:"A"; position:absolute; top:16px; left:0; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#56b9e8; color:#fff; font-size:13px; font-weight:700; }
.guide-faq__answer > div { min-width:0; }
@media (max-width:767px) { .guide-faq__question { font-size:14px; } .guide-faq__item { padding:0 18px; } }

.guide-faq__question { padding-right:34px; cursor:pointer; }
.guide-faq__question:after { content:"⌄"; top:50%; right:1px; display:grid; place-items:center; width:17px; height:17px; font-size:14px; line-height:1; transform:translateY(-50%); }
.guide-faq__item.is-open .guide-faq__question:after { content:"⌃"; }
.guide-faq__answer { display:none; }
.guide-faq__item.is-open .guide-faq__answer { display:flex; }

/* Center the FAQ chevron with a drawn SVG, not a baseline-sensitive text glyph */
.guide-faq__question:after { content:""; top:50%; right:1px; display:block; width:17px; height:17px; border-radius:50%; background:#a78f18 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat; transform:translateY(-50%); transition:transform .2s ease; }
.guide-faq__item.is-open .guide-faq__question:after { transform:translateY(-50%) rotate(180deg); }

.guide-faq__question:after, .guide-faq__item.is-open .guide-faq__question:after { content:"" !important; }


/* Keep intro title stars at the heading element edges, even when text wraps */
.guide-intro__title {
  position: relative !important;
  display: table !important;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto 28px !important;
}
.guide-intro__title::before,
.guide-intro__title::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  background: url("https://nikolino-shika.com/system_panel/uploads/images/star01.png") center / contain no-repeat !important;
  transform: translateY(-50%) !important;
}
.guide-intro__title::before { left: -24px !important; right: auto !important; }
.guide-intro__title::after { right: -24px !important; left: auto !important; }
.guide-intro__title span::before,
.guide-intro__title span::after { content: none !important; display: none !important; background: none !important; }


/* Limit shared section heading stars to 28px maximum */
.guide-section-title::before { width: min(28px, 100%) !important; max-width: 28px !important; height: 28px !important; }


/* Intro heading: make the left and right stars exactly the same size and style. */
.guide-section-title.guide-intro__title::before,
.guide-section-title.guide-intro__title::after {
  width: 16px !important;
  height: 16px !important;
  max-width: 28px;
  background-image: url("https://nikolino-shika.com/system_panel/uploads/images/star01.png") !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Keep all FAQ answers visible while editing the Guide page in GrapesJS. */
body.gjs-dashed .guide-faq__item .guide-faq__answer {
  display: flex !important;
}
body.gjs-dashed .guide-faq__item .guide-faq__question::after {
  transform: translateY(-50%) rotate(180deg) !important;
}