@charset "UTF-8";


body{
margin:0;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight:900;
}

/* ===== 初期状態（共通） ===== */
.fade-in {
  opacity: 0;
  transition: all 0.8s ease;
}

/* ===== 発火後 ===== */
.fade-in.show {
  opacity: 1;
  transform: translate(0, 0);
}

/* ===== 上から ===== */
.fade-in-top {
  transform: translateY(-40px);
}

/* ===== 下から ===== */
.fade-in-bottom {
  transform: translateY(40px);
}

/* ===== 左から ===== */
.fade-in-left {
  transform: translateX(-40px);
}

/* ===== 右から ===== */
.fade-in-right {
  transform: translateX(40px);
}


/* ローディング全体 */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 9999;
  overflow: hidden;
}

/* ロゴ */
.logo-wrap {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  animation: dropLogo 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.logo-wrap img {
  width: 220px;
  animation: scaleBounce 1.2s ease forwards;
}

@keyframes scaleBounce {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.1); }
  75% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
/* ロゴの落下＋バウンド */
@keyframes dropLogo {
  0% {
    top: -150px;
    transform: translate(-50%, 0) scale(0.9);
  }

  /* 落下＋ちょい潰れる（重要） */
  55% {
    top: 50%;
    transform: translate(-50%, -10%) scale(1.15, 0.85);
  }

  /* ぼよん（跳ね上がる） */
  70% {
    transform: translate(-50%, -75%) scale(0.9, 1.1);
  }

  /* もう一回沈む */
  82% {
    transform: translate(-50%, -35%) scale(1.05, 0.95);
  }

  /* 小さく収束 */
  92% {
    transform: translate(-50%, -55%) scale(0.98, 1.02);
  }

  /* 着地（自然） */
  100% {
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
  }
}
/* 波 */
.wave {
  position: absolute;
  top: -100%;
  width: 200%;
  height: 100%;
  left: -50%;
  border-radius: 40%;
  animation: waveDown 1.4s ease-in-out forwards;
}

/* オレンジ */
.wave-orange {
  background: #fbb03c;
  animation-delay: 1.5s;
}

/* 水色 */
.wave-blue {
  background: #5dd4ee;
  animation-delay: 1.8s;
}

/* 波の動き */
@keyframes waveDown {
  0% {
    top: -100%;
  }
  50% {
    top: 0%;
  }
  100% {
    top: 120%;
  }
}



/* 全体 */
.side-widget {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translate(100%, -50%); /* 最初は完全に隠す */
  z-index: 10;

  display: flex;
  flex-direction: column;
  gap: 42px;

  transition: transform 1s ease;
}

/* 表示状態 */
.side-widget.is-visible {
  transform: translate(0, -50%);
}

/* 各アイテム（タグ型） */
.side-item {
  width: 170px;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border-radius: 14px 0 0 14px;

  text-decoration: none;
  
  box-shadow: -2px 4px 12px rgba(0,0,0,0.12);

  /* 右から“ちょい隠し” */
  transform: translateX(20px);
  transition: 0.25s ease;
}

/* ホバーでスッと出る */
.side-item:hover {
  transform: translateX(0);
}

/* キャラ */
.char {
  width: auto;
  height: 70px;
  object-fit: contain;
  margin-bottom: 6px;
  margin-top: -40px;
}

/* テキスト */
.btn {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  text-align: center;
  line-height: 1.2;
}

/* ちょいアクセント線（控えめ） */
.side-item::before {
  content: "";
  position: absolute;
  left: 0;
  width: 10px;
  height: 100%;
  background: #7fd3ff;
  border-radius: 34px 0 0 34px;
}

.br-display{
  display: none;
}


/* 右サイドボタン */
@media (max-width: 768px) {

  .side-widget {
    top: auto;
    bottom: -20px;
    right: 50%;
    transform: translate(50%, 100%);

    display: flex;
    flex-direction: row; /* ← 横並びに戻す */
    justify-content: center;
    gap: 0px;

    width: 100%;
    padding: 10px 8px;

    transition: transform 0.8s ease;
  }

  .side-widget.is-visible {
    transform: translate(50%, 0);
  }

  /* 各ボタン */
  .side-item {
    width: 125px;
    height: 90px;

    display: flex;
    flex-direction: column; /* ← キャラ＋文字は縦 */
    align-items: center;
    justify-content: center;

    border-radius: 14px;
  box-shadow: -2px 4px  12px rgba(0, 0, 0, 0);

    position: relative;
    transform: none;
  }
  .side-item:nth-child(1),
  .side-item:nth-child(2) {
    border-right: 2px solid rgba(0, 0, 0, 0.12);
  }
  .side-item:hover {
    transform: none;
  }

  /* キャラ */
  .char {
    height: 60px;
    position: relative;
    z-index: 3;
    margin: -30px 0 4px 0;
  }

  /* テキスト */
  .btn {
    font-size: 13px;
    text-align: center;
  }
.br-display{
  display: block;
}

  /* 🔥 上ラインアクセント */
  .side-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 10px;

    background: #7fd3ff;
    border-radius: 14px 14px 0 0;
  }
}

/* top */

