@charset "UTF-8";
/* =========================================================
p-lpvn / ベトナムLPで使用される変数
========================================================= */
:root {
    /* 背景色（prototype準拠に更新） */
    --base-color01: #111c3b;
    --base-color02: #f5f6ff;
    --base-color03: #fff;
    --base-color04: #F9F9FC;
    --base-color05: #E2E6EE;

    /* アクセントカラー（prototype準拠に更新）*/
    --accent-color01: #0076e5;/* primary */
    --accent-color02: #3c65df;/* secondary */
    --accent-color03: #d44056;/* alert/red系 */
    --accent-color04: #D48C40;/* yellow */
--accent-color05: #A9C0EE;
--accent-color06: #F4CE00;
--accent-color07: #21BBEC;
    --accent-color08: #6130de;/* purple */
    --accent-color09: #ECFBFE;
    --accent-color10: #5983FF;

/* グラデーション */
--gradient-color01: rgba(#E14827,1);
--gradient-color02: rgba(#E7C82E,1);
--gradient-color03: rgba(#F6F7F8,1);
--gradient-color04: rgba(#A9C0EE,1);
--gradient-color05: rgba(#E6989B,1);

/* グラデーション用RGB値 */
--accent-color01-rgb: 60, 101, 223;
--accent-color02-rgb: 60, 101, 223;
--accent-color03-rgb: 212, 64, 86;
--accent-color08-rgb: 97, 48, 222;
--base-color01-rgb: 17, 28, 59;
--base-color02-rgb: 245, 246, 255;
--base-color03-rgb: 249, 249, 252;

/* グラデーション定義 */
--gradient-hero: linear-gradient(315deg, rgba(60,101,223,1) 0%, rgba(0,118,229,1) 90%, rgba(30,180,226,1) 100%);
--gradient-hero-simple: linear-gradient(315deg, rgba(60,101,223,1) 0%, rgba(0,118,229,1) 100%);
--gradient-main-bg: linear-gradient(94deg, var(--base-color02) 0%, var(--base-color03) 100%);
--gradient-header-actions: linear-gradient(224deg, rgba(43,121,149,1) 2%, rgba(47,69,132,1) 11%, rgba(17,28,59,1) 38%);
--gradient-orange: linear-gradient(224deg, rgba(212,140,64,1) 0%, rgba(229,1,5,1) 25%);
--gradient-blue: linear-gradient(224deg, rgba(43,121,149,1) 2%, rgba(47,69,132,1) 11%, rgba(17,28,59,1) 38%);
--gradient-line01: linear-gradient(90deg, rgba(60,101,223,1) 0%, rgba(236,251,254,0) 40%);
--gradient-line02: linear-gradient(to bottom, rgba(45,102,231,1) 0%, rgba(225,252,255,1) 75%, rgba(225,252,255,0) 100%);
--gradient-line03: linear-gradient(to right, rgba(60,101,223,1) 29%, rgba(129,236,249,1) 30%);
--gradient-line04: linear-gradient(to right, transparent, var(--accent-color02) );

--gradient-card-overlay: linear-gradient(to bottom, rgba(17, 28, 59, 0) 0%, rgba(17, 28, 59, 0.6) 50%, rgba(17, 28, 59, 1) 70%);

--gradient-button01: linear-gradient(to top right, rgba(17,28,59,1) 59%, rgba(47,69,132,1) 80%, rgba(43,121,149,1) 100%);
--gradient-button02: linear-gradient(to top right, rgba(229,1,5,1) 75%, rgba(212,140,64,1) 100%);
--gradient-button03: linear-gradient(to bottom right, rgba(30,180,226,1) 0%, rgba(0,118,229,1) 10%, rgba(60,101,223,1) 0%);
--gradient-button04: linear-gradient(to bottom right, rgba(60,101,223,1) 0%, rgba(104,45,231,1) 100%);

--gradient-icon01: conic-gradient(rgba(249,249,252,1) 0%, rgba(83,215,249,1) 79%, rgba(104,45,231,1) 100%);

    /* テキストカラー（prototype準拠に更新） */
    --text-color01: #111c3b;
    --text-color02: #8b9ab9;
--text-color03: rgba(#0E0B0B,.3);
--text-color04: rgba(255,255,255,1);
--text-color05: #A9C0EE;

    /*リンクカラー */
    --link-color01: #0076e5;

/* 線カラー */
--border-color01: #D9DEE9;
--border-color02: #08223B; 
--border-color03: #E2E6EE;
--border-color04: #fff;
--border-color05: #202F46;
--border-color06: #8B9AB9;
--border-color07: #E2E6EE;
--border-color08: #7D9AF8;

/* サブカラー */
--sub-color01: #F8F9FA;

--sub-color02: #EFEFF2;
--sub-color03: #88909B;
--sub-color04: #122940;
--sub-color05: #0D1E2F;
--sub-color06: #383E48;

/* シャドウカラー */
--shadow-color01: rgba(15,32,56,0.1);
--shadow-color02: rgba(15,32,56,0.3);
--shadow-color03: rgba(15,32,56,0.5);

/* シャドウ */
--shadow00: 2px 4px 32px rgba(15,32,56,4%);
--shadow01: 4px 6px 12px rgba(15,32,56,24%);

--shadow02: 0 6px 24px rgba(15,32,56,48%);
--shadow03: 0 6px 32px rgba(15,32,56,63%);

/* SNSカラー */
--line-color: #1dcd00;
--fb-color: #3B5998;
--tw-color: #55acee;
--hatebu-color: #008fde;
--pocket-color: #ee4056;
--youtube-color: #c4302b;

/* 基本色 */
--red01: #D93735;
--white01: #fff;

/* フォントサイズ */
--fs-min : 1.3em;
--fs-p : 1.5em;
--fs-title : 1.7em;
--fs-big : 3.1em;

/* フォントサイズ */
--font-size00 : 11px;
--font-size01 : 12px;
--font-size02 : 14px;
--font-size03 : 16px;
--font-size04 : 21px;
--font-size05 : 25px;
--font-size06 : 28px;
--font-size07 : 44px;
--font-size08 : 36px;

    /* フォントファミリー（prototype準拠に更新） */
    --font-family01: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    --font-family02: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, -apple-system, Segoe UI, Arial, sans-serif; 
    --font-quantico: "Quantico", system-ui, Arial, sans-serif;
    --font-outfit: "Outfit", system-ui, Arial, sans-serif;

--font-awesome: 'Font Awesome 5 Free';
--googleicon: 'Material Symbols Outlined';
--font-flat: 'Flaticon';

/* margin */

--margin00 : 0.3125rem; /* 5px */
--margin01 : 0.625rem;  /* 10px */
--margin02 : 0.9375rem; /* 15px */
--margin03 : 1.25rem;   /* 20px */
--margin04 : 1.5625rem; /* 25px */
--margin05 : 3.125rem;  /* 50px */
--margin06 : 3.75rem;   /* 60px */
--margin07 : 4.375rem;  /* 70px */
--margin08 : 5rem;      /* 80px */
--margin09 : 5.625rem;  /* 90px */
--margin10 : 6.25rem;   /* 100px */

/* padding */
--padding00 : 0.3125rem; /* 5px */
--padding01 : 0.625rem;  /* 10px */
--padding02 : 0.9375rem; /* 15px */
--padding03 : 1.25rem;   /* 20px */
--padding04 : 1.5625rem; /* 25px */
--padding05 : 3.125rem;  /* 50px */
--padding06 : 3.75rem;   /* 60px */
--padding07 : 4.375rem;  /* 70px */
--padding08 : 5rem;      /* 80px */
--padding09 : 5.625rem;  /* 90px */
--padding10 : 6.25rem;   /* 100px */

/* gap */
--gap00 : clamp(0.15rem, 0.2vw + 0.3rem, 0.375rem); /* 1080px時: 0.25rem (4px), 1280px時: 0.3125rem (5px), 1920px時: 0.375rem (6px) */
--gap01 : clamp(0.25rem, 0.4vw + 0.3rem, 0.75rem); /* 1080px時: 0.5rem (8px), 1280px時: 0.625rem (10px), 1920px時: 0.75rem (12px) */
--gap02 : clamp(0.5rem, 0.6vw + 0.3rem, 1.125rem); /* 1080px時: 0.75rem (12px), 1280px時: 0.9375rem (15px), 1920px時: 1.125rem (18px) */
--gap03 : clamp(0.75rem, 0.8vw + 0.3rem, 1.5rem); /* 1080px時: 1rem (16px), 1280px時: 1.25rem (20px), 1920px時: 1.5rem (24px) */
--gap04 : clamp(1rem, 1.5vw + 0.3rem, 1.875rem); /* 1080px時: 1.25rem (20px), 1280px時: 1.5625rem (25px), 1920px時: 1.875rem (30px) */
--gap05 : clamp(2rem, 1.5vw + 0.3rem, 3.75rem); /* 1080px時: 2.5rem (40px), 1280px時: 3.125rem (50px), 1920px時: 3.75rem (60px) */
--gap06 : clamp(2.5rem, 2.4vw + 0.3rem, 4.5rem); /* 1080px時: 3rem (48px), 1280px時: 3.75rem (60px), 1920px時: 4.5rem (72px) */
--gap07 : clamp(3rem, 2.8vw + 0.3rem, 5.25rem); /* 1080px時: 3.5rem (56px), 1280px時: 4.375rem (70px), 1920px時: 5.25rem (84px) */
--gap08 : clamp(3.5rem, 3.2vw + 0.3rem, 6rem); /* 1080px時: 4rem (64px), 1280px時: 5rem (80px), 1920px時: 6rem (96px) */
--gap09 : clamp(4rem, 3.6vw + 0.3rem, 6.75rem); /* 1080px時: 4.5rem (72px), 1280px時: 5.625rem (90px), 1920px時: 6.75rem (108px) */
--gap10 : clamp(4.5rem, 4vw + 0.3rem, 9.5rem); /* 1080px時: 5rem (80px), 1280px時: 6.25rem (100px), 1920px時: 7.5rem (120px) */

/* max-width */
--max-width00 : 560px;
--max-width01 : 980px;
--max-width02 : 1280px;
--max-width-small : 88rem;
--max-width-mini : 72rem;
--max-width-tiny : 63rem;
--max-width-large : 1600px;
--max-width-big : 1800px;

/* radius */
--radius01: .2rem;
--radius02: .4rem; 

 
/* effect */
--blur01: blur(20px);

/* transition */
--transition01 : 0.45s cubic-bezier(0.77, 0, 0.175, 1);
--transition02 : cubic-bezier(0.77, 0, 0.175, 1) .5s;

/* duration */
--duration01 : .5s;
--duration02 : 1s;

/* timing */
--timing01 : cubic-bezier(0.77, 0, 0.175, 1);
--timing02 : cubic-bezier(.36,1.25,1,1);
}

@charset "UTF-8";
/* =========================================================
フォント
========================================================= */
:root {
	--fs-tiny: clamp(0.6875rem, 0.2vw + 0.5rem, 0.825rem); /* 1080px時: 0.6875rem (11px), 1280px時: 0.6875rem (11px), 1920px時: 0.825rem (13.2px) */
	--fs-min: clamp(0.7125rem, 0.5vw + 0.5rem, 0.975rem); /* 1080px時: 0.8125rem (13px), 1280px時: 0.8125rem (13px), 1920px時: 0.975rem (15.6px) */
	--fs-mid: clamp(0.8375rem, 0.6vw + 0.5rem, 1.125rem); /* 1080px時: 0.9375rem (15px), 1280px時: 0.9375rem (15px), 1920px時: 1.125rem (18px) */
	--fs-p: clamp(1rem, .9vw + 0.5rem, 1.3rem); /* 1080px時: 1rem (16px), 1280px時: 1rem (16px), 1920px時: 1.2rem (19.2px) */
	--fs-postp: clamp(1.0875rem, 0.9vw + 0.5rem, 1.425rem); /* 1080px時: 1.1875rem (19px), 1280px時: 1.1875rem (19px), 1920px時: 1.425rem (22.8px) */
	--fs-subtitle: clamp(1.1125rem, 1vw + 0.5rem, 1.575rem); /* 1080px時: 1.3125rem (21px), 1280px時: 1.3125rem (21px), 1920px時: 1.575rem (25.2px) */
	--fs-title: clamp(1.3rem, 1.1vw + 0.5rem, 1.8rem); /* 1080px時: 1.5rem (24px), 1280px時: 1.5rem (24px), 1920px時: 1.8rem (28.8px) */
	--fs-large: clamp(1.55rem, 1.3vw + 0.5rem, 2.1rem); /* 1080px時: 1.75rem (28px), 1280px時: 1.75rem (28px), 1920px時: 2.1rem (33.6px) */
	--fs-xlarge: clamp(1.7875rem, 1.8vw + 0.5rem, 2.625rem); /* 1080px時: 2.1875rem (35px), 1280px時: 2.1875rem (35px), 1920px時: 2.625rem (42px) */
	--fs-big: clamp(2.1375rem, 2.8vw + 1rem, 4.125rem); /* 1080px時: 3.4375rem (55px), 1280px時: 3.4375rem (55px), 1920px時: 4.125rem (66px) */
	--fs-huge: clamp(3.1rem, 4vw + 0.5rem, 6rem); /* 1080px時: 5rem (80px), 1280px時: 5rem (80px), 1920px時: 6rem (96px) */
	--fs-xhuge: clamp(4rem, 4vw + 0.5rem, 8rem); /* 1080px時: 5rem (80px), 1280px時: 5rem (80px), 1920px時: 6rem (96px) */
}
/* =========================================================
メディアクエリ
========================================================= */

:root {
	--mq-huge: false;
	@media (max-width: 1620px) {
	  --mq-huge: true;
	}
	--mq-big: false;
	@media (max-width: 1360px) {
	  --mq-big: true;
	}
	--mq-xl: false;
	@media (max-width: 1280px) {
	  --mq-xl: true;
	}

	--mq-tab: false;
	@media (max-width: 1080px) {
	  --mq-tab: true;
	}

	--mq-lg: false;
	@media (max-width: 991px) {
	  --mq-lg: true;
	}

	--mq-md: false;
	@media (max-width: 768px) {
	  --mq-md: true;
	}

	--mq-sm: false;
	@media (max-width: 591px) {
	  --mq-sm: true;
	}

	--mq-tiny: false;
	@media (max-width: 420px) {
	  --mq-tiny: true;
	}
	/* =========================================================
	spacing tokens (var-based, to use like margin-block/padding-block)
	========================================================= */
	/* margin-block scales */
	--mtb-tiny:  clamp(var(--gap00), 5vw, var(--gap02));
	--mtb-min:   clamp(var(--gap01), 5vw, var(--gap03));
	--mtb-mid:   clamp(var(--gap02), 5vw, var(--gap04));
	--mtb-large: clamp(var(--gap03), 5vw, var(--gap05));
	--mtb-big:   clamp(2rem, 5vw, 6.25rem); /* 1080px時: 5rem (80px), 1280px時: 6.25rem (100px), 1920px時: 6.25rem (100px) */
	--mtb-huge:  clamp(7.5rem, 6vw, 9.375rem); /* 1080px時: 7.5rem (120px), 1280px時: 9.375rem (150px), 1920px時: 9.375rem (150px) */

	/* padding-block scales */
	--ptb-tiny:  clamp(var(--gap00), 5vw, var(--gap02));
	--ptb-min:   clamp(var(--gap01), 5vw, var(--gap03));
	--ptb-mid:   clamp(var(--gap02), 5vw, var(--gap04));
	--ptb-large: clamp(var(--gap03), 5vw, var(--gap05));
	--ptb-big:   clamp(5rem, 5vw, 6.25rem); /* 1080px時: 5rem (80px), 1280px時: 6.25rem (100px), 1920px時: 6.25rem (100px) */
	--ptb-huge:  clamp(7.5rem, 6vw, 9.375rem); /* 1080px時: 7.5rem (120px), 1280px時: 9.375rem (150px), 1920px時: 9.375rem (150px) */

	/* =========================================================
	responsive breakpoint variables
	========================================================= */
	--bp-huge: 1920px;
	--bp-big: 1360px;
	--bp-xl: 1280px;
	--bp-tab: 1080px;
	--bp-lg: 991px;
	--bp-md: 768px;
	--bp-sm: 591px;
	--bp-tiny: 420px;

  }


/* =========================================================
CSS utilities (no preprocessor required)
========================================================= */



@charset "UTF-8";
/* =========================================================
All things
========================================================= */

@font-face {
    font-family: "Space Grotesk", sans-serif;
    font-display: swap;
    src:
    url("../..//fonts/Montserrat-Regular.woff")format("woff"),
    url("../..//fonts/Montserrat-Bold.woff")format("woff"),
    url("../..//fonts/Montserrat-Black.woff")format("woff"),
    url("../..//fonts/Montserrat-Regular.ttf")format("truetype"),
    url("../..//fonts/Montserrat-Bold.ttf")format("truetype"),
    url("../..//fonts/Montserrat-Black.ttf")format("truetype")
    ;
  }

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

html {
    font-size: 100%; /* 16px基準 */
    scroll-behavior: smooth;
}

body {
    position: relative;
    margin: 0;
    line-height: 1.3;
    letter-spacing: .0135rem;
    color: var(--text-color01);
    background-color: var(--base-color02);
	font-size: var(--fs-mid);
    font-weight: bold;
    font-family: var(--font-family01);
    font-feature-settings: "palt";
    font-variant-ligatures: no-common-ligatures;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: unset;
    font-optical-sizing: auto;
}

/* =========================================================
Parts
========================================================= */
img {
    max-width: 100%;
}
ol,ul {
    padding-left: 0px;
}
ul {
    li {
        list-style: none!important;
    }
}

li {
    list-style: none;
}
p {
	line-height: 2;
}

a {
    color: var(--text-color01);
    outline: none;
    text-decoration: none;
    text-decoration-skip-ink: none;
    transition: var(--transition01); 
    &:hover {
        outline: none;
    }
}
a:focus, *:focus { outline:none; }

h1,h2,h3,h4,h5,h6 {
    font-weight: 800;
}
strong {
    font-weight: bold;
}

/*reset*/
button,input,textarea,select {
    border: none;
    outline: none;
    padding: 0;
    appearance: none;
}
@charset "UTF-8";

/* =========================================================
l-content style
========================================================= */

.l-contentMain.__slash01::before {
    content: "";
    position: fixed;
    z-index: -1;
    top: 50%;
    right: -80%;
    width: 270%;
    height: 500px;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--base-color02) 50%, transparent),
        var(--base-color02)
    );
    transform: rotate(-30deg);
}

.l-contentMain.__lpbg01::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.4;
}

/* webp対応 */
.webp .l-contentMain.__lpbg01::before {
    background-image: url(../images/lp/corplp/bg01.webp);
}

.no-webp .l-contentMain.__lpbg01::before {
    background-image: url(../images/lp/corplp/bg01.png);
}

/* =========================================================
l-cont var
========================================================= */
.l-cont.__column2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap08);
    align-items: flex-start;

    @media (max-width: 1024px) {
        display: flex;
        flex-direction: column;
        gap: var(--gap06);
    }
}

/* =========================================================
l-cont margin/padding utilities
========================================================= */

.l-cont.__tinymtb {
    margin-top: var(--mtb-tiny);
    margin-bottom: var(--mtb-tiny);
}

.l-cont.__minmtb {
    margin-top: var(--mtb-min);
    margin-bottom: var(--mtb-min);
}

.l-cont.__midmtb {
    margin-top: var(--mtb-mid);
    margin-bottom: var(--mtb-mid);
}

.l-cont.__largemtb {
    margin-top: var(--mtb-large);
    margin-bottom: var(--mtb-large);
}

.l-cont.__bigmtb {
    margin-top: var(--mtb-big);
    margin-bottom: var(--mtb-big);
}
.l-cont.__hugemtb {
    margin-top: var(--mtb-huge);
    margin-bottom: var(--mtb-huge);
}

.l-cont.__tinyptb {
    padding-top: var(--ptb-tiny);
    padding-bottom: var(--ptb-tiny);
}

