@charset "utf-8";
/*-------------
 cygniplus.html 
-------------*/
.wrap{ width: 90%; margin: 0 auto;}
.wrap_sp{ width: 100%; margin: 0 auto;}
.inner_wrap{ padding: 4rem 0;}
a:hover img{ filter:alpha(opacity=80);
    opacity:0.8; }
.tx_white a:hover{ filter:alpha(opacity=80);
    opacity:0.8; }
/* 固定メニュー */
.floatmenu li:nth-last-child(1):after,
.floatmenu li:nth-last-child(2):after{
	content:"";
}
.floatmenu li:last-child{
	position:absolute;
	right:0;
	background:#1d2088;
	margin:0.8rem 0;
	padding:0.4rem 4rem 0.4rem 4.5rem;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.floatmenu li:last-child a{
	color:#fff;
}

.icon_top img{
	max-width: 20%;
	padding-top: 1em;
}
/*MV上の告知枠*/
.mv_cp_wrap{
  background-color: #1d2088;
}
.mv_cp_wrap span{
  display: block;
  padding: 1rem;
  color: #FFFFFF;
  text-align: center;
  font-weight: 700;
  font-size: 1.4rem;
}
.mv_cp_wrap_bn{
  background-color: ##bb6b1f!important;
}
.mv_cp_wrap_bn span{
  display: block;
text-align: center;
}
/* MV */
.sec_lp_mv{
/* 	background:#FFFFFF url(/include_html/service/images/cygniplus/mv_pc.jpg) repeat-x center top;*/
	 	background:#FFFFFF url(../images/cygniplus/mv-pc.png) repeat-x center top;
	background-size:auto 100%;
	height:370px;
}
@media(max-width:425px){
.sec_lp_mv{
	height:370px;
}
}
.sec_lp_mv p{
	font-size:2.75rem;
	line-height:4.4rem;
	font-weight:500;
	color:#222;
	padding-top: 6.0rem;
	text-align:left;
	text-shadow: 2px 2px 16px #fff, -2px 2px 16px #fff, 2px -2px 16px #fff, -2px -2px 16px #fff;
}
@media(max-width:425px){
.sec_lp_mv p{
	font-size:2.6rem;
	line-height:3.6rem;
}
}

@media(max-width:768px){
.sec_lp_mv p{
	padding-right:1rem;
}
}
.tx-sm{ font-size: 12px;}
.plun_ttl{
 font-size: 1.5rem;
 margin: 4rem 0 0.5rem 0;
 font-weight: 700;
 color: #333399;
}
.pdt2rem{padding-top: 2rem;}
/* ============ mv-box ============ */
.mv-box {
  background-color: #e8245c;
  width: 100%;
  min-height: 420px;
  padding: 50px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* サンバースト放射線背景 */
.mv-box::before {
  content: '';
  position: absolute;
  top: 80%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0.12) 0deg,   rgba(255,255,255,0) 6deg,
    rgba(255,255,255,0.12) 12deg,  rgba(255,255,255,0) 18deg,
    rgba(255,255,255,0.12) 24deg,  rgba(255,255,255,0) 30deg,
    rgba(255,255,255,0.12) 36deg,  rgba(255,255,255,0) 42deg,
    rgba(255,255,255,0.12) 48deg,  rgba(255,255,255,0) 54deg,
    rgba(255,255,255,0.12) 60deg,  rgba(255,255,255,0) 66deg,
    rgba(255,255,255,0.12) 72deg,  rgba(255,255,255,0) 78deg,
    rgba(255,255,255,0.12) 84deg,  rgba(255,255,255,0) 90deg,
    rgba(255,255,255,0.12) 96deg,  rgba(255,255,255,0) 102deg,
    rgba(255,255,255,0.12) 108deg, rgba(255,255,255,0) 114deg,
    rgba(255,255,255,0.12) 120deg, rgba(255,255,255,0) 126deg,
    rgba(255,255,255,0.12) 132deg, rgba(255,255,255,0) 138deg,
    rgba(255,255,255,0.12) 144deg, rgba(255,255,255,0) 150deg,
    rgba(255,255,255,0.12) 156deg, rgba(255,255,255,0) 162deg,
    rgba(255,255,255,0.12) 168deg, rgba(255,255,255,0) 174deg,
    rgba(255,255,255,0.12) 180deg, rgba(255,255,255,0) 186deg,
    rgba(255,255,255,0.12) 192deg, rgba(255,255,255,0) 198deg,
    rgba(255,255,255,0.12) 204deg, rgba(255,255,255,0) 210deg,
    rgba(255,255,255,0.12) 216deg, rgba(255,255,255,0) 222deg,
    rgba(255,255,255,0.12) 228deg, rgba(255,255,255,0) 234deg,
    rgba(255,255,255,0.12) 240deg, rgba(255,255,255,0) 246deg,
    rgba(255,255,255,0.12) 252deg, rgba(255,255,255,0) 258deg,
    rgba(255,255,255,0.12) 264deg, rgba(255,255,255,0) 270deg,
    rgba(255,255,255,0.12) 276deg, rgba(255,255,255,0) 282deg,
    rgba(255,255,255,0.12) 288deg, rgba(255,255,255,0) 294deg,
    rgba(255,255,255,0.12) 300deg, rgba(255,255,255,0) 306deg,
    rgba(255,255,255,0.12) 312deg, rgba(255,255,255,0) 318deg,
    rgba(255,255,255,0.12) 324deg, rgba(255,255,255,0) 330deg,
    rgba(255,255,255,0.12) 336deg, rgba(255,255,255,0) 342deg,
    rgba(255,255,255,0.12) 348deg, rgba(255,255,255,0) 354deg,
    rgba(255,255,255,0.12) 360deg
  );
  pointer-events: none;
  z-index: 0;
}