.top{
    position: relative;
    background-image: url(../img/SL-050222-50080-03.webp);
    background-size: cover;
    padding: 150px 0 230px 20px;
    overflow: hidden;
    /* border-radius: 50px; */
    /* max-width: 1200px; */
    /* margin: 50px auto; */
    
}

.top::after {
  content: "";
  position: absolute;
  inset: 0px;               /* ← 四つ角との隙間 */
  background: rgba(255,255,255,0.90);
  z-index: 1;
}

.top > * {
  position: relative;
  z-index: 2;
}


.top-inner{
    position: relative;
    /* background-image: url(../img/SL-050222-50080-03.webp); */
    /* background-size: 100% 100%; */
max-width:1200px;
margin:auto;

display:flex;
justify-content: space-around;
align-items:center;
/* border-radius: 40px; */
padding:30px 0px 320px 20px;
overflow: hidden;
}

.top-inner::after {
  content: "";
  position: absolute;
  inset: 0px;               /* ← 四つ角との隙間 */
  /* background: rgba(255,255,255,0.80); */
  z-index: 1;
}

.top-inner > * {
  position: relative;
  z-index: 2;
}

/* 左 */

.top-left{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 80px;
    margin-bottom: -550px;
}
.left1{
max-width: 520px;
width: 100%;
}

.left2{
max-width:450px;
width: 100%;
}



/* 右 */

.top-right{
position:relative;
max-width:440px;
width: 100%;
}


.right-bg{
width:100%;
}


/* PC */

.pc-wrap{
position:absolute;
bottom: -50px;
left:20px;
}


.pc{
max-width:310px;
width: 100%;
}


/* PC画面 */

.pc-screen{

position:absolute;

top:10px;
left:9px;

width:292px;
height:159px;

overflow:hidden;

}


.screen{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

opacity:0;
transition:opacity 1s;

}

.screen.active{
opacity:1;
}



/* medal */

.medal{

position:absolute;

top:-80px;
right:-120px;

width:180px;

animation:shine 6s infinite;

}

@keyframes shine{

0%{filter:brightness(1);}
96%{filter:brightness(1);}
98%{filter:brightness(2.5);}
100%{filter:brightness(1);}

}


/* accent */

.accent{

position:absolute;

top:-120px;
right:-130px;

width:90px;

animation:pop 3s infinite;

}

.character{
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}
.character img{
    width: 700px;
}

@keyframes pop{

0%{transform:scale(1);}
50%{transform:scale(1.2);}
100%{transform:scale(1);}

}
@media (max-width:1200px){


/* medal */

.medal{

position:absolute;

top:-50px;
right:-110px;

width:140px;

animation:shine 6s infinite;

}

.accent{

position:absolute;

top:-75px;
right:-120px;

width:60px;

animation:pop 3s infinite;

}
.top-inner{
    position: relative;
    background-size: 100% 100%;
max-width:1200px;
margin:auto;

display:flex;
justify-content: space-around;
align-items:center;
border-radius: 40px;
gap: 40px;
padding:30px 20px 290px;
overflow: hidden;
}


}
@media (max-width:768px){

    .top{
    background-image: url(../img/SL-050222.webp);
    padding: 10px;
    max-width: 1200px;
    /* margin: 50px 10px; */
}

.top-inner{
flex-direction:column-reverse;
gap:120px;
padding:160px 10px 160px;

}

.top-left{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 50px;
    margin-bottom: 0px;
}

.left2{
    content: url(../img/top_detail_res.webp);
    max-width: 280px;
}

.character{
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
}
.character img{
    width: 380px;
}


.top-right{
position:relative;
max-width:300px;
width: 100%;
}

.pc-wrap{
position:absolute;
bottom: -90px;
left:10px;
}
.right-bg{
width:80%;
}


.pc{
max-width:310px;
width: 100%;
}


/* PC画面 */

.pc-screen{

position:absolute;

top:9px;
left:8px;

width:274px;
height:148px;

overflow:hidden;

}


.screen{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

opacity:0;
transition:opacity 1s;

}
/* medal */

.medal{
position:absolute;
top:-70px;
left: -30px;
width:120px;
animation:shine 6s infinite;

}
.accent{
position:absolute;
top:-90px;
left: 40px;
width:60px;
animation:pop 3s infinite;

}

}

/* ーーーーーーーーーー
ここから別
ーーーーーーーーーー */

.template-flow{
    position: relative;
    padding: 10px 0 10px; /* 上下に余白を確保（線と被らない） */
    overflow: hidden;
}

/* ===== 上の水色ライン ===== */
.template-flow::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px; /* 太さ */
    background: #5ad1ff; /* 水色 */
}

/* ===== 下のオレンジライン ===== */
.template-flow::after{
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 10px; /* 太さ */
    background: #ff8800; /* オレンジ */
}

/* スライダー */
.template-slider{
    width: 100%;
    overflow: hidden;
}

/* 横に流す本体 */
.template-track{
    display: flex;
    width: max-content;
    animation: scrollX 60s linear infinite;
}

/* 画像 */
.template-track img{
    height: 600px;
    width: auto;
    flex-shrink: 0;
}

/* 無限スクロール */
@keyframes scrollX{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
}

@media (max-width: 768px){

    .template-track img{
        height: 320px;
    }

    .template-flow::before,
    .template-flow::after{
        height: 12px; /* 少し細く */
    }

}