.l-cont.__minptb {
    padding-top: var(--ptb-min);
    padding-bottom: var(--ptb-min);
}

.l-cont.__midptb {
    padding-top: var(--ptb-mid);
    padding-bottom: var(--ptb-mid);
}

.l-cont.__largeptb {
    padding-top: var(--ptb-large);
    padding-bottom: var(--ptb-large);
}

.l-cont.__bigptb {
    padding-top: var(--ptb-big);
    padding-bottom: var(--ptb-big);
}

.l-cont.__hugeptb {
    padding-top: var(--ptb-huge);
    padding-bottom: var(--ptb-huge);
}

/* =========================================================
l-contPost
========================================================= */

.l-contPost {
    font-size: var(--fs-postp);
    padding-block: var(--ptb-large);
}

.l-contPost.__nopb {
    padding-bottom: 0;
}

.l-contPost.__nopt {
    padding-top: 0;
}

.l-contPost p:not(:last-of-type) {
    padding-bottom: var(--gap01);
}

.l-contPost p {
    font-weight: normal;
    padding-bottom: var(--gap02);
}

.l-contPost > h2:first-of-type,
.l-contPost > h3:first-of-type,
.l-contPost > h4:first-of-type {
    margin-top: 0;
}

/* =========================================================
l-contTitle
========================================================= */

.l-contTitle {
    position: relative;
    font-size: var(--fs-large);
    font-weight: 900;
    margin-bottom: var(--gap01);
    padding: var(--gap01) var(--gap02);
    padding-right: 0;
}

@media (max-width: 1080px) {
    .l-contTitle {
        padding: var(--gap00) var(--gap01);
    }
}

.l-contTitle::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    width: 3px;
    height: 100%;
    background-color: var(--accent-color01);
    border-radius: 100px;
}

.l-contMain__title {
    margin-top: var(--gap02);
    margin-bottom: var(--gap02);
    font-size: var(--fs-title);
    display: flex;
    align-items: center;
    gap: var(--gap00);
    padding: var(--gap01);
    border-radius: var(--radius01);
    background-color: var(--base-color02);
    font-weight: 900;
}

@media (max-width: 1080px) {
    .l-contMain__title {
        padding: var(--gap00) var(--gap01);
        margin-bottom: var(--gap01);
    }
}

/* =========================================================
l-cont background elements
========================================================= */

.l-contBg {
    position: fixed;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.l-contBg__img.__bg01 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    mix-blend-mode: overlay;
    animation: l-contBg 12s linear infinite;
}

.l-contBg__img.__logo01 {
    position: fixed;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    height: 100vh;
    object-fit: cover;
    mix-blend-mode: hue;
    z-index: -2;
    opacity: 0.035;
}

@keyframes l-contBg {
    0% {
        opacity: 0.005;
    }
    50% {
        opacity: 0.15;
    }
    100% {
        opacity: 0.005;
    }
}

/* =========================================================
l-cont circles animation
========================================================= */

.l-contBg__circles {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
}

.l-contBg__circlesArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.l-contBg__circlesItem {
    position: absolute;
    display: block;
    list-style: none;
    width: 500px !important;
    height: 500px !important;
    background: color-mix(in srgb, var(--base-color02) 1%, transparent);
    opacity: 0;
    animation: l-contBg__circle 50s linear infinite;
    bottom: -150px;
}

.l-contBg__circlesItem:nth-child(1) {
    left: 15%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.l-contBg__circlesItem:nth-child(2) {
    left: 1%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 32s;
}

.l-contBg__circlesItem:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.l-contBg__circlesItem:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 48s;
}

.l-contBg__circlesItem:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.l-contBg__circlesItem:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.l-contBg__circlesItem:nth-child(7) {
    left: 20%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.l-contBg__circlesItem:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.l-contBg__circlesItem:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.l-contBg__circlesItem:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 21s;
}

@keyframes l-contBg__circle {
    0% {
        transform: translateY(0) rotate(0deg);
        border-radius: 2px;
        opacity: 0;
    }
    20% {
        transform: translateY(0) rotate(0deg);
        border-radius: 2px;
        opacity: 1;
    }
    90% {
        transform: translateY(-2000px) rotate(180deg);
        border-radius: var(--radius01);
        opacity: 1;
    }
    100% {
        transform: translateY(-2000px) rotate(180deg);
        border-radius: var(--radius01);
        opacity: 0;
    }
}
@charset "UTF-8";

/* =========================================================
l-wrap style
========================================================= */
.l-wrap.__mainWrap01 {
    width: 100%;
    max-width: var(--max-width-big);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px) {
	.l-wrap.__mainWrap01 {
        padding: var(--gap05)!important;
	}
}

@media (max-width: 640px) {
	.l-wrap.__mainWrap01 {
        padding: var(--gap05)!important;
	}
}

@media (max-width: 480px) {
	.l-wrap.__mainWrap01 {
        padding: var(--gap05) var(--gap04) var(--gap04)!important;
	}
}

.l-wrap {
	/* //header {
	&.__header01 {
		position: relative;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left: 75px;
		padding-right: 75px;
		max-width: var(--max-width-big);
	}
	
	@media (max-width: 1200px) {
		&.__header01 {
			padding-left: var(--gap02);
			padding-right: var(--gap02);
		}
	}
	
	@media (max-width: 768px) {
		&.__header01 {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}
	}

	//footer {
	&.__footer01 {
		position: relative;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left: 75px;
		padding-right: 75px;
	}
	
	@media (max-width: 1200px) {
		&.__footer01 {
			padding-left: var(--gap02);
			padding-right: var(--gap02);
		}
	}
	
	@media (max-width: 768px) {
		&.__footer01 {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}
	}

	//全体で使用されるレイアウト幅
	&.__main01 {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		padding-left: 75px;
		padding-right: 75px;
		max-width: var(--max-width-big);
	}
	
	@media (max-width: 1200px) {
		&.__main01 {
			padding-left: var(--gap02);
			padding-right: var(--gap02);
		}
	}
	
	@media (max-width: 768px) {
		&.__main01 {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}
	}

	//全体で使用されるレイアウト幅 + レスポンシブで箸にピッタリつく
	&.__main02 {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		padding-left: 75px;
		padding-right: 75px;
		max-width: var(--max-width-big);
	}
	
	@media (max-width: 1200px) {
		&.__main02 {
			padding-left: var(--gap02);
			padding-right: var(--gap02);
		}
	}
	
	@media (max-width: 1024px) {
		&.__main02 {
			padding-left: 0;
			padding-right: 0;
		}
	}
	
	//ヘッダーなど、全体とは異なる部分
	&.__sub01 {
		padding-left: var(--gap03);
		padding-right: 0;
	}
	
	@media (max-width: 1200px) {
		&.__sub01 {
			padding-left: var(--gap01);
		}
	}
	
	@media (max-width: 992px) {
		&.__sub01 {
			padding-left: 1.5rem;
		}
	}

	//記事で使用
	&.__post01 {
		margin-left: auto;
		margin-right: auto;
		padding-left: 90px;
		padding-right: 90px;
	}
	
	@media (max-width: 1400px) {
		&.__post01 {
			padding-left: 56px;
			padding-right: 56px;
		}
	}
	
	@media (max-width: 768px) {
		&.__post01 {
			padding-left: var(--gap01);
			padding-right: var(--gap01);
		}
	}
	
	&.__negative01 {
		margin-left: -90px;
		margin-right: -90px;
	}
	
	@media (max-width: 1400px) {
		&.__negative01 {
			margin-left: -56px;
			margin-right: -56px;
		}
	}
	
	@media (max-width: 768px) {
		&.__negative01 {
			margin-left: calc(-1 * var(--gap01));
			margin-right: calc(-1 * var(--gap01));
		}
	}
	
	&.__bg01 {
		border-radius: 12px;
		background-color: var(--base-color02);
		box-shadow: var(--shadow01);
	}
	
	//白背景のコンテンツラップ
	&.__whiteCont01 {
		border-radius: var(--radius02);
		padding: var(--gap02);
		background-color: var(--base-color02);
	}
	
	@media (max-width: 768px) {
		&.__whiteCont01 {
			padding: var(--gap01);
		}
	}

	//フォームで使用
	&.__form01 {
		position: relative;
		max-width: 90rem;
		margin-left: auto;
		margin-right: auto;
		padding-left: 90px;
		padding-right: 90px;
	}
	
	@media (max-width: 1400px) {
		&.__form01 {
			padding-left: 56px;
			padding-right: 56px;
		}
	}
	
	@media (max-width: 768px) {
		&.__form01 {
			padding-left: var(--gap01);
			padding-right: var(--gap01);
		}
	}
	
	@media (max-width: 576px) {
		&.__form01 {
			padding-left: var(--gap00);
			padding-right: var(--gap00);
		}
	}

	//フォームで使用
	&.__form02 {
		position: relative;
		max-width: 1340px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 90px;
		padding-right: 90px;
	}
	
	@media (max-width: 1400px) {
		&.__form02 {
			padding-left: 56px;
			padding-right: 56px;
		}
	}
	
	@media (max-width: 768px) {
		&.__form02 {
			padding-left: var(--gap01);
			padding-right: var(--gap01);
		}
	}*/
}

/* =========================================================
l-wrap var
========================================================= */

.l-wrap.__tinyprl { padding-left: var(--ptb-tiny); padding-right: var(--ptb-tiny); }
.l-wrap.__minprl { padding-left: var(--ptb-min); padding-right: var(--ptb-min); }
.l-wrap.__midprl { padding-left: var(--ptb-mid); padding-right: var(--ptb-mid); }
.l-wrap.__largeprl { padding-left: var(--ptb-large); padding-right: var(--ptb-large); }
.l-wrap.__bigprl { padding-left: var(--ptb-big); padding-right: var(--ptb-big); }
.l-wrap.__hugeprl { padding-left: var(--ptb-huge); padding-right: var(--ptb-huge); }

/* padding top/bottom */
.l-wrap.__tinyptb { padding-top: var(--ptb-tiny); padding-bottom: var(--ptb-tiny); }
.l-wrap.__minptb { padding-top: var(--ptb-min); padding-bottom: var(--ptb-min); }
.l-wrap.__midptb { padding-top: var(--ptb-mid); padding-bottom: var(--ptb-mid); }
.l-wrap.__largeptb { padding-top: var(--ptb-large); padding-bottom: var(--ptb-large); }
.l-wrap.__bigptb { padding-top: var(--ptb-big); padding-bottom: var(--ptb-big); }
.l-wrap.__hugeptb { 
	padding-top: var(--ptb-huge); padding-bottom: var(--ptb-huge);
	
	@media (max-width: 768px) {
		padding-top: var(--ptb-large); 
		padding-bottom: var(--ptb-big);
	} 
}

/* .l-wrap {
	&.__difference01 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap02);
		overflow: hidden;
	}
	
	@media (max-width: 1024px) {
		&.__difference01 {
			gap: 0;
			flex-direction: column;
		}
	}

	&.__noposition {
		position: inherit;
	}
} */
@charset "UTF-8";

/* =========================================================
l-nav- style
========================================================= */

/* =========================================================
l-nav (Main Navigation Container)
========================================================= */
.l-nav {
	display: flex;
	align-items: flex-end;
	gap: var(--gap05);
	flex: 1;
	justify-content: flex-end;
	@media (max-width: 640px) {
		gap: 0;
	}
}


.l-navCont {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
    justify-content: flex-end;
}

/* =========================================================
l-navSub (Utility Navigation)
========================================================= */
.l-navSub {
	display: flex;
	align-items: center;
	gap: var(--gap04);
}
@media (max-width: 1024px) {
	.l-navSub {
		display: none;
	}
}

.l-navSub__item {
	display: flex;
	align-items: center;
	font-weight: 500;
	color: var(--text-color01);
	font-size: var(--fs-min);
	background: none;
	border: none;
	cursor: pointer;
	transition: opacity 0.3s;
	text-decoration: none;
	
	&:hover {
		opacity: 0.7;
	}
}
.l-navSub__itemIcon {

	aspect-ratio: 1/1;
	font-size: var(--fs-min)!important;
	background: transparent;
	color: var(--text-color01);
	transition: all 0.2s ease-out;
}

/* =========================================================
l-navMain (PC Navigation)
========================================================= */
.l-navMain {
	display: flex;
	align-items: flex-end;
	justify-content: end;
    gap: var(--gap05);
	width: 100%;
}
@media (max-width: 1024px) {
	.l-navMain {
		display: none;
	}
}
.l-navMain__item {
	font-weight: 700;
	color: var(--text-color01);
	font-size: var(--fs-p);
	letter-spacing: 0.64px;
	background: none;
	border: none;
	cursor: pointer;
	transition: opacity 0.3s;
}

.l-navMain__itemLink {
	display: flex;
	align-items: center;
	gap: var(--gap01);
	padding: 20px 0;
	font-size: var(--fs-p);
	font-weight: 700;
	color: var(--text-color01);
	text-decoration: none;
	transition: color 0.2s ease-out;
	
	&::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 3px;
		background: var(--accent-color01);
		transition: width 0.3s ease-out;
	}

	&:hover {
		opacity: 0.7;
	}
	
	&:hover::before,
	.l-navMain__item:hover &::before {
		width: 100%;
	}
}

.l-navMain__itemIcon {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1/1;
	margin-top: 3px;
	padding: 1px;
	font-size: var(--fs-mid)!important;
	border: 1px solid var(--base-color01);
	background: transparent;
	color: var(--text-color01);
	transition: all 0.2s ease-out;
	&.__noborder {
		border: none;
		padding: 0;
	}
}

.l-navMain__item:hover .l-navMain__itemIcon {
	background: var(--base-color01);
	color: var(--accent-color02);
}

/* =========================================================
l-navMain__submenu (Dropdown Menu)
========================================================= */
.l-navMain__submenu {
	position: absolute;
	top: 100%;
	width: 100vw; /* 画面幅全体に広がる */
	left: 0;
    right: 0;
    margin: auto;
	transform: translateX(-0%);
	background: var(--base-color03);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	
	/* sd appear アニメーション */
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateX(-0%) translateY(-10px);
	transition: all 0.3s ease-out;
}

.l-navMain__item:hover .l-navMain__submenu {
	max-height: 200px;
	opacity: 1;
	transform: translateX(-0%) translateY(0);
}

.l-navMain__submenuInner {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	padding: var(--gap03) 0;
	max-width: 1200px;
	margin: 0 auto;
}

.l-navMain__submenuItem {
	display: flex;
	align-items: center;
	padding: var(--gap02) var(--gap04);
	font-size: var(--fs-mid);
	font-weight: 700;
	color: var(--text-color01);
	text-decoration: none;
	transition: all 0.2s ease-out;
	position: relative;
	border-right: 1px solid var(--border-color01);
	
	&:last-child {
		border-right: none;
	}
	
	&:hover {
		color: var(--accent-color01);
		background: rgba(255, 255, 255, 0.1);
	}
}


/* =========================================================
l-navSp (Mobile Navigation)
========================================================= */

.l-navSp__wrap {
	position: relative;
	width: 100%;
}

.l-navSp__bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	backdrop-filter: blur(20px);
	background-color: rgba(var(--base-color01-rgb), 0.3);
}

.l-navSp__cont {
	position: absolute;
	margin: inherit;
	top: var(--gap00);
	right: var(--gap00);
	bottom: var(--gap00);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	padding: var(--gap01);
	width: 100%;
	max-width: 280px;
	border-radius: var(--radius01);
	background-color: var(--base-color02);
}

/* 閉じるボタン */
.l-navSp__close {
	font-size: var(--fs-mid);
	display: flex;
	gap: var(--gap00);
	align-items: center;
	width: 100%;
	justify-content: flex-end;
}

.l-navSp__closeBar {
	position: relative;
	width: 16px;
	height: 16px;
	
	&::before, 
	&::after {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20px;
		height: 2px;
		object-fit: cover;
		aspect-ratio: 1/1;
		background-color: var(--base-color01);
		cursor: pointer;
		transform: rotate(45deg);
	}
	
	&::after {
		transform: rotate(-45deg);
		background-color: #7B93C5;
	}
	
	&:hover {
		transform: scale(1.1);
	}
}

/* メニュー */
.l-navSp__menu {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	
	&.__main01 {
		font-size: var(--fs-postp);
		line-height: 1.2;
		
		.l-navSp__menuItem {
			justify-content: space-between;
			
			&::after {
				content: "\f1df";
				font-family: var(--font-googleicon);
				opacity: 0;
				transition: opacity var(--transition01);
			}
			
			&:hover {
				color: var(--accent-color01);
				
				&::after {
					opacity: 1;
				}
			}
		}
	}
	
	&.__sub01 {
		font-size: var(--fs-mid);
		font-weight: normal;
		
		&:hover {
			.l-navSp__menuItem {
				opacity: 0.3; 
			}
		}
		
		.l-navSp__menuItem {
			&:hover {
				opacity: 1;
			}
		}
	}
}

.l-navSp__menuItem {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--gap00);
}

/* マイページ関連 */
.l-navSp__mypage {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	padding: var(--gap01);
	border-radius: var(--radius01);
	background-color: var(--base-color02);
}

.l-navSp__mypageTitle {
	display: flex;
	justify-content: center;
	gap: var(--gap00);
	padding-bottom: var(--gap00);
	border-bottom: 1px solid var(--border-color01);
	
	&::before {
		content: "\e853";
		font-family: var(--font-googleicon);
	}
}

.l-navSp__mypageNav {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	justify-content: center;
	align-items: center;
}

.l-navSp__mypageNav__item {
	font-size: var(--fs-mid);
	display: flex;
	gap: 5px;
	
	&:hover {
		color: var(--accent-color01);
	}
}

.l-navSp__mypageNav__itemUnit {
	color: var(--accent-color01);
	font-family: var(--font-outfit);
}
@charset "UTF-8";

/* =========================================================
l-mnav
========================================================= */
.l-mnav {
	background-color: var(--base-color02);
	position: fixed;
	top: 0;
	right: 0;
	max-width: 500px;
	width: 100%;
	height: 100vh;
	z-index: 1000;
	opacity: 0;
	overflow-y: scroll;
	visibility: hidden;
	transform: translateY(10px);
	background-color: var(--base-color03);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	&.__open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
	}
}

.l-mnavInner {
	display: flex;
	flex-direction: column;
	gap: var(--gap05);
	padding: var(--gap05);
}

.l-mnavLogo {
	display: flex;
	align-items: center;
	justify-content: center;
}
.l-mnavFunc {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列 */
	gap: var(--gap00);
}
.l-mnavFunc__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-basis: 50%;
	gap: var(--gap00);
	border-radius: var(--radius01);
	background-color: var(--base-color02);
	padding: var(--gap04) var(--gap01);
	color: var(--text-color01);
	font-size: var(--fs-postp);
	cursor: pointer;
	transition: all 0.3s ease;
	min-width: 0;
	&:hover {
		background-color: var(--base-color04);
	}

	&.__elaerning {
		grid-column: 1 / -1; 
	}
}
.l-mnavFunc__itemIcon {
	color: var(--accent-color02);
}

/* =========================================================
l-mnavCourse
========================================================= */
.l-mnavCourses {
	display: flex;
	flex-direction: column;
}
.l-mnavCourses__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--gap03) 0;
	border-bottom: 1px solid var(--base-color02);

	font-size: var(--fs-postp);
	font-weight: bold;
	color: var(--text-color01);

	transition: transform 0.3s ease;

	&:first-child {
		border-top: 1px solid var(--base-color02);
	}

	&:hover {
		&::after {
			transform: translateX(-5px);
			filter: grayscale(0) brightness(1.2);
		}
	}

	&::after {
		content: "\e315";
		font-family: "Material Symbols Outlined";

		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: var(--gradient-button01);
		aspect-ratio: 1 / 1;

		font-size: var(--fs-min);
		color: var(--text-color04);
		transition: transform 0.3s, filter 0.3s;

		filter: grayscale(1);
	}

	&.__external {
		&::after {
			content: "\e89e";
			font-family: "Material Symbols Outlined";
		}
	}
}
.l-mnavCta {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: var(--gap04);
	padding: var(--gap03);
}
.l-mnavCta__img {
	aspect-ratio: 1 / 1;
	width: 100px;
	object-fit: cover;
	object-position: center;
}
.l-mnavCta__info {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
}
.l-mnavCta__infoTitle {
	font-size: var(--fs-postp);
}
.l-mnavCta__infoText {
	font-weight: normal;
	font-size: var(--fs-min);
}

