/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* テーマのCSSをリセット */

/*
#container,
#content,
#content-in,
#main,
.container,
.content,
.content-in,
.main,
.entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    border: none !important;
    display: block !important;
}

.header,
.footer,
.sidebar,
.ad-area,
.sns-share,
.sns-follow,
.author-info,
.breadcrumb {
    display: none !important;
}
*/

html {
    padding: 0 !important;
    margin: 0 !important;
    height: -webkit-fill-available;
}

/*
body {
    padding: 0 !important;
    margin: 0 !important;
}

.header {
    padding: 0 !important;
    margin: 0 !important;
}

article {
    padding: 0 !important;
    margin: 0 !important;
}
*/

/* =========================================================
   SerEnor style.css SSOT (v0.1.5 draft for top LP)
   - Shared tokens / buttons / fixed topbar are kept.
   - LP styles are rebuilt under .serenor-lp.
========================================================= */

:root{
  --bg:#F2F1EE;
  --navy:#3C4C69;
  --lav:#D8D1E8;
  --notice:#D70026;
  --white:#ffffff;
  --black:#000000;

  --stroke:rgba(60,76,105,.25);

  --fs-h2: clamp(1.8rem, 5vw, 2.8rem);
  --fs-body-short: clamp(1.4rem, 4vw, 2rem);
  --fs-body-long: clamp(1rem, 2.8vw, 1.2rem);
  --fs-note: clamp(0.8rem, 2.2vw, 0.95rem);

  --container:1100px;

  --pill-h:32px;
  --pill-pad:14px;
  --radius:999px;
  --topbar-pad:10px;

  --lp-max:1100px;
  --lp-narrow:760px;
  --lp-pad-x:20px;
  --lp-space-1:12px;
  --lp-space-2:20px;
  --lp-space-3:32px;
  --lp-space-4:56px;
  --lp-space-5:44px;
  --lp-radius-sm:12px;
  --lp-radius-md:20px;
  --lp-radius-lg:32px;
  --lp-shadow-soft:0 10px 30px rgba(60,76,105,.10);
}

html, body{
  background:var(--bg);
}


.serenor-brand-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  line-height:1;
}

.serenor-brand-logo{
  display:block;
  width:auto;
  height:32px;
}

/* ===== Fixed top buttons (shared) ===== */
.serenor-fixed-topbar__left{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  pointer-events:auto;
}

.serenor-fixed-topbar__right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  min-width:0;
  pointer-events:auto;
}

.serenor-account :is(a, button, .button, span){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--pill-h);
  padding:0 var(--pill-pad);
  background:var(--lav);
  border:1px solid rgba(60,76,105,0.18);
  border-radius:var(--radius);
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}

.serenor-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--pill-h);
  padding:0 var(--pill-pad);
  background:var(--lav);
  border:1px solid rgba(60,76,105,0.18);
  border-radius:var(--radius);
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}

/* ===== Button system (SSOT) ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  line-height:1;
  font:inherit;
  font-weight:600;
  text-decoration:none;
  background:transparent;
  color:var(--navy);
  border:1px solid var(--stroke);
  cursor:pointer;
  user-select:none;
  -webkit-appearance:none;
  appearance:none;
  outline:none;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
}

.btn--primary{
  background:var(--navy);
  color:var(--white);
  border-color:transparent;
}

.btn--secondary{
  background:var(--white);
  color:var(--navy);
  border-color:var(--stroke);
}

.btn--compact{
  min-height:28px;
  padding:3px 0px;
  /* border-radius:10px; */
  font-size:13px;
  font-weight:800;
  gap:6px;
}

.btn--primary:is(:hover,:focus,:active,:focus-visible),
button.btn--primary:is(:hover,:focus,:active,:focus-visible),
[type="submit"].btn--primary:is(:hover,:focus,:active,:focus-visible),
[type="button"].btn--primary:is(:hover,:focus,:active,:focus-visible),
a.btn--primary:is(:hover,:focus,:active,:focus-visible){
  background:var(--lav) !important;
  color:var(--navy) !important;
  border-color:rgba(60,76,105,.14) !important;
  text-decoration:none !important;
}

