/* button 

http://www.webdesignerwall.com/demo/css-buttons.html

usage:

html ex:
<div>
  <input class="btn pink" type="btn" value="Input Element" /> 
  <button class="btn pink">btn Tag</btn>
  <span class="btn pink">Span</span> 
  <div class="btn pink">Div</div> 
  <p class="btn pink">P Tag</p> 
  <h3 class="btn pink">H3</h3> 
</div>

color:
  black, gray, orange, red, blue, rosy, green, pink

style
  round, square

size:
  medium, big, exbig

---------------------------------------------- */
.btn {
  display: inline-block;
  zoom: 1; /* zoom and 
display = ie7 hack for display:inline-block */
  *display: inline;
  vertical-align: baseline;
  margin: 1px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px Arial, Helvetica, sans-serif;
  padding: .4em .5em .275em;
  text-shadow: 0 -1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .5em; 
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);

/* white */
  color: #606060;
  border: solid 1px #b7b7b7;
  background: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
  background: -moz-linear-gradient(top,  #fff,  #ededed);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.btn:hover {
  text-decoration: none;

/* white */
  background: #ededed;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
  background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}

.round {
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.square {
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
}
.medium {
  font-size: 20px;
  padding: .4em 1.5em .42em;
}
.big {
  font-weight: bold;
  font-size: 24px;
  padding: .5em 2em .55em;
}
.exbig {
  font-weight: bold;
  font-size: 30px;
  padding: .5em 2em .55em;
}
.wide {
  font-size: 20px;
  padding: .4em 1.5em .42em;
  width:94%;
  margin:0 3% 0 3%;
display:inline;
}

/* color styles 
---------------------------------------------- */

/* commit */
.commit {
  color: #fff;
  border: solid 1px #980c10;
  background: #d81b21;
  background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
  background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.commit:hover {
  color: #eee;
  background: #b61318;
  background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
  background: -moz-linear-gradient(top,  #c9151b,  #a11115);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}

/* black */
.black {
  color: #fff;
  border: solid 1px #333;
  background: #333;
  background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
  background: -moz-linear-gradient(top,  #666,  #000);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
  color: #fff;
  background: #000;
  background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
  background: -moz-linear-gradient(top,  #444,  #000);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}

/* gray */
.gray {
  color: #fff;
  border: solid 1px #555;
  background: #6e6e6e;
  background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
  background: -moz-linear-gradient(top,  #888,  #575757);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
  color: #fff;
  background: #616161;
  background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
  background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}

/* white */
.white {
  color: #606060;
  border: solid 1px #b7b7b7;
  background: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
  background: -moz-linear-gradient(top,  #fff,  #ededed);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
  color: #606060;
  background: #ededed;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
  background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}

/* orange */
.orange {
  color: #fff;
  border: solid 1px #da7c0c;
  background: #f78d1d;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
  color: #fff;
  background: #f47c20;
  background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
  background: -moz-linear-gradient(top,  #f88e11,  #f06015);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}

/* red */
.red {
  color: #fff;
  border: solid 1px #980c10;
  background: #d81b21;
  background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
  background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
  color: #eee;
  background: #b61318;
  background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
  background: -moz-linear-gradient(top,  #c9151b,  #a11115);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}

/* blue */
.blue {
  color: #fff;
  border: solid 1px #0076a3;
  background: #0095cd;
  background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
  background: -moz-linear-gradient(top,  #00adee,  #0078a5);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
  color: #fff;
  background: #007ead;
  background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
  background: -moz-linear-gradient(top,  #0095cc,  #00678e);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}

/* rosy */
.rosy {
  color: #fff;
  border: solid 1px #b73948;
  background: #da5867;
  background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
  background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
  color: #fff;
  background: #ba4b58;
  background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
  background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}

/* green */
.green {
  color: #fff;
  border: solid 1px #538312;
  background: #64991e;
  background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
  background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
  color: #fff;
  background: #538018;
  background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
  background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}

/* pink */
.pink {
  color: #000;
  border: solid 1px #d2729e;
  background: #f895c2;
  background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
  background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
  color: #000;
  background: #d57ea5;
  background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
  background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}

h1,h2,h3,h4,h5,h6,ul,li{
  margin:0;
  padding:0;
}

.clear{
   clear:both;
}

/*index28*/

.button_group{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26%;
  margin: auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 85%;
}

.toroku_top,
.login_top{
  width: 46%;
  text-align: center;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.toroku_top a,
.login_top a{
  display: block;
  padding: 11px 0;
  font-size: 1.15rem;
  color: #ffffff;
  text-shadow: 0 0 4px rgba(0,0,0,.6);
}
.toroku_top{
  background: linear-gradient(to bottom right, rgba(236,137,200,.6), rgba(157,0,100,.6));
}

.login_top{
  background: linear-gradient(to bottom right, rgba(134,247,238,.6),rgba(0,180,166,.6));
}

.toroku_text{
  width: 75%;
  margin: 0 auto 20px;
  background: linear-gradient(to right, rgba(236,137,200,1), rgba(157,0,100,1));
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0,0,0,.3);
}

.toroku_text a{
  display: block;
  padding: 17px 0;
  color: #ffffff;
  text-align: center;
}

/*-----------------------------
ダウンロードボタン
-----------------------------*/

.download_button{
  height: 40px;
  width: 75%;
  margin: 0 auto;
  background-color: 0080ff;
  background: -webkit-gradient(linear,left top,left bottom, from(#ebebeb),  to(#f8f8f8));
  background: -moz-linear-gradient(top, #ebebeb, #f8f8f8);
  border: solid 1px #d2d2d2;
  border-radius: 16px;
  box-shadow: 0 -1px 2px #d2d2d2 inset;
}

.download_button a{
  text-decoration: none;
  text-align: center;
  display: block;
  color: #000;
  font-weight: bold;
  line-height: 39px;
  text-shadow: 0 1px 0 #d2d2d2;
}

/*-----------------------------
退会確認ボタン
-----------------------------*/

.taikai_no{
  height: 30px;
  width: 50%;
  margin: 0 auto;
  background-color: #091980;
  background: -webkit-gradient(linear,left top,left bottom, from(#8edef8),  to(#091980));
  background: -moz-linear-gradient(top, #8edef8, #091980);
  border: solid 1px #091980;
  border-radius: 10px;
  box-shadow: 0 -1px 2px #509aff inset;
}

.taikai_no a{
  text-decoration: none;
  text-align: center;
  display: block;
  color: #fff;
  font-weight: bold;
  line-height: 30px;
  text-shadow: 0 2px 0 #091980;
}

.taikai_yes{
  height: 30px;
  width: 50%;
  margin: 0 auto;
  background-color: #850404;
  background: -webkit-gradient(linear,left top,left bottom, from(#f69c66),  to(#850404));
  background: -moz-linear-gradient(top, #f69c66, #850404);
  border: solid 1px #850404;
  border-radius: 10px;
  box-shadow: 0 -1px 2px #ff5050 inset;
}

.taikai_yes a{
  text-decoration: none;
  text-align: center;
  display: block;
  color: #fff;
  font-weight: bold;
  line-height: 30px;
  text-shadow: 0 2px 0 #850404;
}

/*LP*/

.toroku_lp{
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  width:98%;

}

ul.radius li {
    font-size: 12px;
}
ul.radius p {
    font-size: 12px;
    margin: 0 0 10px 0;
    padding: 0;
}
div.qa {
    margin: 15px 20px 10px 20px;
    font-size: 80%;
}
div.qa h3 {
    color: #000000;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 0px 5px 5px;
    margin: 10px 0px 10px 0px;
    border-left: 5px solid #b3b3b3;
    border-bottom: 1px dashed #b3b3b3;
}

    :root{
      /* Phone frame */
      --phone-max: 430px;         /* PCでもSP幅で固定表示 */
      --page-pad: 14px;

      /* Brand */
      --bg: #0b0f19;
      --surface: rgba(255,255,255,.06);
      --border: rgba(255,255,255,.12);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);
      --brand1: #2D7FF9;
      --brand2: #4ECFFF;

      /* Hero overlay positioning (adjust freely) */
      --btn1-left: 50%;
      --btn1-top: 72%;
      --btn1-w: 86%;

      --btn2-left: 50%;
      --btn2-top: 84%;
      --btn2-w: 72%;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo", sans-serif;
      color: var(--text);
      background:
        radial-gradient(900px 500px at 20% -10%, rgba(45,127,249,.35), transparent 55%),
        radial-gradient(700px 420px at 90% 10%, rgba(236,72,153,.22), transparent 55%),
        var(--bg);
    }
    a{color:inherit}
    img{max-width:100%; display:block}

    /* PCでもスマホ幅で固定表示 */
    .frame{
      max-width: var(--phone-max);
      margin: 0 auto;
      min-height: 100%;
      background: rgba(0,0,0,.18);
      box-shadow: 0 18px 50px rgba(0,0,0,.45);
      position: relative;
    }

    /* System Notice */
    #notice{
      display: none;
    }

    #notice.has-content{
      display: block;
    }

    /* Notice Bar (Logged Out / LP) */
    .noticeBar{
      position: relative;
      width: 100%;
      background: rgba(11,15,25,.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,.12);
      padding: 14px var(--page-pad);
      padding-right: 50px;
      animation: slideDown 0.3s ease-out;
      z-index: 101;
    }

    .noticeBar--error{
      background: rgba(220,38,38,.92);
      border-bottom-color: rgba(255,255,255,.20);
    }

    .noticeBar--notice{
      background: rgba(30,64,175,.92);
      border-bottom-color: rgba(78,207,255,.30);
    }

    .noticeBar__content{
      color: rgba(255,255,255,.95);
      font-size: 14px;
      line-height: 1.6;
      font-weight: 500;
    }

    .noticeBar__close{
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.20);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      color: rgba(255,255,255,.90);
      font-size: 18px;
      font-weight: 900;
    }

    .noticeBar__close:hover{
      background: rgba(255,255,255,.25);
    }

    @keyframes slideDown {
      from {
        transform: translateY(-100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    /* Toast Notice (Logged In) */
    .noticeToast{
      position: fixed;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      max-width: calc(var(--phone-max) - 28px);
      width: calc(100% - 28px);
      background: rgba(255,255,255,.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.10);
      box-shadow: 
        0 0 30px rgba(0,0,0,.15),
        0 20px 40px rgba(0,0,0,.20);
      padding: 16px 50px 16px 16px;
      z-index: 101;
      animation: slideDownFade 0.4s ease-out;
    }

    .noticeToast--error{
      background: linear-gradient(135deg, rgba(254,202,202,.98), rgba(252,165,165,.98));
      border-color: rgba(220,38,38,.20);
    }

    .noticeToast--error .noticeToast__content{
      color: rgba(127,29,29,.95);
    }

    .noticeToast--notice{
      background: linear-gradient(135deg, rgba(191,219,254,.98), rgba(147,197,253,.98));
      border-color: rgba(30,64,175,.20);
    }

    .noticeToast--notice .noticeToast__content{
      color: rgba(30,58,138,.95);
    }

    .noticeToast__content{
      font-size: 14px;
      line-height: 1.6;
      font-weight: 600;
    }

    .noticeToast__close{
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: rgba(0,0,0,.08);
      border: 1px solid rgba(0,0,0,.10);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      color: rgba(0,0,0,.70);
      font-size: 18px;
      font-weight: 900;
    }

    .noticeToast__close:hover{
      background: rgba(0,0,0,.15);
    }

    .noticeToast.fade-out{
      animation: fadeOut 0.3s ease-out forwards;
    }

    @keyframes slideDownFade {
      from {
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
      }
      to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
      }
    }

    @keyframes fadeOut {
      to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
      }
    }

    /* Header */
    .header{
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(11,15,25,.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,.10);
      padding: 12px var(--page-pad);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header__logo{
      display: block;
      line-height: 0;
    }

    .header__logo img{
      height: 32px;
      width: auto;
    }

    .header__hamburger{
      width: 36px;
      height: 36px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s ease;
      position: relative;
    }

    .header__hamburger:hover{
      background: rgba(255,255,255,.08);
    }

    .header__hamburger::before{
      content: "\22EE";
      font-size: 26px;
      color: rgba(255,255,255,.90);
      line-height: 1;
      display: block;
    }

    .header__hamburger span{
      display: none;
    }

    .header__hamburger.active::before{
      content: "\00D7";
      font-size: 28px;
      font-weight: 300;
    }

    /* Mobile Menu Overlay */
    .mobileMenuOverlay{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.60);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 98;
    }

    .mobileMenuOverlay.open{
      opacity: 1;
      pointer-events: auto;
    }

    /* Mobile Menu */
    .mobileMenu{
      position: fixed;
      top: 57px;
      left: 0;
      right: 0;
      max-width: var(--phone-max);
      margin: 0 auto;
      background: rgba(11,15,25,.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,.10);
      transform: translateY(-100%);
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 99;
      max-height: calc(100vh - 57px);
      overflow-y: auto;
    }

    .mobileMenu.open{
      transform: translateY(0);
      opacity: 1;
    }

    .mobileMenu__list{
      list-style: none;
      margin: 0;
      padding: 8px 0;
    }

    .mobileMenu__item{
      border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .mobileMenu__item:last-child{
      border-bottom: none;
    }

    .mobileMenu__link{
      display: block;
      padding: 14px var(--page-pad);
      text-decoration: none;
      color: rgba(255,255,255,.88);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: .01em;
      transition: all 0.2s ease;
    }

    .mobileMenu__link:hover{
      background: rgba(255,255,255,.05);
      color: rgba(78,207,255,.95);
    }

    /* Highlighted Menu Items (Login/Logout/Signup) */
    .mobileMenu__item--highlight{
      margin: 12px 0;
      padding: 0;
    }

    .mobileMenu__item--highlight .mobileMenu__link{
      background: linear-gradient(135deg, rgba(45,127,249,.20), rgba(78,207,255,.12));
      border: 1.5px solid rgba(45,127,249,.35);
      border-radius: 12px;
      margin: 0 16px;
      padding: 18px 24px;
      font-weight: 900;
      font-size: 15px;
      color: rgba(255,255,255,.98);
      box-shadow: 
        0 0 28px rgba(45,127,249,.25),
        0 6px 16px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.08);
      position: relative;
      overflow: hidden;
      letter-spacing: .03em;
    }

    .mobileMenu__item--highlight .mobileMenu__link::before{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(78,207,255,.18), transparent 70%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .mobileMenu__item--highlight .mobileMenu__link::after{
      content: "\203A";
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      color: rgba(78,207,255,.60);
      transition: all 0.3s ease;
    }

    .mobileMenu__item--highlight .mobileMenu__link:hover::before{
      opacity: 1;
    }

    .mobileMenu__item--highlight .mobileMenu__link:hover::after{
      right: 16px;
      color: rgba(78,207,255,.95);
    }

    .mobileMenu__item--highlight .mobileMenu__link:hover{
      background: linear-gradient(135deg, rgba(45,127,249,.35), rgba(78,207,255,.22));
      border-color: rgba(45,127,249,.55);
      box-shadow: 
        0 0 36px rgba(45,127,249,.45),
        0 8px 20px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.12);
      color: rgba(255,255,255,.98);
      transform: translateY(-2px);
    }

    .mobileMenu__item--highlight:first-child{
      margin-top: 16px;
    }

    .mobileMenu__item--highlight:last-of-type{
      margin-bottom: 16px;
    }

    .mobileMenu__points{
      padding: 16px var(--page-pad);
      border-bottom: 1px solid rgba(255,255,255,.06);
      text-align: center;
      background: linear-gradient(135deg, rgba(45,127,249,.15), rgba(78,207,255,.08));
    }

    .mobileMenu__pointsLabel{
      font-size: 11px;
      color: rgba(255,255,255,.65);
      font-weight: 600;
      letter-spacing: .04em;
      margin-bottom: 4px;
    }

    .mobileMenu__pointsValue{
      font-size: 22px;
      font-weight: 900;
      color: rgba(78,207,255,.95);
      letter-spacing: .02em;
    }

    .mobileMenu__pointsValue span{
      font-size: 13px;
      margin-left: 4px;
      color: rgba(255,255,255,.75);
    }

    /* Hero */
    .hero{
      position: relative;
      width: 100%;
      overflow: hidden;
      background: #0a0d16;
    }
    .hero__bg{
      width: 100%;
      height: auto;
      display:block;
    }

    /* Overlay buttons */
    .hero__overlay{
      position:absolute;
      inset:0;
      pointer-events:none; /* 背景はクリック阻害しない */
    }
    .hero__btn {
    position: absolute;
    left: 0;
    margin: 0 auto;
    right: 0;
    top: 60%;
    /* transform: translate(-50%, -50%); */
    width: 90%;
    pointer-events: auto;
    /* display: block; */
}
    .hero__btn img{width:100%; height:auto}
    .hero__btn--secondary {
    left: 0;
    top: 86%;
    width: 85%;
    right: 0;
    margin: 0 auto;
}

    /* Sections */
    .section{
      padding: 18px var(--page-pad);
    }
    .section__title{
      margin: 0 0 18px;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: .02em;
      text-align: center;
      background: linear-gradient(135deg, #fff 0%, rgba(78,207,255,.95) 50%, rgba(236,72,153,.85) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
      padding-bottom: 14px;
    }
    
    .section__title::after{
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 50px;
      height: 2.5px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(78,207,255,.85), rgba(236,72,153,.65));
      box-shadow: 0 0 18px rgba(78,207,255,.45);
    }
    .divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
      margin: 0 var(--page-pad);
    }

    /* Points (image + overlay) */
    .points{
      display: grid;
      gap: 12px;
    }

    .point{
      position: relative;
      overflow: hidden;
      border-radius: 0;
      border: 0;
      background: rgba(0,0,0,.35);
      box-shadow: 0 14px 34px rgba(0,0,0,.45);
      min-height: 160px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }

    .point__img{
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 100%;
      width: auto;
      max-width: 65%;
      object-fit: contain;
      object-position: right center;
      z-index: 0;
    }

    .point::after{
      content:"";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg,
          rgba(11,15,25,.92) 0%,
          rgba(11,15,25,.75) 35%,
          rgba(11,15,25,.25) 65%,
          rgba(11,15,25,0) 100%
        );
      z-index: 1;
      pointer-events: none;
    }

    .point__body{
      position: relative;
      z-index: 2;
      padding: 18px 20px;
      grid-column: 1;
    }

    .point__kicker{ margin: 0 0 8px; }

    .badge{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      background: rgba(11,15,25,.75);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 4px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: rgba(255,255,255,.88);
      font-weight: 900;
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .badge::before{
      content:"";
      width: 5px;
      height: 5px;
      border-radius: 1px;
      background: linear-gradient(135deg, rgba(78,207,255,.95), rgba(236,72,153,.85));
      box-shadow: 0 0 12px rgba(78,207,255,.40);
    }

    .point__title{
      margin: 0 0 6px;
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -.01em;
      line-height: 1.3;
      text-shadow: 0 4px 16px rgba(0,0,0,.75);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .point__desc{
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255,255,255,.82);
      text-shadow: 0 4px 12px rgba(0,0,0,.65);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (max-width: 360px){
      .points{ gap: 10px; }
      .point{ min-height: 150px; }
      .point__body{ padding: 16px 18px; }
      .point__title{ font-size: 18px; }
      .point__desc{ font-size: 13px; }
      .point__img{ max-width: 60%; }
    }

    /* Ranking (horizontal strip / equal cards) */
    .ranking{
      padding-top: 8px;
    }

    .section__head{
      display:flex;
      flex-direction: column;
      align-items:center;
      gap: 10px;
      margin: 0 0 16px;
      text-align: center;
    }

    .ranking .section__title{
      margin: 0;
    }

    .section__meta{
      font-size: 15px;
      color: rgba(255,255,255,.78);
      letter-spacing: .02em;
      font-weight: 600;
    }

    .rankStrip{
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 4px 2px 8px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }

    .rankStrip::-webkit-scrollbar{ height: 6px; }
    .rankStrip::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius: 99px; }

    /* 3 cards per view (within the phone frame) */
    .rankItem{
      flex: 0 0 calc((100% - 24px) / 3);
      scroll-snap-align: start;
    }

    .rankCard{
      position:relative;
      overflow:hidden;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      box-shadow: 0 14px 34px rgba(0,0,0,.36);
    }

    .rankCard__img{
      width:100%;
      aspect-ratio: 9/16; /* smartphone wallpaper feel */
      object-fit: cover;
      object-position: center;
      display:block;
      transform: scale(1.01);
    }

    .rankCard__overlay{
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg,
          rgba(0,0,0,0) 0%,
          rgba(0,0,0,.18) 55%,
          rgba(0,0,0,.72) 100%
        );
      pointer-events:none;
    }

    .rankCard__badge{
      position:absolute;
      left: 8px;
      top: 8px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(11,15,25,.55);
      border: 1px solid rgba(255,255,255,.16);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-weight: 900;
      font-size: 11px;
      letter-spacing: .08em;
      color: rgba(255,255,255,.88);
      z-index: 2;
    }
    
    /* 1位: ゴールド */
    .rankItem:nth-child(1) .rankCard__badge{
      background: linear-gradient(135deg, rgba(255,215,0,.85), rgba(255,193,7,.75));
      border: 1px solid rgba(255,223,0,.45);
      color: rgba(0,0,0,.92);
      box-shadow: 0 0 20px rgba(255,215,0,.55);
    }
    
    /* 2位: シルバー */
    .rankItem:nth-child(2) .rankCard__badge{
      background: linear-gradient(135deg, rgba(192,192,192,.90), rgba(169,169,169,.80));
      border: 1px solid rgba(220,220,220,.50);
      color: rgba(0,0,0,.92);
      box-shadow: 0 0 18px rgba(192,192,192,.45);
    }
    
    /* 3位: ブロンズ */
    .rankItem:nth-child(3) .rankCard__badge{
      background: linear-gradient(135deg, rgba(205,127,50,.85), rgba(184,115,51,.75));
      border: 1px solid rgba(205,133,63,.45);
      color: rgba(255,255,255,.95);
      box-shadow: 0 0 18px rgba(205,127,50,.45);
    }

    .rankCard__info{
      position:absolute;
      left: 8px;
      right: 8px;
      bottom: 8px;
      z-index: 2;
    }

    .rankCard__title{
      margin: 0;
      font-size: 12.5px;
      font-weight: 900;
      letter-spacing: .01em;
      text-shadow: 0 10px 28px rgba(0,0,0,.55);
    }

    .rankCard__sub{
      margin: 3px 0 0;
      font-size: 11.5px;
      color: rgba(255,255,255,.72);
      line-height: 1.45;
      text-shadow: 0 10px 28px rgba(0,0,0,.55);
    }

    .rankLink{
      display:block;
      text-decoration:none;
    }

    .rankCTA{
      margin-top: 16px;
      text-align:center;
    }

    .rankCTA__title{
      display: none;
    }

    .rankCTA__btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
      margin-top: 0;
      padding: 14px 28px;
      border-radius: 999px;
      border: 1px solid rgba(45,127,249,.35);
      background: linear-gradient(135deg, rgba(45,127,249,.85), rgba(78,207,255,.75));
      color: rgba(255,255,255,.98);
      text-decoration:none;
      font-weight: 900;
      font-size: 14px;
      letter-spacing: .02em;
      box-shadow: 
        0 0 24px rgba(45,127,249,.35),
        0 8px 20px rgba(0,0,0,.35);
      transition: all 0.2s ease;
    }

    .rankCTA__btn:hover{ 
      transform: translateY(-2px);
      box-shadow: 
        0 0 30px rgba(45,127,249,.50),
        0 12px 28px rgba(0,0,0,.40);
    }

    @media (max-width: 360px){
      .rankStrip{ gap: 10px; }
      .rankItem{ flex-basis: calc((100% - 20px) / 3); }
    }

    /* New Arrivals Section */
    .newArrivals{
      padding-top: 8px;
    }

    .newGrid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 4px 0;
    }

    .newItem{
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      box-shadow: 0 10px 24px rgba(0,0,0,.38);
    }

    .newCard{
      display: block;
      text-decoration: none;
      position: relative;
    }

    .newCard__img{
      width: 100%;
      aspect-ratio: 9/16;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 0.3s ease;
    }

    .newCard:hover .newCard__img{
      transform: scale(1.05);
    }

    .newCard__overlay{
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg,
          rgba(0,0,0,0) 0%,
          rgba(0,0,0,.15) 60%,
          rgba(0,0,0,.65) 100%
        );
      pointer-events: none;
    }

    .newCard__badge{
      position: absolute;
      right: 6px;
      top: 6px;
      padding: 4px 7px;
      border-radius: 4px;
      background: rgba(236,72,153,.85);
      border: 1px solid rgba(255,255,255,.20);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      font-weight: 900;
      font-size: 9px;
      letter-spacing: .08em;
      color: rgba(255,255,255,.95);
      text-transform: uppercase;
      z-index: 2;
      box-shadow: 0 0 14px rgba(236,72,153,.40);
    }

    .newCTA{
      margin-top: 16px;
      text-align: center;
    }

    .newCTA__btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 999px;
      border: 1px solid rgba(45,127,249,.35);
      background: linear-gradient(135deg, rgba(45,127,249,.85), rgba(78,207,255,.75));
      color: rgba(255,255,255,.98);
      text-decoration: none;
      font-weight: 900;
      font-size: 14px;
      letter-spacing: .02em;
      box-shadow: 
        0 0 24px rgba(45,127,249,.35),
        0 8px 20px rgba(0,0,0,.35);
      transition: all 0.2s ease;
    }

    .newCTA__btn:hover{
      transform: translateY(-2px);
      box-shadow: 
        0 0 30px rgba(45,127,249,.50),
        0 12px 28px rgba(0,0,0,.40);
    }

    @media (max-width: 360px){
      .newGrid{ gap: 6px; }
      .newItem{ border-radius: 10px; }
    }

    /* Category Section */
    .categories{
      padding-top: 8px;
    }

    .categoryCarousel{
      position: relative;
      overflow: hidden;
      padding: 4px 0 20px;
    }

    .categorySlider{
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .categoryItem{
      flex: 0 0 100%;
      padding: 0 2px;
    }

    .categoryCard{
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      box-shadow: 0 12px 28px rgba(0,0,0,.38);
      text-decoration: none;
      display: block;
    }

    .categoryCard__img{
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .categoryCard__overlay{
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg,
          rgba(0,0,0,0) 0%,
          rgba(0,0,0,.25) 50%,
          rgba(0,0,0,.75) 100%
        );
      pointer-events: none;
    }

    .categoryCard__title{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 12px;
      margin: 0;
      font-size: 17px;
      font-weight: 900;
      letter-spacing: .02em;
      text-align: center;
      color: rgba(255,255,255,.98);
      text-shadow: 0 8px 20px rgba(0,0,0,.65);
      z-index: 2;
    }

    .categoryArrow{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(11,15,25,.75);
      border: 1px solid rgba(255,255,255,.20);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: all 0.2s ease;
      color: rgba(255,255,255,.90);
      font-size: 20px;
      user-select: none;
    }

    .categoryArrow:hover{
      background: rgba(45,127,249,.85);
      border-color: rgba(45,127,249,.50);
      box-shadow: 0 0 20px rgba(45,127,249,.40);
    }

    .categoryArrow--prev{
      left: 10px;
    }

    .categoryArrow--next{
      right: 10px;
    }

    .categoryDots{
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
    }

    .categoryDot{
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,.25);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .categoryDot.active{
      background: linear-gradient(135deg, rgba(45,127,249,.95), rgba(78,207,255,.85));
      box-shadow: 0 0 12px rgba(45,127,249,.50);
      width: 24px;
      border-radius: 999px;
    }

    @media (max-width: 360px){
      .categoryCard__title{ font-size: 15px; padding: 10px; }
      .categoryArrow{ width: 36px; height: 36px; font-size: 18px; }
      .categoryArrow--prev{ left: 8px; }
      .categoryArrow--next{ right: 8px; }
    }

    /* Steps Section */
    .steps{
      padding-top: 8px;
    }

    .stepsGrid{
      display: grid;
      gap: 28px;
    }

    .stepItem{
      position: relative;
      overflow: visible;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      box-shadow: 0 10px 24px rgba(0,0,0,.36);
      display: grid;
      grid-template-columns: 70px 1fr;
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      min-height: 95px;
    }

    .stepItem__imgWrap{
      position: relative;
      width: 70px;
      height: 100%;
      min-height: 60px;
      border-radius: 6px;
      overflow: hidden;
      background: rgba(0,0,0,.25);
    }

    .stepItem__img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .stepItem__body{
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding-right: 4px;
    }

    .stepItem__number{
      display: inline-block;
      padding: 3px 9px;
      border-radius: 4px;
      background: linear-gradient(135deg, rgba(45,127,249,.90), rgba(78,207,255,.80));
      color: rgba(255,255,255,.98);
      font-weight: 900;
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      box-shadow: 0 0 14px rgba(45,127,249,.40);
      margin-bottom: 2px;
      width: fit-content;
    }

    .stepItem__title{
      margin: 0;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: -.01em;
      line-height: 1.4;
      color: rgba(255,255,255,.95);
    }

    .stepItem__desc{
      margin: 0;
      font-size: 12px;
      line-height: 1.6;
      color: rgba(255,255,255,.72);
    }

    .stepItem__arrow{
      position: absolute;
      left: 50%;
      bottom: -20px;
      transform: translateX(-50%);
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(45,127,249,.85);
      font-size: 20px;
      animation: bounceArrow 1.5s ease-in-out infinite;
      z-index: 10;
    }

    @keyframes bounceArrow {
      0%, 100% {
        transform: translateX(-50%) translateY(0);
      }
      50% {
        transform: translateX(-50%) translateY(6px);
      }
    }

    @media (max-width: 360px){
      .stepsGrid{ gap: 26px; }
      .stepItem{ 
        grid-template-columns: 65px 1fr;
        gap: 10px;
        padding: 10px;
        min-height: 85px;
      }
      .stepItem__imgWrap{ 
        width: 65px;
        min-height: 55px;
      }
      .stepItem__title{ font-size: 14px; }
      .stepItem__desc{ font-size: 11px; }
      .stepItem__arrow{ 
        width: 20px;
        height: 20px;
        font-size: 18px;
        bottom: -18px;
      }
    }

    /* Footer */
    .footer{
      background: rgba(11,15,25,.95);
      border-top: 1px solid rgba(255,255,255,.10);
      padding: 32px var(--page-pad) 24px;
      margin-top: 40px;
    }

    .footer_wrap{
      margin-bottom: 24px;
    }

    .footer__grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px 16px;
    }

    .footer__section{
      
    }

    .footer__heading{
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(78,207,255,.90);
      margin: 0 0 12px;
    }

    .footer_list{
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }

    .footer_list li{
      
    }

    .footer_list a{
      text-decoration: none;
      color: rgba(255,255,255,.72);
      font-size: 13px;
      font-weight: 500;
      transition: all 0.2s ease;
      display: inline-block;
      position: relative;
      padding-left: 14px;
    }

    .footer_list a::before{
      content: "\2192";
      position: absolute;
      left: 0;
      color: rgba(78,207,255,.60);
      transition: all 0.2s ease;
      font-size: 12px;
    }

    .footer_list a:hover{
      color: rgba(78,207,255,.95);
      padding-left: 18px;
    }

    .footer_list a:hover::before{
      color: rgba(78,207,255,.95);
    }

    #footer{
      text-align: center;
      font-size: 11px;
      color: rgba(255,255,255,.50);
      letter-spacing: .02em;
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    /* Floating Signup Button */
    .floatingSignup{
      position: fixed;
      right: -120px;
      bottom: 100px;
      z-index: 90;
      transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .floatingSignup.show{
      right: 16px;
    }

    .floatingSignup.atFooter{
      position: absolute;
      bottom: auto;
    }

    .floatingSignup__btn{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(236,72,153,.95), rgba(219,39,119,.90));
      border: 2px solid rgba(255,255,255,.30);
      box-shadow: 
        0 0 40px rgba(236,72,153,.70),
        0 0 60px rgba(236,72,153,.40),
        0 8px 24px rgba(0,0,0,.45),
        inset 0 0 20px rgba(255,255,255,.15);
      text-decoration: none;
      color: rgba(255,255,255,.98);
      cursor: pointer;
      transition: all 0.3s ease;
      animation: pulseGlow 2s ease-in-out infinite;
      position: relative;
    }

    .floatingSignup__btn::before{
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(236,72,153,.25), transparent 70%);
      animation: ripple 2s ease-in-out infinite;
      z-index: -1;
    }

    .floatingSignup__btn:hover{
      transform: scale(1.08);
      box-shadow: 
        0 0 60px rgba(236,72,153,.90),
        0 0 80px rgba(236,72,153,.50),
        0 12px 32px rgba(0,0,0,.50),
        inset 0 0 25px rgba(255,255,255,.20);
      animation: none;
    }

    .floatingSignup__text1{
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .02em;
      margin-bottom: 2px;
      text-shadow: 0 2px 8px rgba(0,0,0,.30);
    }

    .floatingSignup__text2{
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .01em;
      opacity: .95;
      text-shadow: 0 2px 6px rgba(0,0,0,.30);
    }

    @keyframes pulseGlow {
      0%, 100% {
        box-shadow: 
          0 0 40px rgba(236,72,153,.70),
          0 0 60px rgba(236,72,153,.40),
          0 8px 24px rgba(0,0,0,.45),
          inset 0 0 20px rgba(255,255,255,.15);
      }
      50% {
        box-shadow: 
          0 0 60px rgba(236,72,153,.95),
          0 0 90px rgba(236,72,153,.60),
          0 8px 24px rgba(0,0,0,.45),
          inset 0 0 30px rgba(255,255,255,.25);
      }
    }

    @keyframes ripple {
      0% {
        transform: scale(0.95);
        opacity: 0.8;
      }
      50% {
        transform: scale(1.15);
        opacity: 0.4;
      }
      100% {
        transform: scale(0.95);
        opacity: 0.8;
      }
    }

    @media (max-width: 360px){
      .floatingSignup{
        bottom: 80px;
      }
      .floatingSignup.show{
        right: 12px;
      }
      .floatingSignup__btn{
        width: 80px;
        height: 80px;
      }
      .floatingSignup__text1{
        font-size: 13px;
      }
      .floatingSignup__text2{
        font-size: 10px;
      }
    }

    /* Small safe-area padding for iOS */
    .safe-bottom{
      padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }

    /* Optional: make it look like an app page on wide monitors */
    @media (min-width: 980px){
      body{
        background:
          radial-gradient(1200px 650px at 25% -15%, rgba(45,127,249,.45), transparent 55%),
          radial-gradient(900px 520px at 85% 15%, rgba(236,72,153,.28), transparent 55%),
          var(--bg);
      }
      .frame{
        border-radius: 22px;
        overflow:hidden;
        margin: 24px auto;
      }
    }
.manage_body{
  padding: 10px;
}

.content_title{
  font-size: 1.2rem;
  padding: 10px 0;
}

/* TABLE detail START */
table.manage_detail {
  width: 320px;
  border: 1px #A3A3A3 solid;
  border-collapse: collapse;
  border-spacing: 0;
}

table.manage_detail th {
  padding: 5px;
  border: #A3A3A3 solid;
  border-width: 0 0 1px 1px;
  background: #E3E3E3;
  font-weight: bold;
  line-height: 120%;
  text-align: right;
  white-space: nowrap; 
}
table.manage_detail th.error {
  padding: 5px;
  border: #A3A3A3 solid;
  border-width: 0 0 1px 1px;
  background: #FF6666;
  font-weight: bold;
  line-height: 120%;
  text-align: right;
  white-space: nowrap; 
}
table.manage_detail td {
  padding: 5px;
  border: 1px #A3A3A3 solid;
  border-width: 0 0 1px 1px;
}

table.manage_detail td.inner {
  text-align:center;
  padding:0;
  border:none;
  white-space:nowrap;
}

/* TABLE detail END */

/* TABLE LIST START */
table.manage_list {
  width: 320px;
  border-color: #A3A3A3;
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
  border-spacing: 0;
}

table.manage_list th {
  padding: 3px;
  background: #e3e3e3;
  font-weight: normal;
  line-height: 120%;
  text-align: center;
  white-space: nowrap;
  border-color: #A3A3A3;
  border-style: solid;
  border-width: 1px;
  text-decoration: none;
}

table.manage_list th a:link,a:visited {
  text-decoration: none;
}

table.manage_list tr:hover td {
  background: #efefef;
}

table.manage_list td {
  padding: 3px;
  border-color: #A3A3A3;
  border-style: solid;
  border-width: 1px;
}

/* TABLE LIST END */
div.pagination {
  padding: 3px;
  margin: 15px;
  text-align:center;
}
 
div.pagination a {
  border: 1px solid #dedfde;
  margin-right:3px;
  padding:6px 9px;
  background-color:#ffffff;
  background-position:bottom;
  text-decoration: none;

  color: #962929;  
}

div.pagination span {
  margin-right:3px;
  padding:6px 9px;

  background-position:bottom;
  background-color:#ffffff;
  border: 1px solid #dedfde;
  background-image:none;
  background-color:#962929;
  color: #fff;
}

div.pagination a:hover, div.meneame a:active {
  border: 1px solid #000;
  background-image:none;
  background-color:#962929;
  color: #fff;
}
h2.retire {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #bdbdbd;/*左線*/
  margin: 15px 15px 15px;
}

.button_wrapper{
   text-align:center;
   margin: 10px 0 20px auto;
}

/*-----------------------------
キャリア選択
-----------------------------*/
.select-carrier input {
  display: none;
}
.select-carrier input[type="radio"]:checked.docomo + label {
  color: #f00;
  border: 2px solid #f00;
  background-color: #fff0f0;
}
.select-carrier input[type="radio"]:checked.au + label {
  color: #f07334;
  border: 2px solid #f07334;
  background-color: #fff;
}
.select-carrier input[type="radio"]:checked.softbank + label {
  color: #000;
  border: 2px solid #000;
  background-color: #eaeaea;
}

.select-carrier label {
  color: #ddd;
  border: 2px solid #ddd;
  text-align: center;
  display: inline-block;
  padding: 10px 0px;
  width: 100px;
}
.select-carrier label:hover {
    color: #aaa;
    border: 2px solid #aaa;
    cursor: pointer;
}




/*-----------------------------
コース選択
-----------------------------*/

@font-face{font-family:"IonIcons";src:url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1");src:url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"),url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"),url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"),url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");font-weight:normal;font-style:normal}


.select-wrap {
    position: relative;
    margin: 0px 28px 35px 24px;
}
.select-wrap:before {
    z-index: 1;
    position: absolute;
    right: 15px;
    top: 0;
    content: "\f123";
    font-family: "IonIcons";
    line-height: 47px;
    color: #7F878C;
    pointer-events: none;
}
select{
    outline:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 45px;
    padding: 8px 12px;
    border:1px solid #ddd;
    color:#828c9a;
    width:100%;
    border-radius:3px;
}
select option{
  background-color: #fff;
  color: #333;
}
select::-ms-expand {
  display: none;
}
select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #828c9a;
}
.select-wrap.select-primary:before{
  color:#fff;
}
.select-wrap.select-primary > select{
  background:#0084B4;
  color:#fff;
  border-color:#0084B4;
}
.select-wrap.select-primary > select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #fff;
}

.select-wrap.select-inverse:before{
  color:#fff;
}
.select-wrap.select-inverse > select{
  color:#fff;
  border-color: #fff;
}

.select-wrap.select-inverse > select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #fff;
}




/*-----------------------------
ラジオボタン
-----------------------------*/

.checkbox-wrap{
}
.label-checkbox input[type="checkbox"]{
  display: none;
}
.label-checkbox{
  cursor: pointer;
  
  position: relative;
}
.label-checkbox .lever{
  display: block;
  color: #ccc;
  font-weight: normal;
  display: inline-block;
  padding: 8px 40px;
  border: 1px solid #e5e5e5;
  border-radius:20px;
  margin-right: 10px;
  margin-bottom: 10px;
  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-checkbox .lever:before{
  content:'';
  position: absolute;
  left: 4px;
  top:4px;
  border: 1px solid #e5e5e5;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius:100%;
  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
  transition: all 300ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-checkbox:hover .lever:before{
   border-color: #ddd;
}
.label-checkbox input[type="checkbox"]:checked + .lever{
   background: #5cb85c;
   color: #fff;
}
.label-checkbox input[type="checkbox"]:checked + .lever{
   border-color:#5cb85c;
}
.label-checkbox input[type="checkbox"]:checked + .lever:before{
   left: 100%;
   margin-left: -44px;
   border-color: #fff;
}

.radio-wrap{
  margin: 20px;
}
.label-radio input[type="radio"]{
  display: none;
}
.label-radio{
  cursor: pointer;
  color: #828c9a;
  font-weight: normal;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  margin: 5px;
}
.label-radio .lever:before{
  content:'';
  border: 1px solid #ddd;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  border-radius:10px;
  -webkit-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-radio input[type="radio"]:checked + .lever:before{
  opacity: 0;
  background: #eee;
  border-color: #eee;
  transform:scale(2);
}
.label-radio .lever:after{
  content:'';
  opacity: 0;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  transform:rotate(-200deg);
  -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-radio input[type="radio"]:checked + .lever:after{
  opacity: 1;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #5bc0de;
  border-bottom: 2px solid #5bc0de;
  transform:rotate(40deg);
}


/*-----------------------------
テキストボックス
-----------------------------*/
textarea.box1{
width:320px;
height:120px;
}


/*-----------------------------
退会ボタン
-----------------------------*/
p.retire {
    margin: 4px 35px 22px 27px;
    padding: 0;
}
.retire_button {
   text-align:center;
   margin: 20px 0px auto;
}


/*-----------------------------
退会ボタン装飾
-----------------------------*/
.btn-flat-border {
  display: inline-block;
  padding: 0.5em 5em;
  text-decoration: none;
  color: #8c8c8c;
  border: solid 1px #8c8c8c;
  border-radius: 2px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #8c8c8c;
  color: white;
}

.btn-flat-dashed-border {
 /* display: inline-block;*/
  padding: 0.5em 9em;
  text-decoration: none;
  color: #8c8c8c;
  border: dashed 1px #8c8c8c;
  border-radius: 3px;
  transition: .4s;
  font-size: 14px;
}

.btn-flat-dashed-border:hover {
  border-style: dotted;
  color: #8c8c8c;
}
/**************************/
/* PHP Rails scaffold.css */
/**************************/

/* ========================================
   COMMON SUB PAGE ELEMENTS
   ======================================== */

/* Header Back Button */
.header__backBtn{
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
  color: rgba(255,255,255,.90);
  text-decoration: none;
}

.header__backBtn:hover{
  background: rgba(255,255,255,.08);
}

/* Login Page Container */
.loginPage{
  min-height: calc(100vh - 200px);
  padding: 32px var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loginPage__container{
  width: 100%;
  max-width: 400px;
}

.loginPage__title{
  font-size: 32px;
  font-weight: 900;
  text-align: center;
  margin: 0 0 24px;
  background: linear-gradient(135deg, #fff 0%, rgba(78,207,255,.95) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.loginPage__description{
  text-align: center;
  margin-bottom: 40px;
}

.loginPage__description p{
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
}

.loginPage__buttons{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Login Button */
.loginButton{
  width: 100%;
}

.loginButton__label{
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
  color: rgba(255,255,255,.85);
}

.loginButton__carrier{
  font-weight: 900;
  font-size: 16px;
  background: linear-gradient(135deg, rgba(78,207,255,.95), rgba(45,127,249,.85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.loginButton__btn{
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.loginButton__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.25);
}

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

.loginButton__btn--docomo{
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.loginButton__btn--au{
  background: linear-gradient(135deg, rgba(255,140,0,.12), rgba(255,140,0,.05));
}

.loginButton__btn--softbank{
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.loginButton__btn--credit{
  background: linear-gradient(135deg, rgba(78,207,255,.15), rgba(45,127,249,.08));
}

@media (max-width: 360px){
  .loginPage{
    padding: 24px var(--page-pad);
  }

  .loginPage__title{
    font-size: 28px;
    margin-bottom: 20px;
  }

  .loginPage__description{
    margin-bottom: 32px;
  }

  .loginPage__description p{
    font-size: 13px;
  }

  .loginPage__buttons{
    gap: 20px;
  }

  .loginButton__label{
    font-size: 13px;
    margin-bottom: 10px;
  }

  .loginButton__carrier{
    font-size: 15px;
  }
}

/* ========================================
   SUB PAGES
   ======================================== */

.subPage{
  min-height: calc(100vh - 200px);
  padding: 24px var(--page-pad) 48px;
}

.subPage__container{
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.subPage__title{
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  margin: 0 0 20px;
  color: rgba(255,255,255,.95);
  letter-spacing: .02em;
}

.subPage__lead{
  text-align: center;
  margin-bottom: 32px;
  padding: 0 8px;
}

.subPage__lead p{
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.75);
}

.subPage__content{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Retire Form */
.retireForm{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.formField{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.formField textarea{
  width: 100%;
  min-height: 150px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  resize: vertical;
  transition: all 0.2s ease;
}

.formField textarea:focus{
  outline: none;
  border-color: rgba(78,207,255,.45);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(78,207,255,.12);
}

.formField textarea::placeholder{
  color: rgba(255,255,255,.40);
}

.formField input[type="text"],
.formField input[type="email"],
.formField input[type="tel"]{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.formField input[type="text"]:focus,
.formField input[type="email"]:focus,
.formField input[type="tel"]:focus{
  outline: none;
  border-color: rgba(78,207,255,.45);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(78,207,255,.12);
}

.formActions{
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.submitBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 40px;
  border-radius: 999px;
  border: 1px solid rgba(45,127,249,.35);
  background: linear-gradient(135deg, rgba(45,127,249,.85), rgba(78,207,255,.75));
  color: rgba(255,255,255,.98);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 
    0 0 24px rgba(45,127,249,.35),
    0 8px 20px rgba(0,0,0,.35);
  transition: all 0.2s ease;
}

.submitBtn:hover{
  transform: translateY(-2px);
  box-shadow: 
    0 0 30px rgba(45,127,249,.50),
    0 12px 28px rgba(0,0,0,.40);
}

.submitBtn:active{
  transform: translateY(0);
}

@media (max-width: 360px){
  .subPage{
    padding: 20px var(--page-pad) 40px;
  }

  .subPage__title{
    font-size: 22px;
    margin-bottom: 16px;
  }

  .subPage__lead{
    margin-bottom: 28px;
  }

  .subPage__lead p{
    font-size: 13px;
  }

  .subPage__content{
    padding: 20px 16px;
  }

  .formField textarea{
    min-height: 130px;
    padding: 12px;
    font-size: 13px;
  }

  .submitBtn{
    padding: 14px 36px;
    font-size: 14px;
  }
}

/* ========================================
   CONFIRM PAGE (Retire Confirmation)
   ======================================== */

.confirmBox{
  max-width: 500px;
  margin: 0 auto;
}

.confirmBox__message{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 28px 24px;
  margin-bottom: 32px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.confirmBox__message p{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
  text-align: center;
}

.confirmBox__message p:last-child{
  margin-bottom: 0;
}

.confirmBox__alert{
  background: rgba(220,38,38,.12);
  border: 1px solid rgba(220,38,38,.25);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 16px 0;
  box-shadow: 0 0 20px rgba(220,38,38,.15);
}

.confirmBox__actions{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 8px;
}

.confirmBtn{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 28px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.confirmBtn::before{
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.confirmBtn:hover::before{
  opacity: 1;
}

.confirmBtn--cancel{
  background: linear-gradient(135deg, rgba(45,127,249,.85), rgba(78,207,255,.75));
  border: 1px solid rgba(45,127,249,.40);
  color: rgba(255,255,255,.98);
  box-shadow: 
    0 0 28px rgba(45,127,249,.35),
    0 8px 20px rgba(0,0,0,.30);
}

.confirmBtn--cancel::before{
  background: linear-gradient(135deg, rgba(78,207,255,.25), transparent);
}

.confirmBtn--cancel:hover{
  transform: translateY(-2px);
  box-shadow: 
    0 0 36px rgba(45,127,249,.50),
    0 12px 28px rgba(0,0,0,.35);
}

.confirmBtn--confirm{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.75);
  box-shadow: 0 4px 12px rgba(0,0,0,.20);
}

.confirmBtn--confirm::before{
  background: linear-gradient(135deg, rgba(220,38,38,.15), transparent);
}

.confirmBtn--confirm:hover{
  background: rgba(220,38,38,.15);
  border-color: rgba(220,38,38,.35);
  color: rgba(255,255,255,.90);
  box-shadow: 
    0 0 24px rgba(220,38,38,.20),
    0 6px 16px rgba(0,0,0,.25);
  transform: translateY(-1px);
}

@media (max-width: 360px){
  .confirmBox__message{
    padding: 24px 20px;
    margin-bottom: 28px;
  }

  .confirmBox__message p{
    font-size: 13px;
  }

  .confirmBox__alert{
    padding: 12px 14px;
  }

  .confirmBox__actions{
    gap: 14px;
  }

  .confirmBtn{
    padding: 16px 24px;
    font-size: 14px;
  }
}

/* ========================================
   LEGAL DOCUMENT PAGE
   ======================================== */

.legalDoc{
  max-width: 680px;
  margin: 0 auto;
}

.legalDoc__intro{
  text-align: center;
  margin-bottom: 32px;
  padding: 0 8px;
}

.legalDoc__intro p{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.75);
}

.legalDoc__content{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.legalSection{
  background: rgba(255,255,255,.02);
  border-left: 3px solid rgba(45,127,249,.50);
  border-radius: 4px;
  padding: 18px 20px;
  transition: all 0.2s ease;
}

.legalSection:hover{
  background: rgba(255,255,255,.04);
  border-left-color: rgba(78,207,255,.70);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.legalSection__title{
  font-size: 15px;
  font-weight: 900;
  color: rgba(78,207,255,.95);
  margin: 0 0 12px;
  letter-spacing: .01em;
  line-height: 1.5;
}

.legalSection__body{
  
}

.legalSection__body p{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.80);
}

.legalSection__body p:last-child{
  margin-bottom: 0;
}

@media (max-width: 360px){
  .legalDoc__intro{
    margin-bottom: 28px;
  }

  .legalDoc__intro p{
    font-size: 13px;
  }

  .legalDoc__content{
    gap: 16px;
  }

  .legalSection{
    padding: 16px 18px;
  }

  .legalSection__title{
    font-size: 14px;
    margin-bottom: 10px;
  }

  .legalSection__body p{
    font-size: 12px;
  }
}

/* ========================================
   Q&A PAGE
   ======================================== */

.qaList{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qaItem{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.qaItem:hover{
  border-color: rgba(78,207,255,.25);
  box-shadow: 0 4px 16px rgba(0,0,0,.20);
}

.qaItem[open]{
  background: rgba(255,255,255,.05);
  border-color: rgba(78,207,255,.35);
  box-shadow: 
    0 0 24px rgba(45,127,249,.20),
    0 8px 20px rgba(0,0,0,.25);
}

.qaItem__question{
  padding: 18px 60px 18px 20px;
  font-size: 15px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: all 0.2s ease;
  line-height: 1.5;
}

.qaItem__question::-webkit-details-marker{
  display: none;
}

.qaItem__question::after{
  content: "\FF0B";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: rgba(78,207,255,.70);
  transition: all 0.3s ease;
  font-weight: 300;
}

.qaItem[open] .qaItem__question::after{
  content: "\FF0D";
  color: rgba(78,207,255,.95);
  transform: translateY(-50%) rotate(180deg);
}

.qaItem__question:hover{
  color: rgba(78,207,255,.95);
}

.qaItem__answer{
  padding: 0 20px 20px;
  animation: slideDown 0.3s ease-out;
}

.qaItem__answer p{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.78);
}

.qaItem__answer p:last-child{
  margin-bottom: 0;
}

.qaItem__answer p strong{
  color: rgba(78,207,255,.95);
  font-weight: 900;
}

.qaItem__list{
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.qaItem__list li{
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.75);
  padding-left: 8px;
}

.qaItem__steps{
  background: rgba(45,127,249,.08);
  border-left: 3px solid rgba(45,127,249,.50);
  border-radius: 6px;
  padding: 14px 16px;
  margin-top: 12px;
}

.qaItem__steps p{
  color: rgba(255,255,255,.85);
}

.qaItem__steps p strong{
  display: block;
  margin-bottom: 8px;
  color: rgba(78,207,255,.95);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 360px){
  .qaList{
    gap: 10px;
  }

  .qaItem__question{
    padding: 16px 56px 16px 18px;
    font-size: 14px;
  }

  .qaItem__question::after{
    right: 18px;
    font-size: 22px;
  }

  .qaItem__answer{
    padding: 0 18px 18px;
  }

  .qaItem__answer p{
    font-size: 12px;
  }

  .qaItem__list li{
    font-size: 12px;
  }

  .qaItem__steps{
    padding: 12px 14px;
  }
}

/* ========================================
   PRIVACY POLICY PAGE
   ======================================== */

.privacyDoc{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.privacyDoc__intro{
  background: linear-gradient(135deg, rgba(45,127,249,.12), rgba(78,207,255,.08));
  border: 1px solid rgba(78,207,255,.20);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.privacyDoc__intro p{
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255,255,255,.85);
  font-weight: 500;
}

.privacySection{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.privacySection:hover{
  border-color: rgba(78,207,255,.15);
  box-shadow: 0 6px 20px rgba(0,0,0,.20);
}

.privacySection__title{
  background: rgba(255,255,255,.04);
  padding: 18px 20px;
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: rgba(78,207,255,.95);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 8px;
}

.privacySection__body{
  padding: 20px;
}

.privacySection__lead{
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.82);
  padding: 14px 16px;
  background: rgba(45,127,249,.06);
  border-left: 3px solid rgba(45,127,249,.40);
  border-radius: 6px;
}

.privacySection__body p{
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.78);
}

.privacySection__body p:last-child{
  margin-bottom: 0;
}

.privacyItem{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px;
  background: rgba(255,255,255,.02);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.05);
  transition: all 0.2s ease;
}

.privacyItem:last-child{
  margin-bottom: 0;
}

.privacyItem:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(78,207,255,.20);
}

.privacyItem__number{
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(45,127,249,.25), rgba(78,207,255,.15));
  border: 1px solid rgba(78,207,255,.35);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 900;
  color: rgba(78,207,255,.95);
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(45,127,249,.25);
}

.privacyItem__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.privacyItem__content p{
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.82);
}

.privacyCategory{
  margin-bottom: 24px;
}

.privacyCategory:last-child{
  margin-bottom: 0;
}

.privacyCategory__title{
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 900;
  color: rgba(78,207,255,.90);
  padding-left: 14px;
  border-left: 3px solid rgba(78,207,255,.50);
}

.privacyCategory__list{
  margin: 0;
  padding: 0;
  list-style: none;
}

.privacyCategory__list li{
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.75);
  position: relative;
}

.privacyCategory__list li::before{
  content: "\2022";
  position: absolute;
  left: 6px;
  color: rgba(78,207,255,.60);
  font-weight: 900;
}

.privacyCategory__list li:last-child{
  margin-bottom: 0;
}

.privacyCategory__note{
  margin: 12px 0 0;
  padding: 10px 14px;
  background: rgba(45,127,249,.05);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.70);
}

.contactInfo{
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 18px;
}

.contactInfo__item{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.contactInfo__item:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.contactInfo__label{
  font-size: 12px;
  font-weight: 700;
  color: rgba(78,207,255,.80);
}

.contactInfo__value{
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  word-break: break-all;
}

@media (max-width: 360px){
  .privacyDoc{
    gap: 20px;
  }

  .privacyDoc__intro{
    padding: 18px;
  }

  .privacyDoc__intro p{
    font-size: 12px;
  }

  .privacySection__title{
    padding: 16px 18px;
    font-size: 15px;
  }

  .privacySection__body{
    padding: 18px;
  }

  .privacySection__lead{
    padding: 12px 14px;
    font-size: 12px;
  }

  .privacySection__body p{
    font-size: 12px;
  }

  .privacyItem{
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding: 14px;
  }

  .privacyItem__number{
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .privacyItem__content p{
    font-size: 12px;
  }

  .privacyCategory__title{
    font-size: 13px;
    margin-bottom: 12px;
  }

  .privacyCategory__list li{
    font-size: 12px;
  }

  .privacyCategory__note{
    font-size: 11px;
    padding: 9px 12px;
  }

  .contactInfo{
    padding: 16px;
    gap: 10px;
  }

  .contactInfo__item{
    grid-template-columns: 90px 1fr;
    gap: 10px;
    padding: 10px 0;
  }

  .contactInfo__label{
    font-size: 11px;
  }

  .contactInfo__value{
    font-size: 12px;
  }
}

/* ========================================
   CONTACT PAGE
   ======================================== */

.contactPage{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contactPage__note{
  background: linear-gradient(135deg, rgba(255,193,7,.10), rgba(255,152,0,.08));
  border: 1px solid rgba(255,193,7,.25);
  border-radius: 12px;
  padding: 18px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
}

.contactPage__selector{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.contactPage__selectorTitle{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: rgba(78,207,255,.95);
  text-align: center;
}

.contactSelect{
  width: 100%;
  max-width: 320px;
  padding: 14px 18px;
  background: rgba(255,255,255,.05);
  border: 2px solid rgba(78,207,255,.30);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,.90);
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234ECFFF' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.contactSelect:hover{
  border-color: rgba(78,207,255,.50);
  box-shadow: 0 0 20px rgba(45,127,249,.25);
}

.contactSelect:focus{
  border-color: rgba(78,207,255,.70);
  box-shadow: 0 0 24px rgba(45,127,249,.35);
}

.contactSelect option{
  background: rgb(11,15,25);
  color: rgba(255,255,255,.90);
  padding: 10px;
}

.contactPage__iframe{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 20px;
  overflow: hidden;
}

.contactPage__iframe iframe{
  border: none;
  width: 100%;
  min-height: 600px;
}

.contactPage__phone{
  animation: slideInUp 0.4s ease-out;
}

.phoneContact{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
}

.phoneContact__warning{
  background: rgba(255,193,7,.08);
  border-bottom: 1px solid rgba(255,193,7,.20);
  padding: 20px;
  text-align: center;
}

.phoneContact__warning p{
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
}

.phoneContact__warning p:last-child{
  margin-bottom: 0;
}

.phoneContact__hours{
  font-size: 12px;
  color: rgba(255,193,7,.90);
  font-weight: 700;
}

.phoneContact__checks{
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.phoneCheck{
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 14px 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.phoneCheck:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(78,207,255,.20);
}

.phoneCheck__input{
  width: 22px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: rgba(45,127,249,1);
}

.phoneCheck__label{
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.82);
  user-select: none;
}

.phoneCheck:has(.phoneCheck__input:checked){
  background: rgba(45,127,249,.08);
  border-color: rgba(78,207,255,.35);
}

.phoneCheck:has(.phoneCheck__input:checked) .phoneCheck__label{
  color: rgba(78,207,255,.95);
}

.phoneContact__link{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px 24px;
  padding: 18px 28px;
  background: linear-gradient(135deg, rgba(76,175,80,.85), rgba(56,142,60,.85));
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 900;
  color: white;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 
    0 4px 16px rgba(76,175,80,.40),
    0 0 32px rgba(76,175,80,.20);
  transition: all 0.3s ease;
}

.phoneContact__link:hover{
  transform: translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(76,175,80,.50),
    0 0 40px rgba(76,175,80,.30);
}

.phoneContact__link:active{
  transform: translateY(0);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 360px){
  .contactPage{
    gap: 20px;
  }

  .contactPage__note{
    padding: 16px;
    font-size: 12px;
  }

  .contactPage__selector{
    padding: 20px 18px;
    gap: 14px;
  }

  .contactPage__selectorTitle{
    font-size: 15px;
  }

  .contactSelect{
    font-size: 14px;
    padding: 12px 16px;
    padding-right: 38px;
    background-position: right 12px center;
  }

  .contactPage__iframe{
    padding: 16px;
  }

  .phoneContact__warning{
    padding: 18px;
  }

  .phoneContact__warning p{
    font-size: 12px;
  }

  .phoneContact__hours{
    font-size: 11px;
  }

  .phoneContact__checks{
    padding: 20px 18px;
    gap: 14px;
  }

  .phoneCheck{
    padding: 12px 14px;
    gap: 10px;
  }

  .phoneCheck__input{
    width: 20px;
    height: 20px;
  }

  .phoneCheck__label{
    font-size: 13px;
  }

  .phoneContact__link{
    margin: 0 18px 20px;
    padding: 16px 24px;
    font-size: 15px;
  }
}

/* ========================================
   THANKS PAGE
   ======================================== */

.subPage__title--success{
  background: linear-gradient(135deg, rgba(76,175,80,.25), rgba(56,142,60,.15));
  border: 2px solid rgba(76,175,80,.40);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 
    0 0 32px rgba(76,175,80,.25),
    0 4px 20px rgba(0,0,0,.20);
}

.thanksPage{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.thanksPage__note{
  background: linear-gradient(135deg, rgba(76,175,80,.10), rgba(56,142,60,.08));
  border: 1px solid rgba(76,175,80,.25);
  border-radius: 12px;
  padding: 18px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
}

.thanksPage__message{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.thanksPage__highlight{
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
}

.thanksPage__highlight p{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
}

.thanksPage__highlight p:last-child{
  margin-bottom: 0;
}

.thanksPage__instruction{
  font-size: 16px;
  font-weight: 900;
  color: rgba(78,207,255,.95);
}

.thanksPage__info{
  background: rgba(45,127,249,.08);
  border: 1px solid rgba(45,127,249,.25);
  border-radius: 10px;
  padding: 16px 18px;
  text-align: center;
}

.thanksPage__info p{
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
}

.thanksPage__troubleshoot{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 20px;
}

.thanksPage__troubleshootTitle{
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 900;
  color: rgba(255,193,7,.95);
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,193,7,.20);
}

.thanksPage__troubleshootLead{
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.80);
}

.thanksPage__checkList{
  margin: 16px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thanksPage__checkList li{
  padding: 12px 16px 12px 40px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  position: relative;
}

.thanksPage__checkList li::before{
  content: "\2713";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 900;
  color: rgba(255,193,7,.80);
}

.thanksPage__troubleshootNote{
  margin: 16px 0 0;
  padding: 14px 16px;
  background: rgba(255,193,7,.08);
  border-left: 3px solid rgba(255,193,7,.50);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255,255,255,.78);
}

@media (max-width: 360px){
  .thanksPage{
    gap: 20px;
  }

  .thanksPage__note{
    padding: 16px;
    font-size: 12px;
  }

  .thanksPage__highlight{
    padding: 20px 18px;
  }

  .thanksPage__highlight p{
    font-size: 13px;
  }

  .thanksPage__instruction{
    font-size: 15px;
  }

  .thanksPage__info{
    padding: 14px 16px;
  }

  .thanksPage__info p{
    font-size: 12px;
  }

  .thanksPage__troubleshoot{
    padding: 18px;
  }

  .thanksPage__troubleshootTitle{
    font-size: 14px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .thanksPage__troubleshootLead{
    margin: 14px 0;
    font-size: 12px;
  }

  .thanksPage__checkList{
    margin: 14px 0;
    gap: 8px;
  }

  .thanksPage__checkList li{
    padding: 10px 14px 10px 36px;
    font-size: 12px;
  }

  .thanksPage__checkList li::before{
    left: 12px;
    font-size: 14px;
  }

  .thanksPage__troubleshootNote{
    margin: 14px 0 0;
    padding: 12px 14px;
    font-size: 11px;
  }
}

/* ========================================
   GUIDE PAGE
   ======================================== */

.guideDoc{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.guideSection{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.guideSection:hover{
  border-color: rgba(78,207,255,.15);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}

.guideSection__title{
  background: rgba(255,255,255,.04);
  padding: 16px 18px;
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: rgba(78,207,255,.95);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.guideSection__body{
  padding: 18px;
}

.guideSection__body p{
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.80);
}

.guideSection__body p:last-child{
  margin-bottom: 0;
}

.guideNotice{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guideNotice__item{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(45,127,249,.06);
  border-left: 2px solid rgba(45,127,249,.35);
  border-radius: 6px;
  align-items: start;
}

.guideNotice__icon{
  font-size: 12px;
  font-weight: 900;
  color: rgba(78,207,255,.85);
  line-height: 1.7;
}

.guideNotice__text{
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.75);
}

.guidePriceBox{
  background: linear-gradient(135deg, rgba(45,127,249,.10), rgba(78,207,255,.08));
  border: 1px solid rgba(78,207,255,.20);
  border-radius: 10px;
  padding: 18px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guidePriceBox p{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
  font-weight: 700;
}

.guideWarning{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(255,193,7,.08);
  border: 1px solid rgba(255,193,7,.25);
  border-radius: 8px;
  align-items: start;
}

.guideWarning__icon{
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,193,7,.90);
  line-height: 1.7;
}

.guideWarning__text{
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.80);
  font-weight: 600;
}

@media (max-width: 360px){
  .guideDoc{
    gap: 18px;
  }

  .guideSection__title{
    padding: 14px 16px;
    font-size: 14px;
  }

  .guideSection__body{
    padding: 16px;
  }

  .guideSection__body p{
    font-size: 12px;
  }

  .guideNotice{
    margin-top: 14px;
    gap: 8px;
  }

  .guideNotice__item{
    padding: 10px 12px;
  }

  .guideNotice__icon{
    font-size: 11px;
  }

  .guideNotice__text{
    font-size: 11px;
  }

  .guidePriceBox{
    padding: 16px;
    min-height: 50px;
  }

  .guidePriceBox p{
    font-size: 13px;
  }

  .guideWarning{
    margin-top: 12px;
    padding: 12px 14px;
  }

  .guideWarning__icon{
    font-size: 12px;
  }

  .guideWarning__text{
    font-size: 11px;
  }
}

/* ========================================
   TERMS PAGE
   ======================================== */

.termsDoc{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.termsDoc__intro{
  background: linear-gradient(135deg, rgba(255,193,7,.12), rgba(255,152,0,.08));
  border: 1px solid rgba(255,193,7,.25);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}

.termsDoc__intro p{
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.88);
  font-weight: 700;
}

.termsArticle{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.termsArticle:hover{
  border-color: rgba(78,207,255,.12);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.termsArticle--highlight{
  border-color: rgba(78,207,255,.20);
  background: rgba(45,127,249,.03);
}

.termsArticle--highlight:hover{
  border-color: rgba(78,207,255,.30);
}

.termsArticle__title{
  background: rgba(255,255,255,.04);
  padding: 14px 18px;
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: rgba(78,207,255,.90);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.termsArticle--highlight .termsArticle__title{
  background: rgba(45,127,249,.08);
  color: rgba(78,207,255,.95);
}

.termsArticle__body{
  padding: 18px;
}

.termsClause{
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  margin-bottom: 14px;
  align-items: start;
}

.termsClause:last-child{
  margin-bottom: 0;
}

.termsClause__number{
  font-size: 13px;
  font-weight: 900;
  color: rgba(78,207,255,.75);
  line-height: 1.8;
  flex-shrink: 0;
}

.termsClause__content{
  display: flex;
  flex-direction: column;
}

.termsClause__text{
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255,255,255,.78);
}

.termsClause__text:last-child{
  margin-bottom: 0;
}

.termsSubList{
  margin: 12px 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.termsSubList li{
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  border-left: 2px solid rgba(78,207,255,.25);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.75);
}

.termsSubList li:hover{
  background: rgba(255,255,255,.04);
  border-left-color: rgba(78,207,255,.40);
}

.termsPriceBox{
  margin-top: 18px;
  background: linear-gradient(135deg, rgba(45,127,249,.10), rgba(78,207,255,.08));
  border: 1px solid rgba(78,207,255,.20);
  border-radius: 10px;
  padding: 16px;
  overflow: hidden;
}

.termsPriceBox__title{
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(78,207,255,.95);
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(78,207,255,.15);
}

.termsPriceBox__content{
  min-height: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.termsPriceBox__content p{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  font-weight: 600;
}

@media (max-width: 360px){
  .termsDoc{
    gap: 18px;
  }

  .termsDoc__intro{
    padding: 16px;
  }

  .termsDoc__intro p{
    font-size: 12px;
  }

  .termsArticle__title{
    padding: 12px 16px;
    font-size: 13px;
  }

  .termsArticle__body{
    padding: 16px;
  }

  .termsClause{
    grid-template-columns: 22px 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }

  .termsClause__number{
    font-size: 12px;
  }

  .termsClause__content{
    display: flex;
    flex-direction: column;
  }

  .termsClause__text{
    font-size: 11px;
  }

  .termsSubList{
    margin: 10px 0 0 0;
    gap: 6px;
  }

  .termsSubList li{
    padding: 8px 10px;
    font-size: 11px;
  }

  .termsPriceBox{
    margin-top: 16px;
    padding: 14px;
  }

  .termsPriceBox__title{
    margin-bottom: 10px;
    font-size: 12px;
    padding-bottom: 8px;
  }

  .termsPriceBox__content{
    min-height: 35px;
  }

  .termsPriceBox__content p{
    font-size: 12px;
  }
}

/* ========================================
   DEVICE PAGE
   ======================================== */

.devicePage{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.devicePage__intro{
  background: linear-gradient(135deg, rgba(45,127,249,.10), rgba(78,207,255,.08));
  border: 1px solid rgba(78,207,255,.20);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}

.devicePage__intro p{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
  font-weight: 700;
}

.deviceList{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.deviceItem{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 20px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  align-items: center;
  transition: all 0.3s ease;
}

.deviceItem:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(78,207,255,.25);
  box-shadow: 0 4px 16px rgba(0,0,0,.20);
  transform: translateY(-2px);
}

.deviceItem__icon{
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(45,127,249,.15), rgba(78,207,255,.10));
  border: 1px solid rgba(78,207,255,.30);
  border-radius: 12px;
  flex-shrink: 0;
}

.deviceItem__icon svg{
  stroke: rgba(78,207,255,.85);
}

.deviceItem__content{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deviceItem__name{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: rgba(78,207,255,.95);
}

.deviceItem__version{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
  font-weight: 600;
}

.devicePage__notice{
  background: rgba(255,193,7,.08);
  border: 1px solid rgba(255,193,7,.25);
  border-radius: 10px;
  padding: 16px 18px;
  text-align: center;
}

.devicePage__notice p{
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,193,7,.95);
  font-weight: 700;
}

.devicePage__debug{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 18px;
  margin-top: 8px;
}

.devicePage__debugTitle{
  margin: 0 0 12px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.devicePage__debugInfo{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.devicePage__debugInfo p{
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255,255,255,.70);
  font-family: monospace;
}

.devicePage__debugInfo p strong{
  color: rgba(78,207,255,.80);
  font-weight: 900;
}

@media (max-width: 360px){
  .devicePage{
    gap: 20px;
  }

  .devicePage__intro{
    padding: 16px;
  }

  .devicePage__intro p{
    font-size: 13px;
  }

  .deviceList{
    gap: 14px;
  }

  .deviceItem{
    padding: 18px;
    grid-template-columns: 54px 1fr;
    gap: 14px;
  }

  .deviceItem__icon{
    width: 54px;
    height: 54px;
  }

  .deviceItem__icon svg{
    width: 28px;
    height: 28px;
  }

  .deviceItem__name{
    font-size: 16px;
  }

  .deviceItem__version{
    font-size: 12px;
  }

  .devicePage__notice{
    padding: 14px 16px;
  }

  .devicePage__notice p{
    font-size: 12px;
  }

  .devicePage__debug{
    padding: 16px;
  }

  .devicePage__debugTitle{
    margin-bottom: 10px;
    font-size: 11px;
    padding-bottom: 8px;
  }

  .devicePage__debugInfo p{
    font-size: 10px;
  }
}

/* ========================================
   RETIRE PAGE
   ======================================== */

.retirePage{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.retirePage__thanks{
  background: linear-gradient(135deg, rgba(45,127,249,.12), rgba(78,207,255,.08));
  border: 1px solid rgba(78,207,255,.25);
  border-radius: 12px;
  padding: 20px;
}

.retirePage__thanks p{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(78,207,255,.95);
  font-weight: 900;
}

.retirePage__message{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 20px;
}

.retirePage__message p{
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.78);
}

.retirePage__message p:last-child{
  margin-bottom: 0;
}

.retirePage__important{
  font-weight: 900;
  color: rgba(255,193,7,.95);
}

.retirePage__warning{
  margin: 0;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(220,53,69,.90);
  font-weight: 700;
}

.retireSection{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}

.retireSection__title{
  background: rgba(255,255,255,.04);
  padding: 14px 18px;
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: rgba(78,207,255,.95);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.retireSection__body{
  padding: 18px;
}

.retireSection__notice{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,193,7,.90);
  font-weight: 700;
}

.retireSection__lead{
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
  font-weight: 700;
}

.carrierList{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.carrierItem{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 16px 18px;
  transition: all 0.3s ease;
}

.carrierItem:hover{
  background: rgba(255,255,255,.04);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.carrierItem p{
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255,255,255,.70);
}

.carrierItem p:last-child{
  margin-bottom: 0;
}

.carrierItem a{
  color: rgba(78,207,255,.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(78,207,255,.30);
  transition: all 0.2s ease;
}

.carrierItem a:hover{
  color: rgba(78,207,255,1);
  border-bottom-color: rgba(78,207,255,.70);
}

.carrierItem__name{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.carrierItem__name span{
  font-weight: 900;
  font-size: 14px;
}

.carrierItem__name.au span{
  color: rgba(255,152,0,.95);
}

.carrierItem__name.docomo span{
  color: rgba(220,53,69,.95);
}

.carrierItem__name.softbank span{
  color: rgba(33,150,243,.95);
}

.retire_button{
  margin: 24px 0;
}

.retireBtn{
  display: block;
  padding: 16px 28px;
  background: linear-gradient(135deg, rgba(220,53,69,.75), rgba(183,28,28,.75));
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 900;
  color: white;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220,53,69,.25);
  transition: all 0.3s ease;
}

.retireBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220,53,69,.35);
}

.retireBtn:active{
  transform: translateY(0);
}

.retirePage__ad{
  margin: 20px 0;
  text-align: center;
}

@media (max-width: 360px){
  .retirePage{
    gap: 20px;
  }

  .retirePage__thanks{
    padding: 18px;
  }

  .retirePage__thanks p{
    font-size: 13px;
  }

  .retirePage__message{
    padding: 18px;
  }

  .retirePage__message p{
    font-size: 12px;
    margin-bottom: 12px;
  }

  .retirePage__important{
    font-size: 12px;
  }

  .retirePage__warning{
    font-size: 12px;
  }

  .retireSection{
    border-radius: 10px;
  }

  .retireSection__title{
    padding: 12px 16px;
    font-size: 14px;
  }

  .retireSection__body{
    padding: 16px;
  }

  .retireSection__notice{
    margin-bottom: 10px;
    font-size: 12px;
  }

  .retireSection__lead{
    margin-bottom: 14px;
    font-size: 12px;
  }

  .carrierList{
    gap: 12px;
  }

  .carrierItem{
    padding: 14px 16px;
  }

  .carrierItem p{
    font-size: 11px;
    margin-bottom: 8px;
  }

  .carrierItem__name{
    font-size: 12px;
    padding-bottom: 6px;
  }

  .carrierItem__name span{
    font-size: 13px;
  }

  .retire_button{
    margin: 20px 0;
  }

  .retireBtn{
    padding: 14px 24px;
    font-size: 14px;
  }

  .retirePage__ad{
    margin: 16px 0;
  }
}

/* ========================================
   COMPLETE PAGE
   ======================================== */

.completePage{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.completePage__thanks{
  background: linear-gradient(135deg, rgba(45,127,249,.12), rgba(78,207,255,.08));
  border: 1px solid rgba(78,207,255,.25);
  border-radius: 12px;
  padding: 20px;
}

.completePage__thanks p{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(78,207,255,.95);
  font-weight: 900;
}

.completePage__text{
  margin: 0;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.78);
}

.completePage__message{
  padding: 0 4px;
}

.completePage__message p{
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.78);
}

.completePage__message p:last-child{
  margin-bottom: 0;
}

.completeTable{
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.completeTable tr{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.completeTable tr:last-child{
  border-bottom: none;
}

.completeTable th{
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(78,207,255,.85);
  text-align: left;
  border-right: 1px solid rgba(255,255,255,.08);
  width: 40%;
}

.completeTable td{
  padding: 12px 14px;
  font-size: 13px;
  color: rgba(255,255,255,.80);
}

.completeBtn{
  display: block;
  padding: 16px 28px;
  background: linear-gradient(135deg, rgba(45,127,249,.75), rgba(33,150,243,.75));
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 900;
  color: white;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(45,127,249,.25);
  transition: all 0.3s ease;
}

.completeBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45,127,249,.35);
}

.completeBtn:active{
  transform: translateY(0);
}

.completePage__ad{
  margin: 20px 0;
  text-align: center;
}

.completePage__sectionTitle{
  margin: 32px 0 20px;
  font-size: 16px;
  font-weight: 900;
  color: rgba(78,207,255,.95);
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(78,207,255,.25);
}

.completePage__subTitle{
  margin: 28px 0 16px;
  font-size: 15px;
  font-weight: 900;
  color: rgba(255,193,7,.90);
  padding-left: 10px;
  border-left: 3px solid rgba(255,193,7,.50);
}

.completePage__notes{
  padding: 0 4px;
}

.completePage__notes p{
  margin: 0 0 16px;
  font-size: 11px;
  line-height: 1.8;
  color: rgba(255,255,255,.65);
}

.completePage__notes p:last-child{
  margin-bottom: 0;
}

.completePage__terms{
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 4px;
}

.completeTerm{
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.completeTerm:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.completeTerm__title{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(78,207,255,.85);
}

.completeTerm p{
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.8;
  color: rgba(255,255,255,.68);
}

.completeTerm p:last-child{
  margin-bottom: 0;
}

.completeTerm a{
  color: rgba(78,207,255,.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(78,207,255,.30);
  transition: all 0.2s ease;
}

.completeTerm a:hover{
  color: rgba(78,207,255,1);
  border-bottom-color: rgba(78,207,255,.70);
}

@media (max-width: 360px){
  .completePage{
    gap: 20px;
  }

  .completePage__thanks{
    padding: 18px;
  }

  .completePage__thanks p{
    font-size: 13px;
  }

  .completePage__text{
    font-size: 12px;
  }

  .completePage__message p{
    font-size: 12px;
    margin-bottom: 12px;
  }

  .completeTable th{
    padding: 10px 12px;
    font-size: 12px;
  }

  .completeTable td{
    padding: 10px 12px;
    font-size: 12px;
  }

  .completeBtn{
    padding: 14px 24px;
    font-size: 14px;
  }

  .completePage__ad{
    margin: 18px 0;
  }

  .completePage__sectionTitle{
    margin: 28px 0 18px;
    font-size: 15px;
    padding-bottom: 10px;
  }

  .completePage__subTitle{
    margin: 24px 0 14px;
    font-size: 14px;
  }

  .completePage__notes p{
    font-size: 10px;
    margin-bottom: 14px;
  }

  .completePage__terms{
    gap: 18px;
  }

  .completeTerm{
    padding-bottom: 14px;
  }

  .completeTerm__title{
    margin-bottom: 8px;
    font-size: 12px;
  }

  .completeTerm p{
    font-size: 10px;
    margin-bottom: 6px;
  }
}

/* ========================================
   SURVEY PAGE
   ======================================== */

.surveyPage{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.surveyPage__intro{
  margin: 0 0 24px;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.75);
}

.surveyPage__title{
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 900;
  color: rgba(78,207,255,.90);
  padding-left: 10px;
  border-left: 3px solid rgba(78,207,255,.50);
}

.surveyField{
  margin-bottom: 24px;
}

.surveyField:last-child{
  margin-bottom: 0;
}

.surveyField__title{
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 900;
  color: rgba(78,207,255,.85);
}

.select-wrap{
  width: 100%;
}

.surveySelect{
  width: 100%;
  padding: 14px 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234ECFFF' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.surveySelect:hover{
  border-color: rgba(78,207,255,.30);
  box-shadow: 0 0 16px rgba(45,127,249,.15);
}

.surveySelect:focus{
  border-color: rgba(78,207,255,.50);
  box-shadow: 0 0 20px rgba(45,127,249,.25);
}

.surveySelect option{
  background: rgb(11,15,25);
  color: rgba(255,255,255,.90);
  padding: 10px;
}

.surveyRadio{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.surveyRadio__item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.surveyRadio__item:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(78,207,255,.20);
}

.surveyRadio__input{
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: rgba(45,127,249,1);
}

.surveyRadio__label{
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  user-select: none;
}

.surveyRadio__item:has(.surveyRadio__input:checked){
  background: rgba(45,127,249,.10);
  border-color: rgba(78,207,255,.40);
}

.surveyRadio__item:has(.surveyRadio__input:checked) .surveyRadio__label{
  color: rgba(78,207,255,.95);
  font-weight: 700;
}

.surveyForm{
  width: 100%;
}

.surveyForm__textarea{
  width: 100%;
  min-height: 180px;
  padding: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  resize: vertical;
  outline: none;
  transition: all 0.3s ease;
}

.surveyForm__textarea:focus{
  background: rgba(255,255,255,.06);
  border-color: rgba(78,207,255,.40);
  box-shadow: 0 0 20px rgba(45,127,249,.20);
}

.surveyForm__textarea::placeholder{
  color: rgba(255,255,255,.35);
}

.surveyBtn{
  display: block;
  padding: 16px 28px;
  background: linear-gradient(135deg, rgba(45,127,249,.75), rgba(33,150,243,.75));
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 900;
  color: white;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(45,127,249,.25);
  transition: all 0.3s ease;
}

.surveyBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45,127,249,.35);
}

.surveyBtn:active{
  transform: translateY(0);
}

.surveyPage__ad{
  margin: 20px 0;
  text-align: center;
}

@media (max-width: 360px){
  .surveyPage{
    gap: 20px;
  }

  .surveyPage__intro{
    margin-bottom: 20px;
    font-size: 12px;
  }

  .surveyPage__title{
    margin-bottom: 14px;
    font-size: 14px;
  }

  .surveyField{
    margin-bottom: 20px;
  }

  .surveyField__title{
    margin-bottom: 10px;
    font-size: 13px;
  }

  .surveySelect{
    padding: 12px 16px;
    padding-right: 38px;
    font-size: 13px;
    background-position: right 12px center;
  }

  .surveyRadio{
    gap: 10px;
  }

  .surveyRadio__item{
    padding: 12px 14px;
    gap: 10px;
  }

  .surveyRadio__input{
    width: 18px;
    height: 18px;
  }

  .surveyRadio__label{
    font-size: 13px;
  }

  .surveyForm__textarea{
    min-height: 160px;
    padding: 14px;
    font-size: 12px;
  }

  .surveyBtn{
    padding: 14px 24px;
    font-size: 14px;
  }

  .surveyPage__ad{
    margin: 18px 0;
  }
}


}