.l-mnavFooter {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap06) var(--gap01);
}
.l-mnavFooter__unit {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	position: relative;
	padding-top: var(--gap04);

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background: var(--gradient-line01);
	  }
}
.l-mnavFooter__item {
	font-size: var(--fs-mid);
	font-weight: normal;
}

.l-mnav__close {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-min);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);

	position: absolute;
    bottom: var(--gap00);
    right: var(--gap00);
    padding: var(--gap05) var(--gap02);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;

	&:hover {
		filter: brightness(1.2);
	}
}

.l-mnav.__open .l-mnav__close {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.3s ease 0.5s, transform 0.3s ease 0.5s, visibility 0s 0.5s;
}

@charset "UTF-8";
@use "../foundation/f-variables" as *;
@use "../foundation/f-mixins" as *;
/* =========================================================
l-header- style
========================================================= */

/* ヘッダー ロゴのみ */
.l-headerOnlylogo__wrap {
	display: flex;
	justify-content: center;
}


/* ヘッダー カートページ */
.l-header.__cart {
	padding-top: var(--gap04);
	padding-bottom: var(--gap04);
	padding-right: var(--gap04);
	justify-content: space-between;
}	
@charset "UTF-8";
/* =========================================================
o-animate -  style
============================================================*/

.o-animate {
	&.__fadeinTop {
		opacity : 0;
		&.is-active { 
			animation-duration: var(--duration02);
			animation-name: fadeinTop;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing01); 
			
		}
	}
	&.__fadeinLeft {
		opacity: 0;
		&.is-active { 
			animation-duration: var(--duration02);
			animation-name: fadeinLeft;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing01); 
		}
	}
	&.__fadeinRight {
		opacity: 0;
		&.is-active { 
			animation-duration: var(--duration02);
			animation-name: fadeinRight;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing01); 
		}
	}
	&.__fadeinBottom {
		opacity: 0;
		&.is-active { 
			animation-duration: var(--duration02);
			animation-name: fadeinBottom;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing01); 
		}
	}
	&.__maskBg01 {
		position: relative;
		opacity: 0;
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 0.875rem;
			height: 100%;
			background: var(--base-color01);
		}
		&.is-active {
			opacity: 0;
			animation-delay: 1.3s;
			animation: opacity var(--duration02) var(--timing01);
			animation-fill-mode:forwards;
			&::after {
				animation: maskBg .75s var(--timing01);
				animation-fill-mode:forwards;
			}
		}
	}
	&.__scaleRotate01 {
		opacity: 01;
		&.is-active {
			animation-duration: var(--duration02);
			animation-name: scaleRotate;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing01); 
		}
	}
	/*既に画面内に入っている場合*/
		&.is-inFv__fadeinTop {
			opacity: 0;
			animation-duration: var(--duration02);
			animation-name: fadeinTop;
			animation-fill-mode:forwards;
			animation-timing-function: var(--timing02);
		}
		&.is-inFv__fadeinLeft {
			opacity: 0;
			animation-duration: var(--duration02);
			animation-name: fadeinLeft;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing02); 
		}
		&.is-inFv__fadeinRight {
			opacity: 0;
			animation-duration: var(--duration02);
			animation-name: fadeinRight;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing02); 
		}
		&.is-inFv__fadeinBottom {
			opacity: 0;
			animation-duration: var(--duration02);
			animation-name: fadeinBottom;
			animation-fill-mode: forwards;
			animation-timing-function: var(--timing02); 
		}

		&.is-inFv__scaleRotate {
			opacity: 0;
			animation-duration: var(--duration02);
			animation-name: scaleRotate;
			animation-fill-mode:forwards;
			animation-timing-function: var(--timing02);
			@include mq-md {
				animation-name: fadeinTop;
			}
		}

		&.is-inFv__rotateScale {
			opacity: 0;
			animation-duration: var(--duration02);
			animation-name: rotateScale;
			animation-fill-mode:forwards;
			animation-timing-function: var(--timing02);
		}


		&.is-inFv__maskBg01 {
			width: fit-content;
			position: relative;
			opacity: 0;
			animation: opacity var(--duration02) var(--timing01);
			animation-delay: 1s;
			animation-fill-mode:forwards;
			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 0.875rem;
				height: 100%;
				background: var(--base-color01);
				animation: maskBg 1s var(--timing01);
				animation-delay: .8s;
				animation-fill-mode:forwards;
			}
	}
}

/* =========================================================
o-animate -  var
============================================================*/
.o-animate {
	&.__delay01 {
		&,&::after {
			transition-delay: .4s;
			animation-delay: .4s; 
		}
	}
	&.__delay02 {
		&,&::after {
		transition-delay: .8s;
		animation-delay: .8s;
	}
	}
	&.__delay03 {
		&,&::after {
		transition-delay: 1.2s;
		animation-delay: 1.2s;
	}
	}
	&.__delay04 {
		&,&::after {
		transition-delay: 1.6s;
		animation-delay: 1.6s;
	}
	}
	&.__delay05 {
		&,&::after {
		transition-delay: 2s;
		animation-delay: 2s;
	}
	}
	&.__delay06 {
		&,&::after {
		transition-delay: 2.4s;
		animation-delay: 2.4s;
	}
	}
	&.__delay07 {
		&,&::after {
		transition-delay: 2.8s;
		animation-delay: 2.8s;
	}
	}
	&.__delay08 {
		&,&::after {
		transition-delay: 3.2s;
		animation-delay: 3.2s;
	}
	}
}

/* =========================================================
Keyframes
============================================================*/

@keyframes pulse-blue {
	0% {
		transform: scale(1);
        border: 1px solid rgba(var(--accent-color01), 0);
		box-shadow: 0 0 0 0 rgba(var(--accent-color01), 0);
	}
	30% {
		transform: scale(0.98);
        border: 1px solid rgba(var(--accent-color01), 1);
		box-shadow: 0 0 0 0 rgba(var(--accent-color01), 0.5);
	}

	70% {
		transform: scale(1.04);
        border: 1px solid rgba(var(--accent-color01), 0);
		box-shadow: 0 0 0 10px rgba(var(--accent-color01), 0);
	}

	100% {
		transform: scale(1);
        border: 1px solid rgba(var(--accent-color01), 0);
		box-shadow: 0 0 0 0 rgba(var(--accent-color01), 0);
	}
}
@keyframes pulse-red {
	0% {
		transform: scale(1);
        border: 1px solid rgba(var(--accent-color03), 0);
		box-shadow: 0 0 0 0 rgba(var(--accent-color03), 0);
	}
	3% {
		transform: scale(0.98);
        border: 1px solid rgba(var(--accent-color03), .5);
		box-shadow: 0 0 0 0 rgba(var(--accent-color03), 0.3);
	}

	70% {
		transform: scale(1.02);
        border: 1px solid rgba(var(--accent-color03), 0);
		box-shadow: 0 0 0 10px rgba(var(--accent-color03), 0);
	}

	100% {
		transform: scale(1);
        border: 1px solid rgba(var(--accent-color03), 0);
		box-shadow: 0 0 0 0 rgba(var(--accent-color03), 0);
	}
}

@keyframes pathmove{
	0%{
	  height:0;
	  top:-120px;
	  opacity: 0;
	}
	20%{
	  height:64px;
	  opacity: 1;
	}
	100%{
	  height:0;
	  top: -20px;
	  opacity: 0;
	}
}

@keyframes bgimgMove{
	0%{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	25%{
		top: -200px;
		left: 200px;
	}
	75% {
		bottom: 100px;
		right: 100px;

	}
	100%{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
}

@keyframes appear {
    to {
		bottom: 12px;
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes opacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes gradientDots {
	0% {
	  background-position: 0% 50%;
	}
	50% {
	  background-position: 200% 100%;
	}
	100% {
	  background-position: 0% 50%;
	}
  }

  @keyframes rotate{
	from {
		transform: rotate(0deg) scale(1.2);
	}
	to {
		transform: rotate(360deg) scale(1.2);
	}
  }


  @keyframes js-upAnime{
	from {
	  opacity: 1;
	transform: translateY(0);
	}
	to {
	transform: translateY(-190px);
	}
  }

  @keyframes js-downAnime{
	from {
	transform: translateY(-190px);
	}
	to {
	  opacity: 1;
	transform: translateY(0);
	}
  }

  @keyframes slideAnime {
	0% {
	  opacity: 0;
	}
  
	16% {
	  opacity: 1;
	}
  
	33% {
	  opacity: 1;
	}
  
	49% {
	  opacity: 0;
	}
  
	100% {
	  opacity: 0;
	  transform: scale(1);
	}
  }

  @keyframes fadeinLeft{
	0% {
		opacity: 0;
		transform: translateX(10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
  }
  @keyframes fadeinRight{
	0% {
		opacity: 0;
		transform: translateX(-10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
  }
  @keyframes fadeinTop{
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
  }
  @keyframes fadeinBottom{
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
  }

  @keyframes scaleRotate{
	0% {
		opacity: 0;
		transform: rotateY(0deg) scale(0) translateY(-10px);
	}
	70% {
		opacity: 1;
		transform: rotateY(780deg);
	}
	100% {
		opacity: 1;
		transform: rotateY(720deg) scale(1) translateY(0px);
	}
  }


  @keyframes scaleUp{
	0% {
		opacity: 0;
		transform: scale(0);
	}
	70% {
		transform: scale(1.2);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
  }

  @keyframes bgScaleUp{
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
  }

  @keyframes rotateScale {
	0% {
		opacity: 0;
		transform: rotate(-45deg);
	}
	75% {
		opacity: 1;
		transform: rotate(10deg);
	}
	95% {
		transform: rotate(-2deg);
	}
	100% {
		opacity: 1;
		transform: rotate(0deg);
	}
  }

  @keyframes notificationShowHide01 {
	0% {
		z-index: 10;
		opacity: 0;
		transform: translateY(-15px);
	}

	5% {
		z-index: 10;
		opacity: 1;
		transform: translateY(0px);
	}

	95% {
		z-index: 10;
		opacity: 1;
		transform: translateY(0px);
	}


	100% {
		opacity: 0;
		transform: translateY(-15px);
		z-index: -1;
	}
  }

  @keyframes notificationBar01 {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
  }

  @-webkit-keyframes maskBg {
	0% {
	  left: 0;
	  width: 0.875rem;
	}
	50% {
	  left: 0;
	  width: 100%;
	}
	100% {
	  left: 100%;
	  width: 0;
	}
  }
  
  @keyframes maskBg {
	0% {
	  left: 0;
	  width: 0.875rem;
	}
	50% {
	  left: 0;
	  width: 100%;
	}
	100% {
	  left: 100%;
	  width: 0;
	}
  }
@charset "UTF-8";

/* =========================================================
o-animation - 再利用可能なアニメーション
========================================================= */

/* =========================================================
テキストアニメーション
========================================================= */
.o-aniText {
	overflow: hidden;
}

.o-aniText__target {
	display: inline-block;
	opacity: 0;
	transform: translateX(100px);
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform, opacity;
	position: relative;
}

.o-aniText__target.active {
	opacity: 1;
	transform: translateX(0);
}

/* グラデーション効果 */
.o-aniText__target::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--accent-color01), var(--accent-color02), var(--accent-color07), var(--accent-color10), var(--accent-color04), var(--accent-color08));
	background-size: 300% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: 0;
	transform: translateX(5px);
	transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.o-aniText__target.animate::before {
	opacity: 1;
	transform: translateX(0);
	animation: gradientShift 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	animation-delay: .1s;
}

.p-topHero__titleWrap.o-aniText__target.animate::before {
	@media (max-width: 1024px) {
        padding: 2px var(--gap02) 5px;
        margin-bottom: 1px;
	}
}

@keyframes gradientShift {
	0% {
		background-position: 100% 0;
		opacity: 1;
	}
	50% {
		background-position: 0% 0;
		opacity: 1;
	}
	100% {
		background-position: 0% 0;
		opacity: 0;
	}
}

/* =========================================================
画像アニメーション
========================================================= */
.o-aniImg__mask01 {
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* p-topStrength__picBg__img用の特別な調整 */
.p-topStrength__picBg .o-aniImg__mask01 {
	position: sticky;
	top: 3rem;
	height: 80vh;
}
@media (max-width: 768px) {
	.p-topStrength__picBg .o-aniImg__mask01 {
		aspect-ratio: 1/1;
		height: fit-content;
	}
}

/* p-topFlow__boxImg__wrap用の調整 */
.p-topFlow__boxImg__wrap {
	width: 100%;
	height: 100%;
}

.o-aniImg__mask01__target {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}


.o-aniImg__mask01__mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--base-color01);
	transform: translateX(0);
	transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	will-change: transform;
	z-index: 1;
}

.o-aniImg__mask01__mask.active {
	transform: translateX(100%);
}

/* パララックス効果 */
.o-aniImg__mask01__target.parallax {
	transform: translate3d(0, 0, 0);
	transition: transform 0.1s ease-out;
	will-change: transform;
}

/* =========================================================
遅延アニメーション用のユーティリティ
========================================================= */
.o-ani-delay-1 { transition-delay: 0.1s; }
.o-ani-delay-2 { transition-delay: 0.2s; }
.o-ani-delay-3 { transition-delay: 0.3s; }
.o-ani-delay-4 { transition-delay: 0.4s; }
.o-ani-delay-5 { transition-delay: 0.5s; }
.o-ani-delay-6 { transition-delay: 0.6s; }
.o-ani-delay-7 { transition-delay: 0.7s; }
.o-ani-delay-8 { transition-delay: 0.8s; }
.o-ani-delay-9 { transition-delay: 0.9s; }
.o-ani-delay-10 { transition-delay: 1.0s; }

@charset "UTF-8";
/*------------------------------------------
* o-icon base
------------------------------------------*/
.o-icon {
    &::before,
    &::after {
		font-family: var(--googleicon);
		font-weight: 900;
    }
}
/*------------------------------------------
* o-icon icon
------------------------------------------*/

.o-icon {
	/*ペン*/
	&.__pen01 {
		&::before {
			content: "\e3c9";
		}
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e3c9";
                 
            }
        }
	}

	/*手*/
	&.__hand01 {
		&::before {
			content: "\e769";
		}
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e769";
                 
            }
        }
	}

	/*いいね*/
	&.__thumbsup01 {
		&::before {
			content: "\e8dc";
		}
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e8dc";
                 
            }
        }
	}

	/*プレゼント*/
	&.__present01 {
		&::before {
			content: "\e8f6";
		}
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e8f6";
                 
            }
        }
	}

	/*カート*/
	&.__cart01 {
		&::before {
			content: "\e8cc";
		}
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e8cc";
                 
            }
        }
	}

    /*ログイン*/
    &.__login01 {
        &::before {
            content: "\ea77";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\ea77";
                 
            }
        }
    }
    /*ログアウト*/
    &.__logout01 {
        &::before {
            content: "\e9ba";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e9ba";
                 
            }
        }
    }
    /*ユーザー*/
    &.__user01 {
        &::before {
            content: "\e853";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e853";
                 
            }
        }
    }

    /*エクスターナルリンク*/
    &.__external01 {
        &::before {
            content: "\e89e";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e89e";
                 
            }
        }
    }
    /*検索*/
    &.__search01 {
        &::before {
            content: "\e8b6";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e8b6";
                 
            }
        }
    }
    /*リセット*/
    &.__reset01 {
        &::before {
            content: "\f053";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\f053";
                 
            }
        }
    }
    /*コンサル・無料相談*/
    &.__consult01 {
        &::before {
            content: "\e9bc";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e9bc";
                 
            }
        }
    }
    /*お気に入り 前*/
    &.__bookmark01 {
        &::before {
            content: "\e8e6";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e8e6";
                 
            }
        }
    }
    /*お気に入り 後*/
    &.__bookmarked01 {
        &::before {
            content: "\e599";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e599";
                 
            }
        }
    }
    /*フォルダ・カテゴリー*/
    &.__folder01 {
        &::before {
            content: "\e2c7";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e2c7";
                 
            }
        }
    }
    /*ハッシュタグ*/
    &.__hashtag01 {
        &::before {
            content: "\e9ef";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e9ef";
                 
            }
        }
    }
    /*ロック・南京錠*/
    &.__lock01 {
        &::before {
            content: "\e897";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e897";
                 
            }
        }
    }
    /*リンク・右向き矢印*/
    &.__arrowRight01 {
        &::before {
            content: "\f1df";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\f1df";
                 
            }
        }
    }
    /*リンク・上向き矢印*/
    &.__arrowUp01 {
        &::before {
            content: "\e5d8";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e5d8";
                 
            }
        }
    }

    /*丸チェック*/
    &.__check01 {
        &::before {
            content: "\e86c";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e86c";
                 
            }
        }
    }

    /*ラジオ・チェックマークのみ*/
    &.__checkOnly01 {
        &::before {
            content: "\e9bc";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e9bc";
                 
            }
        }
    }
    /*トグル・下向きアングル*/
    &.__angleDown01 {
        &::before {
            content: "\e313";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e313";
                 
            }
        }
    }
    /*トグル・右向きアングル*/
    &.__angleRight01 {
        &::before {
            content: "\e409";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e409";
                 
            }
        }
    }
    /*トグル・左向きアングル*/
    &.__angleLeft01 {
        &::before {
            content: "\e5cb";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e5cb";
                 
            }
        }
    }


    /*情報・日時*/
    &.__date01 {
        &::before {
            content: "\e935";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e935";
                 
            }
        }
    }
    /*情報・場所*/
    &.__area01 {
        &::before {
            content: "\e55f";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e55f";
                 
            }
        }
    }
    /*情報・値段*/
    &.__price01 {
        &::before {
            content: "\f05b";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\f05b";
                 
            }
        }
    }
    /*情報・講義時間*/
    &.__estimate01 {
        &::before {
            content: "\e858";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e858";
                 
            }
        }
    }
    /*情報・人*/
    &.__human01 {
        &::before {
            content: "\e7ff";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e7ff";
                 
            }
        }
    }

    /*状態・良い・まる*/
    &.__good01 {
        &::before,
        &::after {
            color: var(--line-color0);
        }
        &::before {
            content: "\ef4a";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\ef4a";
                 
            }
        }
    }
    /*状態・微妙・三角*/
    &.__warn01 {
        &::before,
        &::after {
            color: var(--accent-color03);
        }
        &::before {
            content: "\f083";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\f083";
                 
            }
        }
    }
    /*状態・だめ・ばつ*/
    &.__close01 {
        &::before,
        &::after {
            color: var(--accent-color03);
        }
        &::before {
            content: "\e5cd";
        }
        &.__afterItem {
            &::before {
                content: none;
            }
            &::after {
                content: "\e5cd";
                 
            }
        }
    }
    
}

/*------------------------------------------
* o-icon var
------------------------------------------*/
.o-icon.__withItem {
    display: flex;
    gap: .3rem;
}

.o-icon.__afterItem {

}
@charset "UTF-8";
/* =========================================================
o-parts -  style
============================================================*/