.btn--secondary:is(:hover,:focus,:active,:focus-visible),
button.btn--secondary:is(:hover,:focus,:active,:focus-visible),
[type="submit"].btn--secondary:is(:hover,:focus,:active,:focus-visible),
[type="button"].btn--secondary:is(:hover,:focus,:active,:focus-visible),
a.btn--secondary:is(:hover,:focus,:active,:focus-visible){
  background:var(--white) !important;
  color:var(--navy) !important;
  border-color:var(--stroke) !important;
  text-decoration:none !important;
}

.btn:focus-visible{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"]{
  opacity:.48;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none !important;
}

.btn--primary:disabled,
.btn--primary[disabled],
.btn--primary[aria-disabled="true"]{
  background:var(--lav) !important;
  color:var(--navy) !important;
  border-color:rgba(60,76,105,.18) !important;
}

.btn--secondary:disabled,
.btn--secondary[disabled],
.btn--secondary[aria-disabled="true"]{
  background:var(--white) !important;
  color:var(--navy) !important;
  border-color:rgba(60,76,105,.25) !important;
}

@media (hover:hover) and (pointer:fine){
  .btn--primary:hover,
  button.btn--primary:hover,
  [type="submit"].btn--primary:hover,
  [type="button"].btn--primary:hover,
  a.btn--primary:hover,
  .btn--secondary:hover,
  button.btn--secondary:hover,
  [type="submit"].btn--secondary:hover,
  [type="button"].btn--secondary:hover,
  a.btn--secondary:hover{
    background-color:var(--lav) !important;
    color:var(--navy) !important;
    border-color:var(--lav) !important;
  }

  .btn:active{ transform:translateY(1px); }
}

/* ===== Global shared patterns ===== */
.topbar{
  position:fixed;
  top:calc(8px + env(safe-area-inset-top));
  right:10px;
  z-index:10000;
  display:flex;
  gap:8px;
  align-items:center;
}

.topbar__left,
.topbar__right{
  display:flex;
}

.auth-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:24px;
}

.auth-actions .btn{
  min-width:140px;
}

/* =========================================================
   LP only (scoped by .serenor-lp)
========================================================= */

.serenor-lp,
.serenor-lp *{ box-sizing:border-box; }

.serenor-lp{
  background:var(--bg);
  color:var(--navy);
  font-family:
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Yu Mincho",
    "YuMincho",
    "MS Mincho",
    serif;
  font-weight:800;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.75;
  overflow-x:clip;
}

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

.serenor-lp a:not(.btn){
  color:inherit;
}

/*
.serenor-lp p,
.serenor-lp h1,
.serenor-lp h2,
.serenor-lp h3{
  margin:0;
}
*/

.serenor-lp details > summary{
  list-style:none;
}

.serenor-lp details > summary::-webkit-details-marker{
  display:none;
}

.lp-main{
  position:relative;
}

.serenor-lp .lp-main > br,
.serenor-lp .lp-main > p{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

.lp-container{
  width:min(var(--lp-max), calc(100% - (var(--lp-pad-x) * 2)));
  margin-inline:auto;
}

.lp-divider{
  width:clamp(350px, 60vw, 1005px);
  height:auto;
  margin:0 auto var(--lp-space-3);
}

.lp-section-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:fit-content;
  margin:0 auto;
  text-align:center;
  font-size:var(--fs-h2);
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.25;
}

.lp-section-lead{
  margin-top:var(--lp-space-1);
  text-align:center;
  font-size:.95rem;
  opacity:.78;
}

.lp-icon{
  width:clamp(26px, 7vw, 48px);
  height:auto;
  flex:0 0 auto;
}

.lp-section-heading span{
  display:inline-block;
}

/* ===== fixed topbar for LP ===== */
.serenor-lp .serenor-fixed-topbar{
  position:fixed;
  top:calc(10px + env(safe-area-inset-top));
  left:12px;
  right:12px;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.serenor-lp .serenor-fixed-topbar__brand{
  flex:0 0 auto;
}

.serenor-lp .serenor-fixed-topbar__logo{
  height:28px;
}

.serenor-lp .serenor-fixed-topbar__note{
  position:fixed;
  top:calc(45px + env(safe-area-inset-top));
  right:18px;
  z-index:999;
  display:block;
  padding:0;
  background:transparent;
  border:none;
  color:var(--notice);
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.04em;
  text-align:right;

}

.serenor-lp .serenor-chat__account,
.serenor-lp .serenor-chat__exit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--pill-h);
  padding:0 var(--pill-pad);
  border-radius:999px;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.serenor-lp .serenor-chat__account,
