/* ========================================
   3UPラボ - 共通スタイル（変数・リセット・コンポーネント）
   ======================================== */

/* ========================================
   CSS Variables
   ======================================== */

/* Mobile First: 375px基準のvw、768px以上でメディアクエリの固定値に切替 */
:root {
    /* Colors */
    --color-primary: rgb(255,100,0);
    --color-primary-light: rgb(255,239,229);
    --color-primary-dark: rgb(200, 80, 0);
    --color-secondary: rgb(26,26,26);
    --color-buttonblue: rgb(0,101,255);
    --color-buttonblue-dark: rgb(0,74,173);
    --color-buttongreen: rgb(0,180,70);
    --color-buttongreen-light: rgb(227,250,236);
    --color-white: rgb(255,255,255);
    --color-black: rgb(0,0,0);
    --color-gray-light: #F5F5F5;
    --color-gray: #999999;
    --color-gray-dark: #666666;
    --color-text: #333333;
    --color-border: #E0E0E0;
    --color-success: #4CAF50;
    --color-error: #F44336;

    /* Typography */
    --font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    /* Font sizes - 375px基準のvw */
    --font-size-common: 2.7vw;      /* 375px:14px */
    --font-size-mini: 2.7vw;      /* 375px:10px */
    --font-size-xs: 3.2vw;      /* 375px:12px */
    --font-size-sm: 3.73vw;     /* 375px:14px */
    --font-size-base: 4.27vw;   /* 375px:16px */
    --font-size-lg: 4.8vw;      /* 375px:18px */
    --font-size-xl: 5.33vw;     /* 375px:20px */
    --font-size-2xl: 6.4vw;     /* 375px:24px */
    --font-size-3xl: 8.53vw;    /* 375px:32px */

    /* Spacing - 375px基準のvw */
    --spacing-xs: 1.07vw;       /* 375px:4px */
    --spacing-sm: 2.13vw;       /* 375px:8px */
    --spacing-md: 4.27vw;       /* 375px:16px */
    --spacing-lg: 6.4vw;        /* 375px:24px */
    --spacing-xl: 8.53vw;       /* 375px:32px */
    --spacing-2xl: 12.8vw;      /* 375px:48px */
    --spacing-3xl: 17.07vw;     /* 375px:64px */

    /* Border Radius - 375px基準のvw */
    --radius-sm: 1.07vw;        /* 375px:4px */
    --radius-md: 2.13vw;        /* 375px:8px */
    --radius-lg: 4.27vw;        /* 375px:16px */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Header Height */
    --header-height: 15vw;      /* 375px:56px */
}

/* Desktop: 768px以上は固定値に戻す */
@media (min-width: 768px) {
    :root {
        /* Font sizes - Desktop (固定値) */
    --font-size-common: 0.875rem;      /* 14px */
    --font-size-mini: 0.75rem;      /* 12px */
        --font-size-xs: 0.75rem;    /* 12px */
        --font-size-sm: 0.875rem;   /* 14px */
        --font-size-base: 1rem;     /* 16px */
        --font-size-lg: 1.125rem;   /* 18px */
        --font-size-xl: 1.25rem;    /* 20px */
        --font-size-2xl: 1.5rem;    /* 24px */
        --font-size-3xl: 2rem;      /* 32px */

        /* Spacing - Desktop (固定値) */
        --spacing-xs: 4px;
        --spacing-sm: 8px;
        --spacing-md: 16px;
        --spacing-lg: 24px;
        --spacing-xl: 32px;
        --spacing-2xl: 48px;
        --spacing-3xl: 64px;

        /* Border Radius - Desktop (固定値) */
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 16px;

        /* Shadows - Desktop (固定値) */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

        /* Header Height - Desktop (固定値) */
        --header-height: 72px;
    }
}

/* ========================================
   Reset
   ======================================== */

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
    min-height: 100vh;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ========================================
   Layout
   ======================================== */

.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

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

/* ========================================
   Main Content
   ======================================== */