/* 通知
--------------------------------------------------------- */
.o-partsNotification {
    position: fixed;
    top: var(--gap02);
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;

    display: flex;
    align-items: center;
    gap: var(--gap01);
    padding: var(--gap01) var(--gap01);
    background-color: var(--base-color02);
    border-radius: var(--radius01);

    max-width: clamp(90%,5vw,600px);
    width: fit-content;
    box-shadow: 0 0 12px var(--shadow-color01);
    @media screen and (max-width:768px){ 
        padding: var(--gap01) var(--gap01);
    }

    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        margin: auto;
        height: 2px;
        width: 100%;
    }
}
.o-partsNotification__title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.o-partsNotification {
    opacity: 0;
    /* //成功 */
    &.__succeed {
        background-color: #e6edf7;
        .o-partsNotification__title {
            &::before {
                content: "\e86c";
                font-family: var(--googleicon);
                color: var(--accent-color01);
            }
        }
        &::after {
            background-color: var(--accent-color01);
        }
    }

    /* 失敗 */
    &.__failed {
        background-color: #f7e8e5;
        .o-partsNotification__title {
            &::before {
                content: "\e000";
                font-family: var(--googleicon);
                color: var(--accent-color03);
            }
        }
        &::after {
            background-color: var(--accent-color03);
        }
    }
    /* アニメーション */
    &.__active {
        z-index: 10;
        animation-duration: 4s;
        animation-name: notificationShowHide01;
        animation-fill-mode:forwards;
        animation-timing-function: var(--timing02);
        &::after {
            animation-duration: 5s;
            animation-name: notificationBar01;
            animation-fill-mode:forwards;
            animation-timing-function: var(--timing02);
        }
    }
}


/* FAQ
--------------------------------------------------------- */
.o-partsFaq {
	display: flex;
	flex-direction: column;
}
.o-partsFaq__item {
	border-top: 1px solid var(--border-color03);
	border-bottom: 1px solid var(--border-color03);
	display: flex;
	flex-direction: column;
	&:first-child {
		border-top: none;
	}
	&:last-child {
		border-top: none;
	}
}
.o-partsFaq__title {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--gap01);
	padding: var(--gap05) var(--gap07) var(--gap05) 0;
	font-size: var(--fs-postp);
	font-weight: 700;
	cursor: pointer;

	&::before {
		content: "Q.";
		font-size: var(--fs-large);
		font-weight: 900;
		font-family: var(--font-outfit);
		color: var(--accent-color02);
	}
	&::after {
		content: "\e313";
		font-family: var(--googleicon);
		font-size: var(--fs-title);
		transition: transform .3s var(--timing02);

		width: 40px;
		height: 40px;

		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;

		display: flex;
		justify-content: center;
		align-items: center;

		background-color: var(--base-color02);
		color: var(--accent-color02); 
		transition: background-color .3s var(--timing02), filter .3s var(--timing02) ,color .3s var(--timing02), transform .3s var(--timing02), box-shadow .3s var(--timing02);
	}
	&:hover {
		&::after {
			color: var(--text-color04);
			background-color: var(--base-color01);
			filter: brightness(1.2);
			box-shadow: 0 0 12px var(--shadow-color01);
		}
	}
	&.is-active {
		&::after {
			transform: rotate(180deg);
			background-color: var(--base-color01);
			color: var(--text-color04);
		}
	}
}

.o-partsFaq__answer {
	padding: 0 var(--gap04);
	padding-left: 80px;
	background-color: var(--base-color02);

	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(-10px);
	transition: max-height 0.4s var(--timing02), opacity 0.3s var(--timing02), transform 0.3s var(--timing02), padding 0.3s var(--timing02);

	@media (max-width: 591px) {
		padding-left: 50px;
	}

	&.is-active {
		max-height: 1000px;
		opacity: 1;
		transform: translateY(0);
		padding: var(--gap05) var(--gap04);
		padding-left: 80px;
		@media (max-width: 591px) {
			padding-left: 50px; 
		}
	}

	p {
		margin-bottom: var(--gap00);
	}
}
.o-partsFaq__answerTitle {
	font-size: var(--fs-postp);
	font-weight: 700;
	line-height: 1.3;
    display: flex;
    gap: 5px;
	&::before {
		content: "A.";
		font-size: var(--fs-large);
		font-weight: 900;
		font-family: var(--font-outfit);
		color: var(--accent-color02);
		margin-left: -30px;
		@media (max-width: 591px) {
			margin-left: -30px;
		}
	}
}
@charset "UTF-8";
/* =========================================================
 o-btn - Pure CSS component (no SCSS dependencies)
 Uses foundation variables: var(--fs-*), var(--gap*), var(--base-color*), var(--accent-color*), var(--text-color*)
============================================================ */

.p-cart .o-btnCart,
.o-btnCart {
	font-size: var(--fs-p)!important;
	font-weight: 700;
	background: var(--gradient-button04);
	color: var(--text-color04);
	box-shadow: var(--shadow01);
	border-radius: 2px;
	transition: transform var(--transition01, .25s ease), filter var(--transition01, .25s ease), box-shadow var(--transition01, .25s ease);

	display: flex;
	gap: 5px;
	align-items: center; 
	justify-content: center;

	padding: var(--gap04) var(--gap01)!important;

	&::before {
		content: "shopping_cart";
		font-family: "Material Symbols Outlined";
		font-weight: 500;
	}

	&:hover {
		background: var(--gradient-button04);
		filter: brightness(1.2);
		transform: translateY(-4px);
	}
}

/* =========================================================
 o-btn - var
============================================================ */

.o-btn {
	font-weight: 700;
    &.__main01 {
        background: var(--gradient-button03);
        color: var(--text-color04);
		box-shadow: var(--shadow01);

        &:hover {
            filter: brightness(1.2);
            transform: translateY(1px);
        }
		&::before,
		&::after {
			color: var(--text-color04);
		}
    }
    &.__main02 {
        background: var(--gradient-button01);
        color: var(--text-color04);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--gap02);
		box-shadow: var(--shadow01);

        &:hover {
            filter: brightness(1.2);
            transform: translateY(1px);
        }

		&::after {
			content: "";
			width: 10px;
			height: 10px;
			background: var(--gradient-icon01);
		}
		&::before,
		&::after {
			color: var(--text-color04);
		}
    }
	&.__main03 {
        background: var(--gradient-button01);
        color: var(--text-color04);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--gap02);
		box-shadow: var(--shadow01);

        &:hover {
            filter: brightness(1.2);
            transform: translateY(1px);
        }
		&::before,
		&::after {
			color: var(--text-color04);
		}
    }
	&.__main04 {
		background: var(--gradient-button04);
        color: var(--text-color04);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--gap02);
		box-shadow: var(--shadow01);

        &:hover {
            filter: brightness(1.2);
            transform: translateY(1px);
        }
		&::before,
		&::after {
			color: var(--text-color04);
		}
	}
}




.o-btn {
	cursor: pointer;
	overflow: hidden;
	transition: transform var(--transition01, .25s ease), filter var(--transition01, .25s ease), box-shadow var(--transition01, .25s ease);

	&:hover::before {
	}

	/* font-sizes */
	&.__huge {
		font-size: var(--fs-huge);
		line-height: 1.5;
		letter-spacing: .5rem;
	}

	&.__en {
		letter-spacing: .01rem;
		font-family: var(--font-family02, inherit);
	}

	&.__big {
		font-size: var(--fs-big);
	}

	&.__large {
		font-size: var(--fs-large);
	}

	&.__title {
		font-size: var(--fs-title);

		&.__en {
			letter-spacing: .3rem;
		}
	}

	&.__postp {
		font-size: var(--fs-postp);
	}

	&.__p {
		font-size: var(--fs-p);
	}

	&.__mid {
		font-size: var(--fs-mid);
	}

	&.__min {
		font-size: var(--fs-min);
	}

	&.__tiny {
		font-size: var(--fs-tiny);
	}

	/* width / radius */
	&.__radius01 {
        border-radius: var(--radius01);
    }

	&.__radius02 {
		border-radius: var(--radius02);
	}

    &.__radius100 {
		border-radius: 100px;
	}

	&.__wfit {
		width: fit-content;
	}

	&.__w100 {
		width: 100%;
	}

	/* spacing */
	&.__sizes {
		padding: .5rem var(--gap03);
	}

	&.__sizem {
		padding: var(--gap03) var(--gap05);
	}

	&.__sizel {
		padding: var(--gap04) var(--gap07);
	}

	&.__sizexl {
		padding: var(--gap05) var(--gap08);
	}

	/* helpers */
	&.__mw01 {
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
	}

	&.__mw02 {
		max-width: clamp(280px, 100%, 320px);
		margin-left: auto;
		margin-right: auto;
	}
	&.__w100 {
		width: 100%;
	}

	&.__left {
		margin-left: inherit;
	}

	&.__center {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	/* icon helpers (Font Awesome) */
	&.__arrow {
		position: relative;

		&::after {
			content: "\f061";
			font-family: "FontAwesome";
			margin-left: 12px;
			color: #45b4eb;
		}
	}

	&.__fileBefore {
		position: relative;

		&::before {
			content: "\f0f6";
			font-family: "FontAwesome";
			margin-left: 12px;
			font-weight: 500;
			color: #45b4eb;
		}
	}

	&.__fileAfter {
		position: relative;

		&::after {
			content: "\f0f6";
			font-family: "FontAwesome";
			margin-left: 12px;
			font-weight: 500;
			color: #45b4eb;
		}
	}

	/* color variants */
	&.__white {
		color: var(--text-color01);

		.o-icon:before {
			color: var(--text-color01);
		}

		&:hover {
			color: var(--text-color01) !important;
		}
	}

	&.__blue {
		background: linear-gradient(to right, var(--accent-color02), var(--accent-color01));
		color: #fff;
		box-shadow: 0 5px 0 #0968C1;

		&:hover {
			filter: brightness(.96);
			transform: translateY(5px);
			box-shadow: 0 0 0 #0968C1;
		}
	}

	&.__navy {
		background: var(--base-color01);
		color: #fff;
		box-shadow: 0 5px 0 #1a3244;

		&:hover {
			filter: brightness(.96);
			transform: translateY(5px);
			box-shadow: 0 0 0 #1a3244;
		}
	}

	&.__orange {
		background-color: #FF6A3C;
		color: #fff;
		box-shadow: 0 5px 0 #C66243;

		&:after {
			color: #fff;
		}

		&:hover {
			filter: brightness(.96);
			transform: translateY(5px);
			box-shadow: 0 0 0 #C66243;
		}
	}

	&.__green {
		background-color: #22B973;
		color: #fff;
		text-decoration: none;
		box-shadow: 0 5px 0 #1A9A5F;

		&:after {
			color: #fff;
		}

		&:hover {
			filter: brightness(.96);
			transform: translateY(5px);
			box-shadow: 0 0 0 #1A9A5F;
		}
	}

	&.__gray {
		background: var(--base-color03);
		color: var(--text-color01);
		box-shadow: 0 5px 0 #c5cfd6;

		&:hover {
			filter: brightness(.96);
			transform: translateY(5px);
			box-shadow: 0 0 0 #c5cfd6;
		}
	}

	&.__gold {
		background: linear-gradient(to right, #C9BA90, var(--accent-color07));
		color: #fff;
		box-shadow: 0 5px 0 #9F8239;

		&:hover {
			filter: brightness(.96);
			transform: translateY(5px);
			box-shadow: 0 0 0 #9F8239;
		}

		&.__arrow::after,
		&.__fileAfter::after {
			color: var(--text-color02);
		}

		&.__fileBefore::before {
			color: var(--text-color02);
		}
	}

	/* outline */
	&.__border01 {
		border: 1px solid var(--base-color01);
		background-color: transparent;
		color: var(--base-color01);
		transition: color var(--transition01, .25s ease), background-color var(--transition01, .25s ease);

		&:hover {
			color: var(--text-color02);
			background-color: var(--base-color01);
		}
	}

	/* specific */
	&.search {
		min-width: 300px;
		padding: 2.2rem var(--gap00);
		line-height: 1;
	}

	&.keywordsearch {
		padding: var(--gap01) var(--gap00);
		line-height: 1;
	}

	&.denial {
		background: #A0A0A0;
		border-bottom: 3px solid #807f7f;
		color: #fff;
		filter: none;
		text-shadow: 0 0 10px rgba(0, 0, 0, .2);
		cursor: not-allowed;

		.__title {
			line-height: 1.3;
			font-size: 18px;
			margin-bottom: 0;
		}

		.__desc {
			font-size: 12px;
			line-height: 1.6;
			display: block;
		}

		&:hover {
			background: #A0A0A0;
		}
	}
}


/* __iconで始まるクラス名に前方一致でスタイルを適用 */
/* 複数クラスの場合（class="o-btn __iconArrow"）と単一クラスの場合（class="__iconArrow"）の両方に対応 */
.o-btn[class*=" __icon"] {
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: center;

	&::before {
		font-family: "Material Symbols Outlined";
		font-weight: 500;
	}
}
.o-btn.__iconCart {
	&::before {
	content: "shopping_cart";
	}
}
.o-btn.__iconLogin {
	&::before {
	content: "login";
	}
}
@charset "UTF-8";
/* =========================================================
O-BGSHAPE / 背景図形コンポーネント
レスポンシブ対応、再利用可能な背景装飾図形
========================================================= */
[class^="o-bgshape"] {
	position: absolute;
	z-index: 1;
	width: var(--size);
	height: var(--size);
	aspect-ratio: 1/1;
	display: block;
	object-fit: cover;

}
.o-bgshapeHero01 {
	top: 0;
	left: 0;
	--size: clamp(25px, 10vw, 50px);
}
.o-bgshapeHero02 {
	bottom: var(--postition);
	left: var(--postition);
	--size: clamp(25px, 1vw, 50px);
    --postition: -25px;
}


.o-bgshapeStrength01 {
	top: var(--postition);
	left: 0;
    --postition: -50px;
	--size: clamp(50px, 10vw, 100px);
}
.o-bgshapeStrength02 {
	bottom: -25px;
    right: 0;
    --size: clamp(100px, 20vw, 250px);
    aspect-ratio: auto;
    height: auto;
    z-index: -1;
}

.o-bgshapeStrength03 {
	bottom: 0;
    left: -3px;
	--size: clamp(160px, 30vw, 300px);
    aspect-ratio: auto;
    height: auto;
    z-index: -1;
}

.o-bgshapeCase01 {
	top: var(--postition);
	right: 0;
    --postition: -7.1vw;
	--size: clamp(50px, 10vw, 300px);
	z-index: 2;
    @media (max-width: 1024px) {
		display: none;
    }
}

.o-bgshapeFlow01 {
	top: -1px;
	right: -1px;
	--size: clamp(50px, 50vw, 300px);
    z-index: 2;
    height: auto;
    aspect-ratio: inherit;
}
.o-bgshapeFlow02 {
	bottom: 0;
	left: 0;
	--size: clamp(50px, 30vw, 300px);
    z-index: 2;
    height: auto;
    aspect-ratio: inherit;
}
.o-bgshapeFlow03 {
	bottom: -80px;
	right: 0;
	--size: clamp(50px, 50vw, 300px);
    z-index: 2;
    height: 80px;
    aspect-ratio: inherit;
}


/* 講座詳細ページ */
.o-bgshapePurcahse01 {
	top: -4vw;
	left: 0;
	--size: clamp(50px, 50vw, 200px);
    z-index: 2;
    height: auto;
    aspect-ratio: inherit;
}
.o-bgshapePurcahse02 {
	top: -4vw;
	right: 0;
	--size: clamp(50px, 20vw, 300px);
    z-index: 2;
    height: auto;
    aspect-ratio: inherit;
}
.o-bgshapePurcahse03 {
	bottom: -50px;
	right: 0;
	--size: clamp(50px, 50vw, 300px);
    z-index: 2;
    height: 50px;
    aspect-ratio: inherit;
}

/* =========================================================
O-BGSHAPE / base & bar
========================================================= */

/* 基本設定 */
.o-bgshape {
	--size: clamp(1.5rem, 2vw, 3rem);
	
	width: var(--size);
	height: var(--size);
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

.o-bgshape img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* サイズバリエーション */
.o-bgshape.__small {
	--size: clamp(1rem, 1.5vw, 2rem);
}

.o-bgshape.__large {
	--size: clamp(2rem, 3vw, 4.5rem);
}

.o-bgshape.__xlarge {
	--size: clamp(3rem, 4vw, 6rem);
}

/* アニメーション（オプション） */
.o-bgshape.__animate {
	animation: bgshapeFloat 3s ease-in-out infinite;
}

@keyframes bgshapeFloat {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-10%) rotate(5deg);
	}
}

/* 位置パターン */
.o-bgshape.__topLeft,
.o-bgshape.__topRight,
.o-bgshape.__bottomLeft,
.o-bgshape.__bottomRight {
	position: absolute;
}

.o-bgshape.__topLeft {
	top: 0;
	left: 0;
}

.o-bgshape.__topRight {
	top: 0;
	right: 0;
}

.o-bgshape.__bottomLeft {
	bottom: 0;
	left: 0;
}

.o-bgshape.__bottomRight {
	bottom: 0;
	right: 0;
}

@charset "UTF-8";

/* =========================================================
form reset
========================================================= */
fieldset {
	border: none;
	margin-inline: 0;
}
/* =========================================================
o-form / フォームコンポーネント
========================================================= */

/* フォームボックス */
.o-formBox {
	margin-bottom: var(--gap04);
}

.o-formBox:last-child {
	margin-bottom: 0;
}

/* フォームタイトル */
.o-formTitle {
	display: flex;
	align-items: center;
	gap: var(--gap01);
	margin-bottom: var(--gap02);
	font-size: var(--fs-mid);
	font-weight: 700;
	color: var(--text-color01);
}

.o-formTitle__badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius01);
	font-size: var(--fs-tiny);
	font-weight: 500;
	white-space: nowrap;
}

.o-formTitle__badge.__required {
	background-color: var(--accent-color03);
	color: var(--text-color04);
}

.o-formTitle__badge.__optional {
	background-color: var(--base-color01);
	color: var(--text-color04);
}

/* フォームラベル */
.o-formLabel {
	display: block;
}

/* 入力フィールド */
.o-formInput,
.p-consulForm__input,
.p-consulForm__select,
.p-consulForm__textarea {
	width: 100%;
	padding: var(--gap04) var(--gap04);
	border: none;
	border-bottom: 1px solid var(--border-color01);
	border-radius: var(--radius01);
	background-color: var(--base-color02);
	font-size: var(--fs-p);
	font-family: var(--font-family01);
	color: var(--text-color01);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	&.__white {
		background-color: #fff;
	}
}
.o-formInput,
.p-consulForm__input:focus,
.p-consulForm__select:focus,
.p-consulForm__textarea:focus {
	outline: none;
	border-color: var(--accent-color02);
	box-shadow: 0 0 0 2px rgba(var(--accent-color01-rgb), 0.1);
}
.o-formInput::placeholder,
.p-consulForm__input::placeholder,
.p-consulForm__textarea::placeholder {
	color: var(--text-color02);
	opacity: 0.6;
}

/* Select要素のスタイリング */
.p-consulForm__select {
	position: relative;
	padding-right: 3rem;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
}

/* selectのカスタムアイコン（Material Symbols） */
.o-formSelect {
	position: relative;
	padding: 0;
}

.o-formSelect::after {
	content: "expand_more";
	font-family: 'Material Symbols Outlined';
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	position: absolute;
	right: var(--gap03);
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	color: var(--text-color01);
	pointer-events: none;
}

.o-formSelect:focus-within::after {
	color: var(--accent-color01);
}

.p-consulForm__select:hover {
	border-color: var(--accent-color01);
}

/* Radioボタングループ */
.o-formRadioGroup {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: var(--gap02);
	background-color: var(--base-color02);
}

/* Radioボタンのスタイリング */
.o-formRadio {
	position: relative;
	display: flex;
	align-items: center;
	padding: var(--gap04);
	cursor: pointer;
	user-select: none;
	background-color: var(--base-color03);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.o-formRadio.__justtext {
	padding: 0;
}

.o-formRadio.__justtext:hover {
	box-shadow: none;
}

.o-formRadio__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.o-formRadio__label {
	position: relative;
	padding-left: 2.5rem;
	font-size: var(--fs-p);
	color: var(--text-color01);
	cursor: pointer;
	transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.o-formRadio__label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--base-color01); /* 通常時 枠: base-color02 */
    border-radius: 4px;
    background-color: transparent;
    transition: all 0.2s ease;
}

.o-formRadio__label::after {
    content: "check"; /* Material Symbols check */
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--base-color01); /* 通常時 アイコン: base-color02 */
    pointer-events: none;
    transition: color 0.2s ease;
}