/* ーーーーーーーーーー
ここから別
ーーーーーーーーーー */

/* ===== セクション ===== */
.plan-section {
  position: relative;
  padding: 120px 20px;
  overflow: hidden;
}

/* 左（黄色） */
.plan-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffe066;
  clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%);
  z-index: -2;
}

/* 右（水色） */
.plan-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #6ecbff;
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
  z-index: -1;
}

/* ===== タイトル ===== */
.plan-header {
  text-align: center;
  margin-bottom: 100px;
}

.plan-header img {
  max-width: 650px;
  width: 100%;
}

/* ===== レイアウト ===== */
.plan-container {
  display: flex;
  justify-content: center;
  gap: 0px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== カード ===== */
.plan-card {
  width: 100%;
  max-width: 450px;
  text-align: center;
  position: relative;
}
.plan-middle {
  width: 100%;
  max-width: 280px;
  text-align: center;
  position: relative;
}

/* ===== 画像エリア（スライド構造だけ使う） ===== */
.plan-slider {
  width: 100%;
  margin-bottom: -40px;
  position: relative;
  z-index: 2;
}

.plan-track {
  display: flex;
  justify-content: center;
}

.plan-track img {
  width: 300px;
}

/* ===== 白ボックス ===== */
.plan-box {
  background: #fff;
  border-radius: 20px;
  padding: 120px 20px 100px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    position: relative;

}

.plan-box h3{
    margin-bottom: 30px;
}
.recommend{
    display: block;
    margin-bottom: 10px;
}

/* ===== 共通マーカー ===== */
.marker-yellow,
.marker-blue {
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 1.6s ease;
}

/* 色はそのまま */
.marker-yellow {
  background-image: linear-gradient(#ffeb99, #ffeb99);
  background-position: left bottom;
}

.marker-blue {
  background-image: linear-gradient(#aae0ff, #aae0ff);
  background-position: left bottom;
}

/* 発火 */
.inview .marker-yellow,
.inview .marker-blue {
  background-size: 100% 40%;
}

.plan-box-middle {
  padding: 150px 20px 30px;
}

.plan-box-middle img {
  width: 100%;
}

.plan-box-middle img {
  animation: middleBounce 6s ease-in-out infinite;
}

@keyframes middleBounce {
  0%, 90%, 100% {
    transform: scale(1);
  }
  95% {
    transform: scale(1.18);
  }
}


.plan-box img {
  width: 100%;
}
.plan-deco {
  position: absolute;
  width: 80px !important;
  pointer-events: none;
}

.deco-top-right {
  top: 60px;
  right: 30px;
  rotate: 10deg;
}

.deco-bottom-left {
  bottom: 30px;
  left: 10px;
  rotate: -15deg;
}

.plan-deco {
  opacity: 0;
  transform: scale(0.6);
}

/* 発火：ぽよん */
.inview .plan-deco {
  animation: decoPop 1.6s ease forwards;
}

/* 個別で少しズラすと気持ちいい */
.inview .deco-top-right {
  animation-delay: 0.1s;
}
.inview .deco-bottom-left {
  animation-delay: 0.2s;
}

@keyframes decoPop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}



/* ===== ボタン ===== */
.plan-btn {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);

  display: inline-block;
  padding: 16px 54px;
  background: #fff; /* ← ここは触らない */
  color: #333;
  font-weight: bold;
  border-radius: 999px;
  text-decoration: none;

  border: 3px solid #333;

  /* ← 浮いてる状態 */
  box-shadow: 0 8px 0 #333;

  transition: all 0.12s ease;
}

/* ホバー：ちょい押される */
.plan-btn:hover {
  transform: translateX(-50%) translateY(3px);
  box-shadow: 0 4px 0 #333;
}

/* クリック：完全に押される */
.plan-btn:active {
  transform: translateX(-50%) translateY(8px);
  box-shadow: 0 0px 0 #333;
}


/* ===== SP ===== */
@media screen and (max-width: 768px) {

  /* 背景：上下 */
  .plan-section::before {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }

  .plan-section::after {
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  }

  .plan-container {
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }
.plan-header {
  text-align: center;
  margin-bottom: 60px;
}
.plan-track img {
  width: 250px;
}

.plan-deco {
  position: absolute;
  width: 60px !important;
  pointer-events: none;
}

.plan-box {
  background: #fff;
  border-radius: 20px;
  padding: 100px 20px 80px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    position: relative;

}
.plan-box-middle {
  padding: 0px 20px 0px;
}
.plan-box h3{
    margin-bottom: 30px;
    font-size: 15px;
}

.plan-btn {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);

  display: inline-block;
  padding: 16px 34px;
  background: #fff; /* ← ここは触らない */
  color: #333;
  font-weight: bold;
  border-radius: 999px;
  text-decoration: none;

  border: 3px solid #333;

  /* ← 浮いてる状態 */
  box-shadow: 0 8px 0 #333;

  transition: all 0.12s ease;
}

.deco-bottom-left {
  bottom: 30px;
  left: 10px;
  rotate: -15deg;
}

}

.plan-flow{
  margin: 100px auto 50px;
  max-width: 400px;
}
.plan-flow img{
  width: 100%;
}

