/*--------------------------------------------------------------
    # General & Variables
    --------------------------------------------------------------*/
 :root {
   --my-clean-bg: #fdfdfd;
   --my-clean-text: #000000;
   --my-clean-text-light: #666666;
   --my-clean-border: #e0e0e0;
   --my-clean-primary: #1a1a1a;
   --my-clean-accent-gold: #cba052;
 }

 body {
   background-color: var(--my-clean-bg);
   color: var(--my-clean-text);
   font-family: 'Noto Sans JP', sans-serif;
   margin: 0;
   line-height: 1.8;
   font-weight: 300;
 }

 a {
   color: var(--my-clean-accent-gold);
   text-decoration: none;
 }

 a:hover {
   color: #a17f3d;
   text-decoration: none;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Noto Sans JP', sans-serif;
 }

 p {
   margin-bottom: 1.5rem;
 }

 /*--------------------------------------------------------------
    # Header
    --------------------------------------------------------------*/
 #header {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   width: 300px;
   z-index: 9997;
   padding: 0 15px;
   overflow-y: auto;
   transition: all ease-in-out 0.5s;
   background: #ffffff;
   border-right: 1px solid var(--my-clean-border);
   box-shadow: 2px 0 15px rgba(0, 0, 0, 0.03);
 }

 #header .profile img {
   margin: 40px auto 20px auto;
   display: block;
   width: 250px;
   padding: 5px;
 }

 #header .profile h6 {
   color: var(--my-clean-text-light);
   font-weight: 700;
   text-align: center;
   margin-bottom: 20px;
   letter-spacing: 0.1em;
 }

 #header .countdown {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-bottom: 40px;
 }

 #header .countdown div {
   text-align: center;
   background: #fff;
   border-radius: 8px;
   padding: 10px;
   min-width: 55px;
   border: 1px solid var(--my-clean-border);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
 }

 #header .countdown h3 {
   font-size: 1.2rem;
   color: var(--my-clean-primary);
   font-weight: 700;
   margin: 0;
 }

 #header .countdown h4 {
   font-size: 0.7rem;
   color: var(--my-clean-text-light);
   margin: 2px 0 0 0;
 }

 /*--------------------------------------------------------------
    # Navigation Menu
    --------------------------------------------------------------*/
 .nav-menu {
   padding: 0;
   margin: 0;
 }

 .nav-menu ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .nav-menu li {
   margin-bottom: 8px;
 }

 .nav-menu a {
   display: flex;
   align-items: center;
   color: var(--my-clean-text-light);
   padding: 12px 20px;
   transition: 0.3s;
   font-size: 0.95rem;
   text-decoration: none;
   border-radius: 8px;
   font-weight: 500;
 }

 .nav-menu a i {
   font-size: 20px;
   padding-right: 15px;
   color: #999;
   transition: 0.3s;
 }

 .nav-menu a:hover,
 .nav-menu .active {
   color: #fff;
   background: var(--my-clean-primary);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .nav-menu a:hover i,
 .nav-menu .active i {
   color: #fff;
 }

 /* スクロールバーのカスタマイズ (Webkit) */
 #header::-webkit-scrollbar {
   width: 5px;
 }

 #header::-webkit-scrollbar-track {
   background: #fdfdfd;
 }

 #header::-webkit-scrollbar-thumb {
   background: var(--my-clean-accent-gold);
   border-radius: 5px;
 }

 /* Mobile Navigation Toggle */
 .mobile-nav-toggle {
   position: fixed;
   right: 15px;
   top: 15px;
   z-index: 9998;
   background-color: var(--my-clean-accent-gold);
   color: #fff;
   border: none;
   width: 45px;
   height: 45px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   transition: 0.3s;
 }

 .mobile-nav-toggle:hover {
   background-color: var(--my-clean-primary);
   color: #fff;
 }

 /*--------------------------------------------------------------
    # Main Content (ELEGANT GOLD ACCENT)
    --------------------------------------------------------------*/
 #main {
   margin-left: 300px;
 }

 .my-s2-wrap {
   padding: 80px 20px;
   min-height: 100vh;
 }

 .my-s2-card {
   background: #fff;
   border: 1px solid rgba(203, 160, 82, 0.3);
   border-radius: 0;
   padding: 60px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
   margin-bottom: 40px;
   position: relative;
 }

 .my-s2-card::after {
   content: '';
   position: absolute;
   top: 10px;
   left: 10px;
   right: 10px;
   bottom: 10px;
   border: 1px solid rgba(203, 160, 82, 0.1);
   pointer-events: none;
 }

 .my-s2-title {
   font-weight: 900;
   font-size: 2.2rem;
   color: #222;
   text-align: center;
   margin-bottom: 40px;
   line-height: 1.3;
   letter-spacing: 0.05em;
 }

 .my-s2-heading {
   font-weight: 500;
   color: var(--my-clean-accent-gold);
   text-align: center;
   letter-spacing: 0.1em;
   margin-bottom: 30px;
 }

 .my-s2-heading span {
   border-bottom: 1px solid var(--my-clean-accent-gold);
   padding-bottom: 5px;
 }

 /* テーブル共通 */
 .my-min-table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 15px;
 }

 .my-min-table th,
 .my-min-table td {
   padding: 15px 10px;
   vertical-align: top;
   text-align: left;
 }

 .my-min-table th {
   width: 30%;
   font-weight: 500;
 }

 .my-s2-table {
   border-top: 1px solid var(--my-clean-accent-gold);
   border-bottom: 1px solid var(--my-clean-accent-gold);
 }

 .my-s2-table th,
 .my-s2-table td {
   border-bottom: 1px dashed var(--my-clean-border);
 }

 .my-s2-table th {
   color: var(--my-clean-accent-gold);
 }

 /* --- ボタンのスタイル追加 --- */
 .my-clean-btn {
   display: inline-block;
   background: #fff;
   color: var(--my-clean-accent-gold);
   border: 1px solid var(--my-clean-accent-gold);
   padding: 12px 24px;
   text-decoration: none;
   font-weight: 500;
   transition: all 0.3s ease;
   text-align: center;
   width: 100%;
   border-radius: 4px;
 }

 .my-clean-btn:hover {
   background: var(--my-clean-accent-gold);
   color: #fff;
   box-shadow: 0 4px 15px rgba(203, 160, 82, 0.3);
 }

 .my-clean-btn i {
   margin-left: 5px;
   font-size: 0.9em;
 }

 /*--------------------------------------------------------------
    # Footer & Back to top
    --------------------------------------------------------------*/
 #footer {
   padding: 15px;
   color: #666;
   font-size: 12px;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 300px;
   z-index: 9999;
   background: #ffffff;
   border-right: 1px solid var(--my-clean-border);
 }

 #footer .copyright {
   text-align: center;
 }

 .back-to-top {
   position: fixed;
   visibility: hidden;
   opacity: 0;
   right: 15px;
   bottom: 15px;
   z-index: 996;
   background-color: var(--my-clean-accent-gold);
   color: #fff;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   transition: all 0.4s;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
 }

 .back-to-top i {
   font-size: 28px;
   line-height: 0;
 }

 .back-to-top:hover {
   background-color: var(--my-clean-primary);
   color: #fff;
 }

 .back-to-top.active {
   visibility: visible;
   opacity: 1;
 }

 /*--------------------------------------------------------------
    # Responsive
    --------------------------------------------------------------*/
 @media (max-width: 1199px) {
   #header {
     left: -300px;
   }

   #main {
     margin-left: 0;
   }

   #footer {
     position: static;
     width: auto;
     border-right: none;
     border-top: 1px solid var(--my-clean-border);
   }

   body.mobile-nav-active #header {
     left: 0;
     box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
   }
 }

 @media (max-width: 768px) {

   .my-min-table th,
   .my-min-table td {
     display: block;
     width: 100%;
   }

   .my-min-table th {
     padding-bottom: 5px;
   }

   .my-s2-wrap {
     padding: 10px 0px;
   }

   .my-s2-card {
     padding: 30px 20px;
   }

   .my-s2-title {
     font-size: 1.8rem;
   }
 }