/* ホバー時: inputにフォーカスするようなシャドウ、枠とアイコンをaccent-color02に */
.o-formRadio:hover {
	z-index: 1;
    box-shadow: 0 0 0 3px rgba(var(--accent-color02-rgb), 0.12);
}
.o-formRadio:hover .o-formRadio__label::before {
    border-color: var(--accent-color02);
}
.o-formRadio:hover .o-formRadio__label::after {
    color: var(--accent-color02);
}

/* 選択時: 枠は透明、背景accent-color02、アイコン白、文字色も白 */.o-formRadio__input:checked + .o-formRadio__label {
    color: var(--accent-color02);
}
.o-formRadio__input:checked + .o-formRadio__label {
    color: var(--accent-color02);
}
.o-formRadio__input:checked + .o-formRadio__label::before {
    border-color: transparent;
    background-color: var(--accent-color02);
    box-shadow: none;
}
.o-formRadio__input:checked + .o-formRadio__label::after {
    color: var(--text-color04);
}

/* フォーカス時のシャドウ（アクセシビリティ） */
.o-formRadio__input:focus + .o-formRadio__label::before {
    box-shadow: 0 0 0 3px rgba(var(--accent-color02-rgb), 0.2);
}

/* Textarea */
.p-consulForm__textarea {
	min-height: 120px;
	resize: vertical;
	font-family: var(--font-family01);
	line-height: 1.6;
}

/* Submitボタン */
.p-consulForm__submit {
	width: 100%;
	padding: var(--gap05) var(--gap05);
	background: var(--gradient-button01);
	color: var(--text-color04);
	border: none;
	border-radius: var(--radius01);
	font-size: var(--fs-p);
	font-weight: 600;
	font-family: var(--font-family01);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.p-consulForm__submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow02);
	background: var(--gradient-button01);
}

.p-consulForm__submit:active {
	transform: translateY(0);
}

.p-consulForm__submit:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--accent-color01-rgb), 0.3);
}

/* プライバシーポリシーテキスト */
.p-consulForm__privacy {
	margin-top: var(--gap03);
	font-size: var(--fs-min);
	color: var(--text-color02);
	line-height: 1.6;
	text-align: center;
}

@media (max-width: 480px) {
	.p-consulForm__privacy {
		font-size: 10px;
	}
}

.p-consulForm__privacyLink {
	color: var(--link-color01);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity 0.3s ease;
}

.p-consulForm__privacyLink:hover {
	opacity: 0.7;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
	.o-formRadioGroup {
		gap: var(--gap01);
	}

}

@charset "UTF-8";
/* =========================================================
o-text - style (pure CSS using f-variables.css)
============================================================*/

/* weights */
.o-text.__bolder {
    font-weight: 900;
}

.o-text.__nobold {
    font-weight: normal;
}

/* english type */
.o-text.__en {
    letter-spacing: .01rem;
    font-family: var(--font-family02);
}

/* sizes */
.o-text.__big,
.o-text.__big.o-icon:before {
    font-size: var(--fs-big);
}

.o-text.__large,
.o-text.__large.o-icon:before {
    font-size: var(--fs-large);
}

.o-text.__title,
.o-text.__title.o-icon:before {
    font-size: var(--fs-title);
}

.o-text.__title.__en {
    letter-spacing: .3rem;
}

.o-text.__postp,
.o-text.__postp.o-icon:before {
    font-size: var(--fs-postp);
}

.o-text.__p,
.o-text.__p.o-icon:before {
    font-size: var(--fs-p);
}

.o-text.__mid,
.o-text.__mid.o-icon:before {
    font-size: var(--fs-mid);
}

.o-text.__min,
.o-text.__min.o-icon:before {
    font-size: var(--fs-min);
}

.o-text.__tiny,
.o-text.__tiny.o-icon:before {
    font-size: var(--fs-tiny);
}

.o-text.__smallest,
.o-text.__smallest.o-icon:before {
    font-size: 10px;
}

/* width helpers */
.o-text.__mw01 {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.o-text.__mw02 {
    max-width: clamp(280px,100%,320px);
    margin-left: auto;
    margin-right: auto;
}

.o-text.__w100 {
    width: 100%;
}

.o-text.__block {
    display: block;
}

/* align */
.o-text.__left {
    text-align: left;
}

.o-text.__right {
    text-align: right;
}

.o-text.__center {
    text-align: center;
}

/* colors mapped to f-variables */
.o-text.__blue {
    color: var(--accent-color01);
}

.o-text.__green {
    color: var(--accent-color07);
}

.o-text.__yellow {
    color: var(--accent-color06);
}

.o-text.__red {
    color: var(--accent-color03);
}

.o-text.__black {
    color: var(--text-color01);
}

.o-text.__gold {
    color: var(--accent-color04);
}

@charset "UTF-8";
/* =========================================================
o-title - style (pure CSS using f-variables.css)
============================================================*/
/* 基本 */
.o-title {
    font-weight: 900!important;

    &.__en {
        letter-spacing: .01rem;
        font-family: var(--font-family02);
    }

    
    /* サイズ */
    &.__huge,
    &.__huge.o-icon:before {
        font-size: var(--fs-huge);
    }

    &.__big,
    &.__big.o-icon:before {
        font-size: var(--fs-big);
    }

    &.__large,
    &.__large.o-icon:before {
        font-size: var(--fs-large);
    }

    &.__title {
        &, &.o-icon:before {
            font-size: var(--fs-title);
        }

        &.__en {
            letter-spacing: .3rem;
        }
    }

    &.__p,
    &.__p.o-icon:before {
        font-size: var(--fs-p);
    }

    &.__postp,
    &.__postp.o-icon:before {
        font-size: var(--fs-postp);
    }

    &.__mid,
    &.__mid.o-icon:before {
        font-size: var(--fs-mid);
    }

    &.__min,
    &.__min.o-icon:before {
        font-size: var(--fs-min);
    }

    &.__tiny,
    &.__tiny.o-icon:before {
        font-size: var(--fs-tiny);
    }

    
    /* 幅・整列 */
    &.__mw01 {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    &.__mw02 {
        max-width: clamp(280px,100%,320px);
        margin-left: auto;
        margin-right: auto;
    }

    &.__left {
        margin-left: inherit;
    }

    &.__center {
        text-align: center;
    }

    &.__w100 {
        width: 100%;
    }

    
    /* カラー */
    &.__white {
        color: var(--text-color02);
    }

    &.__gold {
        color: var(--accent-color07);
    }
}

@charset "UTF-8";




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

/* 背景アニメーションCanvas */
.p-top__bgCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

/* Header */
.l-header {
  display: flex;
  align-items: center;
  gap: var(--gap01);
  width: 100%;
  position: relative;
  z-index: 100;
  padding-left: var(--gap05);
  transition: all 0.3s ease;
}
@media (max-width: 768px) {
	.l-header {
		padding-left: var(--gap04);
	}
}
@media (max-width: 640px) {
	.l-header {
		padding-left: var(--gap04);
  		gap: var(--gap02);
	}
}

/* ヘッダー追尾表示 */
.l-header.__sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: headerSlideIn 0.3s ease-out;
}

/* ヘッダー追尾非表示 */
.l-header.__sticky-out {
  animation: headerSlideOut 0.3s ease-in forwards;
}

/* ヘッダープレースホルダー */
.l-header__placeholder {
  transition: height 0.3s ease;
}

/* 上から下にスライドイン */
@keyframes headerSlideIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 下から上にスライドアウト */
@keyframes headerSlideOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}



.l-headerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap05);
}

.l-headerLogo {
  display: flex;
  align-items: center;
  gap: var(--gap04);
  flex-shrink: 0;
}
@media (max-width: 1440px) {
	.l-headerLogo {
		gap: var(--gap00);
	}
}
@media (max-width: 768px) {
	.l-headerLogo__item {
		width: 109px;
	}
}
.l-headerLogo__desc {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--fs-tiny);
  font-weight: 700;
}
@media (max-width: 1440px) {
	.l-headerLogo__desc {
		display: none;
	}
}


.l-headerActions {
  display: flex;
  align-items: center;
  gap: 1px;
  position: relative;
}

.l-headerActions__btn {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 90px;
	height: 100px;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: var(--gap02) var(--gap00);
	background: var(--gradient-header-actions);
	border: none;
	cursor: pointer;
	transition: opacity .3s;
	color: var(--base-color02);
	font-size: 15px;
	@media (max-width: 768px) { 
		font-size: var(--fs-min);
		width: 80px;
		height: 90px;
	}
	@media (max-width: 640px) {
		width: 70px;
		height: 80px;
	}

	&:hover {
		opacity: .9;
	}

	&.__menu {
		display: none;
	}

	&.__login {
		background: var(--accent-color01);
		color: #fff;
	}
}


@media (max-width: 1024px) {
	.l-headerActions__btn.__menu {
	  display: flex;
	}
}



.l-headerActions__icon {
  font-size: var(--fs-large)!important;
}


.l-headerActions__badge {
  position: absolute;
  top: 23px;
  right: 12px;
  width: 20px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color03);
  border-radius: 2px;
  font-family: var(--font-quantico);
  font-size: var(--fs-tiny);
  color: var(--base-color02);
}
@media (max-width: 768px) {
	.l-headerActions__badge {
    top: 8px;
    right: 8px;
    width: 16px;
	}
}

.l-headerActions__btnText {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  width: -webkit-fill-available;
}


.l-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap01);
  width: 100%;
  padding-top: var(--gap08);
}
@media (max-width: 768px) {
	.l-breadcrumb {
    margin-bottom: 0;
	}
}

.l-breadcrumbText {
  flex: 1;
  font-weight: 500;
  color: var(--text-color01);
  font-size: var(--fs-min);
}

/* =========================================================
p-topHero
========================================================= */


/* Hero Section */
.p-topHero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap01);
  width: 100%;
  background: var(--gradient-hero);
  overflow: hidden;
}
@media (max-width: 1024px) {
	.p-topHero {
		overflow: inherit;
	}
}

.p-topHero__bgText {
  position: absolute;
  top: 120px;
  left: 0;
  opacity: .11;
  font-family: var(--font-quantico);
  font-weight: 500;
  font-size: 10vw;
  text-align: center;
  letter-spacing: -3px;
  white-space: nowrap;
  mix-blend-mode: plus-lighter;
}

@media (max-width: 1024px) {
	.p-topHero__bgText {
		font-size: 20vw;
		list-style: 1;
		white-space: initial;
		text-wrap: balance;
		text-align: left;
	}
}

.p-topHero__cont {
	width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap05);
  position: relative;
  z-index: 1;
  margin-top: 20vh;

  @media (max-width: 1024px) {
    margin-top: 0;
  }
}
.p-topHero__textBox {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap01);
}

.p-topHero__title {
  font-weight: 700;
  color: var(--base-color02);
  font-size: var(--fs-big);
  letter-spacing: -1.65px;
  line-height: 1.2;
}
@media (max-width: 640px) {
	.p-topHero__title {
    font-size: var(--fs-xlarge);
  }
}
@media (max-width: 480px) {
	.p-topHero__title {
    font-size: var(--fs-large);
  }
}

.p-topHero__titleWrap {
  text-shadow: 0 0 16px var(--shadow-color03);
}
@media (max-width: 1024px) {
	.p-topHero__titleWrap {
		background: var(--base-color01);
		padding: 2px var(--gap02) 5px;
		margin-bottom: 1px;
	}
}

.p-topHero__desc {
  font-weight: 500;
  color: var(--base-color02);
  font-size: var(--fs-p);
  line-height: 1.5;
	background: rgba(0, 118, 229, .4);
	backdrop-filter: blur(10px);
}


.p-topHero__features {
  display: flex;
  gap: var(--gap00);
  width: 100%;
}

.p-topHero__featuresLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap01);
  padding: var(--gap01) var(--gap02);
  background: var(--accent-color08);
  font-weight: 700;
  color: var(--base-color02);
  font-size: var(--fs-mid);
  text-align: center;
}
@media (max-width: 1024px) {
	.p-topHero__featuresLabel {
		display: none;
	}
}

.p-topHero__featuresList {
  display: inline-flex;
  align-items: center;
  gap: var(--gap04);
  padding: var(--gap01) var(--gap04);
  background: var(--base-color01);
}
@media (max-width: 1024px) {
	.p-topHero__featuresList {
		background: none;
		padding: 0;
		flex-wrap: wrap;
	}
}


.p-topHero__featureItem {
  display: inline-flex;
  align-items: center;
  gap: var(--gap01);
}

.p-topHero__featureIcon {
  width: 10px;
  height: 10px;
  background: var(--accent-color08);
}

.p-topHero__featureText {
  font-weight: 700;
  color: var(--base-color02);
  font-size: var(--fs-mid);
  white-space: nowrap;
}
@media (max-width: 1024px) {
	.p-topHero__featureText {
	}
}

.p-topLead {
  position: relative;
  z-index: 1;
	display: none;
  font-weight: 700;
  color: var(--base-color02);
  font-size: var(--fs-mid);
  padding-top: var(--gap05);
  border-top: 1px solid var(--base-color02);
}
@media (max-width: 1024px) {
	.p-topLead {
		display: block;
		width: 100%;
	}
}

.p-topHero__device {
  position: absolute;
  top: var(--gap08);
  right: var(--gap08);
  height: 700px;
  z-index: 0;
  display: block;
  width: clamp(300px,32vw,750px);
  @media (max-width: 1440px) {
    top: var(--gap05);
    right: 0;
    width: 450px;
  }
  @media (max-width: 1024px) {
    position: relative;
    top: 0;
    right: 0;
    height: 400px;
    width: clamp(400px, 45vw, 560px);
    display: flex
;
    justify-content: center;
    align-items: center;
    margin: auto;
  }
  @media (max-width: 640px) {
    height: 200px;
    width: 260px;
    top: -40px;
  }
}
.p-topHero__deviceImg {
  position: absolute;
  display: block;
  object-fit: contain;

  &.__pc {
    right: 0;
    top: 0;
    @media (max-width: 1024px) {
      right: -6vw;
      height: auto;
    }
    @media (max-width: 640px) {
      right: -30px;
    }
  }
  &.__sp {
    left: clamp(-6rem, 20vw, -10rem);
    width: clamp(100px, 11vw, 175px);
    bottom: clamp(10rem, 20vw, 15rem);
    @media (max-width: 1440px) {
      left: -100px;
      width: 15vw;
      bottom: 250px;
    }
    @media (max-width: 1024px) {
      left: -5vw;
      width: 20vw;
      bottom: 0;
    }
    @media (max-width: 640px) {
      left: -20px;
      width: 100px;
      bottom: -70px;
    }
  }

}

/* =========================================================
p-topCourses
========================================================= */
/* Courses Section */
.p-topCourses {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  background: #fff;
  box-shadow: 0 4px 25px rgba(17,28,59,.25);
  position: relative;
  z-index: 1;
  overflow: visible;
}
.p-topCourses__tabs,
.p-topCourses__category,
.p-topCourses__items,
.p-topCourses__link {
	padding: 0 var(--gap07);
	font-size: var(--fs-mid);
}
@media (max-width: 1024px) {
	.p-topCourses__tabs,
	.p-topCourses__category,
	.p-topCourses__items,
  .p-topCourses__link {
		padding: 0 var(--gap04);
		font-size: var(--fs-mid);
	}
}
.p-topCourses__tabs {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
}

@media (max-width: 1024px) {
	.p-topCourses__tabs {
		position: sticky;
		top: 0;
		bottom: 100px;
		z-index: 10;
		background: #fff;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		width: 100%;
		left: 0;
		right: 0;
	}
	
	.p-topCourses__tabs::-webkit-scrollbar {
		display: none;
	}
}
/* Course Tab */
.p-topCourses__tabItem {
	font-weight: 700;
	color: var(--text-color01);
	background: none;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	position: relative;
	padding: var(--gap04);
	transition: all 0.2s ease-out; /* ホバーエフェクト用のトランジション追加 */
  
	&.inactive {
	  opacity: .32;
	}
  
	&.active {
	  &::after {
		content: "";
		position: absolute;
		top: -0px;
		left: 0;
		width: 100%;
		height: 3px;
		background: var(--accent-color01);
	  }
	}
	
	&:hover {
		opacity: 1;
		transform: translateY(-2px);
	}
}
@media (max-width: 1024px) {
	.p-topCourses__tabItem {
		padding: var(--gap04) var(--gap02);
	}
}


.p-topCourses__category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background: var(--base-color02);
}

@media (max-width: 1024px) {
	.p-topCourses__category {
		position: sticky;
		top: 50px;
		bottom: 50px;
		z-index: 9;
		background: var(--base-color02);
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	
	.p-topCourses__category::-webkit-scrollbar {
		display: none;
	}
}
.p-topCourses__categoryList {
  display: inline-flex; 
  align-items: center;
  padding: var(--gap01) 0;
  gap: var(--gap02);
}

@media (max-width: 1024px) {
	.p-topCourses__categoryList {
		white-space: nowrap;
		flex-wrap: nowrap;
	}
}

@media (max-width: 1080px) {
	.p-topCourses__categoryList {
		white-space: nowrap;
		flex-wrap: nowrap;
	}
}
@media (max-width: 1024px) {
	.p-topCourses__categoryItem {
		gap: var(--gap01);
	}
}
.p-topCourses__categoryItem {
	padding: var(--gap02);
	display: inline-flex;
	align-items: flex-start;
	background: var(--base-color02);
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
	color: var(--text-color01);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease-out; /* ホバーエフェクト用のトランジションに統合 */

	&:hover {
		border: 1px solid var(--accent-color02);
		transform: translateY(-1px);
		background: rgba(255,255,255,.8);
	}
  
	&.active {
		background: rgba(255,255,255,.8);
	  border: 1px solid var(--accent-color02);
	  color: var(--accent-color01);
	}
}
@media (max-width: 1024px) {
	.p-topCourses__categoryItem {
		padding: var(--gap01);
	}
}

.p-topCourses__items {
	width: 100%;
  
	grid-template-columns: 1fr 1fr 1fr 1fr;
    display: grid;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap04) 0;
  padding-top: var(--gap04);
  padding-bottom: var(--gap04);
}
@media (max-width: 1024px) {
	.p-topCourses__items {
		gap: var(--gap01);
		grid-template-columns: 1fr 1fr 1fr;
	}
}
@media (max-width: 768px) {
	.p-topCourses__items {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 480px) {
	.p-topCourses__items {
		grid-template-columns: 1fr;
	}
}

.p-topCourses__itemsBox {
	position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap00);
  padding: var(--gap01) var(--gap04);
  cursor: pointer;
  width: 100%;
  min-width: 0; /* flexアイテムの縮小を許可 */
  transition: all 0.3s ease-out; /* ホバーエフェクト用のトランジション追加 */

  &::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: var(--gradient-line02);        
	filter: brightness(0.2);
	opacity: .1;
	transition: background 0.2s, height 0.2s, opacity 0.2s, filter 0.2s;
  }
  &:hover {
	transform: translateY(-4px);
	&::before {
	  background: var(--gradient-line02);
	  filter: brightness(1);
	  opacity: 1;
	}
	.p-topCourses__itemsBox__title {
		color: var(--accent-color01);
	}
  }
}
@media (max-width: 1024px) {
	.p-topCourses__itemsBox {
		padding: var(--gap01) var(--gap04);
	}
}
.p-topCourses__itemsBox__info {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	font-weight: 500;
	font-size: var(--fs-tiny);
}
.p-topCourses__itemsBox__title {
	font-weight: 700;
	transition: color 0.3s;
	width: 100%;
	min-width: 0; /* flexアイテムの縮小を許可 */
	
	/* テキスト省略の設定 */
	white-space: nowrap; /* 改行しない */
	overflow: hidden; /* 溢れた部分を隠す */
	text-overflow: ellipsis; /* 「…」と省略 */
	-webkit-text-overflow: ellipsis; /* Safari用 */
	-o-text-overflow: ellipsis; /* Opera用 */
}
.p-topCourses__itemsBox__price {
	font-weight: 700;
	font-family: var(--font-outfit);
	color: var(--accent-color01);
	&.__campaign {
		display: flex;
		gap: var(--gap00);
		align-items: center;
		color: var(--accent-color04);
		&::after {
			content: "期間限定";
			font-size: 11px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--accent-color04);
			border: 1px solid var(--accent-color04);
			padding: 1px 6px;
			border-radius: 2px;
		}
	}
}
/* 講座一覧タブ切り替えアニメーション */

