@charset "utf-8";



/* ===== 背景（固定＆リピート） ===== */
    body {
      margin: 0;
      padding: 0;
      background: transparent !important; /* body背景は使わない */
    }

    .bg-fixed {
      position: fixed;
      inset: 0;                 /* top/right/bottom/left: 0 */
      z-index: 0;               /* コンテンツより背面 */
      pointer-events: none;     /* 背景でクリックを拾わない */
      background-image: url("../img/bg_common.jpg");
      background-repeat: repeat;
      background-position: top center;
      background-size: auto;    /* リピート前提 */
      opacity: 0;               /* 読み込み完了で出す */
      transition: opacity 0.25s ease;
      /* Safari/iOS 安定化 */
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    /* 背景が読み込まれたら表示 */
    body.bg-ready .bg-fixed {
      opacity: 1;
    }
	
.wra {
	width: 470px;
	margin: 0 auto 0 auto;
}

@media only screen and (max-width: 480px) {
.wra {
	width: 100%;
	margin: auto auto 100px auto;
}

}


.spNav {
	display: none;
}

@media only screen and (max-width: 480px) {
.spNav {
	display: inherit;
	position: fixed;
	bottom: 0;
	z-index: 10;
}

.spNav .spBtn1 {
	position: absolute;
	width: calc(190 / 430 * 100vw);
	bottom: calc(16 / 430 * 100vw);
	left:calc(20 / 430 * 100vw);
	z-index: 10;
}

.spNav .spBtn2 {
	position: absolute;
	width: calc(190 / 430 * 100vw);
	bottom: calc(16 / 430 * 100vw);
	right: 10px;
	left:calc(220 / 430 * 100vw);
	z-index: 10;
}

}

    /* ===== レイアウト ===== */
    .app {
      position: relative;
      z-index: 1;   /* 背景より前面 */
      width: 100%;
      margin: 0 auto;
    }
    .appIn {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
    }

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

    /* ===== KV（image1）フルブリード ===== */
    .kv-block {
      width: 100vw;     /* ビューポート幅いっぱい */
      margin: 0 0 60px 0;
    }

@media only screen and (max-width: 480px) {
    .kv-block {
      width: 100vw;     /* ビューポート幅いっぱい */
      margin: 0 0 8vw 0;
    }
}
    .kv {
      margin: 0;        /* p の余白を消す */
    }

    /* ===== アニメーション基礎 ===== */
    .reveal-top,
    .reveal-up {
      opacity: 0;
      will-change: opacity, transform;
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    /* image1：上から */
    .reveal-top { transform: translateY(-24px);  margin-bottom: 60px; }
    /* image2-5：下から */
    .reveal-up  { transform: translateY(28px);  margin-bottom: 60px;}

@media only screen and (max-width: 480px) {
    .reveal-top { transform: translateY(-24px);  margin-bottom: 8vw; }
    /* image2-5：下から */
    .reveal-up  { transform: translateY(28px);  margin-bottom: 8vw;}

}
    /* 表示状態 */
    .is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* 低モーション配慮 */
    @media (prefers-reduced-motion: reduce) {
      .reveal-top,
      .reveal-up {
        transition: opacity 0.001s linear, transform 0.001s linear;
        transform: none;
      }
    }

    @media (max-width: 480px) {
      .bg-fixed {
        /* モバイルも同じ画像を使用（必要なら差し替え可） */
        background-image: url("../img/bg_common.jpg");
      }
    }
    





/* ===================== LPヘッダー（CSSフルソース／SVGは最初に非表示→表示） ===================== */

/* ヘッダー本体 */
.lp-header{
  position:relative;
  overflow:hidden;
  height:clamp(160px, 20vw, 240px);
}

/* 赤帯（左→右に出る） */
.header-bg{
  position:absolute;
  inset:0;
  background:#d80000;
  transform-origin:left center;
  transform:scaleX(0);                                   /* 最初は消す */
  animation:bg-wipe 700ms cubic-bezier(.2,.6,.2,1) forwards;
}

/* ロゴ配置 */
.header-inner{
  position:relative;
  z-index:1;
  height:100%;
  display:grid;
  place-items:center;
}
.logo-wrap{
  display:flex;
  align-items:center;
  gap:clamp(2px, 0.8vw, 8px);
}

/* ロゴの見た目サイズ（必要に応じて調整） */
.logo-main{
  height:clamp(100px, 14vw, 160px);
  width:auto;
  display:block;
}
.logo-badge{
  height: clamp(110px, 11vw, 132px); 
  width:auto;
  display:block;
  margin-right: clamp(-12px, -1.2vw, -9px);
}

/* —— 最初は必ず非表示から開始（FOUC対策） —— */
.logo-main,
.logo-badge{
  opacity:0;
  transform:translateY(-12px);
  will-change:transform,opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden; /* Safari対策 */
  transform:translateZ(0);             /* 合成レイヤー化でチラつき防止 */
}

/* 読み込みと同時に自動再生（遅延で順番を演出） */
.logo-main{
  animation:logo-drop 500ms ease-out 420ms both;         /* bothで開始前/終了後も保持 */
}
.logo-badge{
  animation:fuku-spin 700ms cubic-bezier(.2,.8,.2,1) 360ms both;
}

/* ===== キーフレーム ===== */
@keyframes bg-wipe{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}
@keyframes logo-drop{
  from{ opacity:0; transform:translateY(-12px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes fuku-spin{
  0%   { opacity:0; transform:translateY(-12px) rotate(0deg); }
  60%  { opacity:1; }
  70%  { transform:translateY(0) rotate(360deg); }
  90% { opacity:1; transform:translateY(0) rotate(362deg); } /* ← 最終もopacity:1で固定 */
  100% { opacity:1; transform:translateY(0) rotate(360deg); } /* ← 最終もopacity:1で固定 */
}

/* 動きを控えめに/無効化（OS設定に追従） */
@media (prefers-reduced-motion: reduce){
  .header-bg{
    animation:none !important;
    transform:scaleX(1) !important;
  }
  .logo-main,
  .logo-badge{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}



.box3 {
	position: relative;
}
.box3 .btn1,
.box3 .btn2 {
    position: absolute;
    width: 365px;
    transition: opacity 0.3s ease; /* スムーズに変化させる */
}

.box3 .btn1 {
    left: 29px;
    top: 278px;
}

.box3 .btn2 {
    left: 29px;
    top: 368px;
}

/* ホバー時に半透明 */
.box3 .btn1:hover,
.box3 .btn2:hover {
    opacity: 0.4;
}

@media (max-width: 480px) {
    .box3 .btn1 {
        left: calc(27 / 430 * 100vw);
        top: calc(255 / 430 * 100vw);
        width: calc(334 / 430 * 100vw);
    }

    .box3 .btn2 {
        left: calc(27 / 430 * 100vw);
        top: calc(337 / 430 * 100vw);
        width: calc(334 / 430 * 100vw);
    }
}







.accordion {
  border-radius: 30px;
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  padding: 15px 0;
  border: none;
  background: #fff;
  display: flex;
  justify-content: flex-start;   /* 左寄せに変更 */
  align-items: center;
  cursor: pointer;
  position: relative;
  gap: 10px;                     /* テキストとアイコンの間隔 */
}

/* SVGタイトルの調整 */
.accordion-title {
  height: 35px;       /* 大きさを調整（数値を変更して最適化） */
  width: auto;
  display: block;
  margin-right: auto; /* 自動的に左寄せ */
}


/* 下の茶色ドット罫線 */
.accordion-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 6px dotted #5a2c00; /* 茶色のドット線 */
}

/* アイコン（プラス・マイナス） */
.accordion-header .icon {
  position: relative;
  width: 28px;       /* ← サイズを拡大 */
  height: 28px;      /* ← サイズを拡大 */
  border: 2.5px solid #d60000; /* 枠線も少し太めに */
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: -6px;
}

.accordion-header .icon::before,
.accordion-header .icon::after {
  content: "";
  position: absolute;
  background: #d60000;
  transition: transform 0.3s ease;
}

/* 横線 */
.accordion-header .icon::before {
  top: 50%;
  left: 5px;               /* ← 横位置を調整 */
  right: 5px;              /* ← 横位置を調整 */
  height: 2.5px;           /* ← 太さも調整 */
  transform: translateY(-50%);
}

/* 縦線 */
.accordion-header .icon::after {
  top: 5px;                /* ← 上位置を調整 */
  bottom: 5px;             /* ← 下位置を調整 */
  left: 50%;
  width: 2.5px;            /* ← 太さ */
  transform: translateX(-50%);
}


/* アコーディオン中身 */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  transition: max-height 0.35s ease, padding 0.25s ease;
}


/* ここでは固定の max-height を指定しない */
.accordion-item {
  padding:10px 30px;
  background: #FFF;
}

/* ここでは固定の max-height を指定しない */
.accordion-item.active .accordion-content {
  /* padding だけ付ける（高さはJSで制御） */
  padding: 30px 0 30px 0px;
}

/* プラス→マイナス */
.accordion-item.active .icon::after {
  transform: translateX(-50%) scaleY(0);
}

/* 画像がはみ出さないように */
.accordion-content img {
  max-width: 100%;
  height: auto;
  display: block;
}


.accordion-content .btn1 {
	margin-top: 20px;
    transition: opacity 0.3s ease; /* スムーズに変化させる */
}

.accordion-content .btn2 {
	margin: 30px 0 20px 0;
    transition: opacity 0.3s ease; /* スムーズに変化させる */
}

.accordion-content .btn1:hover,
.accordion-content .btn2:hover {
    opacity: 0.4;
}


.commonText {
	background: #FFF;
	padding: 20px 30px 20px 30px;

}