/* ========== Reset / Base ========== */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Noto sans jp', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background: #fff;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

/*スマホとPC出し分け用*/
/* 初期値：両方とも非表示にする */
.sp-only { display: none; }
.pc-only { display: none; }

/* スマホ表示 (767px以下) */
@media (max-width: 500px) {
  .sp-only {
    display: block;
  }
}
/* PC表示 (768px以上) */
@media (min-width: 501px) {
  .pc-only {
    display: block;
  }
}

/* ========== LP Layout ========== */
.lp-wrapper {
  width: 100%;
  max-width: 1200px;   /* LP幅の上限 */
  margin: 0 auto;
  padding: 0;
}

/* セクション共通余白 */
.lp-wrapper section {
  padding: 0px 0px;
}

/* ========== Utility ========== */
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }


/* PCでだけキャンバス演出を有効化 */
.lp-canvas { 
  position: relative; 
}

/*背景みかん*/
img.fixed-mikan {
    position: fixed;
    bottom: 0px;
    right: 0;
    max-width: 100vw;
    min-width: 1700px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

/* ===== 既存：LP本体（スマホ幅を中央に） ===== */
.lp-stage{
  position: relative;
  z-index: 1;/* .lp-stage はコンテンツなので前面に */
  width:100%;
  max-width:500px; /* スマホ想定幅。調整OK */
  margin:0 auto;
  background:#fff;
}

/* 画像は横幅いっぱい */
.lp-stage img{ 
  width:100%;
   height:auto;
    display:block;
 }

/*PCの場合の上部空きをゼロに*/
@media screen and (max-width:1210px) {
  body.admin-bar {
    padding-top: 0px !important;
  }
}
.pc body.admin-bar {
    padding-top: 0px;
}

/* セクション余白（画像LPなので最小限） */
.block { 
  padding: 0; 
}



/*ホバー*/
a:hover {
    color: #fff;
}

/* ボタン */
.btn {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  padding: 14px 18px;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  border-radius: 7px;
  border: 0;
  cursor: pointer;
}

.btn-primary { background: #FF8B6E; color: #fff; }  /* ブランド色に変更OK */
.btn-lg { padding: 16px 22px; font-size: 18px; }

/*CTA*/
.cta { padding: 20px; text-align: center; }
.cta-bottom { padding-bottom: 40px; }
.note { font-size: 12px; color: #666; margin-top: 8px; }

/* ===== CTA 2ボタン ===== */
.cta-grid{
  display: grid;
  gap: 20px;              /* ボタン同士の間隔 */
  padding: 12px 19px;     /* ステージ内の余白 */
  background: #FFFAD5;
}

/* 幅が十分あれば横並び（PC中央配置でも横幅しだいで縦のまま）*/
.cta-grid{ 
  grid-template-columns: 1fr 1fr; 
}

.cta-btn{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 70px; 
  border-radius: 7px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2); /* ふわっと影 */
  transition: transform .08s ease, box-shadow .08s ease, opacity .08s ease;
}

/* 色（必要ならブランドカラーに変更） */
.cta-furusato{ background:#FF8B6E; }   /* コーラル系 */
.cta-base{     background:#78B232; }   /* ティール系 */

.cta-base{
  gap: 3px; 
} 
a.cta-btn {
    height: 80px;
}
@media (min-width: 767px) {
    .cta-btn span {
        font-size: 1.2em;
    }
}
.cta-btn .line-sm{
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .02em;
}

.cta-btn:active{ 
  transform: translateY(1px); 
  box-shadow: 0 6px 12px rgba(0,0,0,.14); 
}
.cta-btn:focus-visible{
  outline: 3px solid rgba(0,0,0,.2);
  outline-offset: 3px;
  border-radius: 18px;
}
a.cta-btn:hover {
    opacity: 0.6;
    transform: translate(1px, 1px);
    box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}

/* スマホでのタップ快適化 */
.btn, .cta a { -webkit-tap-highlight-color: transparent; }

/* 余白の最終調整（必要なら） */
.kv { padding: 0; }

/*最下部フッター*/
section.block-home {
    background: #ff8b6e;
    color: #fff;
    text-align: center;
    padding: 8px 5px;
}

/*LINEボタン*/
a.btn.btn-primary.btn-lg {
    display: flex;
    flex-direction: row;
    gap: 13px;
    justify-content: center;
    padding: 25px 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.14); 
}
a.btn:hover {
    opacity: 0.6;
    transform: translate(1px, 1px);
    box-shadow: 0px 0px 0px rgba(0,0,0,0.2) !important;
}
img.icon {
    width: 27px;
    height: min-content;
}
.cta-bottom-button {
    display: flex;
    padding: 20px 0px 50px 0px;
    flex-direction: column;
    align-items: center;
    background: #fffce9;
    gap: 11px;
}
p.note-mobile {
    font-size: 13px;
}
p.note-mobile a:hover {
    color: #999999;
}
/*QRコード*/
p.note-mobile.pc-only img {
    width: 140px;
    padding-top: 20px;
}
.cta-bottom-button p {
    font-size: 14px;
}

/*youtubeビデオ*/
iframe {
  max-width: 100%;
  border: 0;
}
/* 埋め込み用ラッパー */
.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;        /* これで16:9を固定 */
  overflow: hidden;
  background: #fdf3f1;
} 
/* プレイヤーを“面いっぱい”にフィット */
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;     /* ← height:auto の上書き */
  display: block;
}