.p-topCourses__items {
	transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.p-topCourses__noResults {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--gap08);
	color: var(--text-color02);
	font-size: var(--fs-p);
}

.p-topCourses__link {
  width: 100%;
  padding-bottom: var(--gap04);
}



/* =========================================================
p-topNews
========================================================= */
/* News Section */
.p-topNews {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  gap: var(--gap10);
}
@media (max-width: 768px) {
	.p-topNews {
    flex-direction: column;
    gap: var(--gap05);
	padding: var(--gap10) var(--gap05) var(--gap05) !important;
	}
}

.p-topNews__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap03);
  flex-shrink: 0;
}
@media (max-width: 768px) {
	.p-topNews__head {
    gap: var(--gap02);
	}
}

.p-topNews__titleWrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.p-topNews__title {
  font-weight: 700;
  color: var(--text-color01);
  font-size: 20px;
  text-decoration: underline;
  white-space: nowrap;
}

.p-topNews__subtitle {
  font-family: var(--font-quantico);
  font-weight: 500;
  color: var(--text-color01);
  font-size: 13px;
}

.p-topNews__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

/* News Item */
.p-topNews__item {
	position: relative;
	width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--gap04);
  padding-bottom: var(--gap04);
  margin-bottom: var(--gap04);
  border-bottom: 1px solid var(--border-color01);
}
@media (max-width: 768px) {
	.p-topNews__item {
    flex-wrap: wrap;
    justify-content: space-between;
	}
}

.p-topNews__category {
  font-weight: 500;
  color: var(--text-color01);
  font-size: var(--fs-tiny);
  white-space: nowrap;
}

.p-topNews__date {
  font-family: var(--font-quantico);
  font-weight: 500;
  color: var(--text-color01);
  font-size: var(--fs-tiny);
  white-space: nowrap;
}

.p-topNews__text {
  font-weight: 700;
  color: var(--text-color01);
  font-size: var(--fs-mid); 
}

.p-topNews__scroll {
  position: absolute;
  top: -1px;
  right: 0;
  color: var(--text-color04);
  font-size: 10px;
  font-family: var(--font-quantico);
  font-weight: 100;
  letter-spacing: 3px;

  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--gap03)  var(--gap10);
  background: var(--accent-color02);
	@media (max-width: 640px) {
  		padding: var(--gap03)  var(--gap06);
		font-size: 0px;
	}
}


/* =========================================================
p-topStrength
========================================================= */
/* Strength Section */
.p-topStrength {
	margin-top: 0 !important;
	padding-top: 0!important;
  padding-bottom: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  align-items: flex-end;
  gap: var(--gap08);
  position: relative;
}
@media (max-width: 768px) {
  .p-topStrength {
    padding-bottom: var(--gap10);
    margin-bottom: 0px!important;
	}
}

.p-topStrength__head {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
  position: relative;
  gap: var(--gap04);
  margin-bottom: var(--gap08);
}

.p-topStrength__title {
  font-weight: 700;
  font-size: var(--fs-huge);
  text-align: right;
  letter-spacing: -1.75px;
  flex-shrink: 0;
  line-height: 1.2;
	@media (max-width: 768px) {
		font-size: 2.4rem;
	}
	@media (max-width: 640px) {
		font-size: 1.9rem;
	}
}

.p-topStrength__subtitle {
  font-family: var(--font-outfit);
  font-weight: 500;
  color: var(--accent-color02);
  font-size: var(--fs-p);
}

.p-topStrength__cont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--gap07); 
}
@media (max-width: 768px) {
	.p-topStrength__cont  {
    flex-direction: column;
    gap: var(--gap10); 
	}
}

.p-topStrength__pic {
  flex-basis: 70%;
}
.p-topStrength__picWrap {
  position: relative;
  height: 100%;
}
.p-topStrength__picBg {
    position: sticky;
    top: 3rem;
}
.p-topStrength__picBg__img {
    object-fit: cover;
	height: 120%!important;
  object-position: 40%;
}
.p-topStrength__picDevice {
  position: absolute;
  bottom: -14rem;
  left: 0;
  right: 0;
  width: 90%; 
  margin: auto;
  z-index: 10;
	@media (max-width: 768px) {
		bottom: -100px;
		width: 80%; 
	}
}
.p-topStrength__list {
	flex-basis: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap08);
  counter-reset: p-topStrength__boxNum;
  padding: var(--gap10) 0 var(--gap04);
	@media (max-width: 768px) {
  		gap: var(--gap05);
	}
}

.p-topStrength__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap03);
  width: 100%;
  counter-increment: p-topStrength__boxNum;
}

.p-topStrength__boxNum {
	width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap03);

  &::before {
	content: "0" counter(p-topStrength__boxNum);

	font-family: var(--font-outfit);
	font-weight: 700;
	color: var(--accent-color02);
	font-size: var(--fs-xlarge);
	white-space: nowrap;
  }
}
.p-topStrength__boxNum__bar {
	position: relative;
	width: 100%;
	height: 2px;
	background: var(--base-color05);
	&::before {
		content: "";
		display: block;

		position: absolute;
		top: 0;
		left: 0;
		width: 50px;
		background: var(--gradient-line03);
		height: 2px;
  }
}

.p-topStrength__boxTitle {
	font-weight: 700;
	color: var(--text-color01);
	font-size: var(--fs-title);
	width: 100%;
	@media (max-width: 768px) {
		font-size: var(--fs-subtitle);
	}
}

.p-topStrength__boxDesc {
  font-weight: 500;
  color: var(--text-color01);
  font-size: var(--fs-p);
  white-space: pre-line;
  width: 100%;
	@media (max-width: 768px) {
		font-size: var(--fs-mid);
	}
}

/* =========================================================
p-topCase
========================================================= */
/* Case Study Section */
.p-topCase {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--base-color01);
}

.p-topCase__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: var(--gap08);
	padding-top: var(--gap10)!important;
	padding-bottom: var(--gap10)!important;
}

@media (max-width: 1080px) {
	.l-wrap .p-topCase__inner {
		padding-right: 0!important;
	}
}
@media (max-width: 768px) {
	.l-wrap .p-topCase__inner {
    padding: var(--gap00) 0 var(--gap00)!important;
	}
}

.p-topCase__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
  text-align: center;
	gap: var(--gap04);
  width: 100%;
  position: relative;
}
@media (max-width: 768px) {
	.p-topCase__header {
    padding: 0 var(--gap05);
	}
}

.p-topCase__title {
  font-weight: 700;
  color: white;
  font-size: var(--fs-xlarge);
}

.p-topCase__subtitle {
  font-family: var(--font-outfit);
  font-weight: 500;
  color: var(--accent-color01);
  font-size: var(--fs-p);
  text-align: center;
  width: 100%;
}

.p-topCase__cont {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap04);
  width: 100%;
  color: var(--text-color04);
}

@media (max-width: 768px) {
	.p-topCase__cont {
    padding: 0 0 0 var(--gap04);
	}
}

.p-topCase__category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap05);
  width: 100%;
}

.p-topCase__categoryTitle {
display: flex;
align-items: center;
  font-weight: 700;
  gap: var(--gap04);
  color: var(--text-color04);
  font-size: var(--fs-p);
  &::before {
	content: "";
	display: block;
	width: 6vw;
	height: 5px;
	background: var(--gradient-line04);
  }
}

.p-topCase__unit {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap04);
  width: 100%;
}

@media (max-width: 1080px) {
  .p-topCase__unit {
    display: flex;
    overflow-x: auto;
    gap: var(--gap04);
    padding-bottom: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  
  /* スクロールバーを非表示 */
  .p-topCase__unit::-webkit-scrollbar {
    display: none;
  }
  
  .p-topCase__unit {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

.p-topCase__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border-radius: 2px;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    aspect-ratio: 1/1;
    background-color: var(--accent-color02);
    z-index: 2;
  }
}

@media (max-width: 1080px) {
  .p-topCase__card {
    flex: 0 0 80vw;
    min-width: 80vw;
    max-width: 80vw;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .p-topCase__card:last-child {
    margin-right: var(--gap06);
  }
}

.p-topCase__cardBg {
  position: absolute;
  top: 0;
  left: 0;
  &::before {
	content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 200px;
	z-index: 2;
	background: var(--gradient-card-overlay);
  }
  
}
.p-topCase__cardBg__img {
	position: relative;
	width: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	aspect-ratio: 1.618/1;
	object-position: center;
	z-index: 1;
}

.p-topCase__cardCont {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap01);
  padding: var(--gap04);
  padding-top: 10vw;
  position: relative;
  z-index: 10;
}
@media (max-width: 1080px) {
  .p-topCase__cardCont {
    padding-top: 30vw;
  }
}

.p-topCase__company {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap00);
  width: 100%;
}

.p-topCase__companyName {
  font-weight: 700;
  color: var(--text-color04);
  font-size: var(--fs-min);
  text-align: right;
  width: 100%;
}

.p-topCase__companyScale {
  font-weight: 500;
  color: var(--text-color04);
  font-size: var(--fs-min);
}

.p-topCase__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap04);
  width: 100%;
}

.p-topCase__desc {
  display: flex;
  flex-direction: column;
  gap: var(--gap00);
  width: 100%;
  &.__problem {
		.p-topCase__descCat {
			color: var(--accent-color03);
			&::before {
				content: "\e5cd";
			}
		}
	}
  &.__solution {
		.p-topCase__descCat {
			color: var(--accent-color01);
			&::before {
				content: "\ef4a";
			}
		}
	}
}

.p-topCase__descCat {
	display: flex;
	align-items: center;
	gap: var(--gap00);
  font-weight: 700;
  font-size: var(--fs-min);
  &::before {
	content: "";
	font-family: 'Material Symbols Outlined';
  }
}

.p-topCase__descTitle {
  font-weight: 700;
  color: var(--text-color04);
  font-size: var(--fs-postp);
	line-height: 1.6;
  width: 100%;
  @media (max-width: 768px) {
  	font-size: var(--fs-p);
	line-height: 1.4;
  }
}

.p-topCase__descText {
  font-weight: 500;
  color: var(--text-color04);
  font-size: var(--fs-min);
}

.p-topCase__separator {
	position: relative;
	width: 100%;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: #2F3C63;
	}
	&::after {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 45px;
		height: 20px;

		clip-path: polygon(0 0,50% 70%,100% 0);
		background: var(--gradient-line02);
	}
}

/* =========================================================
p-topFlow
========================================================= */
/* Flow Section */
.p-topFlow {
  width: 100%;
  background: var(--gradient-hero-simple);
  position: relative;
  color: var(--text-color04);
  margin-bottom: var(--gap10);
}
@media (max-width: 768px) {
	.p-topFlow {
    margin-bottom: var(--gap10);
  }
}
.p-topFlow__wrap {
  position: relative;
  padding-bottom: var(--gap10);
}
.p-topFlow__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap05);
}

.p-topFlow__header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.p-topFlow__headerContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p-topFlow__title {
  font-weight: 700;
  color: var(--text-color04);
  font-size: var(--fs-big);
  text-align: right;
  width: 100%;
	@media (max-width: 768px) {
  		font-size: var(--fs-xlarge);
	}
}

.p-topFlow__subtitle {
  font-family: var(--font-outfit);
  font-weight: 500;
  color: var(--base-color02);
  font-size: var(--fs-p);
  width: 100%;
}

.p-topFlow__content {
  display: flex;
  gap: var(--gap10);
  width: 100%;
}
@media (max-width: 768px) {
	.p-topFlow__content {
    gap: var(--gap06);
    flex-direction: column-reverse;
	}
}

.p-topFlow__link {
	font-size: var(--fs-min);
	flex-shrink: 0;
}
@media (max-width: 768px) {
	.p-topFlow__link {
    padding-top: var(--gap06);
    border-top: 1px solid var(--border-color08);
  }
}

.p-topFlow__linkBox {
  position: sticky;
  top: var(--gap04);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.p-topFlow__linkItem {
  display: inline-flex;
  align-items: center;
  gap: var(--gap02);
  padding: var(--gap02) var(--gap03);
  background: var(--accent-color10);
  color: var(--text-color04);
  width: 100%;
  transition: background .3s;

  &:hover {
	background: rgba(89,131,255,.9);
  }

  &::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--accent-color07);
  }
}
@media (max-width: 768px) {
	.p-topFlow__linkItem {
    width: fit-content;
  }
}

.p-topFlow__main {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.p-topFlow__box {
  display: flex;
  align-items: center;
  gap: var(--gap07);
  width: 100%;
  &:not(:last-child) {
	margin-bottom: var(--gap07);
	padding-bottom: var(--gap07);
	border-bottom: 1px solid #7D9AF8;
  }
}
@media (max-width: 1024px) {
	.p-topFlow__box {
    flex-direction: column-reverse;
    align-items: baseline;
    gap: var(--gap05);
	}
}

.p-topFlow__boxInfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap03);
  flex-basis: 100%;
}

.p-topFlow__boxInfo__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap00)var(--gap03);
  font-weight: 700;
  font-size: var(--fs-mid);
  color: var(--text-color01);
  background: var(--base-color02);

  &.__corp {
	color: var(--text-color04);
	background: var(--gradient-button02);
  }
}

.p-topFlow__boxInfo__title {
  font-weight: 700;
  color: var(--text-color04);
  font-size: var(--fs-large);
  width: 100%;
}

.p-topFlow__boxInfo__step {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap03);
  counter-reset: p-topFlow__boxInfo__stepItem;
}

.p-topFlow__boxInfo__stepItem {
	display: flex;
	align-items: flex-start;
	gap: var(--gap03);
	font-weight: normal;
	color: var(--text-color04);
	font-size: var(--fs-p);
	line-height: 1.6;
	counter-increment: p-topFlow__boxInfo__stepItem;
  &::before {
    content: counter(p-topFlow__boxInfo__stepItem) "";
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    padding: var(--gap01) var(--gap01);
    border: 1px solid var(--text-color04);
    font-size: var(--fs-tiny);
    font-family: var(--font-outfit);
    line-height: 1.6;
    color: var(--text-color04);
    height: 1vw;
    width: 1vw;
	@media (max-width: 1024px) {
		margin-top: 3px;
	}
  }
}

.p-topFlow__boxInfo__stepItem__attention {
	display: block;
	font-size: var(--fs-min);
}

.p-topFlow__boxImg {
	position: relative;
	flex-basis: 100%;
	object-fit: cover;
    aspect-ratio: 1.618 / 1;
}
@media (max-width: 1024px) {
	.p-topFlow__boxImg {
    width: 100%;
	}
}
.p-topFlow__boxImg__item {
	object-fit: cover;
	aspect-ratio: 1.618/1;
}
.p-topFlow__boxImg__link {
	position: absolute;
	bottom: -1vw;
	right: 0;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap02);
	padding: var(--gap04) var(--gap05);
	background: var(--gradient-button01);

	color: var(--text-color04);
	font-size: var(--fs-mid);
	font-weight: 700;
	&::after {
		content: "";
		width: 10px;
		height: 10px;
		background: var(--gradient-icon01);
	}
}
@media (max-width: 1024px) {
	.p-topFlow__boxImg__link {
    bottom: -25px;
	}
}
/* Footer Additional Styles */


/* Footer */
.l-footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: var(--gap10);
}
@media (max-width: 768px) {
	.l-footer {
    gap: var(--gap05);
	padding-bottom: 80px;
	}
}

.l-footerCourses {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  gap: var(--gap08);
}
@media (max-width: 768px) {
	.l-footerCourses {
    display: none;
	}
}

.l-footerCategory {
  position: relative;
  display: flex;
  width: 100%;
  gap: var(--gap05);
	&::before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 50%;
    height: 2px;
    background: var(--gradient-line01);
  }
}
@media (max-width: 768px) {
	.l-footerCategory {
    flex-direction: column;
	}
}

.l-footerCategory__title {
  font-weight: 700;
  width: clamp(200px, 10vw, 250px);
  flex-shrink: 0;
  font-size: var(--fs-mid);
}

.l-footerCategory__items {
  display: inline-flex;
  align-items: center;
  gap: var(--gap04);
  flex-wrap: wrap;
  list-style: none;
}

.l-footerCategory__item {
  font-weight: 500;
  cursor: pointer;
  font-size: var(--fs-mid);

  &:hover {
	text-decoration: underline;
  }
}

.l-footerCategory {
	
	&.__partner {
		.l-footerCategory__item {
			display: flex;
			align-items: center;
			gap: var(--gap00);
			&::after {
				content: "\e89e";
				font-family: 'Material Symbols Outlined';
				font-size: var(--fs-tiny);
				color: var(--accent-color01);
			}
		}

	}
}

.l-footerOthers {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--max-width-big);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ptb-big);
  padding-right: var(--ptb-big);
}
@media (max-width: 768px) {
	.l-footerOthers {
    padding-left: var(--gap05);
    padding-right: var(--gap05);
	}
}
@media (max-width: 768px) {
	.l-footerOthers {
    padding-left: 0;
    padding-right: 0;
	}
}

.l-footerAllCourses {
  display: none!important;
}
@media (max-width: 768px) {
	.l-footerAllCourses {
    display: flex!important;
	}
}


.l-footerPartner {
  display: flex;
  gap: var(--gap03);
  justify-content: center;
  align-items: center;
  padding: var(--gap05);
  width: 100%;
  font-size: var(--fs-mid);
  background: var(--base-color03);
}
.l-footerPartner__link {
	flex-shrink: 0;
}
.l-footerPartner__logo {
  width: clamp(80px, 8vw, 120px);
}

.l-footerSat__cont {
  width: 812px;
  height: 38px;
  position: relative;
}

.l-footerSat__text {
  font-weight: 700;
  color: var(--text-color01);
  font-size: var(--fs-p);
}

.l-footerInfo {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap08);
}
@media (max-width: 768px) {
	.l-footerInfo {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap08);
	}
}

.l-footerInfo__logoSec {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap01);
  font-size: var(--fs-min);
  font-weight: 500;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .l-footerInfo__logoSec {
    align-items: center;
    gap: var(--gap03);
    font-size: var(--fs-p);
  }
}
.l-footerInfo__logo {

}

.l-footerInfo__logoText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  font-size: var(--fs-min);
}

.l-footerInfo__nav {
  display: inline-flex;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: var(--gap08);
  font-size: var(--fs-mid);
  font-weight: 500;
}
@media (max-width: 1440px) {
  .l-footerInfo__nav {
    width: 100%;
    display: grid;
    gap: var(--gap08) var(--gap04);
    grid-template-columns: 1fr 1fr;
    font-size: var(--fs-mid);
  }
}

.l-footerInfo__navList {
	position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  list-style: none;
  gap: var(--gap03);
	&::before {
		content: "";
		position: absolute;
		top: -25px;
		left: 0;
		width: 100%;
		height: 2px;
		background: var(--gradient-line01);
	}
}
@media (max-width: 768px) {
  .l-footerInfo__navList {
    width: 100%;
  }
}

.l-footerInfo__navLink {
	&:hover {
		text-decoration: underline;
	}
}

.l-footerInfo__colLine {
  width: 173px;
  height: 3px;
  transform: rotate(180deg);
  background: var(--gradient-line);
}

.l-footerInfo__link {
  font-weight: 500;
  color: var(--text-color01);
  font-size: 16px;
  cursor: pointer;

  &:hover {
	text-decoration: underline;
  }
}

.l-footerCopy {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-min);
  font-weight: 500;
  width: 100%;
	@media (max-width: 768px) {
		font-size: 10px;
	}
}




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

/* Icons */
.icon-chevron-down {
  width: 17px;
  height: 17px;
}

.icon-external {
  width: 20px;
  height: 20px;
}

/* Gradients */
.gradient-orange {
  background: var(--gradient-orange);
}