/* ===== タブ ===== */
.price-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.tab-btn {
  padding: 12px 24px;
  border-radius: 30px;
  border: none;
  background: #eee;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.tab-btn.active {
  background: #ff9823;
  color: #fff;
}

/* ===== コンテンツ切り替え（フェード） ===== */
.tab-content {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width: 100%;
  transform: translateY(10px);
  transition: 
    opacity 0.4s ease,
    transform 0.4s ease;
}

.tab-content.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  transform: translateY(0);
}

/* wrapperにrelative追加 */
.price-wrapper {
  position: relative;
}

/* ===== 比較UI ===== */
.price-compare {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.compare-col {
  background: #fff;
  text-align: center;
}

.compare-col.labels {
  background: #fafafa;
  color: #333;
}

.cell {
  padding: 20px;
  height: 100px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
}

.head {
  height: 170px !important;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.plan-img {
  width: 190px;
}

.plan-name {
  font-weight: bold;
}

/* ===== 見せ方 ===== */
.price {
  font-size: 30px;
  font-weight: bold;
  color: #eb7f04;
  flex-direction: column;
}

.price small {
  display: block;
  font-size: 12px;
  color: #999;
}

.highlight {
  color: #333;
  font-weight: bold;
  font-size: 20px;
}

.good {
  color: #333;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.muted {
  color: #6b6b6b;
  font-weight: lighter;
}

/* ===== アイコン ===== */
.icon.plus {
  color: #e01c40;
  font-size: 30px;
  font-weight: bold;
 }

/* ===== ポップ要素 ===== */
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff4d6d;
  color: #fff;
  font-size: 10px;
  padding: 4px 7px;
  border-radius: 20px;
}

.price-detail-btn {
  padding: 6px 25px;
  font-size: 15px;
  background: #ff9823;
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  border: 3px #ff9823 solid;
  transition: 0.3s;
}

.price-detail-btn:hover {
  background: #fff;
  color: #333;
}

.sp-label {
  display: none;
  font-size: 11px;
  color: #999;
  margin-bottom: 5px;
}

/* ===== SP ===== */
/* ===== SP横スクロール ===== */
@media screen and (max-width: 768px) {

  .price-compare {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px;
    scroll-snap-type: x mandatory;
  }

  .compare-col {
    min-width: 260px;
    flex: 0 0 auto;
    border-radius: 16px;
    scroll-snap-align: start;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  }

  /* ラベル列は非表示（スマホでは邪魔） */
  .compare-col.labels {
    display: none;
  }

  .cell {
    padding: 16px;
  }

  /* カード感強化 */
  .compare-col.light {
    background: #fff;
  }

  .compare-col.strong {
    transform: none;
  }

    .sp-label {
    display: block;
    background-color: #ddd;
    padding: 3px 10px;
    border-radius: 10px;
    color: #444;
  }

  .cell {
    flex-direction: column;
  height: 120px;

  }
  .good {
  color: #333;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
}
.icon.plus {
  color: #e01c40;
  font-size: 25px;
  font-weight: bold;
  height: 35px;
  margin-top: -7px;
 }
}

/* =========================
  セクション全体
========================= */
.solution {
  padding: 100px 0px;
  background-image: url("../img/solution_background.webp");
  background-repeat: repeat-y;     /* 縦だけ繰り返し */
  background-size: 100% auto;      /* 横100%、縦は画像比率 */
  background-position: top center; /* 上から中央配置 */
  overflow: hidden;
}

/* =========================
  タイトル
========================= */
.solution-header {
  text-align: center;
  margin: 0 20px 60px;
}

/* タイトルラッパー */
.solution-title-wrap {
  position: relative;
  display: inline-block;
}

/* タイトル */
.solution-title {
      max-width: 400px;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2; /* キャラより前 */
}

/* キャラクター */
.title-character {
  position: absolute;
  top: -40px;
  right: -20px;
  width: 150px;
  rotate: 40deg;

  z-index: 1; /* ←タイトルの後ろに隠す */

  /* 初期状態（隠れてる） */
  transform: translate(40px, 40px) rotate(40deg);

  transition: all 2.8s cubic-bezier(0.25, 1.5, 0.5, 1);
}

/* 発火 */
.solution-header.is-active .title-character {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
}
/* =========================
  カードレイアウト（PC：2カラム）
========================= */
.solution-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ←ここ変更 */
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
}

/* 最後の1枚を中央寄せ */
.solution-card:last-child {
  grid-column: 1 / -1;       /* 2列分使う */
  max-width: 400px;          /* 幅を制限 */
  justify-self: center;      /* 中央配置 */
}

/* 調整用 */
.problem {
  margin-top: -40px;
}

/* =========================
  カードデザイン
========================= */
.solution-card {
  width: 100%;
  background: #fff;
  border-radius: 30px;
  padding: 0 14px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}



/* =========================
  画像
========================= */
.solution-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* 矢印 */
.solution-card .arrow {
  width: 240px;
  margin: 40px 0;
}

/* =========================
  初期状態（非表示）
========================= */

/* カード全体はそのままでOK */

