@charset "utf8";


* {
  margin: 0;
  padding: 0;
}
:root {
  --color1:#1B998B;
  --color2:#1B998B;
}
picture {
  display: block;
  height: 100%;
  margin: 0 auto;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  ._pc{ display: none; }
}

@media screen and (min-width: 768px) {
  ._sp{ display: none; }
}

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-image: url(../img/back.png);
  background-repeat: repeat-y;
  background-size: 100%;
}
@media screen and (max-width: 767px) {
  body {
    background-image: url("../img/sp_back.png");
  }
}
img {
  width: 100%;
  height: auto;
}
/*---------------------------
section
---------------------------*/
section {
  width: 100%;
}
section.type-1 {
  background-color: var(--color1);
}
section.type-2 {
  background-color: var(--color2);
}


/*---------------------------
article
---------------------------*/
.article {
  width: 100%;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .article {
    width: 100%;
  }  
}
.item-01__1 {
  width: 100%;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .item-01__1 {
    width: 100%;
  }  
}
.item-01__2 {
  width: calc(1420vw / 19.2);
  margin: calc(-150vw / 19.2) auto calc(90vw / 19.2);
  position: relative;
}
@media screen and (max-width: 767px) {
  .item-01__2 {
    width: 100%;
    margin-bottom: 30%;
  } 
}
.countdown {
  position: relative;
  height: calc(305vw / 19.2);
  background-image: url("../img/countdown.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
.hours {
  position: absolute;
  top: calc(56vw / 19.2);
  left: calc(1048vw / 19.2);
  font-size: clamp(16px, 5.7vw, 95px);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 600;
  line-height: calc(110vw / 19.2);
  color: #ff6663;
}
.minutes {
  position: absolute;
  top: calc(56vw / 19.2);
  left: calc(1264vw / 19.2);
  font-size: clamp(16px, 5.7vw, 95px);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 600;
  line-height: calc(110vw / 19.2);
  color: #ff6663;
}
.seconds {
  position: absolute;
  top: calc(100vw / 19.2);
  left: calc(1438vw / 19.2);
  font-size: calc(63vw / 19.2);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 600;
  line-height: calc(63vw / 19.2);
  color: #ff6663;
}
.item-02__1 {
  width: calc(1420vw / 19.2);
  margin: calc(84vw / 19.2) auto calc(130vw / 19.2);
}
@media screen and (max-width: 767px) {
  .item-02__1 {
    width: calc(340vw / 3.6);
    margin: 10% auto 6%;
  }  
}
.item-03__1 {
  width: calc(1420vw / 19.2);
  margin: calc(84vw / 19.2) auto calc(100vw / 19.2);
}
@media screen and (max-width: 767px) {
  .item-03__1 {
    width: calc(346vw / 3.6);
    margin: 6% auto 12%;
  }  
}
.item-04__1 {
  width: calc(1180vw / 19.2);
  margin: 0 auto calc(60vw / 19.2);
}
@media screen and (max-width: 767px) {
  .item-04__1 {
    width: calc(350vw / 3.6);
    margin: 0 auto 6%;
  }  
}
.item-05__sort {
  width: calc(1420vw / 19.2);
  margin: 0 auto calc(64vw / 19.2);
}
@media screen and (max-width: 767px) {
  .item-05__sort {
    width: 100%;
    margin: 0px auto 4%;
  }
}
.item-05-wrap {
  display: flex;
  flex-direction: column;
}
.item-05__1 {
  width: calc(1420vw / 19.2);
  margin: 0 auto calc(58vw / 19.2);
  position: relative;
}
@media screen and (max-width: 767px) {
  .item-05__1 {
    width: calc(354vw / 3.6);
    margin: 0 auto 6%;
  }  
}
.item-05-official-site-btn__1{
  position: absolute;
  top: 46%;
  left: calc(52vw / 19.2);
  width: calc(620vw / 19.2);
}
@media screen and (max-width: 767px) {
  .item-05-official-site-btn__1{
    top: calc(796vw / 3.6);
    left: calc(14vw / 3.6);
    width: calc(326vw / 3.6);
  }
}
.item-05__2 {
  width: calc(1420vw / 19.2);
  margin: 0 auto calc(58vw / 19.2);
  position: relative;
}
@media screen and (max-width: 767px) {
  .item-05__2 {
    width: calc(354vw / 3.6);
    margin: 0 auto 6%;
  }  
}
.item-05-official-site-btn__2{
  position: absolute;
  top: 52%;
  left: calc(52vw / 19.2);
  width: calc(620vw / 19.2);
}
@media screen and (max-width: 767px) {
  .item-05-official-site-btn__2{
    top: calc(798vw / 3.6);
    left: calc(14vw / 3.6);
    width: calc(326vw / 3.6);
  }
}
.item-05__3 {
  width: calc(1420vw / 19.2);
  margin: 0 auto calc(58vw / 19.2);
  position: relative;
}
@media screen and (max-width: 767px) {
  .item-05__3 {
    width: calc(354vw / 3.6);
    margin: 0 auto 6%;
  }  
}
.item-05-official-site-btn__3{
  position: absolute;
  top: 59%;
  left: calc(52vw / 19.2);
  width: calc(620vw / 19.2);
}
@media screen and (max-width: 767px) {
  .item-05-official-site-btn__3{
    top: calc(697vw / 3.6);
    left: calc(14vw / 3.6);
    width: calc(326vw / 3.6);
  }
}
.item-05__4 {
  width: calc(1420vw / 19.2);
  margin: 0 auto calc(58vw / 19.2);
  position: relative;
}
@media screen and (max-width: 767px) {
  .item-05__4 {
    width: calc(354vw / 3.6);
    margin: 0 auto 6%;
  }  
}
.item-05-official-site-btn__4{
  position: absolute;
  top: 56%;
  left: calc(52vw / 19.2);
  width: calc(620vw / 19.2);
}
@media screen and (max-width: 767px) {
  .item-05-official-site-btn__4{
    top: calc(626vw / 3.6);
    left: calc(14vw / 3.6);
    width: calc(326vw / 3.6);
  }
}
.item-05__5 {
  width: calc(1420vw / 19.2);
  margin: 0 auto calc(58vw / 19.2);
  position: relative;
}
@media screen and (max-width: 767px) {
  .item-05__5 {
    width: calc(354vw / 3.6);
    margin: 0 auto 6%;
  }  
}
.item-05-official-site-btn__5{
  position: absolute;
  top: 57%;
  left: calc(52vw / 19.2);
  width: calc(620vw / 19.2);
}
@media screen and (max-width: 767px) {
  .item-05-official-site-btn__5{
    top: calc(670vw / 3.6);
    left: calc(14vw / 3.6);
    width: calc(326vw / 3.6);
  }
}
.item-06__1 {
  width: calc(1420vw / 19.2);
  margin: calc(100vw / 19.2) auto calc(90vw / 19.2);
}
@media screen and (max-width: 767px) {
  .item-06__1 {
    width: calc(330vw / 3.6);
    margin: 8% auto 8%;
  }  
}
.item-07__1 {
  width: calc(1420vw / 19.2);
  margin: calc(84vw / 19.2) auto calc(160vw / 19.2);
}
@media screen and (max-width: 767px) {
  .item-07__1 {
    width: calc(330vw / 3.6);
    margin: 12% auto 18%;
  }  
}
.item-08__1 {
  width: calc(1420vw / 19.2);
  margin: 0 auto 0;
  padding: calc(54vw / 19.2) 0 calc(70vw / 19.2);
}
@media screen and (max-width: 767px) {
  .item-08__1 {
    width: calc(330vw / 3.6);
    padding: 4% 0 8%;
  }  
}
#js-rank-01 {
  position: absolute;
  top: calc(25vw / 19.2);
  left: calc(480vw / 19.2);
  width: calc(21vw / 19.2);
}
@media screen and (max-width: 767px) {
  #js-rank-01 {
    position: absolute;
    top: calc(21vw / 3.6);
    left: calc(70vw / 3.6);
    width: calc(13vw / 3.6);
  }
}
#js-rank-02 {
  position: absolute;
  top: calc(25vw / 19.2);
  left: calc(450vw / 19.2);
  width: calc(21vw / 19.2);
}
@media screen and (max-width: 767px) {
  #js-rank-02 {
    position: absolute;
    top: calc(21vw / 3.6);
    left: calc(56vw / 3.6);
    width: calc(13vw / 3.6);
  }
}
#js-rank-03 {
  position: absolute;
  top: calc(25vw / 19.2);
  left: calc(490vw / 19.2);
  width: calc(21vw / 19.2);
}
@media screen and (max-width: 767px) {
  #js-rank-03 {
    position: absolute;
    top: calc(21vw / 3.6);
    left: calc(80vw / 3.6);
    width: calc(13vw / 3.6);
  }
}
#js-rank-04 {
  position: absolute;
  top: calc(25vw / 19.2);
  left: calc(460vw / 19.2);
  width: calc(21vw / 19.2);
}
@media screen and (max-width: 767px) {
  #js-rank-04 {
    position: absolute;
    top: calc(21vw / 3.6);
    left: calc(65vw / 3.6);
    width: calc(13vw / 3.6);
  }
}
#js-rank-05 {
  position: absolute;
  top: calc(25vw / 19.2);
  left: calc(430vw / 19.2);
  width: calc(21vw / 19.2);
}
@media screen and (max-width: 767px) {
  #js-rank-05 {
    position: absolute;
    top: calc(21vw / 3.6);
    left: calc(45vw / 3.6);
    width: calc(12vw / 3.6);
  }
}

