/* 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

---------------------------------------------- */
.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: #da063c;  
}

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

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

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

.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 #000;
  border-bottom: 2px solid #000;
  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 4em;
  text-decoration: none;
  color: #8c8c8c;
  border: solid 1px #8c8c8c;
  border-radius: 2px;
  transition: .4s;
  border-radius: 100vh;
}

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

.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;
}


/*--------------------------------------
サイト情報表示
--------------------------------------*/

.order{
  width: 95%;
  margin: 23px auto;
  font-size: 0.85rem;
  line-height: 1;
  color: #494949;
}
.order p{
  margin: 6px 17px;
  font-weight: bold;
}
.order dl{
  padding: 6px 16px 4px;
  border:solid 1px #e3e3e3;
  border-radius: 4px;
}
.order dt{
  padding: 18px 0.5em 12px;
  font-weight: bold;
}
.order dd{
  padding: 0 1.5em 14px;
  border-bottom: solid 1px #e3e3e3;
  font-size: 0.95rem;
  margin: 0 auto;
}
.order dd:last-of-type{
  border: none;
}





@charset "UTF-8";
:root {
      --ink:#302638;
      --muted:#74677c;
      --line:#302638;
      --hot:#ff3d86;
      --pink:#ff75b2;
      --soft:#ffe8f3;
      --cream:#fff7e8;
      --butter:#ffe66d;
      --mint:#76f0d8;
      --blue:#bde8ff;
      --lav:#eee0ff;
      --green:#eafff9;
      --white:#fff;
      --shadow:7px 7px 0 var(--line);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:70px}
    body{
      margin:0;
      font-family:"Hiragino Kaku Gothic ProN","Apple SD Gothic Neo","Malgun Gothic","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 12% 0%,rgba(255,117,178,.22) 0 18%,transparent 34%),
        radial-gradient(circle at 92% 6%,rgba(118,240,216,.26) 0 17%,transparent 32%),
        linear-gradient(180deg,#fff8ec 0%,#fff0f7 52%,#fffaf0 100%);
      letter-spacing:.02em;
    }
    a{color:inherit;text-decoration:none}

    .page{
      max-width:430px;
      min-height:100vh;
      margin:0 auto;
      background:#fffdf8;
      overflow:hidden;
      box-shadow:0 0 44px rgba(44,28,55,.12);
      position:relative;
    }

    .header{
      position:sticky;
      top:0;
      z-index:50;
      height:66px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 18px;
      background:rgba(255,253,248,.95);
      backdrop-filter:blur(16px);
      border-bottom:2px solid rgba(48,38,56,.1);
    }

    /* ロゴ画像 */
    .logo{display:inline-flex;align-items:center;text-decoration:none}
    .logo img{height:46px;width:auto;display:block}
    /* fallback text (画像が読み込めない場合) */
    .logo-mark{
      width:38px;height:38px;
      display:grid;place-items:center;
      border:3px solid var(--line);
      border-radius:15px;
      background:linear-gradient(135deg,var(--butter),var(--pink));
      box-shadow:4px 4px 0 var(--line);
      transform:rotate(-5deg);
      font-weight:900;
      font-size:18px;
    }

    /* ハンバーガーボタン ? pill型 */
    .menu{
      position:relative;z-index:81;
      height:40px;
      display:inline-flex;align-items:center;
      gap:8px;
      padding:0 14px 0 12px;
      border:3px solid var(--line);
      border-radius:999px;
      background:linear-gradient(270deg,#ff3d86,#9b2fff,#e040fb,#ff3d86);
      background-size:300% 100%;
      box-shadow:4px 4px 0 var(--line);
      cursor:pointer;
      overflow:hidden;
      animation:btnColorShift 3.2s ease infinite;
    }
    /* 線アイコン */
    .menu-lines{
      display:flex;flex-direction:column;
      gap:4px;flex-shrink:0;
    }
    .menu-lines span{
      display:block;
      height:2.5px;border-radius:999px;
      background:#fff;
      transform-origin:left center;
      transition:transform .28s ease,opacity .2s ease,width .2s ease;
    }
    .menu-lines span:nth-child(1){width:18px}
    .menu-lines span:nth-child(2){width:12px}
    .menu-lines span:nth-child(3){width:18px}
    /* MENU テキスト */
    .menu-label{
      font-size:11px;font-weight:900;color:#fff;
      letter-spacing:.1em;line-height:1;
      transition:opacity .2s,width .2s,letter-spacing .2s;
      flex-shrink:0;white-space:nowrap;
    }
    /* 開いたとき: X に変形してMENUを隠す */
    .menu.is-open .menu-label{opacity:0;width:0;overflow:hidden;letter-spacing:0}
    .menu.is-open .menu-lines span:nth-child(1){transform:rotate(45deg);width:18px}
    .menu.is-open .menu-lines span:nth-child(2){opacity:0;transform:scaleX(0)}
    .menu.is-open .menu-lines span:nth-child(3){transform:rotate(-45deg);width:18px}

    /* ?? ドロワーオーバーレイ ?? */
    .drawer-overlay{
      position:fixed;inset:0;
      background:rgba(30,10,46,.52);
      z-index:70;
      opacity:0;pointer-events:none;
      transition:opacity .3s ease;
    }
    .drawer-overlay.is-open{opacity:1;pointer-events:auto}

    /* ?? ドロワー本体 ?? */
    .drawer{
      position:fixed;top:0;right:0;
      width:min(300px,88vw);height:100%;
      z-index:80;
      background:#fff;
      transform:translateX(105%);
      transition:transform .32s cubic-bezier(.4,0,.2,1);
      overflow-y:auto;
      display:flex;flex-direction:column;
    }
    .drawer.is-open{transform:translateX(0)}

    /* ドロワーヘッダー */
    .drawer-head{
      padding:16px 18px 14px;
      background:linear-gradient(135deg,#ffd6eb,#fff8c8);
      border-bottom:2px solid var(--line);
      display:flex;align-items:center;justify-content:space-between;
    }
    .drawer-head img{height:32px;width:auto}
    .drawer-close{
      width:40px;height:40px;
      display:grid;place-items:center;
      border:3px solid var(--line);
      border-radius:14px;
      background:#fff;
      box-shadow:3px 3px 0 var(--line);
      font-size:15px;font-weight:900;
      cursor:pointer;flex-shrink:0;
    }
    .drawer-close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}

    /* ナビリスト */
    .drawer-nav{
      list-style:none;margin:0;padding:14px 0;
      flex:1;
    }
    .drawer-nav li{border-bottom:1px solid rgba(48,38,56,.07)}
    .drawer-link{
      display:flex;align-items:center;gap:12px;
      padding:15px 20px;
      font-size:14px;font-weight:900;
      color:var(--ink);text-decoration:none;
      transition:background .15s;
    }
    .drawer-link:active{background:#fff0f7}
    .drawer-link-icon{
      width:34px;height:34px;
      display:grid;place-items:center;
      border-radius:12px;
      font-size:17px;flex-shrink:0;
      border:2px solid;
    }
    .drawer-link:nth-child(1) .drawer-link-icon{background:#fff0f7;border-color:rgba(255,45,120,.3)}
    .drawer-link:nth-child(2) .drawer-link-icon{background:#fffce8;border-color:rgba(255,208,0,.4)}
    .drawer-link:nth-child(3) .drawer-link-icon{background:#edfff9;border-color:rgba(0,204,136,.3)}
    .drawer-link:nth-child(4) .drawer-link-icon{background:#f0e8ff;border-color:rgba(155,47,255,.3)}

    /* ドロワーCTA */
    .drawer-cta{
      padding:16px 18px 32px;
      border-top:2px solid rgba(48,38,56,.08);
    }
    .drawer-btn{
      display:flex;flex-direction:column;
      align-items:flex-start;justify-content:center;
      width:100%;min-height:64px;padding:0 18px;
      border:3px solid var(--line);border-radius:18px;
      overflow:hidden;position:relative;
      background:linear-gradient(270deg,#ff3d86,#9b2fff,#e040fb,#ff6b6b,#ff3d86);
      background-size:400% 100%;
      color:#fff;text-decoration:none;
      box-shadow:5px 5px 0 var(--line);
      font-weight:900;
      animation:btnColorShift 3.2s ease infinite;
      margin-bottom:12px;
    }
    .drawer-btn small{font-size:10px;opacity:.85;font-weight:700;margin-bottom:2px}
    .drawer-btn strong{font-size:15px;font-weight:900;letter-spacing:.03em}
    .drawer-login{
      display:block;text-align:center;
      padding:11px;
      border:2px solid rgba(48,38,56,.14);border-radius:14px;
      color:var(--muted);font-size:13px;font-weight:900;
      text-decoration:none;
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:8px 12px;
      border:2px solid var(--line);
      border-radius:999px;
      background:#fff;
      box-shadow:3px 3px 0 var(--line);
      color:var(--hot);
      font-size:10px;
      font-weight:900;
      letter-spacing:.14em;
      line-height:1;
    }
    .kicker:before{
      content:"";
      width:8px;height:8px;
      border:2px solid var(--line);
      border-radius:50%;
      background:var(--mint);
    }

    .hero{
      position:relative;
      overflow:hidden;
    }
    .hero:not(.hero--in){
      aspect-ratio:3/4;
      background:var(--ink);
    }
    .hero--in{
      overflow:visible;
    }
    .hero-bg{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center top;
      z-index:0;
      display:block;
    }
    .hero--in .hero-bg{
      position:static;
      inset:auto;
      width:100%;
      height:auto;
      object-fit:unset;
      object-position:unset;
    }
    .hero-inner{
      position:absolute;
      bottom:20px;
      left:0;
      right:0;
      z-index:2;
      padding:0 20px;
    }
    .tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:17px;
    }
    .tags span{
      padding:7px 10px;
      border:2px solid rgba(48,38,56,.16);
      border-radius:999px;
      background:#fff;
      color:#6c5d73;
      font-size:11px;
      font-weight:900;
    }

    .deck{
      position:relative;
      z-index:1;
      width:min(100%,350px);
      margin:30px auto 22px;
      height:348px;
    }
    .back-card{
      position:absolute;
      inset:24px 12px auto 12px;
      height:270px;
      border:4px solid var(--line);
      border-radius:34px;
      background:var(--mint);
      box-shadow:8px 8px 0 var(--line);
      transform:rotate(5.5deg);
    }
    .back-card.second{
      inset:14px 18px auto 2px;
      background:var(--butter);
      transform:rotate(-5deg);
    }
    .main-card{
      position:absolute;
      inset:0 16px auto 16px;
      min-height:315px;
      border:4px solid var(--line);
      border-radius:34px;
      background:
        radial-gradient(circle at 85% 8%,rgba(255,230,109,.72),transparent 24%),
        linear-gradient(180deg,#fff 0%,#fff6fb 100%);
      box-shadow:9px 9px 0 var(--line);
      padding:17px 16px 18px;
      transform:rotate(-1.2deg);
      overflow:hidden;
    }
    .main-card:after{
      content:"CARD";
      position:absolute;
      right:-8px;
      bottom:-8px;
      color:rgba(255,61,134,.1);
      font-size:60px;
      font-weight:900;
      letter-spacing:-.08em;
    }
    .card-top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:14px;
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
    }
    .dots{display:flex;gap:5px}
    .dots span{
      width:9px;height:9px;
      border:2px solid var(--line);
      border-radius:50%;
      background:var(--pink);
    }
    .dots span:nth-child(2){background:var(--butter)}
    .dots span:nth-child(3){background:var(--mint)}
    .card-label{
      display:inline-flex;
      padding:6px 9px;
      border:2px solid var(--line);
      border-radius:999px;
      background:var(--soft);
      color:var(--hot);
      font-size:10px;
      font-weight:900;
      letter-spacing:.09em;
    }
    .card-ko{
      margin:16px 0 4px;
      font-size:32px;
      line-height:1.18;
      letter-spacing:-.04em;
      font-weight:900;
    }
    .card-read{
      margin:0 0 16px;
      color:#8a718c;
      font-size:13px;
      font-weight:900;
    }
    .meaning{
      border:3px dashed rgba(48,38,56,.24);
      border-radius:23px;
      background:#fffaf1;
      padding:13px;
      margin-bottom:13px;
    }
    .meaning small,.scene small{
      display:block;
      color:var(--hot);
      font-size:10px;
      font-weight:900;
      letter-spacing:.12em;
      margin-bottom:5px;
    }
    .meaning strong{
      display:block;
      font-size:22px;
      font-weight:900;
    }
    .scene{
      position:relative;
      z-index:1;
      border:3px solid var(--line);
      border-radius:23px;
      background:var(--green);
      padding:13px;
      box-shadow:4px 4px 0 rgba(48,38,56,.2);
    }
    .scene p{
      margin:0;
      font-size:12px;
      line-height:1.65;
      color:#5b5061;
      font-weight:700;
    }
    .sticker{
      position:absolute;
      z-index:4;
      display:grid;
      place-items:center;
      width:78px;height:78px;
      border:3px solid var(--line);
      border-radius:26px;
      box-shadow:5px 5px 0 var(--line);
      text-align:center;
      font-size:13px;
      line-height:1.25;
      font-weight:900;
    }
    .sticker.one{top:58px;right:-8px;background:var(--pink);color:#fff;transform:rotate(9deg)}
    .sticker.two{bottom:24px;left:-4px;background:var(--butter);transform:rotate(-9deg)}

    .actions{
      position:relative;
      z-index:1;
      display:grid;
      gap:11px;
    }
    /* ── CTAボタン カラーシフトアニメーション ── */
    @keyframes btnColorShift{
      0%  {background-position:0% 50%}
      50% {background-position:100% 50%}
      100%{background-position:0% 50%}
    }
    @keyframes btnSweep{
      0%  {left:-80%}
      55% {left:130%}
      100%{left:130%}
    }
    @keyframes petalRise{
      0%  {opacity:0;transform:translateY(0) translateX(0) rotate(-10deg) scale(.5)}
      15% {opacity:.9}
      60% {opacity:.7}
      100%{opacity:0;transform:translateY(-72px) translateX(var(--petal-drift,0px)) rotate(35deg) scale(1.05)}
    }

    .main-btn{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      min-height:66px;
      padding:12px 16px;
      border:3px solid var(--line);
      border-radius:22px;
      position:relative;overflow:hidden;
      background:linear-gradient(270deg,#ff3d86,#9b2fff,#e040fb,#ff6b6b,#ff3d86);
      background-size:400% 100%;
      color:#fff;
      box-shadow:6px 6px 0 var(--line);
      text-align:center;
      font-weight:900;
      animation:btnColorShift 3.2s ease infinite;
    }
    .main-btn::before{
      content:"";
      position:absolute;
      top:0;left:-80%;
      width:55%;height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
      transform:skewX(-18deg);
      animation:btnSweep 2.6s ease-in-out infinite;
      pointer-events:none;
    }
    .main-btn small{margin-bottom:4px;font-size:11px;opacity:.9}
    .main-btn strong{font-size:19px;letter-spacing:.04em}
    .sub-btn{
      display:grid;
      place-items:center;
      min-height:50px;
      border:3px solid var(--line);
      border-radius:18px;
      background:#fff;
      box-shadow:4px 4px 0 var(--line);
      font-weight:900;
    }

    .section{
      position:relative;
      padding:42px 20px;
    }
    .section.cream{
      background:
        radial-gradient(circle at 90% 0%,rgba(118,240,216,.26),transparent 32%),
        linear-gradient(180deg,#fff8ec 0%,#fffdf8 100%);
    }
    .section.pink{
      background:
        radial-gradient(circle at 4% 0%,rgba(255,230,109,.55),transparent 30%),
        linear-gradient(180deg,#ffedf6 0%,#fff7fb 100%);
    }
    .section.dark{
      background:
        radial-gradient(circle at 10% 0%,rgba(255,230,109,.23),transparent 34%),
        radial-gradient(circle at 100% 8%,rgba(255,117,178,.23),transparent 30%),
        linear-gradient(180deg,#30263a 0%,#4b3158 100%);
      color:#fff;
    }
    .section-head{
      text-align:center;
      margin-bottom:24px;
    }
    .section-head h2{
      margin:16px 0 10px;
      font-size:30px;
      line-height:1.2;
      letter-spacing:-.055em;
      font-weight:900;
    }
    .section-head h2 em{
      font-style:normal;
      color:var(--hot);
      background:linear-gradient(transparent 58%,var(--butter) 58%);
    }
    .section-head p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.85;
      font-weight:700;
    }
    .dark .section-head p{color:rgba(255,255,255,.72)}

    /* ── Vivid left-aligned section head ── */
    .section-head--vivid{
      text-align:left;
      margin-bottom:28px;
      position:relative;
      overflow:hidden;
    }
    /* 韓国語ウォーターマーク */
    .section-head--vivid::after{
      content:"\D55C";
      position:absolute;
      right:-8px;top:-18px;
      font-size:130px;
      font-weight:900;
      line-height:1;
      color:var(--hot);
      opacity:.055;
      pointer-events:none;
      z-index:0;
      letter-spacing:0;
    }
    .section-head--vivid .kicker{
      position:relative;
      z-index:1;
      background:var(--hot);
      border-color:var(--hot);
      color:#fff;
      box-shadow:none;
    }
    .section-head--vivid .kicker:before{
      background:rgba(255,255,255,.85);
      border-color:rgba(255,255,255,.4);
    }
    .section-head--vivid h2{
      position:relative;
      z-index:1;
      text-align:left;
      margin:13px 0 10px;
    }
    .section-head--vivid p{
      position:relative;
      z-index:1;
      text-align:left;
    }

    /* moment card title colors matching frame */
    .moment-card:nth-child(1) .moment-card-body h3{color:#ff2d78}
    .moment-card:nth-child(2) .moment-card-body h3{color:#9b2fff}
    .moment-card:nth-child(3) .moment-card-body h3{color:#00aa72}
    .moment-card:nth-child(4) .moment-card-body h3{color:#b8900a}

    /* Features */
    .feature-main{
      display:block;
      min-height:210px;
      padding:22px 18px;
      border:3px solid var(--hot);
      border-radius:20px;
      background:
        radial-gradient(circle at 90% 6%,rgba(255,255,255,.55),transparent 26%),
        radial-gradient(circle at 8% 92%,rgba(255,230,109,.28),transparent 30%),
        linear-gradient(135deg,var(--hot) 0%,#ff75b2 65%,#ffafcf 100%);
      color:#fff;
      box-shadow:0 8px 32px rgba(255,45,120,.32);
      position:relative;
      overflow:hidden;
      margin-bottom:14px;
      transition:transform .12s,box-shadow .12s;
    }
    .feature-main:hover{
      transform:translateY(-2px);
      box-shadow:0 12px 40px rgba(255,45,120,.38);
    }
    .feature-main::after{
      content:attr(data-bg);
      position:absolute;
      right:-8px;bottom:-16px;
      color:rgba(255,255,255,.18);
      font-size:80px;font-weight:900;letter-spacing:-.08em;
      pointer-events:none;line-height:1;
    }
    /* small tag as pill badge */
    .feature-main small{
      display:inline-flex;align-items:center;
      padding:5px 11px;
      border:1.5px solid rgba(255,255,255,.5);border-radius:999px;
      background:rgba(255,255,255,.2);
      font-size:10px;font-weight:900;letter-spacing:.12em;
      margin-bottom:12px;position:relative;z-index:1;
    }
    .feature-card small,.cat-card small,.step-card small,.feed-card small{
      display:block;
      font-size:10px;
      font-weight:900;
      letter-spacing:.13em;
    }
    .feature-main h3{
      position:relative;z-index:1;
      margin:0 0 10px;
      font-size:26px;
      line-height:1.22;
      font-weight:900;
      letter-spacing:-.03em;
    }
    .feature-main p{
      position:relative;z-index:1;
      margin:0 0 18px;
      font-size:13px;
      line-height:1.75;
      font-weight:700;
      opacity:.92;
    }
    .link-pill{
      position:relative;z-index:1;
      display:inline-flex;align-items:center;gap:4px;
      padding:9px 14px;
      border:2px solid var(--line);
      border-radius:999px;
      background:#fff;
      color:var(--ink);
      box-shadow:3px 3px 0 var(--line);
      font-size:12px;
      font-weight:900;
    }
    .feature-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .feature-card{
      display:block;
      min-height:170px;
      padding:16px 14px;
      border:3px solid transparent;
      border-radius:20px;
      background:#fff;
      position:relative;overflow:hidden;
      transition:transform .12s,box-shadow .12s;
    }
    .feature-card:hover{transform:translateY(-2px)}
    /* vivid colored borders matching other sections */
    .feature-card:nth-child(1){
      background:#eefff9;
      border-color:#00cc88;
      box-shadow:0 6px 24px rgba(0,204,136,.22);
    }
    .feature-card:nth-child(2){
      background:#fff8d4;
      border-color:#ffd000;
      box-shadow:0 6px 24px rgba(255,208,0,.28);
    }
    .feature-card:nth-child(1) small{color:#00aa72}
    .feature-card:nth-child(2) small{color:#b8900a}
    .feature-card:nth-child(1) h3{color:#00aa72}
    .feature-card:nth-child(2) h3{color:#b8900a}
    /* korean watermark */
    .feature-card:nth-child(1)::after{
      content:"\B355 \C9C8";position:absolute;right:-6px;bottom:-8px;
      font-size:52px;font-weight:900;line-height:1;opacity:.055;color:#00cc88;
      pointer-events:none;
    }
    .feature-card:nth-child(2)::after{
      content:"\D45C \D604";position:absolute;right:-6px;bottom:-8px;
      font-size:52px;font-weight:900;line-height:1;opacity:.07;color:#b8900a;
      pointer-events:none;
    }
    .feature-card h3{
      position:relative;z-index:1;
      margin:8px 0 7px;
      font-size:17px;
      line-height:1.35;
      font-weight:900;
    }
    .feature-card p{
      position:relative;z-index:1;
      margin:0;
      color:#675b6e;
      font-size:12px;
      line-height:1.62;
      font-weight:700;
    }

    /* practice */
    .step-practice-img{
      width:100%;border-radius:18px;overflow:hidden;
      margin-bottom:18px;
      border:3px solid #9b2fff;
      box-shadow:0 6px 24px rgba(155,47,255,.22);
    }
    .step-practice-img img{width:100%;height:auto;display:block}

    .practice-box{
      border:3px solid #ff2d78;
      border-radius:20px;
      background:
        radial-gradient(circle at 90% 8%,rgba(255,230,109,.38),transparent 28%),
        linear-gradient(135deg,#fff,#fff0f7);
      box-shadow:0 6px 24px rgba(255,45,120,.18);
      padding:18px;
      margin-bottom:18px;
      position:relative;overflow:hidden;
    }
    .practice-box::after{
      content:"\C5F0 \C2B5";
      position:absolute;right:-6px;bottom:-8px;
      font-size:62px;font-weight:900;opacity:.06;
      color:#ff2d78;pointer-events:none;line-height:1;
    }
    .practice-box h3{
      position:relative;z-index:1;
      margin:0 0 7px;
      font-size:20px;font-weight:900;letter-spacing:-.02em;
      color:var(--hot);
    }
    .practice-box p{
      position:relative;z-index:1;
      margin:0;
      color:#675b6e;font-size:13px;line-height:1.72;font-weight:700;
    }

    .step-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .step-card{
      display:block;
      padding:13px 12px;
      border:3px solid transparent;
      border-radius:18px;
      background:#fff;
      overflow:hidden;
      position:relative;
      transition:transform .1s;
    }
    .step-card:active{transform:scale(.98)}
    /* 4-color vivid cycling */
    .step-card:nth-child(4n+1){border-color:#ff2d78;box-shadow:0 5px 16px rgba(255,45,120,.16)}
    .step-card:nth-child(4n+2){border-color:#9b2fff;box-shadow:0 5px 16px rgba(155,47,255,.16)}
    .step-card:nth-child(4n+3){border-color:#00cc88;box-shadow:0 5px 16px rgba(0,204,136,.16)}
    .step-card:nth-child(4n+4){border-color:#ffd000;box-shadow:0 5px 16px rgba(255,208,0,.2)}
    /* step badge */
    .step-card small{
      display:inline-flex;align-items:center;
      padding:3px 10px;border-radius:999px;
      font-size:10px;font-weight:900;letter-spacing:.1em;
      margin-bottom:7px;color:#fff;
    }
    .step-card:nth-child(4n+1) small{background:#ff2d78}
    .step-card:nth-child(4n+2) small{background:#9b2fff}
    .step-card:nth-child(4n+3) small{background:#00cc88}
    .step-card:nth-child(4n+4) small{background:#ffd000;color:#302638}
    /* h3 color matching */
    .step-card:nth-child(4n+1) h3{color:#ff2d78}
    .step-card:nth-child(4n+2) h3{color:#9b2fff}
    .step-card:nth-child(4n+3) h3{color:#00aa72}
    .step-card:nth-child(4n+4) h3{color:#b8900a}
    .step-card h3{
      margin:0 0 5px;font-size:15px;line-height:1.3;font-weight:900;
    }
    .step-card p{
      margin:0;color:#675b6e;font-size:11.5px;line-height:1.55;font-weight:700;
    }

    /* category list */
    .cat-list{display:grid;gap:11px}
    .cat-card{
      display:grid;
      grid-template-columns:56px 1fr auto;
      gap:14px;
      align-items:center;
      padding:14px;
      border:3px solid transparent;
      border-radius:20px;
      background:#fff;
      position:relative;overflow:hidden;
      transition:transform .12s,box-shadow .12s;
    }
    .cat-card:active{transform:scale(.98)}
    /* vivid colored borders per card */
    .cat-card:nth-child(1){border-color:#ff2d78;box-shadow:0 5px 18px rgba(255,45,120,.16)}
    .cat-card:nth-child(2){border-color:#9b2fff;box-shadow:0 5px 18px rgba(155,47,255,.16)}
    .cat-card:nth-child(3){border-color:#00cc88;box-shadow:0 5px 18px rgba(0,204,136,.16)}
    .cat-card:nth-child(4){border-color:#ffd000;box-shadow:0 5px 18px rgba(255,208,0,.2)}
    .cat-card:nth-child(5){border-color:#0099cc;box-shadow:0 5px 18px rgba(0,153,204,.16)}
    .cat-card:nth-child(6){border-color:#ff6b2b;box-shadow:0 5px 18px rgba(255,107,43,.16)}
    /* icon badge: vivid colored circle */
    .cat-icon{
      width:56px;height:56px;
      display:grid;place-items:center;
      border-radius:18px;
      font-size:20px;font-weight:900;color:#fff;
      flex-shrink:0;
    }
    .cat-card:nth-child(1) .cat-icon{background:#ff2d78;box-shadow:0 4px 12px rgba(255,45,120,.35)}
    .cat-card:nth-child(2) .cat-icon{background:#9b2fff;box-shadow:0 4px 12px rgba(155,47,255,.35)}
    .cat-card:nth-child(3) .cat-icon{background:#00cc88;box-shadow:0 4px 12px rgba(0,204,136,.35)}
    .cat-card:nth-child(4) .cat-icon{background:#ffd000;box-shadow:0 4px 12px rgba(255,208,0,.4);color:#302638}
    .cat-card:nth-child(5) .cat-icon{background:#0099cc;box-shadow:0 4px 12px rgba(0,153,204,.35)}
    .cat-card:nth-child(6) .cat-icon{background:#ff6b2b;box-shadow:0 4px 12px rgba(255,107,43,.35)}
    /* category label */
    .cat-body small{
      display:inline-block;
      font-size:10px;font-weight:900;letter-spacing:.1em;
      margin-bottom:3px;
    }
    .cat-card:nth-child(1) .cat-body small{color:#ff2d78}
    .cat-card:nth-child(2) .cat-body small{color:#9b2fff}
    .cat-card:nth-child(3) .cat-body small{color:#00aa72}
    .cat-card:nth-child(4) .cat-body small{color:#b8900a}
    .cat-card:nth-child(5) .cat-body small{color:#0077aa}
    .cat-card:nth-child(6) .cat-body small{color:#cc4400}
    .cat-body h3{
      margin:0 0 3px;
      font-size:16px;font-weight:900;
    }
    .cat-card:nth-child(1) .cat-body h3{color:#ff2d78}
    .cat-card:nth-child(2) .cat-body h3{color:#9b2fff}
    .cat-card:nth-child(3) .cat-body h3{color:#00aa72}
    .cat-card:nth-child(4) .cat-body h3{color:#b8900a}
    .cat-card:nth-child(5) .cat-body h3{color:#0077aa}
    .cat-card:nth-child(6) .cat-body h3{color:#cc4400}
    .cat-body p{
      margin:0;color:#675b6e;
      font-size:11.5px;line-height:1.55;font-weight:700;
    }
    .cat-arrow{
      width:32px;height:32px;
      display:grid;place-items:center;
      border-radius:50%;
      background:rgba(48,38,56,.06);
      font-size:18px;font-weight:900;color:var(--muted);
      flex-shrink:0;
    }

    /* ── PHRASE SAMPLE tabs ── */
    /* dark section head overrides */
    .dark .section-head--vivid::after{color:rgba(255,255,255,.04)}
    .dark .section-head--vivid h2{color:#fff}
    .dark .section-head--vivid h2 em{
      color:var(--butter);
      background:linear-gradient(transparent 54%,rgba(255,230,109,.22) 54%);
    }
    .dark .section-head--vivid p{color:rgba(255,255,255,.68)}
    .dark .section-head--vivid .kicker{
      background:transparent;border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.9);
      box-shadow:none;
    }
    .dark .section-head--vivid .kicker::before{background:var(--mint);border-color:var(--mint)}

    .ps-tab-bar{
      display:grid;grid-template-columns:repeat(3,1fr);
      gap:8px;margin-bottom:18px;
    }
    .ps-tab-btn{
      display:flex;flex-direction:column;align-items:center;gap:4px;
      padding:11px 8px;
      border:3px solid rgba(255,255,255,.2);border-radius:16px;
      background:rgba(255,255,255,.06);
      color:rgba(255,255,255,.55);
      font-size:13px;font-weight:900;cursor:pointer;
      transition:transform .1s,box-shadow .1s,background .15s;
    }
    .ps-tab-btn-icon{font-size:20px;line-height:1}
    /* solid fill on active ? same pattern as kshot-level-btn */
    .ps-tab-btn[data-level="easy"].is-active{
      background:var(--mint);border-color:var(--mint);color:#302638;
      box-shadow:4px 4px 0 rgba(0,0,0,.35);
    }
    .ps-tab-btn[data-level="mid"].is-active{
      background:var(--butter);border-color:var(--butter);color:#302638;
      box-shadow:4px 4px 0 rgba(0,0,0,.35);
    }
    .ps-tab-btn[data-level="hard"].is-active{
      background:var(--hot);border-color:var(--hot);color:#fff;
      box-shadow:4px 4px 0 rgba(0,0,0,.35);
    }
    .ps-panel[hidden]{display:none}
    .ps-panel-label{
      display:flex;align-items:center;gap:8px;
      font-size:11px;font-weight:900;letter-spacing:.12em;
      color:rgba(255,255,255,.55);margin-bottom:14px;
    }
    .ps-list{display:grid;gap:12px;margin-bottom:18px}
    .ps-card{
      display:block;text-decoration:none;
      border:2px solid rgba(255,255,255,.12);border-radius:20px;
      background:rgba(255,255,255,.07);
      padding:16px;position:relative;overflow:hidden;
      transition:transform .12s,box-shadow .12s;
    }
    .ps-card:active{transform:translateY(2px);box-shadow:none}
    .ps-card::before{
      content:"";
      position:absolute;top:0;left:0;right:0;height:2px;
    }
    .ps-card:nth-child(1)::before{background:linear-gradient(90deg,#ff3d86,#ff75b2)}
    .ps-card:nth-child(2)::before{background:linear-gradient(90deg,#9b2fff,#c99cff)}
    .ps-card:nth-child(3)::before{background:linear-gradient(90deg,#00cc88,#76f0d8)}
    .ps-card-head{
      display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;
    }
    .ps-cat{
      display:inline-flex;padding:4px 9px;
      border:1px solid rgba(255,255,255,.22);border-radius:999px;
      background:rgba(255,255,255,.1);
      font-size:10px;font-weight:900;letter-spacing:.1em;color:rgba(255,255,255,.8);
    }
    .ps-no{
      font-size:10px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.06em;
    }
    .ps-ko{
      margin:0 0 5px;
      font-size:22px;line-height:1.3;font-weight:900;letter-spacing:-.03em;
      color:#fff;
    }
    .ps-read{
      margin:0 0 8px;
      font-size:11px;font-weight:700;color:rgba(255,255,255,.5);
      letter-spacing:.04em;
    }
    .ps-ja{
      margin:0 0 12px;
      font-size:13px;font-weight:700;color:rgba(255,255,255,.82);
      line-height:1.6;
    }
    .ps-card-btn{
      display:inline-flex;align-items:center;
      font-size:11px;font-weight:900;letter-spacing:.06em;
      color:rgba(255,255,255,.55);
    }
    .ps-more-wrap{margin-top:4px;}
    .ps-more{
      display:flex;align-items:center;justify-content:center;
      padding:13px 16px;
      border:2px solid rgba(255,255,255,.28);border-radius:18px;
      background:rgba(255,255,255,.08);
      color:rgba(255,255,255,.85);font-size:13px;font-weight:900;
      text-decoration:none;margin-bottom:4px;
      box-shadow:3px 3px 0 rgba(0,0,0,.25);
      transition:transform .1s,box-shadow .1s;
    }
    .ps-more:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.25)}

    /* feed (legacy ? kept for small selector only) */
    .feed-card{display:none}
    .feed-tip{
      border:2px dashed rgba(255,255,255,.45);
      border-radius:18px;
      padding:10px;
      color:rgba(255,255,255,.82);
      font-size:12px;
      line-height:1.6;
      font-weight:700;
    }

    /* ── FINAL CTA ── */
    .final{
      padding:52px 20px 100px;
      background:
        radial-gradient(circle at 6% 12%,rgba(255,45,120,.32),transparent 40%),
        radial-gradient(circle at 94% 6%,rgba(155,47,255,.22),transparent 36%),
        radial-gradient(circle at 50% 100%,rgba(255,210,0,.28),transparent 44%),
        linear-gradient(180deg,#ffeef7 0%,#f9e6ff 55%,#fff9e0 100%);
      position:relative;overflow:hidden;
    }
    .final::before{
      content:"\2726";
      position:absolute;left:14px;top:38px;
      font-size:28px;color:rgba(255,45,120,.4);
      pointer-events:none;
    }
    .final::after{
      content:"\2726";
      position:absolute;right:22px;top:88px;
      font-size:18px;color:rgba(155,47,255,.35);
      pointer-events:none;
    }

    .final .section-head--vivid{margin-bottom:26px}
    .final .section-head--vivid h2{font-size:24px;line-height:1.3}

    /* card box */
    .final-box{
      border:3px solid #ff2d78;
      border-radius:24px;
      overflow:hidden;
      box-shadow:0 14px 52px rgba(255,45,120,.32),0 4px 0 #ff2d78;
      outline:2px solid #ffd000;
      outline-offset:4px;
    }

    /* image ? full bleed */
    .final-visual{width:100%;position:relative}
    .final-visual img{display:block;width:100%;height:auto}
    .final-visual::after{
      content:"";
      position:absolute;bottom:0;left:0;right:0;height:52px;
      background:linear-gradient(to bottom,transparent,#ffd6eb);
    }

    /* vivid pink-butter body */
    .final-body{
      padding:22px 18px 34px;
      background:
        radial-gradient(circle at 92% 4%,rgba(255,210,0,.55),transparent 28%),
        radial-gradient(circle at 4% 92%,rgba(118,240,216,.35),transparent 26%),
        linear-gradient(145deg,#ffd6eb 0%,#ffe8f4 50%,#fff8c8 100%);
      position:relative;overflow:visible;
    }
    .final-body::after{
      content:"\C2DC \C791 \D574 \C694";
      position:absolute;right:-22px;bottom:-8px;
      font-size:52px;font-weight:900;letter-spacing:-.04em;white-space:nowrap;
      color:rgba(255,45,120,.1);pointer-events:none;
      transform:rotate(-5deg);
    }

    /* speech-bubble phrase */
    .final-phrase{
      position:relative;z-index:1;
      margin-bottom:16px;
    }
    .final-phrase-ko{
      display:inline-block;
      padding:10px 16px;
      background:#fff;
      border:2px solid #ff2d78;
      border-radius:16px 16px 16px 4px;
      font-size:14px;font-weight:900;
      color:#ff2d78;
      box-shadow:0 3px 14px rgba(255,45,120,.2);
    }

    /* benefit rows */
    .final-benefits{
      position:relative;z-index:1;
      display:grid;grid-template-columns:1fr;
      gap:8px;margin-bottom:22px;
    }
    .final-benefit{
      display:flex;align-items:center;gap:13px;
      padding:12px 15px;
      border:2px solid;border-radius:16px;
    }
    .final-benefit:nth-child(1){background:#ffd6eb;border-color:#ff2d78;color:#99002b}
    .final-benefit:nth-child(2){background:#fff3a8;border-color:#e6b800;color:#7a5c00}
    .final-benefit:nth-child(3){background:#b8fce8;border-color:#00b87a;color:#005c3a}
    .final-benefit-icon{font-size:22px;flex-shrink:0;line-height:1}
    .final-benefit-label{font-size:13px;font-weight:900;line-height:1.3}

    /* main CTA */
    .final-main-btn{
      position:relative;z-index:1;overflow:hidden;
      display:flex;flex-direction:column;
      align-items:center;justify-content:center;
      width:100%;min-height:80px;padding:0 26px;
      border:3px solid var(--line);border-radius:22px;
      background:linear-gradient(270deg,#ff3d86,#9b2fff,#e040fb,#ff6b6b,#ff3d86);
      background-size:400% 100%;
      color:#fff;
      text-decoration:none;
      box-shadow:6px 6px 0 var(--line);
      animation:btnColorShift 3.2s ease infinite;
    }
    .final-main-btn::before{
      content:"";
      position:absolute;
      top:0;left:-80%;
      width:55%;height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
      transform:skewX(-18deg);
      animation:btnSweep 2.6s ease-in-out infinite;
      pointer-events:none;
    }
    .final-main-btn::after{
      content:"\25B6";
      position:absolute;right:24px;top:50%;transform:translateY(-50%);
      font-size:20px;opacity:.75;
      z-index:1;
    }
    .final-main-btn small{font-size:11px;opacity:.82;font-weight:700;margin-bottom:4px;position:relative;z-index:1}
    .final-main-btn strong{font-size:21px;font-weight:900;letter-spacing:.03em;position:relative;z-index:1}
    .final-main-btn:active{
      transform:translateY(2px);
      animation:none;
      box-shadow:0 2px 12px rgba(255,45,120,.25),0 2px 0 #8a1050;
    }

    /* ── FOOTER ── */
    .footer{
      display:block;
      width:100%;
      margin:0;
      padding:36px 20px 120px;
      background:
        radial-gradient(circle at 8% 0%,rgba(155,47,255,.22),transparent 40%),
        radial-gradient(circle at 92% 100%,rgba(255,61,134,.18),transparent 36%),
        linear-gradient(180deg,#1e0d3a,#0e0820);
      position:relative;overflow:hidden;
      text-align:center;
      box-sizing:border-box;
    }
    /* top rainbow line */
    .footer::before{
      content:"";position:absolute;top:0;left:0;right:0;height:3px;
      background:linear-gradient(90deg,#ff3d86,#9b2fff,#76f0d8,#ffe66d);
    }
    /* watermark */
    .footer::after{
      content:"\D55C \AD6D \C5B4";
      position:absolute;right:-18px;bottom:60px;
      font-size:110px;font-weight:900;line-height:1;letter-spacing:-.06em;
      color:rgba(255,255,255,.04);pointer-events:none;
    }
    .footer-logo{
      display:inline-flex;align-items:center;justify-content:center;
      gap:8px;margin-bottom:6px;
    }
    .footer-logo img{height:34px;width:auto;display:block;opacity:.9}
    .footer p{
      margin:0 0 24px;
      color:rgba(255,255,255,.45);
      font-size:11px;font-weight:700;letter-spacing:.04em;
    }
    /* footer_wrap / footer_list */
    .footer_wrap{position:relative;z-index:1;width:100%;max-width:480px;margin:0 auto;}
    .footer_list{
      list-style:none;margin:0;padding:0;
      display:flex;flex-wrap:wrap;
      justify-content:center;gap:0;
    }
    .footer_list li{
      border-bottom:1px solid rgba(255,255,255,.07);
      width:50%;
      box-sizing:border-box;
    }
    .footer_list li:nth-child(odd){border-right:1px solid rgba(255,255,255,.07)}
    .footer_list li a{
      display:block;padding:12px 14px;
      font-size:12px;font-weight:700;
      color:rgba(255,255,255,.65);
      text-decoration:none;
      transition:color .15s,background .15s;
    }
    .footer_list li a:active{
      color:#fff;background:rgba(255,61,134,.12);
    }
    /* copyright */
    #footer{
      margin-top:24px;padding-top:20px;
      border-top:1px solid rgba(255,255,255,.07);
      text-align:center;
      font-size:10px;font-weight:700;
      color:rgba(255,255,255,.3);
      position:relative;z-index:1;
    }
    /* legacy footer-links (LP内) */
    .footer-links{
      display:flex;flex-wrap:wrap;justify-content:center;
      gap:8px 14px;
      font-size:12px;font-weight:700;
    }
    .footer-links a{color:rgba(255,255,255,.65);text-decoration:none}

    /* =====================================================
       共通フッター（footer_common.html）専用スタイル
       .rkf-footer-* プレフィックスで他CSSと競合しない
    ===================================================== */
    .rkf-footer{
      display:block;
      width:100%;
      margin:0;
      padding:36px 20px 120px;
      background:
        radial-gradient(circle at 8% 0%,rgba(155,47,255,.22),transparent 40%),
        radial-gradient(circle at 92% 100%,rgba(255,61,134,.18),transparent 36%),
        linear-gradient(180deg,#1e0d3a,#0e0820);
      position:relative;overflow:hidden;text-align:center;
      box-sizing:border-box;
    }
    .rkf-footer::before{
      content:"";position:absolute;top:0;left:0;right:0;height:3px;
      background:linear-gradient(90deg,#ff3d86,#9b2fff,#76f0d8,#ffe66d);
    }
    .rkf-footer::after{
      content:"\D55C \AD6D \C5B4";
      position:absolute;right:-18px;bottom:60px;
      font-size:110px;font-weight:900;line-height:1;letter-spacing:-.06em;
      color:rgba(255,255,255,.04);pointer-events:none;
    }
    .rkf-footer-logo{
      display:inline-flex;align-items:center;justify-content:center;
      gap:8px;margin-bottom:6px;
    }
    .rkf-footer-logo img{height:34px;width:auto;display:block;opacity:.9}
    .rkf-footer-tagline{
      margin:0 0 24px;
      color:rgba(255,255,255,.45);
      font-size:11px;font-weight:700;letter-spacing:.04em;
    }
    .rkf-footer-wrap{
      position:relative;z-index:1;
      width:100%;max-width:480px;
      margin:0 auto;
    }
    .rkf-footer-list{
      list-style:none;margin:0;padding:0;
      display:flex;flex-wrap:wrap;
      justify-content:center;gap:0;
      width:100%;
    }
    .rkf-footer-list li{
      border-bottom:1px solid rgba(255,255,255,.07);
      width:50%;box-sizing:border-box;
    }
    .rkf-footer-list li:nth-child(odd){border-right:1px solid rgba(255,255,255,.07)}
    .rkf-footer-list li a{
      display:block;padding:12px 14px;
      font-size:12px;font-weight:700;
      color:rgba(255,255,255,.65);
      text-decoration:none;
      transition:color .15s,background .15s;
    }
    .rkf-footer-list li a:active{
      color:#fff;background:rgba(255,61,134,.12);
    }
    .rkf-footer-copy{
      margin-top:24px;padding-top:20px;
      border-top:1px solid rgba(255,255,255,.07);
      text-align:center;
      font-size:10px;font-weight:700;
      color:rgba(255,255,255,.3);
      position:relative;z-index:1;
    }

    .sticky{
      position:fixed;
      left:50%;bottom:14px;
      transform:translateX(-50%) translateY(20px);
      z-index:60;
      width:min(398px,calc(100% - 28px));

      /* same design as main-btn */
      display:flex;flex-direction:column;
      align-items:center;justify-content:center;
      min-height:66px;padding:12px 20px;
      border:3px solid var(--line);
      border-radius:22px;
      overflow:hidden;
      background:linear-gradient(270deg,#ff3d86,#9b2fff,#e040fb,#ff6b6b,#ff3d86);
      background-size:400% 100%;
      color:#fff;
      box-shadow:6px 6px 0 var(--line);
      text-align:center;
      font-weight:900;
      text-decoration:none;
      animation:btnColorShift 3.2s ease infinite;

      /* hidden by default */
      opacity:0;pointer-events:none;
      transition:opacity .3s ease,transform .3s ease;
    }
    .sticky.is-visible{
      opacity:1;pointer-events:auto;
      transform:translateX(-50%) translateY(0);
    }
    /* sweep shine (same as main-btn::before) */
    .sticky::before{
      content:"";
      position:absolute;
      top:0;left:-80%;
      width:55%;height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
      transform:skewX(-18deg);
      animation:btnSweep 2.6s ease-in-out infinite;
      pointer-events:none;
    }
    .sticky small{
      display:block;
      font-size:11px;opacity:.9;font-weight:700;
      margin-bottom:3px;position:relative;z-index:1;
    }
    .sticky strong{
      display:block;
      font-size:17px;font-weight:900;letter-spacing:.04em;
      position:relative;z-index:1;
    }


    /* extra LP appeal sections */
    .moment-list{
      display:grid;
      gap:14px;
    }
    .moment-card{
      position:relative;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      border-radius:18px;
      border:3px solid transparent;
      color:var(--ink);
      background:#fff;
      transition:transform .12s,box-shadow .12s;
    }
    .moment-card:active{transform:scale(.98)}

    /* vivid colored frame per card */
    .moment-card:nth-child(1){border-color:#ff2d78;box-shadow:0 6px 24px rgba(255,45,120,.22)}
    .moment-card:nth-child(2){border-color:#9b2fff;box-shadow:0 6px 24px rgba(155,47,255,.22)}
    .moment-card:nth-child(3){border-color:#00cc88;box-shadow:0 6px 24px rgba(0,204,136,.22)}
    .moment-card:nth-child(4){border-color:#ffd000;box-shadow:0 6px 24px rgba(255,208,0,.28)}

    /* image */
    .moment-card-img{
      position:relative;
      width:100%;
      overflow:hidden;
    }
    .moment-card-img img{
      width:100%;
      height:auto;
      display:block;
    }

    /* text body */
    .moment-card-body{
      flex:1;
      padding:14px 14px 14px 16px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      position:relative;
      overflow:hidden;
    }
    .moment-card-body::after{
      content:attr(data-ko);
      position:absolute;
      right:-6px;bottom:-10px;
      font-size:48px;
      font-weight:900;
      line-height:1;
      letter-spacing:-.08em;
      opacity:.06;
      color:var(--line);
      pointer-events:none;
    }
    .moment-card:nth-child(1) .moment-card-body{background:#fff9e4}
    .moment-card:nth-child(2) .moment-card-body{background:#edfff9}
    .moment-card:nth-child(3) .moment-card-body{background:#fff0f7}
    .moment-card:nth-child(4) .moment-card-body{background:#f3edff}

    .moment-card h3{
      position:relative;
      z-index:1;
      margin:0 0 6px;
      font-size:15px;
      line-height:1.38;
      font-weight:900;
      letter-spacing:-.02em;
    }
    .moment-card p{
      position:relative;
      z-index:1;
      margin:0;
      color:#675b6e;
      font-size:11.5px;
      line-height:1.65;
      font-weight:600;
    }

    .before-after{
      display:grid;
      gap:20px;
    }
    .ba-card{
      border-radius:20px;
      overflow:hidden;
      border:3px solid transparent;
      background:#fff;
    }
    .ba-card:nth-child(1){border-color:#ff2d78;box-shadow:0 6px 24px rgba(255,45,120,.22)}
    .ba-card:nth-child(2){border-color:#9b2fff;box-shadow:0 6px 24px rgba(155,47,255,.22)}

    /* scene image */
    .ba-img{
      position:relative;
      width:100%;
    }
    .ba-img img{
      width:100%;
      height:auto;
      display:block;
    }
    .ba-scene{
      position:absolute;
      bottom:0;left:0;right:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 14px;
      background:linear-gradient(transparent,rgba(20,8,30,.68));
      color:#fff;
      font-size:12px;
      font-weight:900;
      letter-spacing:.09em;
    }
    .ba-scene-icon{font-size:18px}

    /* rows */
    .ba-body{
      padding:14px;
      display:grid;
      gap:10px;
      background:#fff;
    }
    .ba-row{
      border-radius:14px;
      background:#f5f3f8;
      padding:13px;
    }
    .ba-row small{
      display:inline-flex;
      align-items:center;
      padding:3px 9px;
      border-radius:999px;
      background:rgba(48,38,56,.09);
      color:var(--muted);
      font-size:10px;
      font-weight:900;
      letter-spacing:.1em;
      margin-bottom:8px;
    }
    .ba-row strong{
      display:block;
      font-size:16px;
      line-height:1.4;
      font-weight:900;
    }
    .ba-row p{
      margin:5px 0 0;
      color:#675b6e;
      font-size:12px;
      line-height:1.6;
      font-weight:600;
    }
    .ba-row.after{
      background:linear-gradient(135deg,#e6fff7 0%,#d2f8ed 100%);
    }
    .ba-row.after small{
      background:var(--hot);
      color:#fff;
    }

    /* routine image */
    .routine-img{
      width:100%;
      border-radius:18px;
      overflow:hidden;
      margin-bottom:20px;
      border:3px solid #ff2d78;
      box-shadow:0 6px 24px rgba(255,45,120,.2);
    }
    .routine-img img{
      width:100%;
      height:auto;
      display:block;
    }

    .routine-strip{
      display:grid;
      gap:12px;
    }
    .routine-card{
      display:grid;
      grid-template-columns:52px 1fr;
      gap:14px;
      align-items:center;
      padding:14px 16px;
      border-radius:18px;
      border:3px solid transparent;
      background:#fff;
    }
    .routine-card:nth-child(1){border-color:#ff2d78;box-shadow:0 6px 24px rgba(255,45,120,.18)}
    .routine-card:nth-child(2){border-color:#9b2fff;box-shadow:0 6px 24px rgba(155,47,255,.18)}
    .routine-card:nth-child(3){border-color:#00cc88;box-shadow:0 6px 24px rgba(0,204,136,.18)}

    .routine-num{
      width:52px;
      height:52px;
      display:grid;
      place-items:center;
      border-radius:16px;
      font-size:17px;
      font-weight:900;
      color:#fff;
      flex-shrink:0;
    }
    .routine-card:nth-child(1) .routine-num{background:#ff2d78;box-shadow:0 4px 12px rgba(255,45,120,.35)}
    .routine-card:nth-child(2) .routine-num{background:#9b2fff;box-shadow:0 4px 12px rgba(155,47,255,.35)}
    .routine-card:nth-child(3) .routine-num{background:#00cc88;box-shadow:0 4px 12px rgba(0,204,136,.35)}

    .routine-card:nth-child(1) h3{color:#ff2d78}
    .routine-card:nth-child(2) h3{color:#9b2fff}
    .routine-card:nth-child(3) h3{color:#00aa72}

    .routine-card h3{
      margin:0 0 4px;
      font-size:16px;
      font-weight:900;
    }
    .routine-card p{
      margin:0;
      color:#675b6e;
      font-size:12px;
      line-height:1.6;
      font-weight:600;
    }

    .not-study-box{
      border-radius:20px;
      overflow:hidden;
      border:3px solid #ffd000;
      box-shadow:0 6px 24px rgba(255,208,0,.28);
      background:#fff;
    }
    .not-study-img{
      width:100%;
    }
    .not-study-img img{
      width:100%;
      height:auto;
      display:block;
    }
    .not-study-body{
      position:relative;
      overflow:hidden;
      padding:20px 18px;
      background:
        radial-gradient(circle at 90% 8%,rgba(255,230,109,.45),transparent 32%),
        linear-gradient(135deg,#fff,#fff0f7);
    }
    .not-study-body::after{
      content:"\C88B \C544 \D558 \B294  \AC83 \BD80 \D130";
      position:absolute;
      right:-30px;bottom:-6px;
      color:rgba(255,61,134,.07);
      font-size:38px;
      font-weight:900;
      letter-spacing:-.08em;
      white-space:nowrap;
      transform:rotate(-6deg);
      pointer-events:none;
    }
    .not-study-body .kicker{
      position:relative;
      z-index:1;
      background:var(--hot);
      border-color:var(--hot);
      color:#fff;
      box-shadow:none;
    }
    .not-study-body .kicker::before{
      background:rgba(255,255,255,.85);
      border-color:rgba(255,255,255,.4);
    }
    .not-study-box h3{
      position:relative;
      z-index:1;
      margin:12px 0 10px;
      font-size:24px;
      line-height:1.28;
      letter-spacing:-.04em;
      font-weight:900;
    }
    .not-study-box h3 em{
      font-style:normal;
      color:var(--hot);
      background:linear-gradient(transparent 58%,var(--butter) 58%);
    }
    .not-study-box p{
      position:relative;
      z-index:1;
      margin:0 0 16px;
      color:#675b6e;
      font-size:13px;
      line-height:1.8;
      font-weight:600;
    }
    .mini-badges{
      position:relative;
      z-index:1;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .mini-badges span{
      padding:7px 12px;
      border-radius:999px;
      font-size:11px;
      font-weight:900;
    }
    .mini-badges span:nth-child(1){background:#ff2d78;color:#fff}
    .mini-badges span:nth-child(2){background:#9b2fff;color:#fff}
    .mini-badges span:nth-child(3){background:#00cc88;color:#fff}
    .mini-badges span:nth-child(4){background:#ffd000;color:#302638}
    .mini-badges span:nth-child(5){background:#ff2d78;color:#fff}

    @media (min-width:700px){
      body{background:#f7eef8}
      .page{margin:24px auto;border-radius:36px}
    }

    /* ??????????????????????????????
       K-PHRASE SHOT
    ?????????????????????????????? */
    /* ?? K-PHRASE SHOT ? GAME ZONE ?? */

    /* section override: dark arcade atmosphere */
    .kshot-section{
      overflow:hidden;
      background:
        radial-gradient(circle at 8% 2%,rgba(155,47,255,.35),transparent 40%),
        radial-gradient(circle at 92% 6%,rgba(255,61,134,.28),transparent 36%),
        radial-gradient(circle at 50% 98%,rgba(118,240,216,.18),transparent 38%),
        linear-gradient(180deg,#0e0820 0%,#1e0d3a 50%,#140a2a 100%);
      padding-bottom:52px;
    }
    .kshot-section .section-head--vivid::after{color:rgba(255,255,255,.035)}
    .kshot-section .section-head--vivid h2{color:#fff}
    .kshot-section .section-head--vivid h2 em{
      color:#ffe66d;
      background:linear-gradient(transparent 54%,rgba(255,230,109,.25) 54%);
    }
    .kshot-section .section-head--vivid p{color:rgba(255,255,255,.65)}
    .kshot-section .section-head--vivid .kicker{
      background:transparent;
      border-color:#ff3d86;
      color:#ff3d86;
      box-shadow:0 0 12px rgba(255,61,134,.35),0 0 0 1px rgba(255,61,134,.2);
    }
    .kshot-section .section-head--vivid .kicker::before{
      background:#ff3d86;border-color:#ff3d86;
    }

    /* main game card */
    .kshot-game{
      position:relative;overflow:hidden;
      max-width:100%;
      border:2px solid rgba(255,61,134,.45);
      border-radius:22px;
      background:#0d0820;
      box-shadow:
        0 0 0 1px rgba(155,47,255,.2),
        0 0 48px rgba(155,47,255,.22),
        0 8px 32px rgba(0,0,0,.55);
    }
    /* neon rainbow top stripe */
    .kshot-game::before{
      content:"";
      position:absolute;top:0;left:0;right:0;height:3px;z-index:10;
      background:linear-gradient(90deg,#ff3d86 0%,#9b2fff 40%,#76f0d8 70%,#ffe66d 100%);
    }

    .kshot-screen[hidden]{display:none !important}
    @keyframes kshotScreenIn{
      from{opacity:0;transform:translateY(10px)}
      to{opacity:1;transform:translateY(0)}
    }
    .kshot-screen.is-active{animation:kshotScreenIn .28s ease both}
    @keyframes kshotGlow{
      0%,100%{box-shadow:0 0 18px rgba(255,61,134,.55),0 4px 0 #8a1050}
      50%{box-shadow:0 0 32px rgba(255,61,134,.85),0 4px 0 #8a1050}
    }
    @keyframes kshotPulse{
      0%,100%{opacity:1} 50%{opacity:.7}
    }

    /* ─ START SCREEN ─ */
    .kshot-visual{position:relative;width:100%}
    .kshot-visual img{display:block;width:100%;height:auto}
    .kshot-visual::after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(to bottom,transparent 28%,rgba(13,8,32,.92) 100%);
      pointer-events:none;
    }

    .kshot-start-body{
      padding:20px 18px 24px;
      background:transparent;
      box-sizing:border-box;
      width:100%;
    }
    .kshot-label{
      display:inline-flex;align-items:center;gap:6px;
      padding:6px 12px;
      border:1px solid rgba(255,61,134,.5);border-radius:999px;
      background:rgba(255,61,134,.14);
      color:#ff75b2;font-size:10px;font-weight:900;letter-spacing:.16em;
      margin-bottom:10px;
    }
    .kshot-label::before{
      content:"\2605";font-size:9px;color:#ffe66d;
    }
    .kshot-start-copy{margin-bottom:16px}
    .kshot-start-copy h3{
      margin:8px 0 0;font-size:20px;line-height:1.4;font-weight:900;letter-spacing:-.02em;
      color:#fff;overflow-wrap:break-word;
    }
    .kshot-start-copy p{
      margin:0 0 16px;color:rgba(255,255,255,.6);font-size:13px;line-height:1.75;font-weight:700;
    }

    /* HOW TO PLAY strip */
    .kshot-howto{
      display:flex;align-items:center;justify-content:space-between;
      gap:4px;margin-bottom:18px;
      padding:12px 10px;
      border:1px solid rgba(255,255,255,.1);border-radius:14px;
      background:rgba(255,255,255,.05);
    }
    .kshot-howto-step{
      display:flex;flex-direction:column;align-items:center;gap:6px;
      flex:1;min-width:0;text-align:center;
      font-size:11px;font-weight:700;color:rgba(255,255,255,.75);
      line-height:1.4;
    }
    .kshot-howto-step b{
      display:block;font-size:12px;font-weight:900;color:#fff;margin-top:1px;
    }
    .kshot-howto-icon{
      width:32px;height:32px;flex-shrink:0;
      display:grid;place-items:center;
      border-radius:50%;
      border:1.5px solid rgba(255,61,134,.5);
      background:rgba(255,61,134,.12);
      color:#ff75b2;
      flex-shrink:0;
    }
    .kshot-howto-step:nth-child(3) .kshot-howto-icon{
      border-color:rgba(255,230,109,.5);background:rgba(255,230,109,.12);color:#ffe66d;
    }
    .kshot-howto-step:nth-child(5) .kshot-howto-icon{
      border-color:rgba(118,240,216,.5);background:rgba(118,240,216,.12);color:#76f0d8;
    }
    .kshot-howto-arrow{
      color:rgba(255,255,255,.3);font-size:14px;font-weight:900;
      flex-shrink:0;padding:0 2px;
    }

    /* difficulty select */
    .kshot-levels{
      display:grid;grid-template-columns:repeat(3,1fr);
      gap:8px;margin-bottom:18px;
    }
    .kshot-level-btn{
      border:2px solid rgba(255,255,255,.12);border-radius:14px;
      background:rgba(255,255,255,.06);color:rgba(255,255,255,.55);
      min-height:72px;font-weight:900;font-size:13px;cursor:pointer;
      transition:all .18s;
      padding:10px 6px;line-height:1.3;
    }
    .kshot-level-btn small{display:block;font-size:10px;opacity:.7;margin-top:4px;font-weight:700;}
    /* active states: neon glow per color */
    .kshot-level-btn[data-level="easy"].is-active{
      background:rgba(118,240,216,.15);border-color:#76f0d8;color:#76f0d8;
      box-shadow:0 0 16px rgba(118,240,216,.35),inset 0 0 0 1px rgba(118,240,216,.2);
    }
    .kshot-level-btn[data-level="normal"].is-active{
      background:rgba(255,230,109,.15);border-color:#ffe66d;color:#ffe66d;
      box-shadow:0 0 16px rgba(255,230,109,.35),inset 0 0 0 1px rgba(255,230,109,.2);
    }
    .kshot-level-btn[data-level="hard"].is-active{
      background:rgba(255,61,134,.18);border-color:#ff3d86;color:#ff3d86;
      box-shadow:0 0 16px rgba(255,61,134,.4),inset 0 0 0 1px rgba(255,61,134,.2);
    }

    /* START button: vivid gradient + glow */
    .kshot-start-btn{
      display:flex;align-items:center;justify-content:center;gap:8px;
      width:100%;min-height:64px;
      border:2px solid rgba(255,100,180,.6);border-radius:18px;
      background:linear-gradient(135deg,#ff3d86 0%,#9b2fff 100%);
      color:#fff;font-size:19px;font-weight:900;cursor:pointer;letter-spacing:.06em;
      animation:kshotGlow 2s ease-in-out infinite;
    }
    .kshot-start-btn::after{content:"\25B6";font-size:14px;opacity:.9}
    .kshot-start-btn:active{
      transform:translateY(2px);
      animation:none;
      box-shadow:0 0 10px rgba(255,61,134,.4),0 2px 0 #5e0a30;
    }

    /* ─ PLAY HUD ─ */
    .kshot-hud{
      display:flex;align-items:center;justify-content:space-between;
      gap:6px;padding:10px 12px 8px;
      border-bottom:1px solid rgba(255,255,255,.08);
      overflow:hidden;
    }
    .kshot-hud span,.kshot-quit-btn{
      border-radius:999px;
      padding:7px 12px;font-size:12px;font-weight:900;
      white-space:nowrap;flex-shrink:0;
    }
    .kshot-hud span:first-child{
      background:rgba(255,61,134,.2);border:1px solid rgba(255,61,134,.5);
      color:#ff75b2;
      box-shadow:0 0 10px rgba(255,61,134,.25);
    }
    .kshot-hud span:nth-child(2){
      background:rgba(255,230,109,.18);border:1px solid rgba(255,230,109,.5);
      color:#ffe66d;
      box-shadow:0 0 10px rgba(255,230,109,.2);
    }
    .kshot-quit-btn{
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
      color:rgba(255,255,255,.6);cursor:pointer;
    }

    /* canvas field ? warm cream for high contrast against dark UI */
    .kshot-field{
      position:relative;overflow:hidden;
      max-width:100%;
      background:#fffdf8;
      border-top:1px solid rgba(255,255,255,.08);
    }
    #kshot-canvas{display:block;width:100%;max-width:100%;height:430px;touch-action:none}
    .kshot-help{display:none}  /* idle-hintに統合 */

    /* HTML矢印ヒント ? プレイヤー付近に表示 */
    @keyframes kshot-arrow-bounce{
      0%,100%{transform:translateX(-50%) translateY(0)}
      50%    {transform:translateX(-50%) translateY(-10px)}
    }
    .kshot-idle-hint{
      position:absolute;
      left:50%;bottom:28%;
      transform:translateX(-50%);
      z-index:6;
      pointer-events:none;
      display:flex;flex-direction:column;align-items:center;gap:6px;
      animation:kshot-arrow-bounce 0.85s ease-in-out infinite;
    }
    .kshot-idle-hint.is-hidden{display:none !important}
    .kshot-idle-hint svg{
      filter:drop-shadow(0 2px 6px rgba(255,45,120,.6));
    }
    .kshot-idle-hint-label{
      background:#ffe66d;
      border:2px solid #302638;
      border-radius:999px;
      padding:5px 14px;
      font-size:12px;font-weight:900;
      color:#302638;
      box-shadow:2px 2px 0 #302638;
      white-space:nowrap;
    }

    /* ─ RESULT ─ */
    .kshot-screen--result{padding:14px}
    .kshot-result{
      border:2px solid rgba(155,47,255,.5);border-radius:24px;
      background:
        radial-gradient(circle at 10% 0%,rgba(255,230,109,.2),transparent 36%),
        radial-gradient(circle at 95% 5%,rgba(155,47,255,.25),transparent 32%),
        linear-gradient(160deg,#1e0d3a 0%,#30263a 100%);
      color:#fff;
      padding:20px 18px;
      box-shadow:0 0 32px rgba(155,47,255,.3),0 0 0 1px rgba(155,47,255,.15);
    }
    .kshot-result-head{
      display:flex;align-items:center;justify-content:space-between;
      gap:10px;margin-bottom:14px;
    }
    .kshot-result-head strong{
      color:#ffe66d;font-size:30px;font-weight:900;letter-spacing:-.02em;
      text-shadow:0 0 16px rgba(255,230,109,.5);
    }
    .kshot-result-head--fail strong{
      color:#ff6b9d;text-shadow:0 0 16px rgba(255,107,157,.5);
    }
    .kshot-sample-card{
      display:block;text-decoration:none;
      background:rgba(255,255,255,.08);border:2px solid rgba(255,45,120,.4);
      border-radius:18px;padding:16px;margin:12px 0;text-align:left;
      position:relative;overflow:hidden;
      transition:transform .12s,box-shadow .12s;
    }
    .kshot-sample-card:active{transform:translateY(2px);}
    .kshot-sample-cta{
      display:block;margin-top:10px;
      font-size:11px;font-weight:900;letter-spacing:.06em;
      color:#ff6bab;
    }
    .kshot-sample-card::before{
      content:"";position:absolute;top:0;left:0;right:0;height:3px;
      background:linear-gradient(90deg,#ff2d78,#9b2fff);
    }
    .kshot-sample-cat{
      display:inline-flex;padding:3px 10px;
      border:1px solid rgba(255,255,255,.2);border-radius:999px;
      background:rgba(255,255,255,.08);
      font-size:10px;font-weight:900;letter-spacing:.1em;color:rgba(255,255,255,.7);
      margin-bottom:10px;
    }
    .kshot-sample-ko{
      margin:0 0 6px;font-size:20px;font-weight:900;color:#fff;
      line-height:1.3;letter-spacing:-.02em;
    }
    .kshot-sample-ja{
      margin:0;font-size:12px;font-weight:700;color:rgba(255,255,255,.7);
      line-height:1.5;
    }
    .kshot-fail-msg{
      text-align:center;color:rgba(255,255,255,.75);font-size:14px;
      font-weight:700;margin:0 0 20px;line-height:1.6;
    }
    .kshot-retry-main-btn{
      display:grid;place-items:center;width:100%;min-height:56px;
      border:3px solid #ff2d78;border-radius:20px;
      background:linear-gradient(135deg,#ff2d78,#9b2fff);
      color:#fff;font-size:17px;font-weight:900;letter-spacing:.04em;
      cursor:pointer;margin-bottom:12px;
      box-shadow:0 4px 18px rgba(255,45,120,.45);
    }
    .kshot-result-head span{
      border:1px solid rgba(255,255,255,.25);border-radius:999px;
      background:rgba(255,255,255,.08);
      padding:6px 11px;font-size:10px;font-weight:900;letter-spacing:.12em;
      color:rgba(255,255,255,.8);
    }
    .kshot-result-main{
      border:1px solid rgba(255,255,255,.14);border-radius:20px;
      background:rgba(255,255,255,.06);padding:14px;margin-bottom:14px;
    }
    .kshot-result-main small{
      display:block;color:#ffe66d;font-size:10px;font-weight:900;
      letter-spacing:.14em;margin-bottom:6px;
    }
    .kshot-result-main h3{margin:0 0 7px;color:#fff;font-size:21px;line-height:1.35;font-weight:900}
    .kshot-result-main p{margin:0;color:rgba(255,255,255,.75);font-size:13px;line-height:1.75;font-weight:600}
    .kshot-result-btn{
      display:grid;place-items:center;width:100%;min-height:56px;
      border:2px solid rgba(255,230,109,.6);border-radius:18px;
      background:linear-gradient(135deg,#ffe66d,#ffb800);color:#302638;
      box-shadow:0 0 20px rgba(255,230,109,.3);
      font-weight:900;font-size:16px;
      text-decoration:none;text-align:center;margin-bottom:10px;
    }
    .kshot-retry-btn{
      display:grid;place-items:center;width:100%;min-height:46px;
      border:1px solid rgba(255,255,255,.18);border-radius:16px;
      background:rgba(255,255,255,.05);color:rgba(255,255,255,.65);
      font-weight:900;font-size:14px;cursor:pointer;
    }
    @media(max-width:480px){
      .kshot-game{border-radius:18px}
      #kshot-canvas{height:360px}
      .kshot-level-btn{font-size:11px;padding:5px 3px}
      .kshot-visual::before{font-size:18px;bottom:14px}
      .kshot-howto{gap:1px;padding:8px 6px}
      .kshot-howto-icon{width:28px;height:28px}
      .kshot-howto-step{font-size:9px}
      .kshot-hud span,.kshot-quit-btn{padding:5px 8px;font-size:10px}
    }