@charset "UTF-8";

:root {
    
    /* スペーシング */
    --u-spacing-1: 4px;
    --u-spacing-2: 8px;
    --u-spacing-3: 12px;
    --u-spacing-4: 16px;
    --u-spacing-5: 24px;
    --u-spacing-6: 32px;
    --u-spacing-7: 40px;
    --u-spacing-8: 48px;
    --u-spacing-9: 64px;
    --u-spacing-10: 80px;

    /* カスタムカラー定義 */
    --u-color-red: #d80c18;
    --u-color-pink: #e50a84;
    --u-color-yellow: #edc455;
    --u-color-yellow-light: #fefce7;
    --u-color-brown: #af7c5c;
    --u-color-gray: #9f9f9f;
    --u-color-gray-light: #f6f6f6;
    --u-color-gray-1.5xlight: #e7e7e7;
    --u-color-gray-2xlight: #a9a9a9;
    --u-color-gray-medium: #c7c7c7;
    --u-color-gray-dark: #676767;
    --u-color-gray-2xdark: #2b2b2b;
    --u-color-white: #ffffff;
    --u-color-black: #1c1c1c;
    --u-color-blue: #5053f0;
    --u-color-blue-light: #008fcf;
    --u-color-blue-1.5xlight: #42bafa;
    --u-color-green: #00ac57;
    --u-color-green-light: #288f1c;

    /* 旧comで使用されていたテキストリンクなどに使用されていた青色*/
    --u-color-blue-old: #0164a3;

     /* フォントサイズ */
    --u-text-xs: 10px;
    --u-text-sm: 12px;
    --u-text-base: 14px;
    --u-text-lg: 16px;
    --u-text-xl: 18px;
    --u-text-2xl: 20px;
    --u-text-3xl: 22px;
    --u-text-4xl: 24px;
}

    
    /* ============================================
       Margin Utilities (u-m-*)
       ============================================ */
    
    /* All sides */
    .u-m-1 { margin: var(--u-spacing-1); }
    .u-m-2 { margin: var(--u-spacing-2); }
    .u-m-3 { margin: var(--u-spacing-3); }
    .u-m-4 { margin: var(--u-spacing-4); }
    .u-m-5 { margin: var(--u-spacing-5); }
    .u-m-6 { margin: var(--u-spacing-6); }
    .u-m-7 { margin: var(--u-spacing-7); }
    .u-m-8 { margin: var(--u-spacing-8); }
    .u-m-9 { margin: var(--u-spacing-9); }
    .u-m-10 { margin: var(--u-spacing-10); }
  
    /* Top */
    .u-mt-1 { margin-top: var(--u-spacing-1); }
    .u-mt-2 { margin-top: var(--u-spacing-2); }
    .u-mt-3 { margin-top: var(--u-spacing-3); }
    .u-mt-4 { margin-top: var(--u-spacing-4); }
    .u-mt-5 { margin-top: var(--u-spacing-5); }
    .u-mt-6 { margin-top: var(--u-spacing-6); }
    .u-mt-7 { margin-top: var(--u-spacing-7); }
    .u-mt-8 { margin-top: var(--u-spacing-8); }
    .u-mt-9 { margin-top: var(--u-spacing-9); }
    .u-mt-10 { margin-top: var(--u-spacing-10); }
  
    /* Right */
    .u-mr-1 { margin-right: var(--u-spacing-1); }
    .u-mr-2 { margin-right: var(--u-spacing-2); }
    .u-mr-3 { margin-right: var(--u-spacing-3); }
    .u-mr-4 { margin-right: var(--u-spacing-4); }
    .u-mr-5 { margin-right: var(--u-spacing-5); }
    .u-mr-6 { margin-right: var(--u-spacing-6); }
    .u-mr-7 { margin-right: var(--u-spacing-7); }
    .u-mr-8 { margin-right: var(--u-spacing-8); }
    .u-mr-9 { margin-right: var(--u-spacing-9); }
    .u-mr-10 { margin-right: var(--u-spacing-10); }
  
    /* Bottom */
    .u-mb-1 { margin-bottom: var(--u-spacing-1); }
    .u-mb-2 { margin-bottom: var(--u-spacing-2); }
    .u-mb-3 { margin-bottom: var(--u-spacing-3); }
    .u-mb-4 { margin-bottom: var(--u-spacing-4); }
    .u-mb-5 { margin-bottom: var(--u-spacing-5); }
    .u-mb-6 { margin-bottom: var(--u-spacing-6); }
    .u-mb-7 { margin-bottom: var(--u-spacing-7); }
    .u-mb-8 { margin-bottom: var(--u-spacing-8); }
    .u-mb-9 { margin-bottom: var(--u-spacing-9); }
    .u-mb-10 { margin-bottom: var(--u-spacing-10); }
  
    /* Left */
    .u-ml-1 { margin-left: var(--u-spacing-1); }
    .u-ml-2 { margin-left: var(--u-spacing-2); }
    .u-ml-3 { margin-left: var(--u-spacing-3); }
    .u-ml-4 { margin-left: var(--u-spacing-4); }
    .u-ml-5 { margin-left: var(--u-spacing-5); }
    .u-ml-6 { margin-left: var(--u-spacing-6); }
    .u-ml-7 { margin-left: var(--u-spacing-7); }
    .u-ml-8 { margin-left: var(--u-spacing-8); }
    .u-ml-9 { margin-left: var(--u-spacing-9); }
    .u-ml-10 { margin-left: var(--u-spacing-10); }
  
    /* Horizontal (X-axis) */
    .u-mx-1 { margin-left: var(--u-spacing-1); margin-right: var(--u-spacing-1); }
    .u-mx-2 { margin-left: var(--u-spacing-2); margin-right: var(--u-spacing-2); }
    .u-mx-3 { margin-left: var(--u-spacing-3); margin-right: var(--u-spacing-3); }
    .u-mx-4 { margin-left: var(--u-spacing-4); margin-right: var(--u-spacing-4); }
    .u-mx-5 { margin-left: var(--u-spacing-5); margin-right: var(--u-spacing-5); }
    .u-mx-6 { margin-left: var(--u-spacing-6); margin-right: var(--u-spacing-6); }
    .u-mx-7 { margin-left: var(--u-spacing-7); margin-right: var(--u-spacing-7); }
    .u-mx-8 { margin-left: var(--u-spacing-8); margin-right: var(--u-spacing-8); }
    .u-mx-9 { margin-left: var(--u-spacing-9); margin-right: var(--u-spacing-9); }
    .u-mx-10 { margin-left: var(--u-spacing-10); margin-right: var(--u-spacing-10); }
  
    /* Vertical (Y-axis) */
    .u-my-1 { margin-top: var(--u-spacing-1); margin-bottom: var(--u-spacing-1); }
    .u-my-2 { margin-top: var(--u-spacing-2); margin-bottom: var(--u-spacing-2); }
    .u-my-3 { margin-top: var(--u-spacing-3); margin-bottom: var(--u-spacing-3); }
    .u-my-4 { margin-top: var(--u-spacing-4); margin-bottom: var(--u-spacing-4); }
    .u-my-5 { margin-top: var(--u-spacing-5); margin-bottom: var(--u-spacing-5); }
    .u-my-6 { margin-top: var(--u-spacing-6); margin-bottom: var(--u-spacing-6); }
    .u-my-7 { margin-top: var(--u-spacing-7); margin-bottom: var(--u-spacing-7); }
    .u-my-8 { margin-top: var(--u-spacing-8); margin-bottom: var(--u-spacing-8); }
    .u-my-9 { margin-top: var(--u-spacing-9); margin-bottom: var(--u-spacing-9); }
    .u-my-10 { margin-top: var(--u-spacing-10); margin-bottom: var(--u-spacing-10); }
  
    /* ============================================
       Padding Utilities (u-p-*)
       ============================================ */
    
    /* All sides */
    .u-p-1 { padding: var(--u-spacing-1); }
    .u-p-2 { padding: var(--u-spacing-2); }
    .u-p-3 { padding: var(--u-spacing-3); }
    .u-p-4 { padding: var(--u-spacing-4); }
    .u-p-5 { padding: var(--u-spacing-5); }
    .u-p-6 { padding: var(--u-spacing-6); }
    .u-p-7 { padding: var(--u-spacing-7); }
    .u-p-8 { padding: var(--u-spacing-8); }
    .u-p-9 { padding: var(--u-spacing-9); }
    .u-p-10 { padding: var(--u-spacing-10); }
  
    /* Top */
    .u-pt-1 { padding-top: var(--u-spacing-1); }
    .u-pt-2 { padding-top: var(--u-spacing-2); }
    .u-pt-3 { padding-top: var(--u-spacing-3); }
    .u-pt-4 { padding-top: var(--u-spacing-4); }
    .u-pt-5 { padding-top: var(--u-spacing-5); }
    .u-pt-6 { padding-top: var(--u-spacing-6); }
    .u-pt-7 { padding-top: var(--u-spacing-7); }
    .u-pt-8 { padding-top: var(--u-spacing-8); }
    .u-pt-9 { padding-top: var(--u-spacing-9); }
    .u-pt-10 { padding-top: var(--u-spacing-10); }
  
    /* Right */
    .u-pr-1 { padding-right: var(--u-spacing-1); }
    .u-pr-2 { padding-right: var(--u-spacing-2); }
    .u-pr-3 { padding-right: var(--u-spacing-3); }
    .u-pr-4 { padding-right: var(--u-spacing-4); }
    .u-pr-5 { padding-right: var(--u-spacing-5); }
    .u-pr-6 { padding-right: var(--u-spacing-6); }
    .u-pr-7 { padding-right: var(--u-spacing-7); }
    .u-pr-8 { padding-right: var(--u-spacing-8); }
    .u-pr-9 { padding-right: var(--u-spacing-9); }
    .u-pr-10 { padding-right: var(--u-spacing-10); }
  
    /* Bottom */
    .u-pb-1 { padding-bottom: var(--u-spacing-1); }
    .u-pb-2 { padding-bottom: var(--u-spacing-2); }
    .u-pb-3 { padding-bottom: var(--u-spacing-3); }
    .u-pb-4 { padding-bottom: var(--u-spacing-4); }
    .u-pb-5 { padding-bottom: var(--u-spacing-5); }
    .u-pb-6 { padding-bottom: var(--u-spacing-6); }
    .u-pb-7 { padding-bottom: var(--u-spacing-7); }
    .u-pb-8 { padding-bottom: var(--u-spacing-8); }
    .u-pb-9 { padding-bottom: var(--u-spacing-9); }
    .u-pb-10 { padding-bottom: var(--u-spacing-10); }
  
    /* Left */
    .u-pl-1 { padding-left: var(--u-spacing-1); }
    .u-pl-2 { padding-left: var(--u-spacing-2); }
    .u-pl-3 { padding-left: var(--u-spacing-3); }
    .u-pl-4 { padding-left: var(--u-spacing-4); }
    .u-pl-5 { padding-left: var(--u-spacing-5); }
    .u-pl-6 { padding-left: var(--u-spacing-6); }
    .u-pl-7 { padding-left: var(--u-spacing-7); }
    .u-pl-8 { padding-left: var(--u-spacing-8); }
    .u-pl-9 { padding-left: var(--u-spacing-9); }
    .u-pl-10 { padding-left: var(--u-spacing-10); }
  
    /* Horizontal (X-axis) */
    .u-px-1 { padding-left: var(--u-spacing-1); padding-right: var(--u-spacing-1); }
    .u-px-2 { padding-left: var(--u-spacing-2); padding-right: var(--u-spacing-2); }
    .u-px-3 { padding-left: var(--u-spacing-3); padding-right: var(--u-spacing-3); }
    .u-px-4 { padding-left: var(--u-spacing-4); padding-right: var(--u-spacing-4); }
    .u-px-5 { padding-left: var(--u-spacing-5); padding-right: var(--u-spacing-5); }
    .u-px-6 { padding-left: var(--u-spacing-6); padding-right: var(--u-spacing-6); }
    .u-px-7 { padding-left: var(--u-spacing-7); padding-right: var(--u-spacing-7); }
    .u-px-8 { padding-left: var(--u-spacing-8); padding-right: var(--u-spacing-8); }
    .u-px-9 { padding-left: var(--u-spacing-9); padding-right: var(--u-spacing-9); }
    .u-px-10 { padding-left: var(--u-spacing-10); padding-right: var(--u-spacing-10); }
  
    /* Vertical (Y-axis) */
    .u-py-1 { padding-top: var(--u-spacing-1); padding-bottom: var(--u-spacing-1); }
    .u-py-2 { padding-top: var(--u-spacing-2); padding-bottom: var(--u-spacing-2); }
    .u-py-3 { padding-top: var(--u-spacing-3); padding-bottom: var(--u-spacing-3); }
    .u-py-4 { padding-top: var(--u-spacing-4); padding-bottom: var(--u-spacing-4); }
    .u-py-5 { padding-top: var(--u-spacing-5); padding-bottom: var(--u-spacing-5); }
    .u-py-6 { padding-top: var(--u-spacing-6); padding-bottom: var(--u-spacing-6); }
    .u-py-7 { padding-top: var(--u-spacing-7); padding-bottom: var(--u-spacing-7); }
    .u-py-8 { padding-top: var(--u-spacing-8); padding-bottom: var(--u-spacing-8); }
    .u-py-9 { padding-top: var(--u-spacing-9); padding-bottom: var(--u-spacing-9); }
    .u-py-10 { padding-top: var(--u-spacing-10); padding-bottom: var(--u-spacing-10); }
  
    /* ============================================
       Text Color Utilities (u-text-*)
       ============================================ */
    
    .u-text-red { color: var(--u-color-red); }
    .u-text-pink { color: var(--u-color-pink); }
    .u-text-yellow { color: var(--u-color-yellow); }
    .u-text-yellow-light { color: var(--u-color-yellow-light); }
    .u-text-brown { color: var(--u-color-brown); }
    .u-text-gray { color: var(--u-color-gray); }
    .u-text-gray-light { color: var(--u-color-gray-light); }
    .u-text-gray-1\.5xlight { color: var(--u-color-gray-1.5xlight); }
    .u-text-gray-2xlight { color: var(--u-color-gray-2xlight); }
    .u-text-gray-medium { color: var(--u-color-gray-medium); }
    .u-text-gray-dark { color: var(--u-color-gray-dark); }
    .u-text-gray-2xdark { color: var(--u-color-gray-2xdark); }
    .u-text-white { color: var(--u-color-white); }
    .u-text-black { color: var(--u-color-black); }
    .u-text-blue { color: var(--u-color-blue); }
    .u-text-blue-light { color: var(--u-color-blue-light); }
    .u-text-blue-1\.5xlight { color: var(--u-color-blue-1.5xlight); }
    .u-text-green { color: var(--u-color-green); }
    .u-text-green-light { color: var(--u-color-green-light); }
  
    /* ============================================
       Font Size Utilities (u-text-*)
       ============================================ */
    
    .u-text-xs { font-size: var(--u-text-xs); }
    .u-text-sm { font-size: var(--u-text-sm); }
    .u-text-base { font-size: var(--u-text-base); }
    .u-text-lg { font-size: var(--u-text-lg); }
    .u-text-xl { font-size: var(--u-text-xl); }
    .u-text-2xl { font-size: var(--u-text-2xl); }
    .u-text-3xl { font-size: var(--u-text-3xl); }
    .u-text-4xl { font-size: var(--u-text-4xl); }

    /* ============================================
       Text Utilities (u-text-*)
       ============================================ */

    .u-text-bold { font-weight: bold; }
    .u-text-normal { font-weight: normal; }
    .u-text-italic { font-style: italic; }
    .u-text-underline { text-decoration: underline; }
    .u-text-overline { text-decoration: overline; }
    .u-text-line-through { text-decoration: line-through; }
    .u-text-uppercase { text-transform: uppercase; }
    .u-text-lowercase { text-transform: lowercase; }
    .u-text-capitalize { text-transform: capitalize; }
    .u-text-hover-cursor:hover { cursor: pointer; }
  
    /* ============================================
       Background Color Utilities (u-bg-*)
       ============================================ */
    
    .u-bg-red { background-color: var(--u-color-red); }
    .u-bg-pink { background-color: var(--u-color-pink); }
    .u-bg-yellow { background-color: var(--u-color-yellow); }
    .u-bg-yellow-light { background-color: var(--u-color-yellow-light); }
    .u-bg-brown { background-color: var(--u-color-brown); }
    .u-bg-gray { background-color: var(--u-color-gray); }
    .u-bg-gray-light { background-color: var(--u-color-gray-light); }
    .u-bg-gray-1\.5xlight { background-color: var(--u-color-gray-1.5xlight); }
    .u-bg-gray-2xlight { background-color: var(--u-color-gray-2xlight); }
    .u-bg-gray-medium { background-color: var(--u-color-gray-medium); }
    .u-bg-gray-dark { background-color: var(--u-color-gray-dark); }
    .u-bg-gray-2xdark { background-color: var(--u-color-gray-2xdark); }
    .u-bg-white { background-color: var(--u-color-white); }
    .u-bg-black { background-color: var(--u-color-black); }
    .u-bg-blue { background-color: var(--u-color-blue); }
    .u-bg-blue-light { background-color: var(--u-color-blue-light); }
    .u-bg-blue-1\.5xlight { background-color: var(--u-color-blue-1.5xlight); }
    .u-bg-green { background-color: var(--u-color-green); }
    .u-bg-green-light { background-color: var(--u-color-green-light); }
  
    /* ============================================
       Border Color Utilities (u-border-*)
       ============================================ */
    
    .u-border-red { border-color: var(--u-color-red); }
    .u-border-pink { border-color: var(--u-color-pink); }
    .u-border-yellow { border-color: var(--u-color-yellow); }
    .u-border-yellow-light { border-color: var(--u-color-yellow-light); }
    .u-border-brown { border-color: var(--u-color-brown); }
    .u-border-gray { border-color: var(--u-color-gray); }
    .u-border-gray-light { border-color: var(--u-color-gray-light); }
    .u-border-gray-1\.5xlight { border-color: var(--u-color-gray-1.5xlight); }
    .u-border-gray-2xlight { border-color: var(--u-color-gray-2xlight); }
    .u-border-gray-medium { border-color: var(--u-color-gray-medium); }
    .u-border-gray-dark { border-color: var(--u-color-gray-dark); }
    .u-border-gray-2xdark { border-color: var(--u-color-gray-2xdark); }
    .u-border-white { border-color: var(--u-color-white); }
    .u-border-black { border-color: var(--u-color-black); }
    .u-border-blue { border-color: var(--u-color-blue); }
    .u-border-blue-light { border-color: var(--u-color-blue-light); }
    .u-border-blue-1\.5xlight { border-color: var(--u-color-blue-1.5xlight); }
    .u-border-green { border-color: var(--u-color-green); }
    .u-border-green-light { border-color: var(--u-color-green-light); }

  /* ============================================
     Text Link Utilities (u-text-link-*)
     ============================================ */

    .u-text-link {
        color: var(--u-color-red);
        text-decoration: underline;
    }
    
    .u-text-link-old {
        color: var(--u-color-blue-old);
        text-decoration: none;
    }

    .u-text-link-old:hover {
        opacity: 0.7;
    }

    /* リンクテキストの前に三角形を追加 */
    .u-text-link.u-triangle,
    .u-text-link-old.u-triangle {
      padding-left: 8px;
    }

   .u-text-link.u-triangle::before,
   .u-text-link-old.u-triangle::before {
      content: "";
      display: inline-block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 4px 0 4px 6px; /* 上 右 下 左 */
      border-color: transparent transparent transparent var(--u-color-gray-dark); /* 三角形の色 */
      margin-right: 8px; /* テキストとの間隔 */
      vertical-align: middle;
   }

      /* ============================================
     Unordered List Utilities 
     ============================================ */    

    .u-unordered-list {
        list-style-type: disc;
        padding-left: 20px;
    }

    .u-ordered-list {
        list-style-type: decimal;
        padding-left: 20px;
    }



      /* ============================================
     Button Utilities (u-btn-*)
     ============================================ */

      /* ボタン：歌詞 */
      .u-btn-kashi {
         display: inline-flex !important;
         width: 57px !important;
         height: 32px !important;
         justify-content: center !important;
         align-items: center !important;
         column-gap: 5px !important;
         box-sizing: border-box !important;
         cursor: pointer !important;
         font-size: var(--u-text-xs) !important;
         font-weight: 500 !important;
         line-height: calc(1 / .75) !important;
         text-decoration: none !important;
         color: var(--u-color-black) !important;
         background-color: var(--u-color-white) !important;
         border-color: var(--u-color-black) !important;
         border-style: solid !important;
         border-width: 1px !important;
         border-radius: 4px !important;
      }
      .u-btn-kashi::before {
         content: "";
         display: block;
         width: 16px;
         height: 16px;
         background: url("/files/a/private/s/common/img/ico/ico_btn_kashi.svg") no-repeat center / contain;
         flex-shrink: 0;
      }
      .u-btn-kashi:hover {
         background-color: #ebe6e7 !important;
      }

      /* ボタン：マイうた */
      .u-btn-mysong {
         display: inline-flex !important;
         width: 78px !important;
         height: 32px !important;
         justify-content: center !important;
         align-items: center !important;
         column-gap: 5px !important;
         box-sizing: border-box !important;
         cursor: pointer !important;
         font-size: var(--u-text-xs) !important;
         font-weight: 500 !important;
         line-height: calc(1 / .75) !important;
         text-decoration: none !important;
         color: var(--u-color-white) !important;
         background-color: var(--u-color-red) !important;
         border-width: 0 !important;
         border-radius: 4px !important;
      }
      .u-btn-mysong::before {
         content: "";
         display: block;
         width: 16px;
         height: 16px;
         background: url("/files/a/private/s/common/img/ico/ico_btn_mysong.svg") no-repeat center / contain;
         flex-shrink: 0;
      }


      /* ============================================
     Heading Utilities (u-btn-*)
     ============================================ */

      /* 赤丸の見出し */
      .u-head-h2-circle-red {
         display: flex;
         width: 100%;
         gap: var(--u-spacing-2);
         align-items: center;
         overflow-wrap: break-word;
         word-break: break-all;
         font-size: var(--u-text-xl);
         font-weight: bold;
         line-height: calc(2/1.5);
         letter-spacing: .1em;
         color: var(--u-color-black);
      }
      .u-head-h2-circle-red::before {
         content: "";
         display: block;
         width: 20px;
         height: 20px;
         background: url("/files/a/private/s/common/img/ico/ico-circle-red.svg") no-repeat center / contain;
         flex-shrink: 0;
      }

      /* ============================================
     SP Display Utilities (u-sp-hide)
     ============================================ */

      @media screen and (max-width: 767px) {
         .u-sp-hide {
             display: none !important;
         }
         .u-sp-show {
             display: block !important;
         }
     }

        /* ============================================
     PC Display Utilities (u-pc-hide)
     ============================================ */   

      @media screen and (min-width: 768px) {
         .u-pc-hide {
             display: none !important;
         }
         .u-pc-show {
             display: block !important;
         }
     }