/*---------------------------
tab
---------------------------*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10vw / 19.2);
  width: calc(1290vw / 19.2);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .tab-wrap {
    width: 96%;
    margin: auto;
    gap: calc(2vw/3.6) calc(8vw/3.6);
  }
}

.tab-label {
  flex: 20%;
  order: -1;
}
@media screen and (max-width: 767px) {
  .tab-label {
    flex: 45%;
    order: -1;
  }
}

/* アクティブなタブ */
.tab-switch:checked+.tab-01 {
  background-image: url("../img/tabbtn-2.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
.tab-switch:checked+.tab-01 img {
  display: none;
}

.tab-switch:checked+.tab-02 {
  background-image: url("../img/tabbtn-4.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
.tab-switch:checked+.tab-02 img {
  display: none;
}

.tab-switch:checked+.tab-03 {
  background-image: url("../img/tabbtn-6.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
.tab-switch:checked+.tab-03 img {
  display: none;
}

.tab-switch:checked+.tab-04 {
  background-image: url("../img/tabbtn-8.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
.tab-switch:checked+.tab-04 img {
  display: none;
}

.tab-switch {
  display: none;
}

.tab__text {
  font-size: calc(28vw / 19.2);
  margin: 0 0 calc(2vw / 19.2) calc(14vw / 19.2);
  font-weight: bold;
  color: var(--color1);
}
@media screen and (max-width: 767px) {
  .tab__text {
    margin-left: calc(17vw / 3.6);
    font-size: calc(20vw / 3.6);
    margin-top: 5%;
  }
}



.box01 {
  border: 1px solid #1B998B;
  border-radius: 15px;
  background: #FFF;
  margin-bottom: 40px;
}
.mt-30 {
  margin-top: 30px !important;
  margin-left: 16.5%;
  margin-right: 16.5%;
}
.box01 h2 {
  background: #1B998B;
  position: relative;
  margin-top: 0;
  padding: 15px 20px 15px;
  color: #fff;
  border-radius: 15px 15px 0 0;
  font-weight: 700;
  font-size: 2em;
  text-align: center;
}
.box02 {
  padding: 20px;
}
.box02 p {
  margin: 10px auto 0px;
  font-weight: bold;
  font-size: 1.1em;
}
.boxtext {
  font-size: 1.7em !important;
  text-align: center;
}
.red {
  color: #852ece;
}
.campaign-text {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
.campaign-text .yellow-marker {
  background: linear-gradient(transparent 60%, #ff6 60%);
}
.pb-15 {
  padding-bottom: 15px !important;
}
.row {
  margin-left: 0px;
  margin-right: 0px;
  display: flex;
}
.cf::before, .cf::after {
  display: table;
  clear: both;
  content: '';
}
@media (min-width: 768px) {
  .col-sm-6 {
    width: 50%;
    align-content: center;
    margin-left: 2%;
  }
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
      float: left;
  }
}
.alpha {
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
.alpha {
  -webkit-transition: opacity 250ms !important;
  transition: opacity 250ms !important;
  background: white;
  padding: 5px;
  border-radius: 10px;
}
a.alpha {
  display: inline-block;
  font-size: 1.1em;
}
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
  display: block;
  max-width: 600px;
  height: auto;
}

.btn-are {
  position: relative;
}
a.btn_12 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  text-decoration: none;
  margin: auto;
    margin-top: auto;
    margin-bottom: auto;
  margin-top: auto;
  margin-bottom: auto;
  padding: 3% 5%;
  font-weight: bold;
  background: #FF6663;
  color: #fff;
  border-radius: 100vh;
  position: relative;
  margin-bottom: 3%;
  margin-top: 1%;
  transition: all 0.3s ease !important;
  font-size: 18px;
}

a.btn_12:hover {
  border:1px solid #FF6663 ;
  background: #fff;
  color:#FF6663 ;
}

.btn_box{
  width: 100%;
  margin: 0;
}


.mt-15 {
  text-align: center;
  font-weight: bold;
}
.pt-30 {
  padding-top: 30px !important;
  margin: 0 0 20px;
}

.new-col {
  width: fit-content;
  align-content: center;
  text-align: center;
}

.new-col .col-sm-6 {
  width: fit-content;
}

/* テーブル全体 */
.ranking-table {
  width: 100%;
  border-collapse: separate;   /* 角丸を効かせるため */
  border-spacing: 0 12px;      /* 行間を空ける */
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* 各行 */
.ranking-table tr {
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
}

/* 左側ラベルセル */
.ranking-table th {
  background: #1B998B;         /* 濃紺 */
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 20px 20px;
  width: 30%;                  /* 左カラムの幅 */
  letter-spacing: .05em;
  font-size: 1.4em;
}

/* 右側内容セル */
.ranking-table td {
  background: #eafff6;         /* 水色 */
  color: #25324b;              /* 濃い文字色 */
  font-weight: 700;
  padding: 18px 26px;
  font-size: 1.2em;
}



/* 強調用クラス（例：換金率の数字を目立たせたい時） */
.ranking-table .highlight {
  color: #ff2d92;   /* ピンク */
  font-size: 1.6rem;
  font-weight: 800;
}

/* 星評価を入れるとき */
.ranking-table .stars {
  color: #ffb400;
  font-size: 1.4rem;
  letter-spacing: .1em;
}

/* スマホ時は縦並び */
@media (max-width: 640px) {
    .ranking-table th, .ranking-table td {
    display: block;
    width: inherit;
    text-align: left;
    border-radius: 0;
    font-size: 5vw;
  }
  .ranking-table tr {
    border-radius: 12px;
    overflow: hidden;
  }
}

/* ===== Theme tokens ===== */
:root{
  --c-navy:#1B998B;      /* 濃紺 */
  --c-sky:#eafff6;       /* セクションの薄水色 */
  --c-border:#1B998B;    /* 枠線（濃紺） */
  --c-star:#ffb400;      /* 星色 */
  --radius:14px;
  --shadow:0 10px 22px rgba(0,0,0,.06);
}

/* セクション全体 */
.voices{
  background: var(--c-sky);
  padding: 48px 20px 56px;
}

/* タイトル（丸いピル） */
.voices-title{
  width: max-content;
  margin: 0 auto 28px;
  background: var(--c-navy);
  color:#fff;
  padding: 10px 28px !important;
  border-radius: 999px !important;
  letter-spacing:.06em;
}

/* 2カラム → スマホ1カラム */
.voices-grid{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px 32px;
}
@media (max-width: 900px){
  .voices-grid{ grid-template-columns: 1fr; }
}

/* カード本体 */
.voice-card{
  position: relative;
  background:#fff;
  border: 3px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 15px 26px 15px
}

/* 濃紺のリボン（オーバーラップ） */
.voice-ribbon{
  position: absolute;
  left: 18px;
  top: -18px;
  background: var(--c-navy);
  color:#fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing:.04em;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* リボンのちょい角 */
.voice-ribbon::after {
  content: "";
  position: absolute;
  left: 55px;
  top: 40px;
  width: 12px;
  height: 12px;
  background: var(--c-navy);
  border-bottom-right-radius: 4px;
  transform: skewX(-30deg);
}

/* 星 */
.ribbon-stars{
  color: var(--c-star);
  font-size: 18px;
  letter-spacing:.12em;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* 本文エリア */
.voice-body{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.voice-avatar{
  flex: 0 0 48px;
}
.voice-text{
  margin:0;
  color:#14324d;
  font-weight:700;
  line-height:1.75;
  letter-spacing:.02em;
  font-size: clamp(14px, 1.6vw, 17px);
}

/* カードに軽いホバー */
.voice-card:hover{ transform: translateY(-2px); transition:.2s ease; box-shadow: 0 14px 26px rgba(0,0,0,.1); }

.app-img {
  width: 33%;
}


:root{
  --bg:#1b998b;          /* 上部の黒背景 */
  --navy:#1b998b;        /* バナーの濃紺 */
  --gold1:#f3d166;       /* 金色グラデ上 */
  --gold2:#c99a2a;       /* 金色グラデ下 */
  --pill-radius:18px;
}

.rank-hero{
  background: var(--bg);
  padding: 18px 14px 26px;
  text-align: center;
}

/* 上のコピー */
.rank-copy{
  color:#fff;
  font-weight: 900;
  letter-spacing:.08em;
  margin:0 0 12px;
  font-size: clamp(16px, 2.2vw, 26px);
  /* 文字縁取り風（白字に黒フチ） */
  text-shadow:
    0 1px 0 #000, 1px 0 #000, -1px 0 #000, 0 -1px #000,
    1px 1px #000, -1px 1px #000, 1px -1px #000, -1px -1px #000;
}

/* 1位の金色 */
.rank-no1{
  display:inline-block;
  padding: 0 .1em;
  background: linear-gradient(180deg, var(--gold1), var(--gold2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* 濃紺の太いバナー */
.rank-banner{
  max-width: 1120px;
  margin: 0 auto;
  background: var(--navy);
  color: #1b998b;
  border-radius: 20px;
  padding: clamp(12px, 1.8vw, 16px) clamp(14px, 2.6vw, 24px);
  display:flex;
  align-items:center;
  gap: clamp(10px, 2.4vw, 24px);
  box-shadow: 0 8px 0 rgba(0,0,0,.35), 0 14px 24px rgba(0,0,0,.25);
}

.emblem{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.emblem-svg{
  width: clamp(90px, 18vw, 150px);
  height: auto;
  color:#e7c555; /* 金色 */
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.3));
}

/* 位置調整（CSS変数だけで動く） */
.crown{
  transform: translate(calc(150px + var(--crown-x)), calc(70px + var(--crown-y))) scale(var(--crown-scale));
  transform-origin: 150px 70px;
}
.laurel.left{
  transform: translate(calc(-1 * var(--laurel-x)), 0) rotate(var(--laurel-rot));
  transform-origin: 60px 100px;
}
.laurel.right{
  transform: scale(-1,1) translate(calc(-300px - var(--laurel-x)), 0) rotate(calc(-1 * var(--laurel-rot)));
  transform-origin: 240px 100px;
}

/* テキスト（金色＋縁取り風） */
.rank{
  font: 900 var(--rank-size)/1.1 "Hiragino Mincho ProN", "Yu Mincho", serif;
  fill: url(#gold);
  paint-order: stroke;
  stroke: rgba(0,0,0,.25);
  stroke-width: 1.1;
}


/* 店名（右） */
.shop-name{
  font-weight: 900;
  letter-spacing:.08em;
  font-size: clamp(20px, 3.2vw, 32px);
  line-height: 1.2;
  text-align:left;
}

/* スマホで中央寄せ */
@media (max-width: 560px){

  .shop-name{ text-align:center; }
}


/* ===== Theme tokens ===== */
:root{
  --c-navy:#1b998b;     /* 濃紺（見出し） */
  --c-blue:#1b998b;     /* 行ラベルの青 */
  --c-cream:#eafff6;    /* 1位列の淡い黄色 */
  --c-border:#000000;   /* 罫線色（濃いグレー） */
  --c-star:#ffb400;     /* 星色 */
  --radius:16px;
  --shadow:0 14px 28px rgba(0,0,0,.08);
}

/* 外枠カード（角丸を作る） */
.table-card{
  padding: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  max-width: 1200px;
  margin: 5% auto;
}

/* 横スクロール（スマホ） */
.table-card{ -webkit-overflow-scrolling: touch; }
.table-card > .compare-table{ width:100%; min-width: 720px; }

/* テーブル基本 */
.compare-table{
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* 列幅 */
.compare-table .col-label{ width: 23%; }
.compare-table .col-rank1{ width: 25%; }
.compare-table .col-rank2{ width: 26%; }
.compare-table .col-rank3{ width: 26%; }

/* 罫線（内側） */
.compare-table th,
.compare-table td{
  border-right: 2px solid var(--c-border);
  border-bottom: 2px solid var(--c-border);
  padding: 16px 14px;
  text-align: center;
  vertical-align: middle;
  background:#fff;
  font-weight:700;
    font-size: 1.5em;
}
.compare-table tr:last-child th,
.compare-table tr:last-child td{ border-bottom: 0; }
.compare-table th:last-child,
.compare-table td:last-child{ border-right: 0; }

/* 左端の項目セル */
.compare-table .rowhead{
  background: var(--c-blue);
  color:#fff;
  text-align: center;
  letter-spacing:.06em;
  font-weight:800;
  font-size: 1.5em;
}

/* 上段ランク見出し */
.compare-table thead .rank{
  background: var(--c-navy);
  color:#fff;
  font-size: 1.1rem;
  letter-spacing:.06em;
  font-weight:800;
  font-size: 1.5em;
}
.compare-table thead .blank{
  background: #eafff6; /* 左上のグレーっぽいセル */
}
.compare-table td img {
  width: 85%;
}

/* 角丸（上段のみ見せる） */
.compare-table thead .blank{ border-top-left-radius: calc(var(--radius) - 2px); }
.compare-table thead .rank3{ border-top-right-radius: calc(var(--radius) - 2px); }

/* 1位列の背景色を常時ハイライト */
.compare-table .col-rank1 + col ~ col {} /* (空ダミー…lint対策) */
.compare-table tbody td:nth-child(2){
  background: var(--c-cream);
}

/* 星・アクセント */
.stars{ color: var(--c-star); letter-spacing:.12em; font-size: 1.2rem; text-shadow: 0 1px 0 rgba(0,0,0,.08); }
.accent-hot{ color:#ff6663; font-weight: 900; }
.accent-pink{ color:#ff6663; font-weight: 800; }
.accent-navy{ color: var(--c-navy); font-weight: 900; }
.accent-link{ color:#1672c4; text-decoration: none; font-weight: 800; }
.accent-link:hover{ text-decoration: underline; }

/* 行の高さを揃えやすく */
.compare-table td br{ line-height: 1.2; }
.compare-table td, .compare-table th{ line-height:1.5; }

/* スマホ最適化：パディングや文字サイズ微調整 */
@media (max-width: 640px){
  .compare-table th, .compare-table td{ 
    padding: 12px 0px;
    font-size: 3.9vw;
  }
  .compare-table thead .rank{ font-size: 15px; }
}

.hikaku-title {
  text-align: center;
  padding: 3%;
  font-size: 3em;
}

.nayami {
  position: absolute;
  bottom: 50px;
  border: 10px double #644526;
  background: white;
  left: 21px;
  padding: 15px 35px;
  width: 1300px;
  height: 175px;
  border-radius: 20px;
}

.nayamitext-box {
  font-size: 1.5em;
  height: inherit;
  align-content: center;
  font-weight: bold;
}

/* ===== Theme tokens ===== */
:root{
  --c-navy:#1b998b;     /* 見出し・枠色 */
  --c-pink:#ff6663;     /* 強調ピンク */
  --c-sky:#1b998b;      /* セクション背景の淡い水色 */
  --c-note:#14324d;     /* 本文色 */
  --c-point:#1b998b;    /* POINT箱の紺 */
  --radius:18px;
  --shadow:0 14px 28px rgba(0,0,0,.08);
}

/* セクション */
.choose-block{
  background: var(--c-sky);
  padding: 48px 20px 56px;
}

/* 上部タイトル */
.choose-title {
  text-align: center;
  color: #111827;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.5;
  margin: 0 0 10px;
  font-size: clamp(20px, 2.2vw, 2.2em);
  background: linear-gradient(90deg, #a6a6a6 22%, #a6a6a6 25%, #fff 53%, #a6a6a6 72%, #a6a6a6 39% 100%);
    background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.choose-title .choose-sub{
  display:block;
  color:#111827;
  font-size: .92em;
  font-weight:600;
  margin-top: 4px;
}

/* リード文 */
.choose-intro {
  max-width: 1170px;
  margin: 0 auto 26px;
  text-align: left;
  color: #fff;
  line-height: 1.5;
  font-weight: 500;
  font-size: 1.3em;
}

/* 3カラム → スマホ1カラム */
.choose-grid {
  max-width: 1370px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 35px;
}
@media (max-width: 980px){
  .choose-grid{ grid-template-columns: 1fr; }
}

/* カード */
.tip-card{
  background:#fff;
  border: 3px solid var(--c-navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 22px;
  position: relative;
}

/* 上部キャップ（淡グレー＋アイコン＋タイトル） */
.tip-cap {
  background: #eafff6;
  border-radius: calc(var(--radius) - 4px);
  padding: 22px 16px 16px;
  text-align: center;
  position: relative;
  margin-top: 10%;
  margin-left: 8%;
  margin-right: 8%;
}

/* 円バッジ */
.tip-badge {
  width: 60px;
  height: 60px;
  background: #1b998b;
  color: #fff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: 1px 10px 18px rgba(0,0,0,.12);
  transform: translate(119px, -50px);
  position: absolute;
  font-size: 2.4em;
}

/* アイコンとタイトル */
.tip-icon {
  margin-top: 7%;
}
.tip-title {
  margin: 8px 0 0;
  font-weight: 700;
  letter-spacing: .06em;
  color: #1b998b;
  font-size: 1.7em;
}

/* ピンクの小見出し */
.tip-sub {
  text-align: center;
  margin: 14px 0 6px;
  font-weight: 700;
  line-height: 1.5;
  font-size: 1.6em;
  height: 110px;
  align-content: center;
}
.pink{ color: var(--c-pink); }

/* 本文 */
.tip-text {
  color: var(--c-note);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 3%;
  font-size: 1.4em;
  height: 150px;
  align-content: center;
  padding: 0 3.5%;
}

/* POINTピル */
.point-pill {
  width: max-content;
  margin: 6px auto 25px;
  background: #eafff6;
  color: #1b998b;
  padding: 6px 32px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 1.7em;
}

/* 紺のポイントボックス */
.point-box {
  background: var(--c-point);
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
  font-size: 1.7em;
}
.point-box + .point-box{ margin-top: 10px; }

/* 注記 */
.tip-note {
  margin: 12px 0 0;
  color: #243449;
  font-weight: 500;
  font-size: 1.3em;
}

/* 微細：スマホ時の改行制御 */
.sp-br{ display:none; }
@media (max-width: 520px){
  .sp-br{ display:inline; }
}

/* ===== Theme tokens ===== */
:root{
  --bg:#1a9789;            /* 黒背景 */
  --fg:#ffffff;            /* 文字色 */
  --line:#ffffff33;        /* 仕切り線 */
  --accent:#ffcc00;        /* バッジ縁取りの黄 */
}

/* セクション */
.qa-section{
  background: var(--bg);
  color: var(--fg);
  padding: 48px 18px 56px;
}

/* QAバッジ（見出し） */
.qa-badge {
  width: fit-content;
  margin: 0 auto;
  position: relative;
  line-height: 1;
  text-align: center;
}
.qaimg {
  width: 50%;
}
.qa-badge .q{
  font-size: 56px;
  color:#e6ecff;
  text-shadow: 0 0 0 transparent, 0 2px 0 rgba(0,0,0,.12);
}
.qa-badge .a{
  font-size: 56px;
  margin-left: 6px;
  color:#2f64ff;
  position: relative;
}
.qa-badge .a::before{
  /* 黄色の縁取り風（背景オーバル） */
  content:"";
  position:absolute;
  inset:-10px -12px -8px -10px;
  border:3px solid var(--accent);
  border-radius: 999px;
  z-index:-1;
}

/* リスト */
.qa-list {
  max-width: 1030px;
  margin: 0 auto;
}

/* 各アイテム */
.qa-item{
  position: relative;
  padding: 28px 16px 34px 72px;  /* 左に大Qの余白 */
}
.qa-item + .qa-item{
  border-top: 1px solid var(--line);
}

/* 左の巨大 Q（透かし） */
.qa-qmark {
  position: absolute;
  left: 15px;
  top: 8px;
  font-family: var(--font-serif);
  font-size: 8em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  opacity: .3;
}

/* 右下の巨大 A（透かし） */
.qa-amark{
  position:absolute;
  right: 10px; bottom: 5px;
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  color:#ffffff;
  opacity:.12;             /* うっすら見える程度に */
  pointer-events: none;
}

/* 質問と回答 */
.qa-question {
  margin: 0 0 10px;
  font-size: clamp(16px, 2vw, 1.5em);
  font-weight: 800;
  letter-spacing: .02em;
}
.qa-answer {
  margin: 0;
  font-size: clamp(14px, 1.7vw, 1.3em);
  line-height: 1.95;
  font-weight: 700;
}
.qa-answer small{
  font-size: .9em;
  opacity: .9;
}

/* レスポンシブ：スマホで余白調整 */
@media (max-width: 520px){
  .qa-item{ padding: 24px 12px 34px 20px; }
  .qa-qmark{ font-size: 75px; left: 4px; }
  .qa-amark{ 
    font-size: 84px;
    right: 10px;
    bottom: 5px; 
  }
}

/* ===== Theme tokens ===== */
:root{
  --radius:18px;
  --shadow:0 12px 22px rgba(0,0,0,.18);
  --shadow-hover:0 16px 30px rgba(0,0,0,.22);
  --title:#1a9789;     /* 見出しの紺 */
  --white:#fff;
}

/* セクション */
.flow{
  padding: 28px 16px 40px;
  text-align:center;
}
.flow-title {
  color: var(--title);
  font-weight: 900;
  letter-spacing: .06em;
  margin: 0 0 18px;
  font-size: 2.4em;
}

/* グリッド（4→2→1列） */
.flow-grid{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width: 1200px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 24px;
}
@media (max-width: 980px){
  .flow-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .flow-grid{ grid-template-columns: 1fr; }
}

/* 各カード共通 */
.flow-step{
  position: relative;
  color: var(--white);
  border-radius: var(--radius);
  padding: 26px 22px;
  min-height: 180px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow);
  text-align:center;
}
.flow-step::after{
  /* 画像の黒い落ち影っぽい縁取り */
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,.18);
  pointer-events:none;
}

/* グラデ（画像の雰囲気に寄せた青系） */
.flow-step.s1{ 
  background-image: linear-gradient(150deg, #83cabc, #4cbfa4);
}
.flow-step.s2{ 
  background-image: linear-gradient(150deg, #26b6a7, #1b998b); 
}
.flow-step.s3{ 
  background-image: linear-gradient(150deg, #1f8f84, #13695f); 
}
.flow-step.s4{ 
  background-image: linear-gradient(150deg, #136d63, #0d4c44); 
}

.flow-step:hover{ transform: translateY(-2px); box-shadow: var(--shadow-hover); transition:.2s ease; }

/* 見出し（①〜④風） */
.flow-head{
  display:flex; align-items:center; gap:10px;
  margin:0 0 12px;
  font-weight: 900;
  font-size: clamp(18px, 2.1vw, 1.5em);
}
.flow-head .num {
  width: 45px;
  height: 45px;
  border: 2px solid var(--white);
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
}

/* 説明文 */
.flow-text {
  margin: 0;
  font-weight: 600;
  font-size: clamp(16px, 1.8vw, 1.3em);
  line-height: 1.6;
  letter-spacing: .02em;
  height: 120px;
  align-content: center;
}

/* ===== theme tokens ===== */
:root{
  --bg:#1b998b;           /* 背景の黒 */
  --fg:#ffffff;           /* 文字の白 */
  --navy:#eafff6;         /* ピルの文字＆枠色 */
  --pill-bg:#1b998b;      /* ピル背景（白） */
  --shadow:0 10px 22px rgba(0,0,0,.25);
}

/* セクション外枠 */
.operator-section{
  background: var(--bg);
  color: var(--fg);
  padding: 48px 16px 56px;
  font-family: var(--font);
  text-align: center;
}

/* 内側の幅制御 */
.op-inner{
  max-width: 1100px;
  margin: 0 auto;
}

/* ピル型の見出し */
.cap-pill{
  display: inline-block;
  background: var(--pill-bg);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 900;
  letter-spacing: .06em;
  margin: 0 auto 18px;
  box-shadow: var(--shadow);
}

/* サイト名・運営者 */
.op-body{
  margin: 10px 0 28px;
}
.op-sitename{
  margin: 10px 0 12px;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: .08em;
}
.op-label{
  margin: 6px 0;
  font-size: clamp(14px, 1.5vw, 18px);
  opacity: .9;
  font-weight: 800;
  letter-spacing: .08em;
}
.op-org{
  margin: 4px 0 6px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  letter-spacing: .08em;
}

/* 免責文 */
.op-disclaimer {
  margin: 18px auto 0;
  max-width: 1090px;
  line-height: 2.0;
  font-weight: 700;
  font-size: clamp(12px, 1.5vw, 24px);
  opacity: .96;
}
.emblem img {
  width: 150px;
}

  .pc {
    display: block;
  }
  .sp {
    display: none;
  }

/* 余白微調整（スマホ） */
@media (max-width: 560px){
  .operator-section{ padding: 40px 14px 48px; }
  .cap-pill{ padding: 8px 18px; }
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .nayami {
    bottom: 0;
    top: 90px;
    border: 5px double #644526;
    left: 0px;
    padding: 15px 10px;
    width: fit-content;
    height: fit-content;
  }
  .nayamitext-box {
    font-size: 4vw;
  }
  .choose-title {
    background: linear-gradient(90deg, #a6a6a6 0%, #a6a6a6 0%, #fff 70%, #a6a6a6 100%, #a6a6a6 0% 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
  }
  .choose-intro {
    font-size: 5vw;
  }
  .tip-cap {
    margin-left: 0%;
    margin-right: 0%;
  }
  .tip-badge {
    width: 50px;
    height: 50px;
    transform: translate(106px, -50px);
    font-size: 7vw;
  }
  .tip-icon {
    margin-top: 3%;
  }
  .tip-title {
    margin: 0px 0 0;
    font-size: 7vw;
  }
  .tip-sub {
    line-height: 1.4;
    font-size: 6vw;
    height: fit-content;
  }
  .tip-text {
    line-height: inherit;
    margin: 0 0 8%;
    font-size: 5vw;
    height: fit-content;
    padding: 0 0;
  }
  .stars {
    font-size: 4vw;
  }
  .point-pill {
    font-size: 6vw;
  }
  .point-box {
    font-size: 5vw;
  }
  .tip-note {
    margin: 12px 0 0;
    font-size: 5vw;
  }
  .table-card {
    max-width: fit-content;
  }
  .hikaku-title {
    font-size: 6vw;
  }
  .table-card > .compare-table {
    max-width: 630px;
    min-width: auto;
  }
  .table-card {
    padding: 12px 5px;
  }
  .compare-table .rowhead {
    font-size: 3.9vw;
  }
  .mt-30 {
    margin-left: 2%;
    margin-right: 2%;
  }
  .box01 h2 {
    font-size: 6vw;
  }
  .row {
    display: block;
  }
  .voices {
    padding: 20px;
  }
  .box02 p {
    font-size: 4.5vw;
  }
  .voice-card {
    padding: 24px 22px 5px 22px; 
  }
  .qa-question {
    font-size: 5.5vw;
  }
  .qa-answer {
    font-size: 4vw;
    font-weight: 700;
  }
  .flow-step {
    min-height: fit-content;
  }
  .flow-text {
    height: fit-content;
  }
  .emblem img {
    width: 80px;
  }
}