.serenor-lp .serenor-chat__account :is(a, button, span){
  background:rgba(255,255,255,.84);
  border:1px solid rgba(60,76,105,.14);
  color:var(--navy);
}

.serenor-lp .serenor-chat__exit{
  background:var(--navy);
  border:1px solid transparent;
  color:var(--white);
}


/* ===== LP fixed topbar v0.2.5: two rows ===== */
.serenor-lp .serenor-fixed-topbar{
  position:fixed;
  top:calc(10px + env(safe-area-inset-top));
  left:12px;
  right:12px;
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:8px;
  pointer-events:none;
}

.serenor-fixed-topbar__main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  pointer-events:auto;
}

.serenor-fixed-topbar__account{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
  pointer-events:auto;
}

.serenor-fixed-topbar__account-link,
.serenor-fixed-topbar__account-link:link,
.serenor-fixed-topbar__account-link:visited,
.serenor-fixed-topbar__account :is(a, button, span){
  display:inline-block;
  max-width:42vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--navy);
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  text-decoration:underline;
  text-underline-offset:.18em;
  background:transparent;
  border:0;
  border-radius:0;
  padding:0 15px 0 0;
}

.serenor-fixed-topbar__account-link:hover,
.serenor-fixed-topbar__account-link:focus,
.serenor-fixed-topbar__account-link:active,
.serenor-fixed-topbar__account-link:focus-visible,
.serenor-fixed-topbar__account :is(a, button, span):hover,
.serenor-fixed-topbar__account :is(a, button, span):focus-visible{
  color:var(--navy) !important;
  text-decoration:underline !important;
  background:transparent !important;
}

.serenor-fixed-topbar__nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  pointer-events:auto;
}

.serenor-fixed-topbar__nav-link,
.serenor-fixed-topbar__nav-link:link,
.serenor-fixed-topbar__nav-link:visited{
  min-width:96px;
  white-space:nowrap;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.serenor-lp .serenor-fixed-topbar__note{
  display:none !important;
}

@media (max-width:380px){
  .serenor-lp .serenor-fixed-topbar{
    left:10px;
    right:10px;
    gap:7px;
  }

  .serenor-fixed-topbar__nav{
    gap:6px;
  }

  .serenor-fixed-topbar__nav-link,
  .serenor-fixed-topbar__nav-link:link,
  .serenor-fixed-topbar__nav-link:visited{
    min-width:90px;
    padding-inline:8px;
    font-size:11.5px;
  }

  .serenor-fixed-topbar__account-link,
  .serenor-fixed-topbar__account-link:link,
   .serenor-fixed-topbar__account-link:visited,
  .serenor-fixed-topbar__account :is(a, button, span){
    max-width:38vw;
    font-size:12px;
  }
}

/* ===== LP CTA set ===== */
.lp-cta-set{
  width:min(100%, 420px);
  margin:14px auto 0;
  text-align:center;
}

.lp-cta-set__free{
  margin:0 0 16px;
  color:var(--notice);
  font-size:var(--fs-body-short);
  font-weight:800;
  line-height:1.25;
  letter-spacing:.06em;
}

.lp-cta-set__items{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  justify-content:center;
  gap:16px;
}

.lp-cta-set__item{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
}

.lp-cta-set__label,
.lp-cta-set__text{
  margin:0;
  color:var(--navy);
  font-weight:800;
  line-height:1.35;
  letter-spacing:.03em;
}

.lp-cta-set__label{
  font-size:clamp(.82rem, 3.2vw, 1rem);
}

.lp-cta-set__text{
  font-size: clamp(.95rem, 3.8vw, 1.12rem);
}

.lp-cta-set__button,
.lp-cta-set__button:link,
.lp-cta-set__button:visited{
  width:150px;
  white-space:nowrap;
}

@media (max-width:380px){
  .lp-cta-set{
    width:min(100%, 320px);
  }

  .lp-cta-set__items{
    gap:6px;
  }

  .lp-cta-set__button,
  .lp-cta-set__button:link,
  .lp-cta-set__button:visited{
    width:142px;
  }
}

@media (min-width:768px){
  .lp-cta-set{
    width:min(100%, 620px);
  }

  .lp-cta-set__items{
    gap:24px;
  }
}

/* ===== hero ===== */
.lp-hero{
  position:relative;
  height:100vh;
  height:100lvh;
  overflow:hidden;
  isolation:isolate;
}

.lp-hero::before{
  content:"";
  position:absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background:var(--bg) url("https://serenor.jp/wp-content/uploads/top_cards.jpg") center center / cover no-repeat;
  filter:blur(2px);
  opacity:0.6;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(242,241,238,0) 0%,
    rgba(0,0,0,1) 15%,
    rgba(0,0,0,1) 70%,
    rgba(242,241,238,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(242,241,238,0) 0%,
    rgba(0,0,0,1) 15%,
    rgba(0,0,0,1) 70%,
    rgba(242,241,238,0) 100%
    );
}

.lp-hero__inner{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  /* padding-top:calc(150px + env(safe-area-inset-top)); */
  padding-bottom:max(66px, env(safe-area-inset-bottom) + 36px);
}

.lp-hero__brand{
  position:absolute;
  top:calc(8px + env(safe-area-inset-top));
  left:8px;
  display:block;
  /* width:fit-content;
  height:fit-content;
  line-height:0;
  font-size:0; */
}

.lp-hero__brand-link{
  display:block;
  width:min(120px, 31vw);
  line-height:0;
  /*font-size:0;*/
}

.lp-hero__logo{
  /* display:block;
  width:100%;
  height:auto; */
}

.lp-hero__copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:18px;
}

