/*  
Theme Name: Partner Portal
*/

 /*===============
  Reset style
===============-*/
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
   text-decoration: none;
   font-family: 'Noto Sans JP', sans-serif;
 }
 html {
   margin-top: 0 !important;
 }
 /* input reset */
 input,
 button,
 select,
 textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: transparent;
   border: none;
   border-radius: 0;
   font: inherit;
   outline: none;
 }
 textarea {
   resize: vertical;
 }
 input[type='checkbox'],
 input[type='radio'] {
   opacity: 0;
   height: 0;
   width: 0;
   padding: 0;
   position: absolute;
   top: 80%;
   left: 14px;
 }

 input[type='submit'],
 input[type='button'],
 label,
 button,
 select {
   cursor: pointer;
 }

 select::-ms-expand {
   display: none;
 }
 ul,
 ol {
   padding: 16px 0;
   margin-left: 16px;
 }

 ul li,
 ol li {
   line-height: 1.5;
   padding: 0.5em 0;
 }
 ol li {
   list-style: auto !important;
   margin-left: 16px;
 }
 ol li::marker {
   font-weight: 600;
   color: #3171F3;
 }
 ul a:hover,
 ol a:hover {
   opacity: 0.5;
 }
 p>a {
   color: #58A3FB;
   text-decoration: underline;
 }
 p>a:hover {
   opacity: 0.5;
 }

 /* =========================================
   基本変数・設定
   ========================================= */
 :root {
   --key-color: #5C9DD3;
   --key-color-dark: #4A8DC2;
   --key-color-light: #EBF4FB;
   --hero-bg-start: #dbeafe;
   --hero-bg-end: #ffffff;
   --hero-border: #bfdbfe;

   /* Market/Product Colors (Ref) */
   --color-dc: #5C9DD3;
   --color-dc-light: #EBF4FB;
   --color-dc-dark: #4A8DC2;
   --color-compass: #374151;
   --color-compass-dark: #1f2937;
   --color-cfe: #10b981;
   --color-cfe-light: #d1fae5;
   --color-cfe-dark: #059669;
   --color-pain: #dc2626;
   --edu-bg-start: #10b981;
   --edu-bg-end: #047857;
   --edu-text-light: #d1fae5;

   --header-height: 5rem;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

 body {
   background-color: #f8f9fa;
   margin: 0;
 }

 .page-title {
   font-size: 1.875rem;
   font-weight: 700;
   color: #111827;
   border-bottom: 3px solid var(--key-color-light);
   padding-bottom: 0.5rem;
   margin-bottom: 1.5rem;
 }

 .page-intro {
   font-size: 1.125rem;
   color: #4b5563;
   margin-bottom: 2rem;
 }

 .page-wrapper {
   padding: 80px 1rem 0 1rem;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
 }

 .responsive-container {
   width: 100%;
   /* 16:9 の比率を指定。これで height: 0 にする必要がなくなります */
   aspect-ratio: 16 / 9;
   overflow: hidden;
   position: relative;
   scroll-margin-top: 20vh;
 }

 .responsive-container iframe {
   width: 100%;
   height: 100%;
   /* 念のため、iframe自体に境界線などの余計な余白がつかないようにする */
   border: none;
 }

 @media (min-width: 640px) {
   .page-wrapper {
     padding: 80px 1.5rem 0 1.5rem;
   }
 }

 @media (min-width: 1024px) {
   .page-wrapper {
     padding: 100px 7.5rem 0 7.5rem;
   }
 }

 /* 共通コンテナサイズ */
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
   }
 }

 @media (min-width: 768px) {
   .container {
     max-width: 768px;
   }
 }

 @media (min-width: 1024px) {
   .container {
     max-width: 1024px;
   }
 }

 @media (min-width: 1280px) {
   .container {
     max-width: 1280px;
   }

   /* tailwindの読み込みにより1280px以上のスタイルが影響を受けるため上書き */
   @media (min-width: 1536px) {
     .container {
       max-width: 1280px !important;
     }
   }
 }

 /* =========================================
   Buttons
   ========================================= */

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.75rem 1.5rem;
   font-weight: 600;
   border-radius: 0.5rem;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   cursor: pointer;

 }

 .btn:hover {
   transform: translateY(-4px);
   box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 }


 .btn-primary {
   width: fit-content;
   background-color: var(--key-color);
   color: #ffffff;
   white-space: nowrap;
 }

 .btn-primary:hover {
   background-color: var(--key-color-dark);
   box-shadow: 0 10px 15px -3px rgba(92, 157, 211, 0.3), 0 4px 6px -4px rgba(92, 157, 211, 0.2);
 }

 /* Secondary Button (白背景・枠線あり) */
 .btn-secondary {
   background-color: #ffffff;
   color: var(--key-color-dark);
   border-color: var(--key-color-light);
   border: 2px solid var(--key-color-light);
 }

 .btn-secondary:hover {
   background-color: var(--key-color-light);
   border-color: var(--key-color);
 }

 /* Full Width Button Modifier */
 .btn-full-width {
   width: 100%;
   font-size: 0.875rem;
 }

 /* Disabled State */
 .btn-disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
 }