.mv-box .container {
  position: relative;
  z-index: 1;
  max-width: 100%;
  width: 100%;
}

/* 登録数スタンプバッジ */
.mv-box-stats {
  position: absolute;
  right: clamp(10px, 3vw, 40px);
  top: clamp(10px, 3vw, 30px);
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #f9e87a, #f0c800);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  z-index: 2;
  /* ギザギザ縁 */
  clip-path: polygon(
    50% 0%, 61% 5%, 69% 3%, 75% 10%, 84% 9%, 88% 17%,
    97% 19%, 98% 28%, 100% 35%, 95% 42%, 97% 50%,
    95% 58%, 100% 65%, 98% 72%, 97% 81%, 88% 83%,
    84% 91%, 75% 90%, 69% 97%, 61% 95%, 50% 100%,
    39% 95%, 31% 97%, 25% 90%, 16% 91%, 12% 83%,
    3% 81%, 2% 72%, 0% 65%, 5% 58%, 3% 50%,
    5% 42%, 0% 35%, 2% 28%, 3% 19%, 12% 17%,
    16% 9%, 25% 10%, 31% 3%, 39% 5%
  );
}

.mv-box-stats .label {
  font-size: 10px;
  color: #c00040;
  font-weight: 700;
  line-height: 1.2;
}

.mv-box-stats .num {
  font-size: 24px;
  font-weight: 700;
  color: #c00040;
  line-height: 1;
}

/* キャッチコピー */
.mv-box-catch {
  color: #f9e87a;
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
  letter-spacing: 0.05em;
}

.mv-box-catch::before { content: "\\"; margin-right: 4px; }
.mv-box-catch::after  { content: "/";  margin-left:  4px; }

.mv-box-title {
  color: #fff;
  font-size: clamp(20px, 4.5vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.2);
}