/* 上から落ちてくる（problem） */
.solution-card .problem {
  transform: translateY(-120px);
  opacity: 0;
  transition: all 1.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ビタッと貼り付く（difference） */
.solution-card img:last-child {
  transform: scale(1.2);
  opacity: 0;
  transition: all 1.5s ease;
}

/* =========================
  発火状態
========================= */

.solution-card.is-active .problem {
  transform: translateY(0);
  opacity: 1;
}

/* 少し遅れて出すと気持ちいい */
.solution-card.is-active img:last-child {
  transform: scale(1);
  opacity: 1;
  transition-delay: 0.2s;
}



/* =========================
  タブレット（そのまま2カラム）
========================= */
@media screen and (max-width: 1024px) {
  .solution-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
  スマホ（1カラム）
========================= */
@media screen and (max-width: 768px) {

  .solution {
    background: url("../img/solution_background_res.webp") no-repeat center / cover;
  }

  .solution-header {
    margin-bottom: 40px;
  }

  .solution-cards {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .solution-card {
    max-width: 90%;
    margin: 0 auto;
    padding: 0px 12px 20px;
    border-radius: 20px;
  }

  /* スマホでは中央寄せ解除 */
  .solution-card:last-child {
    grid-column: auto;
    max-width: 90%;
  }

}


.strengths {
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

.strengths::before,
.strengths::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}

/* 左上 */
.strengths::before {
  width: 400px;
  height: 400px;
  background: #c3e5ee;
  top: 100px;
  right: 100px;
  opacity: 0.18;
}

/* 右下 */
.strengths::after {
  width: 300px;
  height: 300px;
  background: #73cadd;
  bottom: 100px;
  left: 100px;
  opacity: 0.06;
}

.strengths-header {
  text-align: center;
  margin-bottom: 130px;
}

.strengths-header img {
  max-width: 700px;
  width: 100%;
}

/* ===== 全体 ===== */
.strengths-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== 各ブロック ===== */
.strength-item {
  display: flex;
  align-items: center; /* 縦中央 */
  justify-content: center; /* 横中央 */
  gap: 60px;
  margin-bottom: 100px;
}

/* 逆配置 */
.strength-item.reverse {
  flex-direction: row-reverse;
}

/* ===== 画像 ===== */
.strength-image {
  flex: 1;
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
}

/* デフォルト（共通サイズ） */
.strength-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== 個別サイズ調整用クラス ===== */
/* HTML側で img に付けるだけでOK */

.strength-img-sm {
  max-width: 250px !important;
}

.strength-img-md {
  max-width: 350px !important;
}

.strength-img-lg {
  max-width: 450px !important;
}

.strength-img-xl {
  max-width: 550px !important;
}


/* ===== テキスト ===== */
.strength-content {
  flex: 1;
  text-align: center; /* 中央揃え */
  display: flex;
  flex-direction: column;
  align-items: center; /* タイトル・文章中央 */
  justify-content: center;
}

.strength-title {
  max-width: 350px;
  width: 100%;
  margin-bottom: 40px;
}

.strength-content p {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  text-align: left;
}

/* ① メイン画像：ふわっと */
.fade-target {
  opacity: 0;
  transform: translateY(20px);
  transition: 0.8s ease;
}

.fade-target.show {
  opacity: 1;
  transform: translateY(0);
}

/* ② タイトル画像：左→右に表示（マスク） */
.title-reveal {
  clip-path: inset(0 100% 0 0);
  transition: 0.8s ease;
}

.title-reveal.show {
  clip-path: inset(0 0 0 0);
}


/* ===== 部分下線 ===== */
.strength-underline {
  position: relative;
  display: inline-block;
}

/* 線 */
.strength-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0%;
  height: 2px;
  transition: 0.8s ease;
}

/* 発火 */
.strength-underline.show::after {
  width: 100%;
}

/* ===== 色変更 ===== */
.line-1::after {
  background: #c3e5ee;
}

.line-2::after {
  background: #73cadd;
}

.line-3::after {
  background: #ffb4b4;
}

.line-4::after {
  background: #6e6e6e;
}


/* ===== レスポンシブ ===== */
@media screen and (max-width: 768px) {

  .strength-item,
  .strength-item.reverse {
    flex-direction: column-reverse;
    gap: 30px;
    margin-bottom: 100px;
  }

  .strength-title {
    max-width: 350px;
    margin-bottom: 15px;
  }
.strengths-header {
  text-align: center;
  margin-bottom: 80px;
}
  .strength-content p {
    font-size: 14px;
  }
  .strength-image img {
  max-width: 100%;
  height: auto;
  display: block;
  width: 100% !important;
}
.strengths::after {
  width: 200px;
  height: 200px;
  background: #73cadd;
  bottom: 100px;
  left: 100px;
  opacity: 0.06;
}
}


.tpl2-section {
  position: relative;
  background: #ff9823;
  padding: 100px 20px;
  overflow: hidden;
  z-index: 0;
}

.tpl2-section > * {
  position: relative;
  z-index: 2;
}

.tpl2-bg {
  position: absolute;
  inset: 0;
  background: url("../img/template_background.webp") repeat;
  background-size: 50% 20%;
  opacity: 0.1;
  z-index: 1;
}

.tpl2-header {
  text-align: center;
  margin-bottom: 100px;
}

.tpl2-header img {
  width: 100%;
  max-width: 550px;
}

/* スライダー */
.tpl2-slider {
  display: flex;
  justify-content: center;
  background-color: #fff;
  padding: 70px 20px 50px;
  border-radius: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

.tpl2-center {
  overflow: hidden;
  width: 100%;
  max-width: 900px;
}

/* トラック */
.tpl2-track {
  display: flex;
  transition: transform 0.5s ease;
  gap: 30px;
}

/* アイテム */
.tpl2-item {
  flex: 0 0 100%;
  padding: 10px 10px 20px 10px;
  background-color: #ff9823;
  border-radius: 25px;
  box-sizing: border-box;
    flex: 0 0 calc((100% - 30px) / 2);

  transition: background-color 0.3s ease; /* ←これ */
}
.tpl2-item:hover {
  background-color: #6ecbff;
}
.tpl2-item p{
    text-align: center;
    color: #fff;
    font-size: 22px;
    margin-bottom: 10px;
    padding: 10px;
}
.tpl2-item a{
    text-decoration: none;
}
.tpl2-item img {
  width: 100%;
  display: block;
  border-radius: 5px;
}

/* ナビ */
.tpl2-indicator-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.tpl2-nav {
  background: #fff;
  border: none;
  font-size: 44px;
  padding: 14px 8px 24px;
  cursor: pointer;
  border-radius: 50%;
}

/* インジケーター */
.tpl2-indicator {
  display: flex;
  gap: 8px;
}

.tpl2-indicator span {
  width: 15px;
  height: 15px;
  background: #ddd;
  border-radius: 50%;
}

.tpl2-indicator .active {
  background: #333;
}


/* レスポンシブ */
@media (min-width: 768px) {
  .tpl2-item {
    flex: 0 0 calc((100% - 30px) / 2);
  }
}

@media (min-width: 1024px) {
  .tpl2-item {
    flex: 0 0 calc((100% - 60px) / 3); /* ←ここが全て */
  }
  
}
@media (max-width: 768px) {

    .tpl2-section {
  position: relative;
  background: #ff9823;
  padding: 60px 20px;
  overflow: hidden;
  z-index: 0;
}
.tpl2-header {
  text-align: center;
  margin-bottom: 50px;
}
.tpl2-slider {
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding: 50px 10px 20px;
    border-radius: 20px;
}

.tpl2-track {
  display: flex;
  transition: transform 0.5s ease;
  gap: 10px;
}

/* アイテム */
.tpl2-item {
  flex: 0 0 100%;
  padding: 10px 10px 20px 10px;
  background-color: #ff9823;
  border-radius: 10px;
  box-sizing: border-box;
    flex: 0 0 calc((100% - 10px) / 2);

  transition: background-color 0.3s ease; /* ←これ */
}

.tpl2-item p{
    text-align: center;
    color: #fff;
    font-size: 17px;
    margin-bottom: 10px;
    padding: 10px;
}

.tpl2-indicator-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 0px;
}

.tpl2-nav {
  background: #fff;
  border: none;
  font-size: 34px;
  padding: 14px 8px 24px;
  cursor: pointer;
  border-radius: 50%;
}

/* インジケーター */
.tpl2-indicator {
  display: flex;
  gap: 8px;
}

.tpl2-indicator span {
  width: 10px;
  height: 10px;
  background: #ddd;
  border-radius: 50%;
}

.tpl2-indicator .active {
  background: #333;
}

}




/* ===== セクション ===== */
.functions {
  padding: 60px 20px;
  background: #fff;
  background-image: url(../img/function_background.webp);
  background-size: 80% 30%;
}

/* ===== タイトル ===== */
.functions-header {
  text-align: center;
  overflow: hidden;
}
.functions-header img {
  max-width: 520px;
  width: 100%;
  margin-bottom: -5px;
}

/* ===== 左右 ===== */
.functions-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== テーブル ===== */
.functions-table {
  border-top: 3px solid #ddd;
}

/* ===== 行 ===== */
.function-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 3px solid #ddd;
}

/* ===== 左 ===== */
.function-title {
  padding: 16px;
  font-weight: bold;
  background: #fafafa;
  border-left: 3px solid #ddd;
  border-right: 3px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
}

/* ===== 右（中央寄せ） ===== */
.function-content {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 3px solid #ddd;
  text-align: center;
  background: #fff;
}

/* ===== 〇 ===== */
.function-content img {
  width: 22px;
  margin-bottom: 6px;
}

/* ===== desc ===== */
.function-desc {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

/* ===== sub ===== */
.function-sub {
  margin-top: 4px;
  font-size: 12px;
  color: #777;
  line-height: 1.5;
}

/* ===== caution ===== */
.function-caution {
  margin-top: 4px;
  font-size: 12px;
  color: #e01c40;
  line-height: 1.5;
}

/* ===== オプション専用 ===== */
.option-section .function-content.no-icon img {
  display: none;
}

.option-header{
  margin-top: 100px;
}
/* 金額強調 */
/* ===== 金額UI ===== */
.option-price {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 6px;
}

/* 月額とか */
.price-prefix {
  font-size: 12px;
  color: #777;
}

/* メイン金額（主役） */
.price-main {
  font-size: 22px;
  font-weight: bold;
  color: #1c92e0;
  line-height: 1;
}

/* 税込 */
.price-tax {
  font-size: 11px;
  color: #777;
}

/* caution少しだけ強調 */
.function-caution {
  margin-top: 6px;
  font-size: 12px;
  color: #e01c40;
  line-height: 1.5;
}
/* ===== スマホ ===== */
@media (min-width: 1200px) {
.functions {
  padding: 60px 20px;
  background: #fff;
  background-image: url(../img/function_background.webp);
  background-size: 70% 50%;
}

}

@media (max-width: 768px) {
.functions {
  background: #fff;
  background-image: url(../img/function_background.webp);
  background-size: 100% auto;
}
  .functions-wrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* ★ここが本質 */
  .function-row {
    grid-template-columns: 120px 1fr; /* ←左を細くする */
  }
.function-title {
  padding: 5px;
}
.function-content {
  padding: 16px 12px;
}

}


/* ===== セクション ===== */
.flow-section {
  padding: 150px 20px 70px;
  text-align: center;
}

/* タイトル */
.flow-header img {
  max-width: 450px;
  width: 100%;
  margin-bottom: 50px;
}

/* ===== 横並び ===== */
.flow-wrapper {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* ===== 外枠 ===== */
.flow-box {
  position: relative;
  border-radius: 20px;
  padding: 15px;
  width: 300px;
  box-sizing: border-box;
}

/* 色 */
.color1 { background: #ecca5f; }
.color2 { background: #da8e83; }
.color3 { background: #518da4; }

/* ===== STEP表示 ===== */
.step-label {
  position: absolute;
  top: -12px;
  right: 15px;
  font-weight: bold;
  font-size: 14px;
  background: #fff;
  padding: 5px 10px;
  border-radius: 999px;
}

/* 色連動 */
.color1 .step-label { color: #ecca5f; }
.color2 .step-label { color: #da8e83; }
.color3 .step-label { color: #518da4; }

/* ===== 内側 ===== */
.flow-inner {
  background: #fff;
  border-radius: 15px;
  padding: 25px 20px;
  height: 100%;
  color: #333;
}

/* ===== STEP全体 ===== */
.step-wrap {
  position: relative;
  margin-bottom: 10px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  margin-top: -35px;
}

/* STEP文字 */
.step-text {
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 1px;
  display: block;
  margin-bottom: -10px;
}

/* 数字（主役） */
.step-num {
  font-size: 70px;
  font-weight: 900;
  line-height: 1;
  position: relative;
  display: inline-block;
  z-index: 2;
}

/* 白フチ（超重要） */
.step-num {
  -webkit-text-stroke: 3px #fff;
}

/* ===== 色連動 ===== */
.color1 .step-text,
.color1 .step-num { color: #ecca5f; }

.color2 .step-text,
.color2 .step-num { color: #da8e83; }

.color3 .step-text,
.color3 .step-num { color: #518da4; }

/* ===== はみ出し演出 ===== */
.step-wrap {
  position: relative;
  top: -25px; /* 上にはみ出す */
}

/* 内側の余白調整 */
.flow-inner {
  padding-top: 40px;
}

/* タイトル */
.flow-inner h3 {
  font-size: 18px;
  margin-bottom: 15px;
}

/* 画像 */
.flow-img img {
  width: 100%;
  max-width: 100px;
  border-radius: 10px;
  margin-bottom: 15px;
}

/* 説明 */
.flow-inner p {
  font-size: 14px;
  line-height: 1.6;
}

/* ===== スマホ対応 ===== */
@media (max-width: 768px) {
  .flow-section {
  padding: 100px 20px 50px;
  text-align: center;
}
  .flow-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .flow-box {
    width: 100%;
    max-width: 350px;
  }
}



/* ===== セクション背景 ===== */
.contact-section {
  position: relative;
  background: #ff9823;
  padding: 80px 20px;
  overflow: hidden;
  z-index: 0;
}


.contact-section > * {
  position: relative;
  z-index: 2;
}

.contact-bg {
  position: absolute;
  inset: 0;
  background: url("../img/template_background.webp") repeat;
  background-size: 50% 20%;
  opacity: 0.1;
  z-index: 1;
}



/* ===== タイトル ===== */
.contact-header {
  position: relative;
  z-index: 5;
  text-align: center;
  margin-right: -70px;
  margin-bottom: -85px;
  overflow: hidden;
}

.contact-header img {
  max-width: 500px;
  width: 100%;
}


/* ===== フォーム外枠 ===== */
.contact-box {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  padding: 100px 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ===== 各項目 ===== */
.form-group {
  margin-bottom: 22px;
}

/* ===== ラベル ===== */
.form-group > label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 15px;
  white-space: nowrap; /* ← 改行させない */
}

/* 必須マーク */
.form-group.required > label::after {
  content: "必須";
  background: #e01c40;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 8px;
  border-radius: 4px;
}

/* ===== 入力欄 ===== */
input,
textarea {
  width: 100%;
  padding: 13px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
  box-sizing: border-box;
  transition: 0.2s;
}

input:focus,
textarea:focus {
  border-color: #ff9823;
  outline: none;
}

/* ===== ラジオ（ここ重要） ===== */
/* ===== ラジオ崩れ修正（最重要） ===== */
.radio-group {
  display: flex;
  flex-direction: row; /* ← 横固定 */
  gap: 30px;
  align-items: center;
}

/* ラジオの各項目 */
.radio-group label {
  display: inline-flex; /* ← これがポイント */
  align-items: center;
  gap: 8px;
  white-space: nowrap; /* ← 「メール」「電話」を改行させない */
  font-weight: lighter;
}
/* ===== ボタン ===== */
.submit-btn {
  display: block;
  width: 280px;           /* ← 固定幅 */
  max-width: 100%;        /* ← スマホ対応 */
  margin: 30px auto 0;    /* ← 中央寄せ */
  padding: 16px;
  background: #ff9823;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.submit-btn:hover {
  background: #e67f00;
}

/* ===== エラー ===== */
.input-error {
  border: 2px solid #e01c40;
}

/* ===== 電話時間 ===== */
#time-group {
  display: none;
}


.form-step {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
}

.form-step::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: #ddd;
  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;
  width: 33%;
  text-align: center;
  font-size: 13px;
  color: #999;
}

.step::before {
  content: "";
  display: block;
  margin: 0 auto 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ccc;
}

/* アクティブ */
.step.active {
  color: #ff9823;
}

.step.active::before {
  background: #ff9823;
}

/* 完了済み */
.step.done::before {
  background: #ff9823;
}

.complete-box {
  padding: 40px 20px;
}

.complete-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* テキスト側 */
.complete-text {
  flex: 1;
}

.complete-text h2 {
  font-size: 26px;
  margin-bottom: 20px;
  color: #333;
}

.complete-lead {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 25px;
}

.complete-info {
  background: #fff7f0;
  border-left: 5px solid #ff9823;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.complete-info p {
  margin: 5px 0;
  font-size: 14px;
}

.complete-note {
  font-size: 14px;
  color: #666;
}

/* 画像 */
.complete-image {
  flex: 0 0 200px;
  text-align: center;
}

.complete-image img {
  width: 100%;
  max-width: 180px;
}

/* ===== スマホ ===== */
@media (max-width: 768px) {
  .complete-inner {
    flex-direction: column;
    text-align: center;
  gap: 10px;

  }

  .complete-image {
    margin-top: 20px;
  }
  .complete-box {
  padding: 20px 0px;
}
.contact-box {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  padding: 70px 40px 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.contact-header {
  position: relative;
  z-index: 5;
  text-align: center;
  margin-right: -40px;
  margin-bottom: -60px;
  overflow: hidden;
}

.contact-header img {
  max-width: 330px;
  width: 100%;
}
.contact-bg {
  position: absolute;
  inset: 0;
  background: url("../img/template_background.webp") repeat;
  background-size: 100% 10%;
  opacity: 0.1;
  z-index: 1;
}


}
/* =========================
   PCレイアウト（ここが本命）
========================= */
@media (min-width: 768px) {

  .form-group {
    display: grid;
    grid-template-columns: 240px 1fr; /* ← 完全固定 */
    align-items: center;
    gap: 20px;
  }

  /* ラベルを縦中央 */
  .form-group > label {
    margin-bottom: 0;
  }

  /* テキストエリアだけ高さ調整 */
  textarea {
    min-height: 140px;
  }

  /* ラジオだけ微調整（ズレ防止） */
  .radio-group {
    padding-top: 2px;
        flex-direction: row !important;

  }
}

.faq-section {
  padding: 100px 20px 0;
}

.faq-header {
  text-align: center;
  margin-bottom: -10px;
}

.faq-header img {
  max-width: 300px;
  width: 100%;
}

.faq-list {
  max-width: 900px;
  margin: 0 auto;
}

/* カード */
.faq-item {
  background: #fff;
  border-radius: 20px;
  padding: 25px 30px;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: 0.3s;
  border: 4px solid transparent; /* ← 追加 */
}

/* ホバーで枠線 */
.faq-item:hover {
  transform: none; /* ← 浮かせない */
  border-color: #6ecbff; /* ← 好きな色にしてOK */
}

/* Q */
.faq-q {
  display: flex;
  align-items: center;
  gap: 15px;
}

.faq-q img {
  width: 30px;
}

.faq-q p {
  font-weight: bold;
}

/* A（アニメーション対応版） */
.faq-a {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 15px;

  transition: all 0.4s ease;
}

/* 開いたとき */
.faq-item.open .faq-a {
  max-height: 300px; /* 内容に応じて調整 */
  opacity: 1;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.faq-a img {
  width: 30px;
  height: 28px;
}

.faq-a p {
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .faq-header img {
  max-width: 200px;
  width: 100%;
}

  
}






/* =========================
   波 共通
========================= */
.wave-line{
  width:100%;
  height:80px;
  line-height:0;
  position: relative;
  z-index: 5;
}

.wave-line svg{
  width:100%;
  height:100%;
  display:block;
}
.wave-top{
  background-color: transparent;

}
.wave-bottom{
  background-color: transparent;

}


@media(max-width:768px){

.wave-line{
  width:100%;
  height:40px;
  line-height:0;
  position: relative;
  z-index: 5;
}
}