.gradient-blue {
  background: var(--gradient-blue);
}

/* Colors */
.color-blue {
  color: var(--accent-color01);
}

.color-problem {
  color: var(--accent-color03);
}

.color-solution {
  color: var(--accent-color01);
}

/* Badges */
.badge-corporate {
  background: var(--base-color02);
  color: var(--text-color01);
}

.badge-personal {
  background: var(--gradient-orange);
  color: var(--text-color04);
}


.l-ctaSide {
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 10;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
}
@media (max-width: 768px) {
	.l-ctaSide {
    flex-direction: row;
    left: 0;
    top: inherit;
	}
}
.l-ctaSide__btn {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--gap00);
	padding: var(--gap03) var(--gap03) var(--gap03);

	color: var(--text-color04);
	font-size: var(--fs-mid);
	font-weight: 700;
	text-align: center;
	letter-spacing: 2px;
    line-height: 1;

	&.__corp {
		background: var(--gradient-button02);
	}
	&.__inquiry {
		background: var(--gradient-button01);
	}
	
}
@media (max-width: 768px) {
	.l-ctaSide__btn {
    flex-direction: row;
    flex-basis: 100%;
	letter-spacing: 0px;
  }
}
.l-ctaSide__btnIcon {
	font-size: var(--fs-mid)!important;
}

.l-ctaSide__btnText {
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
}
@media (max-width: 768px) {
	.l-ctaSide__btnText {
    writing-mode: inherit;
  }
}

@charset "UTF-8";

/* =========================================================
Layout Components
========================================================= */
.p-consulCont {
  grid-template-columns: 44% 56%!important;

  @media (max-width: 1024px) {
    max-width: var(--max-width01)!important;
  }
}

.p-consulInfo {
  display: flex;
  flex-direction: column;
  gap: var(--gap05);

  position: sticky;
  top: var(--gap10);

  @media (max-width: 1024px) {
    position: relative;
    top: 0;
  }
}

.p-consulInfo__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap02);
}

.p-consulInfo__headCatch {
  font-size: var(--fs-mid);
}
.p-consulInfo__title {
  font-size: var(--fs-xlarge);
  @media (max-width: 1024px) {
  	font-size: var(--fs-large);
    br {
		display: none; 
	}
  }
}

.p-consulInfo__flow {
  display: flex;
  flex-direction: column;
  gap: var(--gap04);
  list-style: none;
  counter-reset: p-consulInfo__flowItem;
}

.p-consulInfo__flowItem {
  display: flex;
  align-items: center;
  gap: var(--gap02);
  counter-increment: p-consulInfo__flowItem;

  font-size: var(--fs-mid);
  line-height: 1.6;
	@media (max-width: 1024px) {
		align-items: flex-start;
	}
  &::before {
    content: counter(p-consulInfo__flowItem) "";
    width: 10px;
    height: 10px;
    aspect-ratio: 1/1;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: var(--gap01) var(--gap01);
    border: 1px solid var(--border-color01);
    font-size: var(--fs-min);
    font-family: var(--font-outfit);
    font-weight: 700;
    color: var(--text-color04);
    background-color: var(--accent-color02);
  }
}
.p-consulInfo__text {
  font-size: var(--fs-mid);
  font-weight: 500;
}



/* フォーム */
.p-consulForm {
  position: relative;
  z-index: 10;
  background-color: var(--base-color03);
}
.p-consulForm__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap02);
  padding: var(--gap08) var(--gap08);
  @media (max-width: 1024px) {
  	padding: 0 var(--gap04) var(--gap08);
  }
}
.p-consulForm__img {
  margin-top: -10vw;
  margin-bottom: var(--gap04);
  @media (max-width: 1024px) {
  	margin-top: -6vw;
  }
}
.p-consulForm__form {
  display: flex;
  flex-direction: column;
  gap: var(--gap02);
}


/* サンクスページ */
.p-consulThanks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap04);
  padding: var(--gap08) var(--gap08);
  background-color: var(--base-color03);
  max-width: var(--max-width01);
  margin: auto;
}
.p-consulThanks__title {
	font-size: var(--fs-title);
	text-align: center;
}
.p-consulThanks__cathch {
	font-size: var(--fs-mid);
	margin-bottom: var(--gap01);
}
.p-consulThanks__text {
	font-size: var(--fs-mid);
	text-align: center;
	p {
		font-weight: normal;
	}
}
.p-consulThanks__note {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	font-size: var(--fs-min);
	font-weight: normal;
	text-align: left;
	padding: var(--gap05);
	background-color: var(--base-color02);
}
@charset "UTF-8";

/* =========================================================
p-courses
========================================================= */
/* Courses Section */
.p-courses {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: flex-start;
	background: #fff;
	position: relative;
	z-index: 1;
	overflow: visible;
}

.p-coursesTabs,
.p-coursesCategory,
.p-coursesItems,
.p-coursesLink {
	padding: 0 var(--gap07);
	font-size: var(--fs-mid); 
}

@media (max-width: 1024px) {
	.p-coursesTabs,
	.p-coursesCategory,
	.p-coursesItems,
	.p-coursesLink {
		padding: 0 var(--gap04);
		font-size: var(--fs-mid);
	}
}

.p-coursesTabs {
	display: inline-flex;
	align-items: flex-start;
	position: relative;
}

@media (max-width: 1024px) {
	.p-coursesTabs {
		position: sticky;
		top: 0;
		bottom: 100px;
		z-index: 10;
		background: #fff;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		width: 100%;
		left: 0;
		right: 0;
	}
	
	.p-coursesTabs::-webkit-scrollbar {
		display: none;
	}
}

/* Course Tab */
.p-coursesTabItem {
	font-weight: 700;
	color: var(--text-color01);
	background: none;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	position: relative;
	padding: var(--gap04);
	transition: all 0.2s ease-out;
}

.p-coursesTabItem.inactive {
	opacity: .32;
}

.p-coursesTabItem.active::after {
	content: "";
	position: absolute;
	top: -0px;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--accent-color01);
}

.p-coursesTabItem:hover {
	opacity: 1;
	transform: translateY(-2px);
}

@media (max-width: 1024px) {
	.p-coursesTabItem {
		padding: var(--gap04) var(--gap02);
	}
}

.p-coursesCategory {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	background: var(--base-color02);
}

@media (max-width: 1024px) {
	.p-coursesCategory {
		position: sticky;
		top: 50px;
		bottom: 50px;
		z-index: 9;
		background: var(--base-color02);
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	
	.p-coursesCategory::-webkit-scrollbar {
		display: none;
	}
}

.p-coursesCategoryList {
	display: inline-flex; 
	align-items: center;
	padding: var(--gap01) 0;
	gap: var(--gap02);
}

@media (max-width: 1024px) {
	.p-coursesCategoryList {
		white-space: nowrap;
		flex-wrap: nowrap;
	}
}

@media (max-width: 1080px) {
	.p-coursesCategoryList {
		white-space: nowrap;
		flex-wrap: nowrap;
	}
}

@media (max-width: 1024px) {
	.p-coursesCategoryItem {
		gap: var(--gap01);
	}
}

.p-coursesCategoryItem {
	padding: var(--gap02);
	display: inline-flex;
	align-items: flex-start;
	background: var(--base-color02);
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
	color: var(--text-color01);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease-out;
}

.p-coursesCategoryItem:hover {
	border: 1px solid var(--accent-color02);
	transform: translateY(-1px);
	background: rgba(255,255,255,.8);
}

.p-coursesCategoryItem.active {
	background: rgba(255,255,255,.8);
	border: 1px solid var(--accent-color02);
	color: var(--accent-color01);
}

@media (max-width: 1024px) {
	.p-coursesCategoryItem {
		padding: var(--gap01);
	}
}

.p-coursesItems {
	width: 100%;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	display: grid;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--gap04) 0;
	padding-top: var(--gap04);
	padding-bottom: var(--gap04);
	transition: opacity 300ms ease-out, transform 300ms ease-out;
}

@media (max-width: 1024px) {
	.p-coursesItems {
		gap: var(--gap01);
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.p-coursesItems {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.p-coursesItems {
		grid-template-columns: 1fr;
	}
}

.p-coursesItemsBox {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap00);
	padding: var(--gap01) var(--gap04);
	cursor: pointer;
	width: 100%;
	min-width: 0;
	transition: all 0.3s ease-out;
}

.p-coursesItemsBox::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: var(--gradient-line02);        
	filter: brightness(0.2);
	opacity: .1;
	transition: background 0.2s, height 0.2s, opacity 0.2s, filter 0.2s;
}

.p-coursesItemsBox:hover {
	transform: translateY(-4px);
}

.p-coursesItemsBox:hover::before {
	background: var(--gradient-line02);
	filter: brightness(1);
	opacity: 1;
}

.p-coursesItemsBox:hover .p-coursesItemBoxTitle {
	color: var(--accent-color01);
}

@media (max-width: 1024px) {
	.p-coursesItemsBox {
		padding: var(--gap01) var(--gap04);
	}
}

.p-coursesItemsBoxInfo {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	font-weight: 500;
	font-size: var(--fs-tiny);
}

.p-coursesItemBoxTitle {
	font-weight: 700;
	transition: color 0.3s;
	width: 100%;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

.p-coursesItemBoxPrice {
	font-weight: 700;
	font-family: var(--font-outfit);
	color: var(--accent-color01);
}

.p-coursesItemsBoxInfoCat {
	/* カテゴリー情報のスタイル */
}

.p-coursesItemsBoxInfoCourse {
	/* コース情報のスタイル */
}

.p-coursesNoResults {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--gap08);
	color: var(--text-color02);
	font-size: var(--fs-p);
}

.p-coursesLink {
	width: 100%;
	padding-bottom: var(--gap04);
}

@charset "UTF-8";

/* =========================================================
p-course
========================================================= */
.p-courseSec {
	position: relative;
	max-width: var(--max-width01);
	margin: auto;
	@media (max-width: 1024px) {
		padding: 0 var(--gap05) 0;
	}
	@media (max-width: 640px) {
		padding: 0 var(--gap03) 0;
	}
}
.p-courseImg {
	position: relative;
	max-width: 780px;
	margin: -100px auto 0;
	z-index: 5;
	@media (max-width: 991px) {
		margin: -30px auto 0;
	}
}
.p-courseWhy {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap04);

	color: var(--text-color04);
	background-color: rgba(17,28,59,.9);

	margin-top: -50px;
	margin-bottom: var(--gap10);
	padding: var(--gap10) var(--gap08) var(--gap08);
	@media (max-width: 1024px) {
		padding: var(--gap10) var(--gap05) var(--gap04);
	}
	@media (max-width: 640px) {
		padding: var(--gap10) var(--gap05) var(--gap05);
		margin-left: clamp(-0.75rem, 0.8vw + 0.3rem, -1.5rem); ;
		margin-right: clamp(-0.75rem, 0.8vw + 0.3rem, -1.5rem); ;
	}
}
.p-courseWhy__sub {
	font-size: var(--fs-p);
	text-align: center;
	text-wrap: balance;
}
.p-courseWhy__main {
	font-size: var(--fs-large);
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	@media (max-width: 640px) {
	font-size: var(--fs-title);
	}
}
.p-courseWhy__mainInner {
	text-wrap: balance;
	padding: 3px 5px;
	line-height: 1.8;
	background: var(--gradient-button04); 

}
.p-courseWhy__text {
	text-align: left;
	font-size: var(--fs-p);
	line-height: 1.8;
	font-weight: normal;
}


.p-courseSolv {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap04);
}
.p-courseSolv__main {
	position: relative;
	font-size: var(--fs-large);
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	text-wrap: balance;
	margin-bottom: var(--gap04);
	@media (max-width: 640px) {
		font-size: var(--fs-title);
	}
	&::before {
		content: "";
		position: absolute;
		bottom: -10px;
		right: 0;
		left: 0;
		margin: auto;
		width: 100%;
		height: 2px;
		background-color: var(--accent-color02);
	}
}
.p-courseSolv__sub {
	font-size: var(--fs-postp);
	line-height: 1.8;
	text-align: center;
	text-wrap: balance;
	strong {
		color: var(--accent-color04);
	}
}
.p-courseSolv__text {
	font-size: var(--fs-p);
	line-height: 1.8;
	text-align: center;
	text-wrap: balance;
	font-weight: normal;
}

.p-courseCatch {
	position: relative;
    font-size: var(--fs-subtitle);
    font-weight: bold;
    padding-bottom: var(--gap05);
    margin: 0 auto var(--gap05)!important;
    text-align: center;
    width: fit-content;
    text-wrap: balance;
	&::after {
		content: "";
		position: absolute;
		bottom: 0px;
		right: 0;
		left: 0;
		margin: auto;
		width: 64px;
		height: 2px;
		background-color: #2EB979;
	}
}

.p-courseDetail {
	display: flex;
	flex-direction: column;
	gap: var(--gap10);
	margin-bottom: var(--gap10);
}
.p-courseDetail__sec {
	font-weight: normal;
	font-size: var(--fs-p);
	line-height: 2;
    display: flex;
    flex-direction: column;
    gap: var(--gap04);
	@media (max-width: 640px) {
		font-size: var(--fs-mid);
	}
	&.__faq {
		.view-contents {
			display: flex;
			flex-direction: column;
			gap: var(--gap04);
		}
	}

}
.p-courseDetail__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap02);
	font-size: var(--fs-large);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
	counter-increment: p-courseDetail__title;
	@media (max-width: 640px) {
		font-size: var(--fs-large);
	}
	&.__nonum {
		&::before {
			content: none;
		}
	}
}
.p-courseDetail__titleSub {
	font-size: var(--fs-mid);
	color: var(--accent-color02);
}

.p-courseDetail__cont,
.p-coursePurchase__cont {
	position: relative;
	z-index: 5;
	padding: var(--gap07) var(--gap08) var(--gap06);
	@media (max-width: 1024px) {
		padding: var(--gap05) var(--gap05) var(--gap05);
	}
	@media (max-width: 640px) {
		padding: var(--gap05) var(--gap04) var(--gap05);
	}
}

.p-courseDetail__cont {

	display: flex;
	flex-direction: column;

	background-color: var(--base-color03);
	border-radius: var(--radius01);
	box-shadow: var(--shadow00); 

	&.__nobg {
		padding: 0;
		background-color: transparent;
		box-shadow: none;
	}

	&.__faq {
		display: flex;
		flex-direction: column;
		gap: var(--gap01);
		.view-contents {
			display: flex;
			flex-direction: column;
			gap: var(--gap01);
		}
	}

	p {
		margin: 1.3em 0!important;
	}
	ul {
		margin: 0!important;
		padding: 0!important;
	}
	li {
		font-size: var(--fs-mid);
		font-weight: normal;
		line-height: 1.5;
	}
	ul {
		li {
			position: relative;
			padding-left: 24px;
			&::before {
				content: "";
				width: 12px;
				height: 12px;
				background-color: var(--accent-color02);
				position: absolute;
				left: 0;
				top: 8px;
				@media (max-width: 1024px) {
					width: 10px;
					height: 10px;
					top: 6px;
				}
			}
		}
	}
	table {
		font-size: 15px;
		border: 5px solid var(--base-color02);
		border-collapse: separate;
		border-spacing: 0;
		@media (max-width: 640px) {
			border: 2px solid var(--base-color02);
		}
		tr {
			@media (max-width: 640px) {
				display: flex;
				flex-direction: column;
			}
			&:not(:last-child) {
				td {
					border-bottom: 2px solid var(--base-color02);
					br {
						display: none;
					}
				}
			}
		}
		th {
			padding: var(--gap02);
			background-color: var(--base-color02);            width: clamp(100px, 10vw, 240px);
            font-size: var(--fs-min);
			@media (max-width: 640px) {
				width: 100%;
				br {
					display: none;
				}
			}
		}
		td {
			padding: var(--gap04);
		}
		td:not(:last-child) {
			border-bottom: 1px solid var(--base-color02);
		}
	}
}

.p-courseDetail_review {
	background-color: var(--base-color03);
}


.p-coursePurchase {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap10);
	margin-bottom: var(--gap10);
	@media (max-width: 640px) {
		gap: var(--gap06);
	}

	.item-style {
		margin-bottom: var(--gap03);
	}
}
.p-coursePurchase__title {
	font-size: var(--fs-xlarge);
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	text-wrap: balance;
}
.p-coursePurchase__titleCourse {
	font-size: var(--fs-mid);
	color: var(--accent-color02);
}
.p-coursePurchase__titleCourse__text {
	text-align: center;
	text-wrap: balance;
	font-size: var(--fs-mid);
	font-weight: normal;
}

.p-coursePurchase__price {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	text-align: center;
	margin: var(--gap05) auto;
}
.p-coursePurchase__priceNum {
	position: relative;
	font-family: var(--font-outfit);
	font-size: var(--fs-postp);
	font-weight: 700;
	line-height: 1;
	span {
		font-size: var(--fs-mid);
	}

	&.__base {
		color: var(--text-color02);
		width: fit-content;
        margin: auto;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
			width: 100%;
			height: 1px;
			background-color: var(--text-color02);
		}
	}
	&.__campaign {
		color: var(--accent-color04);
		font-size: var(--fs-big);
	}
}
.p-coursePurchase__priceBadge {
	width: fit-content;
	background-color: var(--accent-color04);
	padding: 2px 5px;
	color: var(--text-color04);
	margin: auto;
}

.p-coursePurchase__sec {
	position: relative;
	width: 100%;
	background-color: var(--base-color01);
	padding: var(--gap06) var(--gap06) var(--gap10);
	@media (max-width: 1024px) {
		padding: var(--gap05) var(--gap04) var(--gap10);
	}
	@media (max-width: 640px) {
		padding: var(--gap03) var(--gap02) var(--gap05);
	}
}
.p-coursePurchase__inner {
	position: relative;
	max-width: var(--max-width01);
	background-color: var(--base-color03);
	border-radius: 2px;
	margin: auto;
}
.p-coursePurchase__cont {
	position: relative;
	margin: auto;
}
.p-coursePurchase__img {
	max-width: 780px;
    margin: -120px auto 0;
	@media (min-width: 1921px) {
		margin: -160px auto 0;
	}
	@media (max-width: 1024px) {
		margin: -70px auto 0;
	}
	@media (max-width: 640px) {
		margin: -50px auto 0;
	}
}

.p-coursePurchaseBtn {
	max-width: fit-content;

	display: flex;
	gap: var(--gap02);
	align-items: center;
	justify-content: center;
	margin: auto;
	box-shadow: var(--shadow02);

	&::before {
		font-family: "Material Symbols Outlined";
		content: "shopping_cart";
		font-size: var(--fs-large);
		color: var(--text-color04);
	}

	/* 上部に設置 */
	&.__top {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		@media (max-width: 1024px) {
			bottom: -30px;
		}
	}
	/* 固定ボタン */
	&.__fixed {
		position: fixed;
		bottom: 39px;
		left: 0;
		right: 0;
		width: 100%;
		transform: translateX(0%) translateY(100px);
		opacity: 0;
		visibility: hidden;
		transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
		z-index: 1000;
		@media (max-width: 768px) {
			max-width: inherit;
			padding: var(--gap02) var(--gap04);
		}
		&.__show {
			transform: translateX(-0%) translateY(0);
			opacity: 1;
			visibility: visible;
		}
	}
}

.p-coursePurchase__cartbtn {

}

.p-coursePurchase__btns {
	@media (max-width: 640px) {
		display: flex;
		flex-direction: column-reverse;
		gap: var(--gap01);
	}
	.mitumori-btn {
		@media (max-width: 640px) {
			width: 100%;
		}
	}
}
.p-coursePurchase__btnsForm {
	@media (max-width: 640px) {
		width: 100%!important;
	}
}

/* =========================================================
p-course content parts / section
========================================================= */

/* 講師紹介
--------------------------------------------------------- */
.p-courseTeacher {
	display: flex;
	gap: var(--gap05);
	@media (max-width: 798px) {
		flex-direction: column;
		align-items: center;
		gap: var(--gap04);
	}
}
.p-courseTeacher__img {
	width: 100%;
    max-width: clamp(160px, 15vw, 200px);
    overflow: hidden;
	flex-shrink: 0;
}
.p-courseTeacher__imgItem {
	width: 100%;
	object-fit: cover;
}
.p-courseTeacher__cont {
	width: 100%;
}