.lp-hero__ai{
  /* font-family:"Futura", "Trebuchet MS", Arial, sans-serif; */
  font-size:clamp(6rem, 12vw, 9rem);
  font-weight:900;
  line-height:.82;
  letter-spacing:0.1em;
  color:var(--white);
}

.lp-hero__tarot{
  font-size:clamp(3rem, 8vw, 5rem);
  font-weight:800;
  line-height:1.06;
  letter-spacing:.05em;
  color:var(--white);
}

.lp-hero__title{
  margin-bottom:4vh !important;
  font-size:clamp(3rem, 8vw, 5rem);
  font-weight:800;
  line-height:1.06;
  letter-spacing:.05em;
  color:var(--white);
}

.lp-hero__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:4vh;
}

.lp-hero__free{
  font-size:var(--fs-body-short);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--notice);
}

.lp-hero__cta-button,
.lp-hero__cta-button:link,
.lp-hero__cta-button:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:0;
  min-height:54px;
  padding:0 34px;
  border-radius:999px;
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:.06em;
  text-decoration:none;
  white-space:nowrap;
  background:var(--navy) !important;
  color:var(--white) !important;
  border:1px solid transparent !important;
}

.lp-hero__cta-button:hover,
.lp-hero__cta-button:focus,
.lp-hero__cta-button:active,
.lp-hero__cta-button:focus-visible{
  background:var(--navy) !important;
  color:var(--white) !important;
  border-color:transparent !important;
  text-decoration:none !important;
}

/* ===== concept ===== */
.lp-concept{
  position:relative;
  height:auto;
  padding:var(--lp-space-5) 0 calc(var(--lp-space-5) + 15vw);
  overflow:hidden;
}

.lp-concept::after{
  content:"";
  position:absolute;
  top: 0; left: 50%;
  transform: translateX(-50%); 
  width: 100%; height: 100%;
  background:var(--bg) url("https://serenor.jp/wp-content/uploads/top_hands_1_3.png") center bottom / contain no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(242,241,238,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(242,241,238,0) 100%);
}

.lp-concept__inner{
  position:relative;
  z-index:1;
}

.lp-concept__copy{
  max-width:var(--lp-narrow);
  margin:0 auto;
  text-align:center;
}

