*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; font-family: "Noto Sans JP", sans-serif; font-weight: 700; }
    :root {
    --bg:      #ffffff;
    --bg2:      #000000;
    --accent:  #d25a2f;
    --text:    #262626;
    --muted:   #ffffff;
    --ff-display: 'Noto Sans JP', Georgia, serif;
    --ff-mono:    'DM Mono', monospace;

    /* Line Height (行間) */
    --lh-tight: 1.25;
    --lh-base: 1.8;
    --lh-relaxed: 2.0;

    /* Letter Spacing (字間) */
    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.05em;
    --ls-extra-wide: 0.1em;

    /* Font Size Scale (1.25 Ratio / Major Third) */
    --fs-xs: 0.75rem;    /* 12px */
    --fs-sm: 0.875rem;   /* 14px */
    --fs-base: 1rem;     /* 16px */
    --fs-lg: 1.25rem;    /* 20px */
    --fs-xl: 1.563rem;   /* 25px */
    --fs-2xl: 1.953rem;  /* 31px */
    --fs-3xl: 2.441rem;  /* 39px */

    --sp-0: 0;
    --sp-xs: 0.25rem;  /* 4px */
    --sp-sm: 0.5rem;   /* 8px */
    --sp-md: 1rem;     /* 16px */
    --sp-lg: 1.5rem;   /* 24px */
    --sp-xl: 2rem;     /* 32px */
    --sp-2xl: 3rem;    /* 48px */
    --sp-3xl: 4rem;    /* 64px */
    /* セクション間の大きな余白用 */
    --sp-section: clamp(3rem, 8vw, 9rem);
}
html, body {
    width: 100%;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

/* --- Font Size Utilities --- */
.text-xs   { font-size: var(--fs-xs); }
.text-sm   { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-lg   { font-size: var(--fs-lg); }
.text-xl   { font-size: var(--fs-xl); }
.text-2xl  { font-size: var(--fs-2xl); }
.text-3xl  { font-size: var(--fs-3xl); }

/* --- Line Height Utilities --- */
.leading-tight   { line-height: var(--lh-tight); }
.leading-normal  { line-height: var(--lh-base); }
.leading-relaxed { line-height: var(--lh-relaxed); }

/* --- Letter Spacing Utilities --- */
.tracking-tight      { letter-spacing: var(--ls-tight); }
.tracking-normal     { letter-spacing: var(--ls-normal); }
.tracking-wide       { letter-spacing: var(--ls-wide); }
.tracking-extra-wide { letter-spacing: var(--ls-extra-wide); }

/* 本文用：可読性重視 */
.prose {
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
letter-spacing: var(--ls-normal);
font-weight: 700;
}
.fb{font-weight: 700;}

/* 見出し用：力強く、かつ間延びしない設定 */
.heading {
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
/* --- Padding Utilities --- */
.p-0  { padding: var(--sp-0); }
.p-xs { padding: var(--sp-xs); }
.p-sm { padding: var(--sp-sm); }
.p-md { padding: var(--sp-md); }
.p-lg { padding: var(--sp-lg); }
.p-xl { padding: var(--sp-xl); }
/* 方向別 (X: 左右, Y: 上下) */
.px-xs { padding-left: var(--sp-xs); padding-right: var(--sp-xs); }
.px-md { padding-left: var(--sp-md); padding-right: var(--sp-md); }
.py-xs { padding-top: var(--sp-xs); padding-bottom: var(--sp-xs); }
.py-md { padding-top: var(--sp-md); padding-bottom: var(--sp-md); }
.pt-md { padding-top: var(--sp-md); }
.pb-md { padding-bottom: var(--sp-md); }
.inner{ padding: 5%;}

/* --- Margin Utilities --- */
.m-0  { margin: var(--sp-0); }
.m-auto { margin: auto; }
.m-xs { margin: var(--sp-xs); }
.m-sm { margin: var(--sp-sm); }
.m-md { margin: var(--sp-md); }
.m-lg { margin: var(--sp-lg); }
.m-xl { margin: var(--sp-xl); }
/* 方向別 (X: 左右, Y: 上下) */
.mx-md { margin-left: var(--sp-md); margin-right: var(--sp-md); }
.my-xs { margin-top: var(--sp-xs); margin-bottom: var(--sp-xs); }
.my-md { margin-top: var(--sp-md); margin-bottom: var(--sp-md); }
.mt-md { margin-top: var(--sp-md); }
.mb-md { margin-bottom: var(--sp-md); }

/* --- Layout Components --- */
/* セクション用コンテナ（レスポンシブな上下余白） */
.section-gap {
    padding-top: var(--sp-section);
    padding-bottom: var(--sp-section);
}
/* 要素間の等間隔配置（Modern CSS: Gap） */
.stack-sm { display: flex; flex-direction: column; gap: var(--sp-sm); }
.stack-md { display: flex; flex-direction: column; gap: var(--sp-md); }
.cluster  { display: flex; flex-wrap: wrap; gap: var(--sp-md); }

.center-block {
    margin-left: auto;   /* 左の余白を自動調整 */
    margin-right: auto;  /* 右の余白を自動調整 */
}
/* グリッドレイアウト（PC3列 SP1列） */
.grid {
    display: grid;
    grid-template-columns: 1fr;         /* スマホ: 1列 */
    gap: 16px;
}
@media (min-width: 768px) {
.grid {
    grid-template-columns: repeat(3, 1fr); /* PC: 3列 */
}
}

/* グリッドレイアウト（PC2列 SP1列） */
.grid2 {
    display: grid;
    grid-template-columns: 1fr;         /* スマホ: 1列 */
    gap: 16px;
}
@media (min-width: 768px) {
.grid2 {
    grid-template-columns: repeat(2, 1fr); /* PC: 2列 */
    gap: 40px;
}
}

.attempt-jp{
    display: flex;
    align-items: center;
    justify-content: left;
    font-size: 12px;
    margin-top: 4px;
    vertical-align: bottom;
}
.attempt-jp::before{
    border-top: 1px solid;
    content: "";
    width: 4em;
    margin-right: 1em;
}
.attempt2-jp{
    display: flex;
    align-items: center;
    justify-content: left;
    font-size: 14px;
    margin-top: 4px;
    vertical-align: bottom;
}
.attempt2-jp::before{
    border-top: 1px solid;
    content: "";
    width: 1em;
    margin-right: 0.5em;
}
.f_type1{
    font-family: "Bowlby One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 72px;
    color: grey;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.f_type1.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.f_type2{
    font-family: "Bowlby One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 60px;
    color: #D4D4D4;
}
.btn-gradient-animated {
background-color: grey;
background-size: 200% 200%;
color: white;
border: none;
padding: 6px 12px;
font-size: var(--fs-xs);
border-radius: 50px;
cursor: pointer;
font-weight: 700;
}

img {
    max-width: 100%;    /* 親要素の幅を超えないようにする */
    height: auto;       /* アスペクト比を維持して高さを自動調整 */
    vertical-align: bottom; /* インライン要素特有の下の隙間を消す */
    display: block;     /* レイアウトしやすくするためにブロック化（推奨） */
}

@keyframes fadeIn {
    from {
    opacity: 0;
    transform: translateY(2rem);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.card-rad{
border-radius: 8px;
/* スクロールに応じてアニメーション */
animation: fadeIn linear;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
.card-sha{
    box-shadow: 1px 1px 3px #333333;
}

.tx_uno{
    text-decoration: none;
}
.bgimg{
    width: 100%;
    height: 100%;
    background-image: url(../img/bg2.jpg);
    background-size: cover;
    background-position: center;    /* 中央に配置 */
    background-repeat: no-repeat;  /* 繰り返しなし */
}
.card {
gap: 12px;
align-items: center; /* 画像を中央に */
text-align: center;  /* テキストを中央に */
}
.logo-box{
    width: 150px;
}
small{
    font-size: var(--fs-xs);
}
.btn-area {
    padding: 32px 0;
    display: flex;
    justify-content: center;
}
.btn {
display: inline-block;
padding: 12px 32px;
background: #000000;
color: #ffffff;
border: solid 0.25px #D4D4D4;
border-radius: 9999px;
font-size:  var(--fs-base);
font-weight: 900;
cursor: pointer;
}
.btn:hover {
background: #02c754;
color: #ffffff;
transition: 0.15s, color 0.15s;
}

.item_feed{

}



@media only screen and (min-width:769px){
    .pc_no{
        display: none;
    }
    .inner {
        padding: 3%;
        max-width: 950px;
        margin: 0 auto;
    }
    .reed{
        max-width: none;
        padding: 5rem;
    }
    .reed h1{
        max-width: 400px;
        margin: 0 auto;
        font-weight: 700;
    }
    .reed h1 span{
        font-weight: 700;
    }
    .my-md {
        margin-top: var(--sp-xl);
        margin-bottom: var(--sp-xl);
    }
    .about_img{
        max-width: 350px;
        margin: 0 auto;
    }
    .about_txt{
        padding: 3rem 0 0;
    }
    .bgimg {
        width: 100%;
        max-width: none;
        height: 100%;
        background-image: url(../img/bg2.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .offer_txt{
        text-align: center;
    }
}

.head_type1{
    display: block;
    width: 100%;
    background-color: var(--bg2);
    min-height: 30px;
}
.head_logo{
    width: 30%;
    max-width: 120px;
}
.single_ttl{
    color: var(--text);
    font-size: var(--fs-lg);
    margin-bottom: 8px;
}
.single_txt h3{
    padding: 8px 0;
}
.single_txt p,.single_txt ul{
    padding-bottom: 12px;
}
table a{
    color: grey;
}