:root {
    --green: #1e4d20;
    --green-light: #d4f5d4;
    --green-dark: #1e4d20;
    --cream: #fdf8f0;
    --brown: #c8a96e;
    --text: #333;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  .body {
    color: var(--text);
    background: #fff;
    overflow-x: hidden;
    padding-top: 100px;
  }

  @media screen and (max-width: 768px) {
    .body {
        background-color: #FFFFFF;
        color: #2c2c2c;
        line-height: 1.3em;
        font-family: sans-serif;
        margin: 0;
        padding: 0;
    }
  }      

  /* ===== BREADCRUMB ===== */
  .breadcrumb {
    text-align: right;
    padding: 8px 24px;
    font-size: 15px;
    color: #636363;
  }
  .breadcrumb a { color: #888; text-decoration: none; }
  .breadcrumb a:hover { color: var(--green); }

  /* ===== HERO BANNER ===== */
  .hero {
    position: relative;
    background:#fff;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 40px 20px 60px;
  }

   @media screen and (max-width: 768px) {
    .hero {
    position: relative;
    background:#fff;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px 8px;
  }
    }

  
  /* お問い合わせ */
  .btn-contact {
    display: block;
    padding: 14px 24px;
    border: 2px solid var(--green);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    background: #fff;
    cursor: pointer;
    transition: background .2s;
  }
  .btn-contact:hover { background: var(--green-light); }
  .btn-tel {
    display: block;
    padding: 14px 24px;
    background: var(--green-light);
    border: 2px solid var(--green);
    border-radius: 8px;
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
  }

  .more-title {
    font-size: 22px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 24px;
    color: var(--text);
  }
  .more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 12px;
  }
  .more-card {
    border: 2px solid var(--green);
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
  }
  .more-card .card-img {
    height: 120px; background: #ddd;
    display: flex; align-items: center; justify-content: center; font-size: 28px;
  }
  .more-card .card-img img { width: 100%; height: 100%; object-fit: cover; }
  .more-card p { padding: 10px; font-size: 12px; color: #555; }

  /* ===== FOOTER ===== */
  footer {
    background: #333;
    color: #ccc;
    text-align: center;
    padding: 24px;
    font-size: 12px;
  }

  /* ===== ANIMATIONS ===== */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .fade-up { animation: fadeUp .7s ease both; }
  .fade-up-2 { animation: fadeUp .7s .15s ease both; }
  .fade-up-3 { animation: fadeUp .7s .3s ease both; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 768px) {
    .plans-grid, .more-grid, .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .point-row, .point-row.reverse { flex-direction: column; }
    .more-plans-hero { flex-direction: column; }
    .more-plans-hero .main-img { width: 100%; }
    .gallery-grid { grid-template-rows: auto; }
  }

 /* ここまで消さない */

/* ギャラリー */
    /* 見える枠：はみ出た部分を隠す */
.sdgs_box_work_slider .handiheader-wrapper{
  overflow: hidden;
  width: 100%;
}
/* 横に並べて流す本体 */
.sdgs_box_work_slider 
.slider-track{
  display: flex;
  align-items: center;
  gap: 0px;                 /* 画像同士の間隔 */
  width: max-content;        /* 中身の幅ぶんだけ広げる */
  animation: sdgs-marquee 55s linear infinite; 
  will-change: transform;
}

/* 画像サイズ */
.sdgs_box_work_slider 
.slider-track img{
  height: 200px;             /* 高さ固定で揃える */
  width: auto;
  display: block;
}

/* 右→左へ流す（2セットあるので -50% でぴったり繋がる） */
@keyframes sdgs-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 触れたら止まる */
.sdgs_box_work_slider 
.handiheader-wrapper:hover .slider-track{
  animation-play-state: paused;
}

/* 動きが苦手な人向け配慮（任意） */
@media (prefers-reduced-motion: reduce){
  .sdgs_box_work_slider .slider-track{ animation: none; }
}


/* 実績紹介 */

  .cards-wrap {
    display: contents;
  }
 
  /* ===== カード ===== */
  .pop-card {
    width: 100%;
    max-width: 55%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    border: 0.5px solid #e8e4df;
  }
 
  /* ヘッダー */
  .pop-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    background: #fff;
    flex-wrap: wrap;
    gap: 6px;
  }
  .pop-card-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pop-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #f6c3d9;
    flex-shrink: 0;
  }
  .pop-title-text {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
  }
  .pop-date {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
  }
 

  /* ===== ボディ ===== */
  .pop-body {
    display: grid;
    grid-template-columns: 1fr 200px;
  }
  @media (max-width: 520px) {
    .pop-body { grid-template-columns: 1fr; }
  }
 
  /* ===== スライダー ===== */
  .slider-wrap {
    position: relative;
    background: #f0ece6;
    overflow: hidden;
    width: 100%;
  }
  .slide-track {
    display: flex;
    width: 100%;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  .slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }
 
  .slide-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #bbb;
    height: 100%;
    width: 100%;
  }
  .slide-placeholder svg {
    width: 36px;
    height: 36px;
    opacity: 0.4;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
  }
  .slide-placeholder span { font-size: 12px; }
 
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
 
  /* スライドボタン */
  .slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 0.5px solid #ddd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s;
  }
  .slide-btn:hover { background: #f5f5f5; }
  .slide-btn svg {
    width: 14px;
    height: 14px;
    stroke: #444;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .slide-btn-prev { left: 10px; }
  .slide-btn-next { right: 10px; }
 
  /* ドットインジケーター */
  .slide-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
  }
  .dot-btn {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
  }
  .dot-btn.active { background: #fff; }
 
  /* 枚数バッジ */
  .slide-num-badge {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
  }
 
  /* ===== メタ情報サイドバー ===== */
  .pop-meta {
    border-left: 0.5px solid #ebebeb;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #FAFAFA;
  }
  @media (max-width: 520px) {
    .pop-meta {
      border-left: none;
      border-top: 0.5px solid #ebebeb;
    }
  }
 
  .meta-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 20px;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
  }
  .badge-yellow { background: #fff0f6; color: #c0567f; }
  .badge-blue   { background: #f5efff; color: #7b55b0; }
  .badge-purple { background: #e9fdfe; color: #2162b6; }
 
  .meta-val {
    font-size: 16px;
    color: #1a1a1a;
    line-height: 1.5;
    display: block;
  }
 
  /* ===== スタッフコメント ===== */
  .pop-comment {
    border-top: 0.5px solid #ebebeb;
    display: flex;
    gap: 14px;
    padding: 16px;
    background: #fff;
  }
  .comment-text {
    font-size: 16px;
    color: #333;
    line-height: 1.85;
  }

 /* ========== 選ばれる3つの理由 ==========  */
.wr-wrap{box-sizing:border-box;max-width:900px;margin:0 auto;padding:100px 20px 100px;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#4a3f5c;background:linear-gradient(180deg,#fff0f6,#f5efff);border-radius:24px}
.wr-wrap *{box-sizing:border-box}
 
/* リボンタイトル */
.wr-ribbon{position:relative;width:min(100%,610px);margin:0 auto 32px}
.wr-ribbon__body{position:relative;z-index:2;background:#f6c3d9;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55);padding:16px 20px;margin:0 auto 80px;text-align:center;font-size:35px;font-weight:700;letter-spacing:.06em;color:#4a3f5c;line-height:1.4}
.wr-ribbon::before,.wr-ribbon::after{content:"";position:absolute;top:14px;width:64px;height:100%;background:#fbd9e7;z-index:1}
.wr-ribbon::before{left:-40px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,26px 50%)}
.wr-ribbon::after{right:-40px;clip-path:polygon(0 0,100% 0,calc(100% - 26px) 50%,100% 100%,0 100%)}
.wr-ribbon__body::before,.wr-ribbon__body::after{content:"";position:absolute;bottom:-14px;width:24px;height:14px;background:#d98aae}
.wr-ribbon__body::before{left:0;clip-path:polygon(0 0,100% 0,100% 100%)}
.wr-ribbon__body::after{right:0;clip-path:polygon(0 0,100% 0,0 100%)}
 
/* 理由リスト */
.wrb-list{display:flex;flex-direction:column;gap:20px;margin:0;padding:0;list-style:none}
.wrb-item{display:flex;align-items:center;gap:18px;background:#fff;border-radius:60px 20px 20px 60px;padding:16px 24px 16px 16px;box-shadow:0 4px 12px rgba(169,138,214,.18)}
.wrb-num{flex:0 0 76px;height:76px;border-radius:50%;background:#f6c3d9;border:4px solid #fff;outline:3px dotted #cbbde3;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:28px;font-weight:700;line-height:1;text-shadow:0 2px 0 #d98aae}
.wrb-num small{font-size:10px;letter-spacing:.1em;margin-bottom:2px}
.wrb-item:nth-child(even) .wrb-num{background:#cbbde3;text-shadow:0 2px 0 #8f7bb5}
.wrb-title{font-size:20px;font-weight:700;color:#7b55b0;margin:0 0 4px}
.wrb-text{font-size:16px;line-height:1.7;margin:0}
 
@media (max-width:768px){
  .wr-ribbon__body{font-size:18px;padding:14px 12px}
  .wr-ribbon::before{left:-24px;width:48px}
  .wr-ribbon::after{right:-24px;width:48px}
  .wrb-item{border-radius:50px 16px 16px 50px;gap:12px;padding:12px 14px 12px 10px}
  .wrb-num{flex-basis:60px;height:60px;font-size:22px}
  .wrb-title{font-size:16px}
}

/* 中身の幅を変えず、グラデーション背景だけ左右いっぱいに広げる */
.wr-wrap {
  /* セクションの背景を、角丸から帯状に変更 */
  border-radius: 0;

  /* 元のグラデーションを左右に拡張 */
  border-image:
    linear-gradient(180deg, #fff0f6, #f5efff)
    0 fill / 0 / 0 100vw;
}

/* ========== 背景フォト ========== */
.wr-wrap{position:relative;isolation:isolate}
.wr-ribbon,.wrb-list{position:relative;z-index:1}

.wr-photos{position:absolute;inset:0;z-index:0;pointer-events:none}
.wr-photo{
  position:absolute;display:block;
  width:350px;aspect-ratio:4/3;object-fit:cover;
  border:6px solid #fff;border-radius:6px;
  box-shadow:0 6px 16px rgba(169,138,214,.3);
}

/* 位置・サイズ・角度はここを調整 */
.wr-photo--1{top:60px;left:-350px;transform:rotate(-8deg)}
.wr-photo--2{top:25%;right:-300px;width:350px;transform:rotate(7deg)}
.wr-photo--3{bottom:24px;left:-200px;width:350px;transform:rotate(-4deg)}

@media (max-width:768px){
  .wr-photo{border-width:4px;width:100px}
  .wr-photo--1{top:14px;left:-10px}
  .wr-photo--2{top:46%;right:-14px;width:110px}
  .wr-photo--3{bottom:10px;left:10px;width:100px}
}


/* ========== お問い合わせボタン(ピルボタン・案Aベース) ========== */
.ocontact{box-sizing:border-box;margin:0 auto 64px;padding:0 20px;text-align:center;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif}
.ocontact *{box-sizing:border-box}
.ocontact-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:340px;padding:18px 40px;border:3px solid #f6c3d9;border-radius:999px;background:#fff0f6;color:#c0567f;font-size:18px;font-weight:700;letter-spacing:.06em;line-height:1.4;text-decoration:none;box-shadow:0 4px 0 #f9d3e4;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.ocontact-btn::after{content:"→";font-size:20px}
.ocontact-btn:hover{background:linear-gradient(135deg,#f48fb8,#a98ad6);border-color:transparent;color:#fff;transform:translateY(2px);box-shadow:0 2px 0 #d8c5ea}
.ocontact-btn:focus-visible{outline:3px solid #cbbde3;outline-offset:3px}
 
@media (max-width:768px){
  .ocontact{padding:0 14px}
  .ocontact-btn{width:100%;max-width:380px;min-width:0;padding:16px 24px;font-size:16px}
}


/* ========== こんなお悩みありませんか？ ==========   */
.wo-worries{box-sizing:border-box;position:relative;max-width:900px;margin:0 auto 64px;padding:36px 20px 44px;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#4a3f5c}
.wo-worries *{box-sizing:border-box}
.wo-worries::after{content:"";position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);border-left:40px solid transparent;border-right:40px solid transparent;border-top:26px solid #f6c3d9}
 
/* タイトル */
.wot{text-align:center;margin:0 auto 100px}
.wot-mk__tag{display:inline-block;background:#fff;border:2px solid #cbbde3;color:#8b6fb8;font-size:18px;font-weight:700;letter-spacing:.15em;padding:3px 16px;border-radius:999px;margin-bottom:10px}
.wot-mk__main{display:block;font-size:35px;font-weight:700;letter-spacing:.05em;color:#4a3f5c;line-height:1.5;margin:0 auto 64px;}
.wot-mk__main em{font-style:normal;background:linear-gradient(transparent 58%,#f6c3d9 58%);padding:0 4px}
 
/* 吹き出しリスト */
.wob-list{display:flex;flex-direction:column;gap:18px;margin:0;padding:0;list-style:none}
.wob-item{display:flex;align-items:center;gap:16px}
.wob-item:nth-child(even){flex-direction:row-reverse}
.wob-face{flex:0 0 100px;height:100px;border-radius:50%;background:#f6c3d9;border:4px solid #fff;outline:3px dotted #cbbde3;font-size:32px;line-height:60px;text-align:center}
.wob-item:nth-child(even) .wob-face{background:#cbbde3}
 
/* 吹き出し本体(外枠あり)奇数=ピンク系 / 偶数=紫系 */
.wob-bubble{position:relative;max-width:620px;background:#fff;border:3px solid #f9d3e4;border-radius:26px;padding:15px 24px;font-size:20px;font-weight:700;line-height:1.6}
.wob-item:nth-child(even) .wob-bubble{border-color:#dccff0}
/* しっぽ:外側(枠色)と内側(白)の二重三角 */
.wob-bubble::before,.wob-bubble::after{content:"";position:absolute;top:50%;width:0;height:0;border-style:solid;border-color:transparent}
.wob-bubble::before{left:-18px;margin-top:-10px;border-width:10px 15px 10px 0;border-right-color:#f9d3e4}
.wob-bubble::after{left:-12px;margin-top:-8px;border-width:8px 12px 8px 0;border-right-color:#fff}
.wob-item:nth-child(even) .wob-bubble::before{left:auto;right:-18px;border-width:10px 0 10px 15px;border-right-color:transparent;border-left-color:#dccff0}
.wob-item:nth-child(even) .wob-bubble::after{left:auto;right:-12px;border-width:8px 0 8px 12px;border-right-color:transparent;border-left-color:#fff}
 
/* 吹き出しの初期状態 */
.wo-worries .wob-bubble.popup {
  opacity: 0;
  transform: translateY(40px) scale(0.8);
}

/* スクロール時のポップアップ */
.wo-worries .wob-bubble.popup.is-animated {
  animation: wobPopup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes wobPopup {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width:768px){
  .wot-mk__main{font-size:21px}
  .wob-item{gap:14px}
  .wob-face{flex-basis:54px;height:54px;font-size:26px;line-height:46px}
  .wob-bubble{padding:13px 16px;font-size:15px}
}


/* <!-- ========== イベントに合ったレンタル用品の選び方 ==========  --> */
.oselect{box-sizing:border-box;max-width:75%;margin:0 auto 64px;padding:40px 20px 44px;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#4a3f5c;background:#fff;}
.oselect *{box-sizing:border-box}
 
/* 見出しエリア */
.oselect-head{text-align:center;margin:0 auto 32px}
.oselect-tag{display:inline-block;background:#fff;border:2px solid #cbbde3;color:#8b6fb8;font-size:18px;font-weight:700;letter-spacing:.15em;padding:3px 16px;border-radius:999px;margin:0 0 10px}
.oselect-title{margin:0 0 64px;font-size:35px;font-weight:700;letter-spacing:.05em;line-height:1.5;color:#4a3f5c}
.oselect-title em { font-style: normal; background: linear-gradient(transparent 58%, #f6c3d9 58%); padding: 0 4px;}
.oselect-lead{margin:0 0 10px;font-size:22px;font-weight:700;line-height:1.7;color:#d0689a}
.oselect-intro{margin:0 auto 60px;font-size:20px;line-height:1.9;}
 
/* カード */
.oselC-list{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:0;padding:0;list-style:none}
.oselC-item{width:calc((100% - 36px)/3);background:#fff;border:2px solid #e3d3f0;border-radius:20px;overflow:hidden}
.oselC-head{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#f6b6d1,#c3aee6);padding:12px 14px;color:#fff}
.oselC-item:nth-child(even) .oselC-head{background:linear-gradient(135deg,#c3aee6,#f6b6d1)}
.oselC-icon{flex:0 0 40px;height:40px;border-radius:50%;background:#fff;font-size:20px;line-height:40px;text-align:center}
.oselC-title{margin:0;font-size:18px;font-weight:700;line-height:1.4;text-shadow:0 1px 3px rgba(123,85,176,.4)}
.oselC-body{padding:16px 14px 12px}
.oselC-text{margin:0 0 16px;font-size:13px;line-height:1.8}
 
/* おすすめ */
.oselect-rec{background:#fdf7fb;border:2px dotted #cbbde3;border-radius:14px;padding:10px 12px 4px}
.oselect-rec__label{display:inline-block;background:linear-gradient(135deg,#f48fb8,#a98ad6);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;padding:2px 10px;border-radius:999px;margin:0 8px 6px 0}
.oselect-chip{display:inline-block;background:#fff0f6;border:1.5px solid #f6c3d9;color:#c0567f;font-size:12px;font-weight:700;padding:2px 12px;border-radius:999px;margin:0 6px 6px 0}
.oselect-chip:nth-of-type(even){background:#f5efff;border-color:#cbbde3;color:#7b55b0}
 
@media (max-width:768px){
  .oselect-title{font-size:21px}
  .oselect-lead{font-size:15px}
  .oselC-item{width:100%}
}


/* ========== レンタル商品一覧(3列カード・画像にタグを重ねる) ========== */
.oprod{box-sizing:border-box;max-width:75%;margin:0 auto 64px;padding:40px 20px 44px;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#4a3f5c}
.oprod *{box-sizing:border-box}
 
/* 見出し */
.oprod-head{text-align:center;margin:0 auto 34px}
.oprod-tag{display:inline-block;background:#fff;border:2px solid #cbbde3;color:#8b6fb8;font-size:18px;font-weight:700;letter-spacing:.15em;padding:3px 16px;border-radius:999px;margin:0 0 10px}
.oprod-title{margin:0 0 10px;font-size:35px;font-weight:700;letter-spacing:.05em;line-height:1.5;color:#4a3f5c}
.oprod-title em{font-style:normal;background:linear-gradient(transparent 58%,#f6c3d9 58%);padding:0 4px}
.oprod-lead{margin:0;font-size:14px;line-height:1.9}
 
/* カード一覧(3列) */
.oprod-list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px;margin:0;padding:0;list-style:none}
.oprod-item{display:flex;flex-direction:column;background:#fff;border:3px solid #f2d3e4;border-radius:22px;overflow:hidden;box-shadow:0 5px 0 #ecdcf3}
.oprod-item:nth-child(even){border-color:#e3d3f0}
 
/* 画像エリア:実際は <img src="..." alt="..."> を .oprod-thumb の中に入れると、仮の絵文字を覆って表示されます */
.oprod-thumb{position:relative;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,#f6c3d9,#cbbde3)}
.oprod-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.oprod-thumb__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:56px}
.oprod-item:nth-child(3n+2) .oprod-thumb{background:linear-gradient(135deg,#cbbde3,#f9d3e4)}
.oprod-item:nth-child(3n) .oprod-thumb{background:linear-gradient(135deg,#f9d3e4,#d9cdee)}
 
/* 本文 */
.oprod-body{display:flex;flex-direction:column;flex:1;padding:18px 18px 20px}
.oprod-name{margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.5;color:#7b55b0}
.oprod-text{flex:1;margin:0 0 14px;font-size:14px;line-height:1.8}
.oprod-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 16px;padding:12px 0 0;border-top:2px dotted #e3d3f0;list-style:none;font-weight: 600;font-size:18px;color:#6b5f7d}
 
/* ボタン */
.oprod-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;border:2px solid #cbbde3;border-radius:999px;background:#fff;color:#7b55b0;font-size:15px;font-weight:700;letter-spacing:.05em;text-decoration:none;line-height:1.4;transition:background .2s,color .2s,border-color .2s}
.oprod-btn::after{content:"→";font-size:18px}
.oprod-btn:hover{background:linear-gradient(135deg,#f48fb8,#a98ad6);border-color:transparent;color:#fff}
 
@media (max-width:1024px){
  .oprod-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .oprod{padding:32px 14px 36px}
  .oprod-title{font-size:21px}
  .oprod-list{grid-template-columns:1fr}
}

/* ========== よくある質問(Q&A)開閉式 ========== */
.ofaq{box-sizing:border-box;max-width:900px;margin:0 auto 64px;padding:40px 20px 44px;font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#4a3f5c}
.ofaq *{box-sizing:border-box}


/* 見出し */
.ofaq-head{text-align:center;margin:0 auto 30px}
.ofaq-tag{display:inline-block;background:#fff;border:2px solid #cbbde3;color:#8b6fb8;font-size:12px;font-weight:700;letter-spacing:.15em;padding:3px 16px;border-radius:999px;margin:0 0 10px}
.ofaq-title{margin:0;font-size:35px;font-weight:700;letter-spacing:.05em;line-height:1.5;color:#4a3f5c}
.ofaq-title em{font-style:normal;background:linear-gradient(transparent 58%,#f6c3d9 58%);padding:0 4px}
 
/* 質問カード */
.ofaq-list{display:flex;flex-direction:column;gap:14px}
.ofaq-item{background:#fff;border:3px solid #f2d3e4;border-radius:20px;box-shadow:0 4px 0 #ecdcf3;overflow:hidden}
.ofaq-item:nth-child(even){border-color:#e3d3f0}

 
/* 質問(クリックで開閉) */
.ofaq-q{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;list-style:none;font-size:20px;font-weight:700;line-height:1.6;color:#4a3f5c}
.ofaq-q::-webkit-details-marker{display:none}
.ofaq-q:focus-visible{outline:3px solid #cbbde3;outline-offset:-3px;border-radius:16px}
.ofaq-q__text{flex:1}
.ofaq-badge{flex:0 0 36px;width:36px;height:36px;border-radius:50%;font-size:17px;font-weight:700;line-height:36px;text-align:center}
.ofaq-badge--q{background:linear-gradient(135deg,#f48fb8,#a98ad6);color:#fff;box-shadow:0 3px 0 #d8c5ea}
.ofaq-badge--a{background:#fff;border:3px solid #f6c3d9;color:#d0689a;line-height:30px}

 
/* 開閉アイコン(+ → −) */
.ofaq-toggle{position:relative;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#f5efff}
.ofaq-toggle::before,.ofaq-toggle::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:3px;margin:-1.5px 0 0 -6px;border-radius:2px;background:#8f7bb5;transition:transform .25s,opacity .25s}
.ofaq-toggle::after{transform:rotate(90deg)}
.ofaq-item[open] .ofaq-toggle{background:#fbd9e7}
.ofaq-item[open] .ofaq-toggle::after{transform:rotate(0);opacity:0}
 
/* 回答 */
.ofaq-a{display:flex;align-items:flex-start;gap:14px;margin:0 18px;padding:16px 0 20px;border-top:2px dotted #e3d3f0;animation:ofaq-open .3s ease}
.ofaq-a__text{flex:1;margin:0;font-size:18px;line-height:1.9;padding-top:4px}
@keyframes ofaq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.ofaq-item {
  transition: transform .4s ease;
}

.ofaq-item:hover {
  transform: scale(1.1);
  position: relative;
  z-index: 2;
}
 
@media (max-width:768px){
  .ofaq{padding:32px 14px 36px}
  .ofaq-title{font-size:26px}
  .ofaq-q{gap:10px;padding:14px 12px;font-size:16px}
  .ofaq-badge{flex-basis:30px;width:30px;height:30px;font-size:15px;line-height:30px}
  .ofaq-badge--a{line-height:24px}
  .ofaq-a{gap:10px;margin:0 12px}
  .ofaq-a__text{font-size:15px;padding-top:2px}
}
@media (prefers-reduced-motion:reduce){
  .ofaq-a{animation:none}
  .ofaq-toggle::before,.ofaq-toggle::after{transition:none}
}
@media (max-width: 768px) {
  .ofaq-item:hover {
    transform: none;
  }
}
  
/* ====================================
   共通スクロールアニメーション
==================================== */

/* 基本設定 */
.scroll-anim {
  opacity: 0;
}

/* アニメーション終了後 */
.scroll-anim.is-animated {
  opacity: 1;
}

/* ① ポップアップ */
.scroll-anim.anim-popup.is-animated {
  animation: sa-popup 0.6s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes sa-popup {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ② 下からフェードイン */
.scroll-anim.anim-fadeup.is-animated {
  animation: sa-fadeup 0.8s ease both;
}

@keyframes sa-fadeup {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ③ 左からスライドイン */
.scroll-anim.anim-left.is-animated {
  animation: sa-left 0.8s ease both;
}

@keyframes sa-left {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ④ 右からスライドイン */
.scroll-anim.anim-right.is-animated {
  animation: sa-right 0.8s ease both;
}

@keyframes sa-right {
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ⑤ ふわっとフェードイン */
.scroll-anim.anim-fade.is-animated {
  animation: sa-fade 1s ease both;
}

@keyframes sa-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ⑥ ズームイン */
.scroll-anim.anim-zoom.is-animated {
  animation: sa-zoom 0.7s ease-out both;
}

@keyframes sa-zoom {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* アニメーションの時間差 */
.scroll-anim.delay-1 { animation-delay: 0.1s !important; }
.scroll-anim.delay-2 { animation-delay: 0.2s !important; }
.scroll-anim.delay-3 { animation-delay: 0.3s !important; }
.scroll-anim.delay-4 { animation-delay: 0.4s !important; }
.scroll-anim.delay-5 { animation-delay: 0.5s !important; }

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce) {
  .scroll-anim,
  .scroll-anim.is-animated {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}