/* ポイント表示エリア */
.mv-box-points {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.point-badge {
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 20px;
  padding: 3px 14px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.point-badge .label {
  font-size: 11px;
  color: #fff;
  display: block;
  margin-bottom: 2px;
}

.point-badge .num {
  font-size: clamp(48px, 11vw, 72px);
  font-weight: 700;
  color: #f9e87a;
  line-height: 1;
}

.point-badge .pct {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  color: #f9e87a;
}

.point-plus {
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.point-kanri-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.point-kanri {
  font-size: clamp(16px, 3.5vw, 22px);
  font-weight: 700;
  color: #f9e87a;
  line-height: 1.2;
}

.point-kanri-big {
  font-size: clamp(42px, 10vw, 68px);
  font-weight: 700;
  color: #f9e87a;
  line-height: 1;
  letter-spacing: -2px;
}

.mv-box-note {
  color: rgba(255,255,255,0.95);
  font-size: clamp(12px, 2.5vw, 15px);
  margin-bottom: 30px;
  font-weight: 700;
}

.mv-box-note em {
  font-style: normal;
  font-size: 1.3em;
}

/* CTAボタン */
.btn-cta {
  background: linear-gradient(180deg, #f9e87a 0%, #f0c800 100%);
  color: #c00040;
  /*font-size: clamp(18px, 4vw, 26px);*/
  font-size: 1.4rem;    
  font-weight: 700;
  padding: 20px 80px;
  border-radius: 60px;
  display: inline-block;
  box-shadow: 0 6px 0 #c09800, 0 8px 20px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
  letter-spacing: 0.05em;
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn-cta:hover {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #c09800, 0 5px 15px rgba(0,0,0,0.3);
  color: #c00040;
}
 /* ---- Scene + Triangle をまとめるラッパー ---- */
  .scene-wrap {
    position: relative;
  }

 
/* ============ TROUBLE SECTION ============ */
.trouble {
  background: #fff;
  padding: 80px 20px 0;
  text-align: center;
  position: relative;
  /*clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);*/
}

.trouble h2 {
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  margin-bottom: 30px;
  line-height: 1.5;
  color: #333;
}

.trouble-image-wrap {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  /*padding: 30px 20px;*/
}

.speech-bubbles {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.bubble {
  background: #fff;
  border: 2px solid #f7a8c0;
  border-radius: 20px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #444;
  position: relative;
  max-width: 280px;
}

.bubble.right {
  align-self: flex-end;
  border-color: #f05080;
}

.nurse-icon {
  font-size: 80px;
  margin: 10px 0;
}

/* ============ SOLUTION ============ */
.solution {
  background: #fef6f8;
  padding: 180px 20px 20px;
  text-align: center;
  position: relative;
}

/* troubleセクションの白背景と同じ山形をsolutionの上部に再現 */
.solution::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}

.section-title {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  color: #e02050;
  margin-bottom: 35px;
}

.solution-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 25px;
  align-items: center;
}

/* カード全体のラッパー：円＋はみ出しイラスト分の高さを確保 */
.solution-card-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 170px;
}

.solution-card {
  background: #fff;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 15px rgba(0,0,0,0.1);
  padding: 10px;
  text-align: center;
  position: relative;
  overflow: visible;
}

.solution-card p {
  font-size: clamp(16px, 3.5vw, 22px);
  font-weight: 700;
  color: #e02050;
  line-height: 1.5;
  margin-bottom: 0;
}
.icon-sarani{
      font-size: clamp(24px, 3.5vw, 30px);
      font-weight: 500;
      color: #e02050;
      letter-spacing: 0.15em;
　　　　margin-top: 80px;
    }

/* イラストエリア：円の下にはみ出す */
.solution-card-illust {
  width: 130px;
  height: 90px;
  margin-top: -60px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.solution-card-illust img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.plus-sign {
  font-size: 50px;
  font-weight: 700;
  color: #e02050;
    margin: 0 20px;
}

.sarani {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #e02050;
  padding: 8px 30px;
  border-radius: 25px;
  display: inline-block;
  margin-top: 10px;
}

/* ============ PASSPORT BENEFITS ============ */
.passport-benefits {
  background: #da2e66;
  padding: 80px 0 0 0;
  color: #fff;
}

.passport-benefits h2 {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
  line-height: 1.4;
}

.benefit-item {
  padding-bottom: 20px;
}

.benefit-badge {
  background: #f9d423;
  color: #c8105a;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 12px;
}

.benefit-badge .num {
  font-size: 18px;
}

.benefit-title {
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.4;
}

.benefit-title em {
  color: #f9d423;
  font-style: normal;
}

.benefit-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}

/* Point comparison table */
.point-compare {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 15px 0;
  flex-wrap: wrap;
}

.compare-box {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  padding: 12px 20px;
  text-align: center;
  flex: 1;
  min-width: 130px;
}

.compare-box.highlight {
  background: rgba(255,255,255,0.95);
  color: #e02050;
}

.compare-box .label {
  font-size: 12px;
  margin-bottom: 5px;
}

.compare-box .value {
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 700;
}

.compare-box .unit {
  font-size: 12px;
}

.compare-arrow {
  font-size: 24px;
  color: #f9d423;
}

.compare-tag {
  background: #e02050;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  text-align: center;
}

/* ============ CTA SECTION ============ */
.cta-section {
  background: #da2e66;
  padding: 40px 20px;
  text-align: center;
}
.cta-section-inner {
  background: #da2e66;
  padding: 40px 0 80px 0;
  text-align: center;
}

/*.btn-cta {
  background:#fbfe35;
  color: #da2e66;
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 700;
  padding: 18px 50px;
  border-radius: 40px;
  display: inline-block;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}*/

/* ============ PLAN TABLE ============ */
.plan-table-section {
  padding: 80px 20px;
  background: #fff;
}

.plan-table-section h2 {
  text-align: center;
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  color: #e02050;
  margin-bottom: 50px;
}

.plan-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: clamp(14px, 2.5vw, 18px);
}

.plan-table th,
.plan-table td {
  border-top: 1px solid #999999;
  padding: 12px 8px;
  text-align: center;
  vertical-align: middle;
}

.plan-table thead th:first-child {
  background: transparent;
  border: none;
}

.plan-table thead th.normal-col {
  background: #999;
  color: #fff;
  font-weight: 700;
  border-radius: 10px 10px 0 0;
  border: none;
}

.plan-table thead th.passport-col {
  background: #e02050;
  color: #fff;
  font-weight: 700;
  border-radius: 10px 10px 0 0;
  border: none;
}

.plan-table tbody tr:nth-child(even) {
  background: transparent;
}

.plan-table td:first-child {
  text-align: center;
  font-weight: 700;
  background: #fff;
  border-left: none;
}

.plan-table tbody td:nth-child(2) {
  border-left: 1px solid #999999;
}

.plan-table .highlight-cell {
  color: #e02050;
  font-weight: 700;
  border-left: 1px solid #999999;
}

.plan-table .pink-bg {
  background: #fce4ec;
  color: #e02050;
  font-weight: 700;
  border-left: 1px solid #999999;
}

.table-note {
  font-size: 12px;
  color: #888;
  margin-top: 10px;
  line-height: 1.6;
}

/* ============ VOICE SECTION ============ */
.voice-section {
  padding: 80px 20px;
  background: #fef6f8;
  text-align: center;
}

.voice-section h2 {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  color: #e02050;
  margin-bottom: 8px;
}

.voice-section .sub {
  font-size: clamp(16px, 3vw, 20px);;
  color: #e02050;
  margin: 20px 0 30px 0;
  font-weight: 700;
}

.voice-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.voice-card {
  background: #fff;
  border-radius: 16px;
  padding: 25px 20px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.08);
  text-align: left;
}

.voice-card .clinic-name {
  font-size: clamp(16px, 5vw, 16px);
  color: #333333;
  font-weight: 700;
  margin-bottom: 5px;
  text-align: center;
}

.voice-card .img-placeholder img{
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.voice-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #e02050;
  margin-bottom: 8px;
  line-height: 1.4;
}

.voice-card p {
  font-size: 13px;
  color: #555;
  line-height: 1.7;
}
.card__list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .card__list li {
      font-size: 15px;
      line-height: 1.7;
      color: #333;
      display: flex;
      align-items: flex-start;
      gap: 6px;
    }

    .card__list li .check {
      flex-shrink: 0;
      font-size: 20px;
      color: #e02050;
      margin-top: 1px;
    }
/* レスポンシブ：スマホ */
    @media (max-width: 520px) {

      .card__list li {
        font-size: 16px;
      }
    }
/* ============ FOOTER ============ */
.footer-cta {
  background: #da2e66;
  padding: 40px 20px;
  text-align: center;
}

/* ============ DECORATIVE ============ */
.decoration-row {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.flag {
  width: 20px;
  height: 30px;
  background: #f9d423;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
  display: inline-block;
}

.flag:nth-child(even) {
  background: #f05080;
}

.firework {
  font-size: 30px;
}
.logo-cygniplus{
        width: 30%;
        height: auto;
        margin-bottom: 5px;
    }
/* ============ RESPONSIVE ============ */
@media (max-width: 600px) {
    .icon-sarani{
        margin-top: 40px
    }
    .usage-text h3{
        line-height: 24px;
    }
    .passport-benefits {
  background: #da2e66;
  padding: 50px 0 0 0!important;
  color: #fff;
}
    .passport-benefits h2 {
  margin-bottom: 20px!important;
  line-height: 1.4;
}
    .plan-table-section {
  padding: 50px 20px!important;
  background: #fff;
}
    .voice-section {
  padding: 50px 20px!important;
  background: #fef6f8;
  text-align: center;
}
    .point-usage {
  background: #eef0f8;
  padding: 50px 20px 20px!important;
  text-align: center;
}
    .contact-section {
  padding: 50px 20px!important;
  background: #fff;
}
    .faq-section {
  padding: 50px 20px!important;
  background: #fff;
}
    .flow-section {
  background: #fef6f8;
  padding: 50px 20px!important;
  text-align: center;
}
    .trouble {
  background: #fff;
  padding: 50px 20px 0!important;
  /*clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);*/
}
.cta-section-inner {
  background: #da2e66;
  padding: 0 20px 50px 20px!important;
  text-align: center;
}
    .contact-text .sub {
  font-size: 15px;
  color: #e02050;
  margin-bottom: 18px;
  line-height: 20px;
  text-align: center;
}
    .contact-text h2{
        line-height: 24px;
        text-align: center;
        margin-bottom: 10px!important;
    }

  .mv-box-stats {
    position: static;
    display: inline-block;
    margin-bottom: 15px;
  }
    .solution{
        padding: 110px 20px 20px!important;
    }
  .solution-card {
    width: 150px;
    height: 150px;
  }
    .solution-card-illust{
        margin-top:-40px!important;
    }
  .point-compare {
    flex-direction: column;
  }

  .compare-arrow {
    transform: rotate(90deg);
  }

  .btn-apply {
    font-size: 12px;
    padding: 8px 14px;
  }
    .attent-mv{
 margin-top: 3rem!important;
}
    .logo-cygniplus{
        width: 40%;
        height: auto;
        margin-bottom: 5px;
    }
}

@media (min-width: 768px) {

  .mv-box {
    /*padding: 50px 40px 60px;*/
  }

  .speech-bubbles {
    flex-direction: row;
    justify-content: space-around;
  }

  .benefit-item {
    display: flex;
    justify-content: center;
    /*gap: 20px;*/
  }

  .benefit-item .benefit-badge {
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 960px;
    margin: 0 auto;
  }
}

.attent{
 text-align: center;
 font-size:0.8rem;
}

.attent-mv{
 text-align: center;
 color: #FFFFFF;
 margin-top: 1rem;
 font-size:clamp(13px, 2vw, 14px);
}

/* ============ POINT USAGE SECTION ============ */
.point-usage {
  background: #eef0f8;
  padding: 80px 20px 50px;
  text-align: center;
}

.point-usage h2 {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  color: #333399;
  margin-bottom: 40px;
  line-height: 1.5;
}

.usage-list {
  max-width: 960px;
  margin: 0 auto 35px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

.usage-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.usage-badge {
  background: #333399;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 64px;
  min-width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
}

.usage-badge .num {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.usage-text h3 {
  font-size: clamp(18px, 3.5vw, 24px);
  font-weight: 700;
  color: #333399;
  margin-bottom: 4px;
}

.usage-text p {
  font-size: clamp(16px, 3.5vw, 18px);
  color: #666;
  line-height: 1.6;
}

/* gift box panel */
.gift-panel {
  max-width: 960px;
  margin: 30px auto 30px;
}

.gift-panel-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.flag-row {
  display: flex;
  gap: 4px;
}

.flag {
  width: 16px;
  height: 24px;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
}

.flag-pink { background: #f05080; }
.flag-yellow { background: #f9d423; }

.gift-panel-title {
  background: #5b6abf;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 6px;
  text-align: center;
}

.gift-panel-sub {
  font-size: 12px;
  color: #666;
  text-align: center;
  margin-bottom: 15px;
}

.gift-images {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.gift-img-placeholder {
  width: 140px;
  height: 110px;
  background: #f0f0f0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #aaa;
  flex-direction: column;
  gap: 5px;
}

.gift-img-placeholder .emoji {
  font-size: 32px;
}

/* ============ GIFTEE BOX SECTION ============ */
.giftee-section {
  background: #5b6abf;
  padding: 40px 20px;
  text-align: center;
}

.giftee-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.giftee-section h2 {
  color: #fff;
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 700;
}

.giftee-section .sub {
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  margin-bottom: 25px;
}

.giftee-box {
  background: #fff;
  border-radius: 16px;
  padding: 25px 20px;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}

.giftee-top {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.giftee-logo-area {
  flex-shrink: 0;
}

.giftee-logo {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  letter-spacing: -0.5px;
}

.giftee-logo span {
  color: #5b6abf;
}

.giftee-logo-sub {
  font-size: 11px;
  color: #888;
}

.giftee-desc {
  font-size: 12px;
  color: #555;
  line-height: 1.7;
  flex: 1;
  min-width: 180px;
}

.btn-sugu {
  background: #e02050;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 10px;
}

.brand-intro {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 5px;
}

.brand-intro em {
  color: #5b6abf;
  font-style: normal;
  font-size: clamp(18px, 4vw, 22px);
  display: block;
}

.brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px 12px;
  font-size: 12px;
  color: #555;
  margin-top: 10px;
}

.brand-grid .more {
  color: #e02050;
  font-weight: 700;
}

.giftee-notes {
  font-size: 11px;
  color: #999;
  margin-top: 15px;
  line-height: 1.7;
  border-top: 1px solid #eee;
  padding-top: 12px;
}


/* ============ CONTACT SECTION ============ */
.contact-section {
  padding: 80px 20px;
  background: #fff;
}

.contact-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  gap: 25px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.contact-text {
  flex: 1;
  min-width: 250px;
}

.contact-text h2 {
  font-size: clamp(20px, 4vw, 24px);
  font-weight: 700;
  color: #e02050;
  margin-bottom: 6px;
}

.contact-text .sub {
  font-size: 16px;
  color: #e02050;
  margin-bottom: 18px;
}

.contact-info {
  font-size: 16px;
  color: #333;
  line-height: 2;
}

.contact-info strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}

.contact-img img {
    width: 350px;
    min-width: 140px;
    height: auto;
    border-radius: 10px;
    border: solid 1px #DDDDDD;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #aaa;
    flex-shrink: 0;
}

/* ============ FLOW SECTION ============ */
.flow-section {
  background: #fef6f8;
  padding: 80px 20px;
  text-align: center;
}

.flow-section h2 {
  font-size: clamp(22px, 5vw, 36px);
  font-weight: 700;
  color: #e02050;
  margin-bottom: 35px;
}

.flow-steps {
  display: flex;
  gap: 0;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto 20px;
}

.flow-step {
  flex: 1;
  min-width: 160px;
  padding: 20px 15px;
  text-align: center;
  position: relative;
}

.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 16px solid #FFFFFF;
  z-index: 1;
}

.flow-step.step1 { background: #5a5ab5; border-radius: 12px 0 0 12px; }
.flow-step.step2 { background: #333399; }
.flow-step.step3 { background: #dc4070; border-radius: 0 12px 12px 0; }

.flow-step .step-label {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 6px;
}

.flow-step h3 {
  font-size: clamp(18px, 3.5vw, 17px);
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
}

.flow-step .step-note {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  margin-top: 5px;
}

.flow-notes {
  font-size: 12px;
  color: #888;
  text-align: left;
  max-width: 960px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ============ FAQ SECTION ============ */
.faq-section {
  padding: 80px 20px;
  background: #fff;
}

.faq-section h2 {
  text-align: center;
  font-size: clamp(22px, 5vw, 36px);
  font-weight: 700;
  color: #e02050;
  margin-bottom: 30px;
}

.faq-list {
  max-width: 960px;
  margin: 0 auto;
  border-top: 1px solid #eee;
}

.faq-item {
  border-bottom: 1px solid #eee;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 5px;
  cursor: pointer;
  gap: 10px;
  transition: background 0.2s;
}

.faq-question:hover {
  background: #fef6f8;
}

.faq-q-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(14px, 3vw, 16px);
  color: #333;
  font-weight: 700;
  flex: 1;
}

.faq-q-text .q-icon {
  color: #e02050;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.faq-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #e02050;
  flex-shrink: 0;
  font-weight: 700;
  transition: transform 0.3s;
  user-select: none;
}

.faq-item.open .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  display: none;
  padding: 0 10px 18px 36px;
  font-size: clamp(14px, 5vw, 16px);
  color: #555;
  line-height: 1.8;
}

.faq-item.open .faq-answer {
  display: block;
}



/* ============ RESPONSIVE ============ */
@media (max-width: 600px) {
  .flow-step:not(:last-child)::after {
    display: none;
  }

  .flow-steps {
    flex-direction: column;
    gap: 4px;
  }

  .flow-step.step1 { border-radius: 12px 12px 0 0; }
  .flow-step.step2 { border-radius: 0; }
  .flow-step.step3 { border-radius: 0 0 12px 12px; }

  .gift-images {
    gap: 8px;
  }

  .gift-img-placeholder {
    width: 100px;
    height: 80px;
  }

  .brand-grid {
    grid-template-columns: 1fr 1fr;
  }

  .giftee-top {
    flex-direction: column;
  }

  .btn-cta {
    padding: 16px 30px;
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  .usage-item {
    align-items: center;
  }
}