.lp-concept__text{
  margin-top:var(--lp-space-2);
  font-size:var(--fs-body-short);
  font-weight:800;
  line-height:2;
  letter-spacing:.03em;
}

.lp-concept__visual{
  margin-top:var(--lp-space-4);
  display:flex;
  justify-content:center;
}

.lp-concept__screen{
  width:min(50%, 320px);
  /* box-shadow:var(--lp-shadow-soft); */
}


/* ===== utility ===== */
.lp-u-sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ===== concept2 ===== */
.lp-concept2{
  padding:12px 0 var(--lp-space-5);
  background:var(--bg);
}

.lp-concept2__inner{
  width:min(var(--lp-narrow), calc(100% - (var(--lp-pad-x) * 2)));
  display:grid;
  gap:48px;
}

.lp-concept2__item{
  position:relative;
  text-align:center;
  overflow:hidden;
}

.lp-concept2__item::before{
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size: clamp(340px, 50vw, 500px);
  /* opacity:0.5; */
  z-index:0;
  pointer-events:none;
}

.lp-concept2__item--tarot::before{
  background-image:url("https://serenor.jp/wp-content/uploads/tarot_card.png");
  opacity:0.4;
}

.lp-concept2__item--memory::before{
  background-image:url("https://serenor.jp/wp-content/uploads/brain.png");
  opacity:0.55;
}

.lp-concept2__item--always::before{
  background-image:url("https://serenor.jp/wp-content/uploads/24h.png");
  opacity:0.3;
}

.lp-concept2__title,
.lp-concept2__body{
  position:relative;
  z-index:1;
}