/* キャッチコピー
--------------------------------------------------------- */
.p-coursePoint {
	padding: var(--gap05) 0;
	gap: var(--gap05);
}
.p-coursePoint__unit {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--gap05);
	color: var(--text-color04);
	padding: 0 var(--gap05) var(--gap05);
	counter-reset: p-coursePoint__title;
	@media (max-width: 591px) {
		flex-direction: column;
	}
	&::before {
		content: "";
		position: absolute;
		width: 100%;
		height: calc(100% - 30px);
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: linear-gradient(120deg, #43568D 0%, var(--base-color01) 30%);
	}
}
.p-coursePoint__item {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap03);
	align-items: center;
	justify-content: center;
}
.p-coursePoint__img {
	display: block;
	object-fit: cover;
}
.p-coursePoint__title {
	width: 100%;
	position: relative;
	font-size: var(--fs-mid);
	text-align: center;
	text-wrap: balance;
	counter-increment: p-coursePoint__title;
	@media (max-width: 798px) {
		justify-content: center;
		font-size: var(--fs-p);
	}
	&:before {
		content: counter(p-coursePoint__title);

		position: absolute;
		top: -45px;
		left: 20px;
		font-size: 50px;
		text-shadow:1px 1px 0 var(--accent-color02), -1px -1px 0 var(--accent-color02),
              -1px 1px 0 var(--accent-color02), 1px -1px 0 var(--accent-color02),
              0px 1px 0 var(--accent-color02),  0 -1px 0 var(--accent-color02),
              -1px 0 0 var(--accent-color02), 1px 0 0 var(--accent-color02);
		color: var(--text-color04);
		font-family: var(--font-outfit);
		font-weight: 900;
		line-height: 1;

	}

}

/* 問題定義
--------------------------------------------------------- */
.p-courseIssue__unit {
	display: flex;
	gap: var(--gap04);
	margin-bottom: var(--gap05);
	@media (max-width: 591px) {
		flex-direction: column;
		margin-bottom: var(--gap03);
	}
}
.p-courseIssue__item {
	position: relative;
	flex: 1;
	overflow: hidden;
	&::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		background: linear-gradient(180deg,rgba(17,28,59,0) 0%, var(--base-color01) 50%);
		z-index: 1;
	}
}
.p-courseIssue__img {
	position: absolute;
	z-index: 0;
	width: 100%;
	object-fit: contain;
	display: block;
}
.p-courseIssue__info {
	position: relative;
	z-index: 2;
	color: var(--text-color04);
}
.p-courseIssue__info {
	display: flex;
	flex-direction: column;
	gap: var(--gap03);
	padding: 100px var(--gap05) var(--gap05);
	@media (max-width: 591px) {
		padding: 100px var(--gap05) var(--gap05);
	}
}

.p-courseIssue__infoTitle {
	font-size: var(--fs-postp);
	font-weight: bold;
}

.p-courseIssue__infoUl {
	display: flex;
	flex-direction: column;
	gap: var(--gap02);
}
.p-courseIssue__infoList {
	display: flex;
	align-items: center;
	gap: 5px;
	padding-left: 0px!important;
	&::before {
		content: "\e5cd"!important;
		font-family: 'Material Symbols Outlined' !important;
		font-weight: 400!important;
		color: var(--accent-color03);
		background-color: transparent!important;
		position: relative!important;
		left: 0!important;
		top: 0px!important;
		width: auto!important;
		height: auto!important;
	}
}

/* 解決策
--------------------------------------------------------- */
.p-courseSolv__unit {
	display: flex;
	flex-direction: column;
	gap: var(--gap08);
	margin-bottom: var(--gap05);
	@media (max-width: 591px) {
		gap: var(--gap04);
	}
}
.p-courseSolv__item {
	display: flex;
	gap: var(--gap05);
	align-items: flex-start;
	@media (max-width: 591px) {
		gap: var(--gap02);
		flex-direction: column;
	}
}
.p-courseSolv__img {
	width: clamp(180px, 40vw, 400px);
	flex-shrink: 0;
	object-fit: fill;
	@media (max-width: 591px) {
		width: 100%;
	}
	
}
.p-courseSolv__info {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	@media (max-width: 591px) {
		align-items: center;
		margin-top: -20px;
	}
}
.p-courseSolv__infoBadge {
	width: fit-content;
	display: flex;
	align-items: center;
	border: 1px solid var(--accent-color02);
	font-size: var(--fs-min);
}
.p-courseSolv__infoBadge__cat,
.p-courseSolv__infoBadge__catch {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2px 10px;
    font-weight: 700;
}
.p-courseSolv__infoBadge__cat {
	color: var(--accent-color02);
	background-color: var(--base-color03);
}
.p-courseSolv__infoBadge__catch {
	color: var(--text-color04);
	background-color: var(--accent-color02);
}

.p-courseSolv__infoTitle {
	font-size: var(--fs-large);
	line-height: 1.5;
}
.p-courseSolv__infoText {
	font-size: var(--fs-mid);
}

/* 比較
--------------------------------------------------------- */

.p-courseDetail__cont .p-courseCompare__table {
	font-size: var(--fs-min);
	border-collapse: collapse;
	border: none!important;
	margin-bottom: var(--gap05);

	th, td {
		padding: 0;
		border-bottom: .5px solid var(--border-color01)!important;
		font-weight: bold;
		@media (max-width: 640px) {
			width: 50%;
		} 
	}
	tr {
		@media (max-width: 640px) {
			display: table;
		} 
	}

	br {
		display: block!important;
		@media (max-width: 798px) {
			display: none!important;
		}
	}

	td div {
		padding: var(--gap04) var(--gap04);
		display: flex;
		align-items: center;
		gap: 10px;
		text-align: center;
		justify-content: center;
		@media (max-width: 640px) {
			gap: 2px;
			flex-direction: column;
			padding: var(--gap04) var(--gap02);
		} 
	}

	tr th:first-child {
		width: clamp(30px, 5vw, 50px);
		@media (max-width: 640px) {
			min-width: 60px;
		} 
	}

	.material-symbols-outlined {
		color: var(--accent-color02);
		flex-shrink: 0;
		&.__close {
			color: var(--accent-color03);
		}
	}

	.p-courseCompare__tableAppeal > div {
	}

	.p-courseCompare__tableAppeal {
		position: relative;
		z-index: 2;
		background-color: #fff;
		box-shadow: inset 4px 0 0 var(--accent-color02),
		            inset -4px 0 0 var(--accent-color02);
	}

	thead th {
		background-color: transparent;
	}


	thead .p-courseCompare__tableAppeal {
		background-color: #f8fbfe;
		box-shadow: inset 0 4px 0 var(--accent-color02),
		            inset 4px 0 0 var(--accent-color02),
		            inset -4px 0 0 var(--accent-color02);
	}

	tbody tr:last-child .p-courseCompare__tableAppeal {
		box-shadow: inset 0 -4px 0 var(--accent-color02),
		            inset 4px 0 0 var(--accent-color02),
		            inset -4px 0 0 var(--accent-color02);
	}
	.p-courseCompare__tableLogo {
		padding: var(--gap04) var(--gap02);
		line-height: 1;
		@media (max-width: 640px) {
			img {
				width: 80px;
			}
		} 
	}

	.p-courseCompare__tableTheadth {
		&.__normal {
			color: var(--text-color04);
			background-color: var(--base-color01);
		}
	}
}
@charset "UTF-8";

/* =========================================================
settings
========================================================= */

/* =========================================================
sat css page
========================================================= */
.l-main {
	@media (max-width: 768px) {
		overflow: hidden;
  }
}
.p-cart {
	.l-content {
		padding-top: 0px;
	}
	.l-content .l-wrap {
		width: 100%;
	}
}

.p-my {
	.page-box {
		padding: 0;
	}
}
.p-404 {
	.post-header-block {
		padding-bottom: 9rem;
	}
}

.p-page {
}

/* =========================================================
sat css reset
========================================================= */
.post-header-block {
	border-radius: 0px;
  background: var(--gradient-hero);
  @media (max-width: 991px) {
    padding: var(--gap07) var(--gap04) var(--gap08);
  }
  &::before {
    content: none;
  }
}


.post-header-block {
	.post-title {
	font-size: var(--fs-xlarge);
	width: fit-content;
		margin: auto;
	@media (max-width: 991px) {
		font-size: var(--fs-title)!important;
	}
	@media (max-width: 591px) {
		font-size: var(--fs-postp)!important;
	}
	}
}

.page-box {
  position: relative;
  z-index: 5;

  padding: var(--gap08);

  font-size: var(--fs-mid);
  line-height: 1.6;

  width: calc(100% - (var(--ptb-big) + var(--ptb-big)));
  max-width: var(--max-width-large);
  margin-left: auto;
  margin-right: auto;
  margin-top: -4vw;
  border-radius: 1px;

  @media (max-width: 1024px) {
    width: 95%;
    padding: var(--gap05);
  	margin-top: -20px;
  }
  @media (max-width: 640px) {
    width: 97%;
  }
  &.__nopadding {
    padding: 0;
  }
  &.__login {
	max-width: var(--max-width00);
  }
  &.mypage {
	padding: 0;
  }
}
.l-inner-wrap {
	position: relative;
}

/* =========================================================
p-page 固定ページ
========================================================= */
.p-page .page-box {
  /* Lists */
  ul,
  ol {
  }

  ul li,
  ol li {
    position: relative;
    padding-left: var(--gap04);
    margin: 0 0 var(--gap02);
    list-style: none;
	p {
		margin-top: var(--gap01);
		margin-bottom: 0px;
		padding: var(--gap03);
		font-size: var(--fs-mid);
		background-color: var(--base-color04);

	}
  }

  ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent-color02);
  }

  ol {
    counter-reset: list-counter;
  }

  ol li::before {
    position: absolute;
    left: 0;
    top: 0.1em;
    counter-increment: list-counter;
    content: counter(list-counter) '.';
    color: var(--accent-color02);
    font-weight: 700;
	font-family: var(--font-outfit);
    min-width: 1.6em;
  }
  /* Headings */
  h2,
  h3,
  h4,
  h5 {
    margin: var(--gap04) 0 var(--gap03);
    font-weight: 700;
    color: var(--text-color01);
    line-height: 1.3;
  }

  h2 {
	&:not(:first-of-type) {
		padding-top: var(--gap04);
		border-top: 2px solid var(--base-color04);
		font-size: var(--fs-title);
	}
  }

  h3 {
    font-size: var(--fs-subtitle);
  }

  h4 {
    font-size: var(--fs-mid);
  }

  h5 {
    font-size: var(--fs-p);
    font-weight: 600;
  }

	table {
		width: 100%;
		border-top: 1px solid var(--border-color02);
		th,td {
			border-bottom: 1px solid var(--border-color07);
		}
		th {
			max-width: 200px;
    		width: 20vw;
		}
	}

}
.p-pageInner {
	max-width: var(--max-width-tiny);
	margin-left: auto;
	margin-right: auto;
}

/* =========================================================
p-cart style
========================================================= */
.l-main-wrap {
  display: flex;
  @media (max-width: 1280px) {
    display: block;
  }
}
.l-inner.__cartFlow {
  max-width: var(--max-width-big);
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
  margin-top: -60px;
  box-shadow: none;
  @media (max-width: 991px) {
    width: 100%;
  margin-top: -40px;
    padding: var(--gap04);
  }

  @media (max-width: 590px) {
    padding: var(--gap00);
  }


	.item-text-detail {
  		@media (max-width: 768px) {
			display: block;
		}
	}
}
/* カートページの場合 */
.p-cart .page-box {
  margin-top: 0px !important;
  border-radius: 0px;
  font-size: var(--fs-mid);
}

.o-cartFlow {
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--gap08);
  width: calc(100% - (var(--ptb-big) + var(--ptb-big)));
	max-width: var(--max-width-large);
  background-color: var(--base-color02);
  z-index: 6;
  border-radius: 2px 2px 0 0;


  @media (max-width: 991px) {
	width: 100%;
    margin-top: 0;
    padding: 0 0 var(--gap04);
  }
}


/* 購入完了　*/
.payment-done {
	display: flex;
	flex-direction: column;
	width: 100;
	gap: var(--gap05);
	p {
		margin-bottom: 0;
	}
	.btn {
		max-width: inherit;
		width: 100%;
	}
	.box {
		width: 100%;
		.box-item {
			.tel {
				font-size: var(--fs-xlarge);
			}
		}
	}
}

/* 404 */
/* マイページ */
.mypage {
	.tab-btns {
		li {
			background: var(--base-color01);
			color: #fff;
		}
	}
}
@charset "UTF-8";
/* =========================================================
u-helper style
========================================================= */
/* log in or out
--------------------------------------------------------- */

/* display
--------------------------------------------------------- */
.u-d {
    display: block;
}

.u-dNone {
    display: none;
}

.u-d-lg {
    display: none;
}
@media (max-width: 1280px) {
	.u-d-lg {
		display: block;
	}
}

.u-d-tab {
    display: none;
}
@media (max-width: 1024px) {
	.u-d-tab {
		display: block;
	}
}

.u-d-md {
    display: none;
}
@media (max-width: 768px) {
	.u-d-md {
		display: block;
	}
}

.u-d-sm {
    display: none;
}
@media (max-width: 640px) {
	.u-d-sm {
		display: block;
	}
}

.u-dNone {
    display: none;
}

.u-dNone-tab {
    display: block;
}
@media (max-width: 1024px) {
	.u-dNone-tab {
		display: none;
	}
}

.u-dNone-md {
    display: block;
}
@media (max-width: 768px) {
	.u-dNone-md {
		display: none;
	}
}

.u-dNone-sm {
    display: block;
}
@media (max-width: 640px) {
	.u-dNone-sm {
		display: none;
	}
}

.u-dNone-tiny {
    display: block;
}
@media (max-width: 480px) {
	.u-dNone-tiny {
		display: none;
	}
}

/* img
--------------------------------------------------------- */
.u-objectfit-cover {
    object-fit: cover;
}

/* color
--------------------------------------------------------- */
.u-color-main {
    color: var(--accent-color02);
}
.u-color-white {
    color: white;
}
.u-color-red01 {
    color: var(--red01);
}
.u-color-green {
    color: var(--accent-color03);
}
.u-color-yellow {
    color: var(--accent-color06);
}
.u-color-orange {
    color: var(--accent-color04);
}
.u-color-blue01 {
    color: var(--accent-color01);
}
.u-color-blue02 {
    color: var(--accent-color08);
}

/* list
--------------------------------------------------------- */
.u-list-style-none li {
    list-style: none;
}
.u-listBefore--none li:before {
    content: none!important;
}

/* border
--------------------------------------------------------- */
.u-border-top {
    border-top: 1px solid var(--sub-color01);
}
.u-border-bottom {
    border-bottom: 1px solid var(--sub-color01);
}


/* border - radius
--------------------------------------------------------- */
.u-border-radius4 {
    border-radius: 4px;
    overflow: hidden;
}
.u-border-radius50 {
    border-radius: 100px;
    overflow: hidden;
}
.u-border-radius2-4 {
    border-radius: 4px 4px 0 0;
}

/* text / font
--------------------------------------------------------- */
.u-tc-white {
    color: #fff;
}
.u-fw-bold {
    font-weight: 700;
}
.u-fw-boldest {
    font-weight: 700;
}
.u-ta-center {
    text-align: center;
}

.u-ta-center {
    text-align: center;
}
.u-ta-left {
    text-align: left;
}
.u-ta-right {
    text-align: right; 
}
.u-td-line {
	text-decoration: line-through;
}

/* font-size utilities
--------------------------------------------------------- */
.u-fs-tiny {
    font-size: var(--fs-tiny);
}
.u-fs-min {
    font-size: var(--fs-min);
}
.u-fs-mid {
    font-size: var(--fs-mid);
}
.u-fs-p {
    font-size: var(--fs-p);
}
.u-fs-postp {
    font-size: var(--fs-postp);
}
.u-fs-subtitle {
    font-size: var(--fs-subtitle);
}
.u-fs-title {
    font-size: var(--fs-title);
}
.u-fs-large {
    font-size: var(--fs-large);
}
.u-fs-xlarge {
    font-size: var(--fs-xlarge);
}
.u-fs-big {
    font-size: var(--fs-big);
}
.u-fs-huge {
    font-size: var(--fs-huge);
}
.u-fs-xhuge {
    font-size: var(--fs-xhuge);
}

/* link + hover
--------------------------------------------------------- */
.u-link-hoverwhite:hover {
    color: #fff;
}
.u-link-nohover:hover {
    color: #000;
}

/* padding +
--------------------------------------------------------- */
.u-pb-1 {
    padding-bottom: 1rem!important;
}
.u-pb-2 {
    padding-bottom: 2rem!important;
}
.u-pb-3 {
    padding-bottom: 3rem!important;
}
.u-pb-6 {
    padding-bottom: 6rem!important;
}

.u-ptb-8 {
    padding-top: 8rem!important;
    padding-bottom: 8rem!important;
}

.u-pb-10 {
    padding-bottom: 10rem!important;
}
.u-ptb-10 {
    padding-top: 10rem!important;
    padding-bottom: 10rem!important;
}
.u-pt-0 {
    padding-top: 0px!important;
}
.u-pt-1 {
    padding-top: 1rem;
}
.u-pt-2 {
    padding-top: 2rem;
}
.u-pt-3 {
    padding-top: 3rem;
}
/* margin +
--------------------------------------------------------- */
.u-mb-0 {
    margin-bottom: 0!important;
}
.u-mb-1 {
    margin-bottom: 1rem!important;
}
.u-mb-2 {
    margin-bottom: 2rem!important;
}
.u-mb-3 {
    margin-bottom: 3rem!important;
}
.u-mb-6 {
    margin-bottom: 6rem!important;
}

.u-mt-0 {
    margin-top: 0!important;
}
.u-mt-1 {
    margin-top: 1rem;
}
.u-mt-3 {
    margin-top: 3rem;
}
.u-mt-6 {
    margin-top: 6rem;
}
.u-mr-1 {
    margin-right: 1rem;
}
.u-mr-3 {
    margin-right: 3rem;
}


/* margin -
--------------------------------------------------------- */
.u-mx-n32 {
    margin-left: -32px;
    margin-right: -32px;
}
.u-mx-n16 {
    margin-left: -16px;
    margin-right: -16px;
}
.u-mt-n40 {
    margin-top: -40px;
}

.u-mrl-auto {
    margin-left: auto;
    margin-right: auto;
}

/* width
--------------------------------------------------------- */
.u-w100 {
    width: 100%;
}

/* max-width
--------------------------------------------------------- */
.u-maxw-480 {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.u-maxw-800 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.u-maxw-post {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

/* max-height
--------------------------------------------------------- */
.u-maxh-420 {
    max-height: 420px;
}

/* whitespace
--------------------------------------------------------- */
.u-whitespace {
    width: 100%; /* 要素の横幅を指定 */
    white-space: nowrap; /* 横幅のMAXに達しても改行しない */
    overflow: hidden; /* ハミ出した部分を隠す */
    text-overflow: ellipsis; /* 「…」と省略 */
    -webkit-text-overflow: ellipsis; /* Safari */
    -o-text-overflow: ellipsis; /* Opera */
}


/* scroll - mv
--------------------------------------------------------- */
.u-of-scroll {
    overflow-y: scroll
}
.u-of-hidden {
    overflow: hidden;
}

/* underline
--------------------------------------------------------- */
.u-underline01 {
    /* position: relative;
    &:before {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 4px;
        border-radius: 100px;
    } */
    &.__yellow {
        border-bottom: 2px solid var(--accent-color04);
    } 
}

/* sns bg color
--------------------------------------------------------- */
.u-youtubeFrame {
    width: 100%;
    position: relative;
    padding-top: 56.25%;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
  
/* position
--------------------------------------------------------- */
.u-position-r {
    position: relative;
}