main {
    padding-top: var(--header-height);
    max-width: 100vw;
    overflow: hidden;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: bold;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn--primary,
.btn--primary:focus {
    background-color: var(--color-primary);
    border: 0;
    color: var(--color-white);
}

.btn--primary:hover {
    background-color: var(--color-primary-dark);
    text-decoration: none;
}

.btn--primary-outline,
.btn--primary-outline:focus {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.btn--primaryBlue,
.btn--primaryBlue:focus {
    background-color: var(--color-buttonblue);
    border: 0;
    color: var(--color-white);
}

.btn--primaryBlue:hover {
    opacity: .8;
    text-decoration: none;
}

.btn--primaryBlue-outline,
.btn--primaryBlue-outline:focus {
    border: 1px solid var(--color-buttonblue);
    color: var(--color-buttonblue);
}

.btn--primaryBlueDark,
.btn--primaryBlueDark:focus {
    background-color: var(--color-buttonblue-dark);
    border: 0;
    color: var(--color-white);
}

.btn--primaryBlueDark:hover {
    opacity: .8;
    text-decoration: none;
}

.btn--primaryBlueDark-outline,
.btn--primaryBlueDark-outline:focus {
    border: 1px solid var(--color-buttonblue-dark);
    color: var(--color-buttonblue-dark);
}

.btn--primaryGreen,
.btn--primaryGreen:focus {
    background-color: var(--color-buttongreen);
    border: 0;
    color: var(--color-white);
}

.btn--primaryGreen:hover {
    opacity: .8;
    text-decoration: none;
}

.btn--primaryGreen-outline,
.btn--primaryGreen-outline:focus {
    border: 1px solid var(--color-buttongreen);
    color: var(--color-buttongreen);
}

.btn--dark,
.btn--dark:focus {
    background-color: var(--color-secondary);
    border: 0;
    color: var(--color-white);
    width: 30vw;
    max-width: 150px;
}
.btn--dark:hover {
    background-color: var(--color-black);
    text-decoration: none;
}

.btn--large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
    width: 100%;
    max-width: 90vw;
}
.btn--sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}
.btn--xs {
    padding: var(--spacing-xs);
    font-size: var(--font-size-xs);
}

.btn--block {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-lg);
    text-align: center;
    display: block;
    width: 100%;
    max-width: 90vw;
    margin: auto;
}

/* CTAの補足（ボタン直下の小テキスト） */
.cta-note {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-gray-dark);
  text-align: center;
}

.cta-area {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  text-align: center; /* 中央寄せにしたい場合 */
}

/* 影だけ足すユーティリティ（必要なボタンにだけ付ける） */
.btn--shadow {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  transform: translateY(0);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--shadow:hover {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}

.btn--shadow:active {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(1px);
}

/* 1) 背景帯（必要なCTAだけ） */
.cta-band {
  background-color:#ffefe5;
  padding: var(--spacing-lg) var(--spacing-md);
  border-radius: 12px;
  text-align: center;
}

/* 2) オレンジのCTAボタン（このボタンだけ） */
.btn--startCta {
  background-color: #ff6400;
  color: #fff;
}

.btn--startCta:hover {
  background-color: #e85a00;
  opacity: 1;
}

a.work-underline {
    text-decoration: underline;
}

@media (min-width: 768px) {
    .btn {
        border-radius: var(--radius-md);
    }

    .btn--large {
        max-width: 300px;
    }

    .btn--block {
        max-width: 250px;
    }

    .btn--primaryGreen {
        max-width: 250px;
    }
}

/* ========================================
   Section
   ======================================== */

.section {
    padding: var(--spacing-xl) 0;
    width: 100%;
}

.section__title {
    font-size: var(--font-size-xl);
    font-weight: bold;
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section__title--white {
    color: var(--color-white);
}

.section__label {
    font-size: var(--font-size-base);
    color: var(--color-primary);
    font-weight: bold;
    text-align: center;
    margin-bottom: var(--spacing-md);
    display: inline-block;
    border-bottom: 3px solid;
    padding: 0 1vw;
    line-height: 1;
}

/* ========================================
   Utility Classes
   ======================================== */

.text-primary { color: var(--color-primary); }


/* ========================================
   loading
   ======================================== */
#loading {
    display: none;
}
.loading-bg {
    position: fixed;
    width: 100%;
    background: #000000;
    top: 0;
    z-index: 99999;
    opacity: 0.6;
    height: 100vh;
}
#loading .spinner-border {
    position: fixed;
    top: 40%;
    left: 50%;
    animation-duration: 1s;
    height: 3rem;
    width: 3rem;
    z-index: 100000;
}


/* ========================================
   table
   ======================================== */
table.m3up-tbl th {
    background-color: var(--color-primary-light);
    vertical-align: middle;
}

.pc{
    display: block;
}
.sp{
    display: none;
}
@media screen and (max-width: 800px) {
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
}