.lp-concept2__title{
  margin:0;
  color:var(--navy);
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:1.15;
  letter-spacing:.04em;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.lp-concept2__title span{
  display:inline-block;
}

.lp-concept2__body{
  margin-top:18px;
  padding:18px 0;
}

.lp-concept2__copy{
  margin:0;
  font-size:var(--fs-body-long);
  /* font-weight:500; */
  line-height:2;
  letter-spacing:.02em;
  text-align:center;
}

@media (min-width:768px){
  .lp-concept2{
    padding-top:20px;
  }

  .lp-concept2__inner{
    gap:68px;
  }

  .lp-concept2__title{
    font-size:clamp(2.4rem, 5vw, 3.8rem);
    gap:14px;
  }

  .lp-concept2__body{
    margin-top:20px;
    padding:24px 0;
  }

  .lp-concept2__copy{
    font-size:clamp(1.05rem, 2.1vw, 1.32rem);
  }
}

@media (min-width:1024px){
  .lp-concept2__inner{
    gap:76px;
  }

  .lp-concept2__title{
    font-size:clamp(2.6rem, 4vw, 4rem);
    gap:16px;
  }

  .lp-concept2__copy{
    font-size:1.14rem;
    line-height:2;
  }
}

/* ===== pricing ===== */
.lp-pricing{
  padding:var(--lp-space-5) 0;
  background:var(--bg);
}

.lp-pricing__free{
  margin-top:var(--lp-space-2);
  text-align:center;
}

.lp-pricing__free-badge{
  margin-top:8px;
  color:var(--notice);
  font-size:var(--fs-body-short);
  font-weight:800;
  letter-spacing:.08em;
}

.lp-pricing__free-text{
  margin-top:var(--lp-space-1) !important;
  font-size:var(--fs-body-short);
}

.lp-pricing__intro{
  max-width:var(--lp-narrow);
  margin:var(--lp-space-3) auto 0;
  text-align:center;
  font-size:var(--fs-body-long);
}

.lp-pricing__intro p + p{
  margin-top:10px;
}

.lp-pricing__supplement{
  margin-top:20px;
  text-align:left;
  font-size:var(--fs-note);
}

.lp-pricing__plans{
  margin-top:var(--lp-space-4);
  display:grid;
  gap:18px;
}

@media (min-width:768px){
  .lp-pricing__plans{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    align-items:stretch;
  }

  .lp-plan{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}

.lp-plan{
  padding:10px 5px;
  border-radius:var(--lp-radius-lg);
  background:rgba(255,255,255,.86);
  border:1px solid rgba(60,76,105,.10);
  box-shadow:var(--lp-shadow-soft);
  text-align:center;
}

.lp-plan--featured{
  border-color:rgba(60,76,105,.18);
  transform:none;
}

.lp-plan__time{
  font-size:clamp(1.7rem, 4.5vw, 2.4rem);
  font-weight:800;
  letter-spacing:.09em;
  color:var(--notice);
}

.lp-plan__price{
  font-size:clamp(2.5rem, 6.5vw, 3.8rem);
  font-weight:900;
  line-height:1.2;
}

.lp-plan__pt{
  font-size:clamp(1.25rem, 3.2vw, 1.6rem);
  opacity:.84;
}

.lp-plan__note{
  font-size:var(--fs-body-short);
  line-height:1.5;
}

/* ===== sample ===== */
.lp-sample{
  padding:var(--lp-space-5) 0;
  background:var(--bg);
}

.lp-sample-list{
  margin-top:var(--lp-space-3);
  display:grid;
  gap:12px;
}

.lp-sample-item{
  border-radius:clamp(24px, 7vw, 38px);
  background:rgba(255,255,255,.84);
  overflow:hidden;
}

.lp-sample-item__summary{
  display:grid;
  grid-template-columns:64px minmax(0, 1fr) 34px;
  align-items:center;
  gap:16px;
  padding:18px 12px 18px 0px;
  cursor:pointer;
  border:none;
  border-radius:clamp(24px, 7vw, 38px);
  background:transparent;
}

.lp-sample-item__avatar{
  width:64px;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lp-sample-item__avatar-image{
  width:100%;
  max-width:64px;
  height:auto;
  object-fit:contain;
}

.lp-sample-item__summary-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.lp-sample-item__eyebrow{
  font-size:var(--fs-note);
  font-style: italic;
  line-height:1.25;
  letter-spacing:.06em;
  opacity:.92;
}

.lp-sample-item__headline{
  font-size:var(--fs-body-long);
  line-height:1.14;
  letter-spacing:.03em;
  word-break:keep-all;
  overflow-wrap:anywhere;
}

.lp-sample-item__icon{
  flex:0 0 auto;
  width:24px;
  height:24px;
  position:relative;
  align-self:center;
}

.lp-sample-item__icon::before,
.lp-sample-item__icon::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:24px;
  height:2px;
  border-radius:999px;
  background:var(--black);
  transform:translate(-50%, -50%);
  transition:transform .2s ease, opacity .2s ease;
}

.lp-sample-item__icon::after{
  transform:translate(-50%, -50%) rotate(90deg);
}

.lp-sample-item[open] .lp-sample-item__icon::after{
  opacity:0;
}

@media (min-width:768px){
  .lp-sample-item__summary{
    grid-template-columns:104px minmax(0, 1fr) 58px;
    gap:22px;
    padding:28px 28px;
  }

  .lp-sample-item__avatar{
    width:104px;
  }

  .lp-sample-item__avatar-image{
    max-width:104px;
  }

  .lp-sample-item__summary-main{
    gap:14px;
  }

  .lp-sample-item__icon{
    width:58px;
    height:58px;
  }

  .lp-sample-item__icon::before,
  .lp-sample-item__icon::after{
    width:58px;
    height:4px;
  }
}

.lp-sample-item__body{
  border-top:1px solid rgba(60,76,105,.08);
  padding:20px 18px 22px;
}

.lp-sample-item__content{
  display:grid;
  gap:26px;
}

.lp-chat-log{
  display:grid;
  gap:14px;
}

.lp-chat-log,
.lp-chat-log *{
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    "Noto Sans JP",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  font-weight: 400;
}

.lp-chat-message{
  width:100%;
  display:flex;
}

.lp-chat-message--user{
  justify-content:flex-end;
}

.lp-chat-message--assistant{
  justify-content:flex-start;
}

.lp-chat-message__bubble,
.lp-chat-message__body{
  max-width:85%;
  font-size:.9rem;
  line-height:1.35;
  word-break:break-word;
}

.lp-chat-message__bubble{
  padding:14px 16px;
  border-radius:22px 22px 2px 22px;
  background:var(--lav);
  color:var(--navy);
  box-shadow:0 4px 14px rgba(60,76,105,.06);
}

.lp-chat-message__body{
  padding:2px 2px 2px 0;
}

.lp-chat-message__bubble p,
.lp-chat-message__body p{
  margin:0;
}

.lp-chat-message__bubble p + p,
.lp-chat-message__body p + p{
  margin-top:12px;
}

.lp-tarot-event{
  display:grid;
  gap:18px;
}

.lp-tarot-event__screen{
  display:flex;
  justify-content:center;
}

.lp-tarot-event__screen-image{
  width:min(100%, 300px);
  border-radius:28px;
  box-shadow:var(--lp-shadow-soft);
}

.lp-chat-message--spread .lp-chat-message__bubble,
.lp-chat-message--cards .lp-chat-message__bubble{
  padding:12px;
}

.lp-chat-message__spread-image,
.lp-selected-cards{
  display:block;
  width:min(100%, 320px);
}

.lp-chat-message__spread-image{
  border-radius:16px;
}

.lp-selected-cards{
  border-radius:16px;
  overflow:hidden;
}

.lp-selected-cards__image{
  width:100%;
  height:auto;
  display:block;
}

/* ===== philosophy ===== */
.lp-philosophy{
  position: relative;
  padding:var(--lp-space-5) 0;
  background:var(--bg);
}

.lp-philosophy::before{
  content:"";
  position:absolute;
  inset:0;

  background:url("https://serenor.jp/wp-content/uploads/SerEnor.png") center / cover no-repeat;

  opacity:0.15; /* ←ここで透過 */
  z-index:0;

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(242,241,238,0) 0%,
    rgba(0,0,0,1) 15%,
    rgba(0,0,0,1) 70%,
    rgba(242,241,238,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(242,241,238,0) 0%,
    rgba(0,0,0,1) 15%,
    rgba(0,0,0,1) 70%,
    rgba(242,241,238,0) 100%
  );
}

/* 中身を前面に出す */
.lp-philosophy > *{
  position:relative;
  z-index:1;
}

.lp-philosophy__inner{
  width:min(var(--lp-narrow), calc(100% - (var(--lp-pad-x) * 2)));
}

.lp-philosophy__copy{
  text-align:center;
}

.lp-philosophy__title{
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:1.25;
  letter-spacing:.05em;
}

.lp-philosophy__body{
  margin-top:var(--lp-space-3);
  display:grid;
  gap:22px;
  font-size:var(--fs-body-long);
  line-height:2;
}

/* ===== footer ===== */
.lp-footer{
  padding:48px 0 34px;
  background:var(--navy);
  color:var(--white);
}

.lp-footer__inner{
  display:grid;
  gap:24px;
}

.lp-footer__disclaimer{
  font-size:var(--fs-note);
  line-height:1.7;
}

.lp-footer__disclaimer p{
  margin-block-end: 0.4rem !important;
}

.lp-footer__disclaimer a{
  text-decoration:underline;
}

.lp-footer__disclaimer-title{
  margin-bottom:8px;
  font-size:var(--fs-body-long);
  font-weight:800;
}

.lp-footer__links{
  /*display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 18px;*/
  font-size:var(--fs-note);
  font-weight:700;
}

.lp-footer__links a{
  text-decoration:underline;
}

.lp-footer__copy{
  text-align:center;
  font-size:var(--fs-note);
  opacity:.86;
}

/* ===== responsive ===== */
@media (min-width:768px){
  .serenor-lp .serenor-fixed-topbar{
    top:calc(14px + env(safe-area-inset-top));
    left:18px;
    right:18px;
  }

  .serenor-lp .serenor-fixed-topbar__logo{
    height:32px;
  }

  .serenor-lp .serenor-fixed-topbar__note{
    top:calc(45px + env(safe-area-inset-top));
    right:18px;
  }
}

@media (min-width:1024px){
  .lp-hero__inner{
    padding-top:calc(84px + env(safe-area-inset-top));
    padding-bottom:42px;
  }

  .lp-hero__copy{
    padding:5vh 0 0;
  }

  .lp-hero__cta{
    padding-bottom:7vh;
  }

  .lp-concept::after{
    width:min(880px, 88vw);
    bottom:-22px;
  }

  .lp-sample-list{
    gap:16px;
  }

  .lp-chat-message__bubble,
  .lp-chat-message__body{
    max-width:72%;
  }
}

/* =========================================================
   SerEnor legal pages add-on (for terms / privacy / legal)
   Append this block to style.css
========================================================= */

.serenor-legal{
  min-height:100vh;
}

.lp-legal-hero{
  padding:calc(100px + env(safe-area-inset-top)) 0 56px;
  background:var(--bg);
}

.lp-legal-hero__inner{
  width:min(var(--lp-narrow), calc(100% - (var(--lp-pad-x) * 2)));
  text-align:center;
}

.lp-legal-hero__eyebrow{
  color:var(--notice);
  font-size:var(--fs-body-long);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.lp-legal-hero__title{
  margin-top:10px;
  font-size:var(--fs-h2);
  line-height:1.15;
  letter-spacing:.06em;
}

.lp-legal-hero__lead{
  margin-top:18px;
  font-size:var(--fs-body-long);
  line-height:1.9;
}

.lp-legal-section{
  padding:0 0 88px;
  background:var(--bg);
}

.lp-legal__inner{
  width:min(var(--lp-narrow), calc(100% - (var(--lp-pad-x) * 2)));
  display:grid;
  gap:18px;
}

.lp-legal-card{
  padding:24px 22px;
  border-radius:var(--lp-radius-md);
  background:rgba(255,255,255,.84);
  border:1px solid rgba(60,76,105,.10);
  box-shadow:var(--lp-shadow-soft);
}

.lp-legal-card__title{
  font-size:var(--fs-body-short);
  line-height:1.5;
  letter-spacing:.03em;
}

.lp-legal-card__body{
  margin-top:14px;
  font-size:var(--fs-note);
  line-height:1.60;
}

.lp-legal-card__body p + p{
  margin-top:10px;
}

.lp-legal-list{
  margin:0;
  padding-left:1.35em;
  display:grid;
  gap:8px;
}

.lp-legal-list--number{
  padding-left:1.5em;
}

.lp-legal-card--contact .lp-legal-card__body{
  text-align:left;
}

@media (min-width:768px){
  .lp-legal-hero{
    padding:calc(144px + env(safe-area-inset-top)) 0 64px;
  }

  .lp-legal-card{
    padding:28px 30px;
  }

  .lp-legal-card__body{
    font-size:var(--fs-body-long);
  }
}


/* sample close link (first item minimal spec) */
.lp-sample-item__close{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
}

.lp-sample-item__close-link{
  padding:0;
  border:none;
  background:none;
  color:var(--navy);
  font:inherit;
  font-size:var(--fs-note);
  line-height:1.2;
  text-decoration:underline;
  text-underline-offset:.18em;
  cursor:pointer;
  opacity:.8;
  -webkit-appearance:none;
  appearance:none;
}

.lp-sample-item__close-link:hover,
.lp-sample-item__close-link:focus-visible{
  opacity:1;
}


/* ===== CONCEPT 2 tarot text link ===== */
.lp-concept2__tarot-link{
  margin-top:1em;
}

.lp-concept2__tarot-link a,
.lp-concept2__tarot-link a:link,
.lp-concept2__tarot-link a:visited{
  color:var(--notice);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:.18em;
}

.lp-concept2__tarot-link a:hover,
.lp-concept2__tarot-link a:focus,
.lp-concept2__tarot-link a:active,
.lp-concept2__tarot-link a:focus-visible{
  color:var(--notice) !important;
  text-decoration:underline !important;
}

/* ===== LP X link ===== */
.lp-x{
  margin-top:28px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.lp-x__link{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  opacity:.72;
  color:var(--navy);
  text-align:center;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

.lp-x__logo{
  width:27px;
  height:27px;
  object-fit:contain;
}

.lp-x__text{
  display:block;
  color:var(--navy);
  font-size:clamp(.82rem, 2.8vw, .94rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:.04em;
}

.lp-x__link:hover,
.lp-x__link:focus-visible{
  opacity:1;
  color:var(--navy) !important;
  text-decoration:none !important;
}
