@charset "utf-8";
/*===========================================================================
汎用的に使えるヘルパークラス（微調整や効果）をまとめます。
===========================================================================*/
/* スクロールアニメーション
===========================================================================*/
/* アニメーションの基本設定（画面外の状態） */
.scroll-animation {
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease, transform 0.8s ease, filter 1.2s ease;
}
/* 画面内に入った時のスタイル (.is-visibleはJSが付与) */
.scroll-animation.is-visible {
opacity: 1;
visibility: visible;
transform: none; /* transformプロパティをリセット */
filter: none; /* filterプロパティをリセット */
}
/* --- アニメーションの種類 --- */
/* 下からフェードイン */
.fade-in-bottom { transform: translateY(50px); }
/* 上からフェードイン */
.fade-in-top { transform: translateY(-50px); }
/* 左からフェードイン */
.fade-in-left { transform: translateX(-50px); }
/* 右からフェードイン */
.fade-in-right { transform: translateX(50px); }
/* ズームイン */
.zoom-in { transform: scale(0.9); }
/* ズームアウト */
.zoom-out { transform: scale(1.1); }
/* フォーカスイン */
.text-focus-in {
filter: blur(10px);
}
/* --- 遅延 (Delay) --- */
.delay-200 { transition-delay: 200ms; }
.delay-400 { transition-delay: 400ms; }
.delay-600 { transition-delay: 600ms; }
.delay-800 { transition-delay: 800ms; }
.delay-1000{ transition-delay: 1000ms; }
/* 画像ホバーエフェクト
===========================================================================*/
/*
*/
.hover-icon {
display: block;
overflow: hidden;
position: relative;
}
.hover-icon__mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.hover-icon__caption {
text-align: center;
color: #fff;
}
.hover-icon:hover .hover-icon__mask {
opacity: 1;
}
/*
*/
.zoom-hover {
display: block;
overflow: hidden; /* はみ出した画像を隠す */
}
.zoom-hover img {
transition: transform 0.6s ease; /* アニメーションを設定 */
}
.zoom-hover:hover img {
transform: scale(1.1); /* ホバー時に画像を1.1倍に拡大 */
}
.floating-image {
display:block;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.floating-image:hover {
transform: translateY(-5px);
box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.15);
}
/* マーカー
===========================================================================*/
.marker {
display: inline;
background-repeat: no-repeat;
/* 0 80% で下側に色を配置。太さを変える場合は 80% を調整 */
background-size: 100% 0.6em;
background-position: 0 50%;
}
.marker-blue { background-image: linear-gradient(transparent, rgba(179, 229, 252, 0.6)); }
.marker-yellow { background-image: linear-gradient(transparent, rgba(255, 241, 118, 0.6)); }
.marker-green { background-image: linear-gradient(transparent, rgba(200, 230, 201, 0.6)); }
/* リストスタイル
===========================================================================*/
/*
- 最初の項目です。
- 2番目の項目です。テキストが長くなっても改行後は綺麗に揃います。
- 3番目の項目です。
*/
.list-disc {
}
.list-disc > li {
padding-left: 1em; /* インデントを確保 */
line-height:1.8;
}
.list-disc > li + li {
margin-bottom: 5px;
}
.list-disc > li::before {
content: "";
width: 5px;
height: 5px;
display: inline-block;
background-color: var(--color-primary);
border-radius: 50%;
vertical-align: middle;
margin-right: 0.5em;
margin-left: -1em; /* インデント分を戻して先頭に配置 */
}
/*
- 最初の項目です。
- 2番目の項目です。テキストが長くなっても改行後は綺麗に揃います。
- 3番目の項目です。
*/
.list-decimal {
counter-reset: list-counter; /* 連番をリセットして1から始める準備 */
}
.list-decimal > li {
counter-increment: list-counter; /* li要素ごとに連番を1増やす */
padding-left: 1em; /* インデントを確保 */
position: relative;
line-height:1.8;
}
.list-decimal > li + li {
margin-bottom: 5px;
}
.list-decimal > li::before {
content: counter(list-counter); /* "1." "2." のように表示 */
position: absolute;
left: 0;
top: 0;
font-weight: 700;
color: var(--color-primary);
text-align: right;
}
/* ディスプレイ
===========================================================================*/
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }
.d-grid { display: -ms-grid !important; display: grid !important; }
.d-none { display: none !important; }
/* Flexbox
===========================================================================*/
.justify-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; }
.justify-between{ -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; }
.items-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; }
.flex-wrap{ flex-wrap:wrap;}
/* フォントファミリー
===========================================================================*/
.font-sans{ font-family: var(--font-sans); }
.font-serif{ font-family: var(--font-serif); }
/* フォントサイズ
===========================================================================*/
.text-10 { font-size: 1.0rem; }
.text-11 { font-size: 1.1rem; }
.text-12 { font-size: 1.2rem; }
.text-13 { font-size: 1.3rem; }
.text-14 { font-size: 1.4rem; } /* 14px相当 */
.text-15 { font-size: 1.5rem; } /* 15px相当 */
.text-16 { font-size: 1.6rem; } /* 16px相当 (基本) */
.text-18 { font-size: 1.8rem; } /* 18px相当 */
.text-20 { font-size: 2.0rem; } /* 20px相当 */
.text-24 { font-size: 2.4rem; } /* 24px相当 */
/* フォントウェイト
===========================================================================*/
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }
.font-bold { font-weight: bold; }
/* フォント位置
===========================================================================*/
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
@media (min-width: 768px) {
.md\:text-center { text-align: center; }
.md\:d-flex { display: flex !important; }
/* 他にも必要なクラスを追加 */
}
@media (min-width: 1200px) {
.lg\:text-left { text-align: left; }
}
/* 色
===========================================================================*/
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-gray{ color: var(--color-text-gray) !important; }
.text-white { color: #fff !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-light { background-color: var(--color-bg-light) !important; }
.bg-white { background-color: #fff !important; }
.bg-blue-pale{ background-color: #ebfaff !important; }
/* ぶら下げインデント
===========================================================================*/
.indent-1 { padding-left: 1em; text-indent: -1em; }
.indent-2 { padding-left: 2em; text-indent: -2em; }
/* ポジション
===========================================================================*/
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
/* ボーダー (枠線)
-------------------------------------------------- */
.border { border: 1px solid var(--color-border); }
.border-top { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.border-left { border-left: 1px solid var(--color-border); }
.border-right { border-right: 1px solid var(--color-border); }
.border-0 { border: 0 !important; }
.border-2 { border-width: 2px !important; }
.border-primary { border-color: var(--color-primary) !important; }
.border-accent { border-color: var(--color-primary) !important; }
/* 角丸
===========================================================================*/
.radius-0 { border-radius: 0px !important; }
.radius-1 { border-radius: 1px !important; }
.radius-2 { border-radius: 2px !important; }
.radius-3 { border-radius: 3px !important; }
.radius-4 { border-radius: 4px !important; }
.radius-5 { border-radius: 5px !important; }
.radius-6 { border-radius: 6px !important; }
.radius-8 { border-radius: 8px !important; }
.radius-10 { border-radius: 10px !important; }
.radius-12 { border-radius: 12px !important; }
.radius-14 { border-radius: 14px !important; }
.radius-15 { border-radius: 15px !important; }
.radius-16 { border-radius: 16px !important; }
.radius-18 { border-radius: 18px !important; }
.radius-20 { border-radius: 20px !important; }
.radius-24 { border-radius: 24px !important; }
.radius-25 { border-radius: 25px !important; }
.radius-30 { border-radius: 30px !important; }
.radius-full { border-radius: 9999px !important; }
.radius-circle { border-radius: 50% !important; }
/* クリアフィックス
===========================================================================*/
.cf::after {
content: "";
display: table;
clear: both;
}
/* レスポンシブ表示切替
===========================================================================*/
/* 768px以上で非表示（スマホ・タブレットのみ表示） */
@media (min-width: 768px) {
.hidden-pc {
display: none !important;
}
}
/* 767px以下で非表示（PCのみ表示） */
@media (max-width: 767px) {
.hidden-sp {
display: none !important;
}
}
/* 1200px以上で非表示（スマホ・タブレットのみ表示） */
@media (min-width: 1200px) {
.hidden-max-pc {
display: none !important;
}
}
/* 1200px以下で非表示（PCのみ表示） */
@media (max-width: 1200px) {
.hidden-under-1200 {
display: none !important;
}
}
/* PCのみ表示 (767px以下で隠す) */
@media (max-width: 767px) {
.pc-only {
display: none !important;
}
}
/* スマホのみ表示 (普段は非表示、767px以下で表示) */
.sp-only {
display: none !important;
}
@media (max-width: 767px) {
.sp-only {
/* 表示したい形式に合わせる (block, inline, flex など) */
display: block !important;
}
}
/* 幅
===========================================================================*/
.wt5 { width: 5%; }
.wt10 { width: 10%; }
.wt15 { width: 15%; }
.wt20 { width: 20%; }
.wt25 { width: 25%; }
.wt30 { width: 30%; }
.wt35 { width: 35%; }
.wt40 { width: 40%; }
.wt45 { width: 45%; }
.wt50 { width: 50%; }
.wt55 { width: 55%; }
.wt60 { width: 60%; }
.wt65 { width: 65%; }
.wt70 { width: 70%; }
.wt75 { width: 75%; }
.wt80 { width: 80%; }
.wt85 { width: 85%; }
.wt90 { width: 90%; }
.wt95 { width: 95%; }
.wt100 { width: 100%; }
/* スペーシング (マージン)
===========================================================================*/
.m-auto { margin: auto; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-7 { margin: var(--space-7); }
.m-8 { margin: var(--space-8); }
.m-9 { margin: var(--space-9); }
.m-10 { margin: var(--space-10); }
.m-11 { margin: var(--space-11); }
.m-12 { margin: var(--space-12); }
.m-13 { margin: var(--space-13); }
.m-14 { margin: var(--space-14); }
.m-15 { margin: var(--space-15); }
.m-16 { margin: var(--space-16); }
.m-17 { margin: var(--space-17); }
.m-18 { margin: var(--space-18); }
.m-19 { margin: var(--space-19); }
.m-20 { margin: var(--space-20); }
.m-21 { margin: var(--space-21); }
.m-22 { margin: var(--space-22); }
.m-23 { margin: var(--space-23); }
.m-24 { margin: var(--space-24); }
.m-25 { margin: var(--space-25); }
.m-26 { margin: var(--space-26); }
.m-27 { margin: var(--space-27); }
.m-28 { margin: var(--space-28); }
.m-29 { margin: var(--space-29); }
.m-30 { margin: var(--space-30); }
.m-31 { margin: var(--space-31); }
.m-32 { margin: var(--space-32); }
.m-33 { margin: var(--space-33); }
.m-34 { margin: var(--space-34); }
.m-35 { margin: var(--space-35); }
.m-36 { margin: var(--space-36); }
.m-37 { margin: var(--space-37); }
.m-38 { margin: var(--space-38); }
.m-39 { margin: var(--space-39); }
.m-40 { margin: var(--space-40); }
.m-41 { margin: var(--space-41); }
.m-42 { margin: var(--space-42); }
.m-43 { margin: var(--space-43); }
.m-44 { margin: var(--space-44); }
.m-45 { margin: var(--space-45); }
.m-46 { margin: var(--space-46); }
.m-47 { margin: var(--space-47); }
.m-48 { margin: var(--space-48); }
.m-49 { margin: var(--space-49); }
.m-50 { margin: var(--space-50); }
/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }
.mt-10 { margin-top: var(--space-10); }
.mt-11 { margin-top: var(--space-11); }
.mt-12 { margin-top: var(--space-12); }
.mt-13 { margin-top: var(--space-13); }
.mt-14 { margin-top: var(--space-14); }
.mt-15 { margin-top: var(--space-15); }
.mt-16 { margin-top: var(--space-16); }
.mt-17 { margin-top: var(--space-17); }
.mt-18 { margin-top: var(--space-18); }
.mt-19 { margin-top: var(--space-19); }
.mt-20 { margin-top: var(--space-20); }
.mt-21 { margin-top: var(--space-21); }
.mt-22 { margin-top: var(--space-22); }
.mt-23 { margin-top: var(--space-23); }
.mt-24 { margin-top: var(--space-24); }
.mt-25 { margin-top: var(--space-25); }
.mt-26 { margin-top: var(--space-26); }
.mt-27 { margin-top: var(--space-27); }
.mt-28 { margin-top: var(--space-28); }
.mt-29 { margin-top: var(--space-29); }
.mt-30 { margin-top: var(--space-30); }
.mt-31 { margin-top: var(--space-31); }
.mt-32 { margin-top: var(--space-32); }
.mt-33 { margin-top: var(--space-33); }
.mt-34 { margin-top: var(--space-34); }
.mt-35 { margin-top: var(--space-35); }
.mt-36 { margin-top: var(--space-36); }
.mt-37 { margin-top: var(--space-37); }
.mt-38 { margin-top: var(--space-38); }
.mt-39 { margin-top: var(--space-39); }
.mt-40 { margin-top: var(--space-40); }
.mt-41 { margin-top: var(--space-41); }
.mt-42 { margin-top: var(--space-42); }
.mt-43 { margin-top: var(--space-43); }
.mt-44 { margin-top: var(--space-44); }
.mt-45 { margin-top: var(--space-45); }
.mt-46 { margin-top: var(--space-46); }
.mt-47 { margin-top: var(--space-47); }
.mt-48 { margin-top: var(--space-48); }
.mt-49 { margin-top: var(--space-49); }
.mt-50 { margin-top: var(--space-50); }
/* Margin Bottom */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-9 { margin-bottom: var(--space-9); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-11 { margin-bottom: var(--space-11); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-13 { margin-bottom: var(--space-13); }
.mb-14 { margin-bottom: var(--space-14); }
.mb-15 { margin-bottom: var(--space-15); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-17 { margin-bottom: var(--space-17); }
.mb-18 { margin-bottom: var(--space-18); }
.mb-19 { margin-bottom: var(--space-19); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-21 { margin-bottom: var(--space-21); }
.mb-22 { margin-bottom: var(--space-22); }
.mb-23 { margin-bottom: var(--space-23); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-25 { margin-bottom: var(--space-25); }
.mb-26 { margin-bottom: var(--space-26); }
.mb-27 { margin-bottom: var(--space-27); }
.mb-28 { margin-bottom: var(--space-28); }
.mb-29 { margin-bottom: var(--space-29); }
.mb-30 { margin-bottom: var(--space-30); }
.mb-31 { margin-bottom: var(--space-31); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-33 { margin-bottom: var(--space-33); }
.mb-34 { margin-bottom: var(--space-34); }
.mb-35 { margin-bottom: var(--space-35); }
.mb-36 { margin-bottom: var(--space-36); }
.mb-37 { margin-bottom: var(--space-37); }
.mb-38 { margin-bottom: var(--space-38); }
.mb-39 { margin-bottom: var(--space-39); }
.mb-40 { margin-bottom: var(--space-40); }
.mb-41 { margin-bottom: var(--space-41); }
.mb-42 { margin-bottom: var(--space-42); }
.mb-43 { margin-bottom: var(--space-43); }
.mb-44 { margin-bottom: var(--space-44); }
.mb-45 { margin-bottom: var(--space-45); }
.mb-46 { margin-bottom: var(--space-46); }
.mb-47 { margin-bottom: var(--space-47); }
.mb-48 { margin-bottom: var(--space-48); }
.mb-49 { margin-bottom: var(--space-49); }
.mb-50 { margin-bottom: var(--space-50); }
/* 水平方向のマージン */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-7 { margin-left: var(--space-7); margin-right: var(--space-7); }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
.mx-9 { margin-left: var(--space-9); margin-right: var(--space-9); }
.mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
.mx-11 { margin-left: var(--space-11); margin-right: var(--space-11); }
.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); }
.mx-13 { margin-left: var(--space-13); margin-right: var(--space-13); }
.mx-14 { margin-left: var(--space-14); margin-right: var(--space-14); }
.mx-15 { margin-left: var(--space-15); margin-right: var(--space-15); }
.mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); }
.mx-17 { margin-left: var(--space-17); margin-right: var(--space-17); }
.mx-18 { margin-left: var(--space-18); margin-right: var(--space-18); }
.mx-19 { margin-left: var(--space-19); margin-right: var(--space-19); }
.mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); }
.mx-21 { margin-left: var(--space-21); margin-right: var(--space-21); }
.mx-22 { margin-left: var(--space-22); margin-right: var(--space-22); }
.mx-23 { margin-left: var(--space-23); margin-right: var(--space-23); }
.mx-24 { margin-left: var(--space-24); margin-right: var(--space-24); }
.mx-25 { margin-left: var(--space-25); margin-right: var(--space-25); }
.mx-26 { margin-left: var(--space-26); margin-right: var(--space-26); }
.mx-27 { margin-left: var(--space-27); margin-right: var(--space-27); }
.mx-28 { margin-left: var(--space-28); margin-right: var(--space-28); }
.mx-29 { margin-left: var(--space-29); margin-right: var(--space-29); }
.mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); }
.mx-31 { margin-left: var(--space-31); margin-right: var(--space-31); }
.mx-32 { margin-left: var(--space-32); margin-right: var(--space-32); }
.mx-33 { margin-left: var(--space-33); margin-right: var(--space-33); }
.mx-34 { margin-left: var(--space-34); margin-right: var(--space-34); }
.mx-35 { margin-left: var(--space-35); margin-right: var(--space-35); }
.mx-36 { margin-left: var(--space-36); margin-right: var(--space-36); }
.mx-37 { margin-left: var(--space-37); margin-right: var(--space-37); }
.mx-38 { margin-left: var(--space-38); margin-right: var(--space-38); }
.mx-39 { margin-left: var(--space-39); margin-right: var(--space-39); }
.mx-40 { margin-left: var(--space-40); margin-right: var(--space-40); }
.mx-41 { margin-left: var(--space-41); margin-right: var(--space-41); }
.mx-42 { margin-left: var(--space-42); margin-right: var(--space-42); }
.mx-43 { margin-left: var(--space-43); margin-right: var(--space-43); }
.mx-44 { margin-left: var(--space-44); margin-right: var(--space-44); }
.mx-45 { margin-left: var(--space-45); margin-right: var(--space-45); }
.mx-46 { margin-left: var(--space-46); margin-right: var(--space-46); }
.mx-47 { margin-left: var(--space-47); margin-right: var(--space-47); }
.mx-48 { margin-left: var(--space-48); margin-right: var(--space-48); }
.mx-49 { margin-left: var(--space-49); margin-right: var(--space-49); }
.mx-50 { margin-left: var(--space-50); margin-right: var(--space-50); }
/* 垂直方向のマージン */
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-7 { margin-top: var(--space-7); margin-bottom: var(--space-7); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.my-9 { margin-top: var(--space-9); margin-bottom: var(--space-9); }
.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
.my-11 { margin-top: var(--space-11); margin-bottom: var(--space-11); }
.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }
.my-13 { margin-top: var(--space-13); margin-bottom: var(--space-13); }
.my-14 { margin-top: var(--space-14); margin-bottom: var(--space-14); }
.my-15 { margin-top: var(--space-15); margin-bottom: var(--space-15); }
.my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }
.my-17 { margin-top: var(--space-17); margin-bottom: var(--space-17); }
.my-18 { margin-top: var(--space-18); margin-bottom: var(--space-18); }
.my-19 { margin-top: var(--space-19); margin-bottom: var(--space-19); }
.my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); }
.my-21 { margin-top: var(--space-21); margin-bottom: var(--space-21); }
.my-22 { margin-top: var(--space-22); margin-bottom: var(--space-22); }
.my-23 { margin-top: var(--space-23); margin-bottom: var(--space-23); }
.my-24 { margin-top: var(--space-24); margin-bottom: var(--space-24); }
.my-25 { margin-top: var(--space-25); margin-bottom: var(--space-25); }
.my-26 { margin-top: var(--space-26); margin-bottom: var(--space-26); }
.my-27 { margin-top: var(--space-27); margin-bottom: var(--space-27); }
.my-28 { margin-top: var(--space-28); margin-bottom: var(--space-28); }
.my-29 { margin-top: var(--space-29); margin-bottom: var(--space-29); }
.my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); }
.my-31 { margin-top: var(--space-31); margin-bottom: var(--space-31); }
.my-32 { margin-top: var(--space-32); margin-bottom: var(--space-32); }
.my-33 { margin-top: var(--space-33); margin-bottom: var(--space-33); }
.my-34 { margin-top: var(--space-34); margin-bottom: var(--space-34); }
.my-35 { margin-top: var(--space-35); margin-bottom: var(--space-35); }
.my-36 { margin-top: var(--space-36); margin-bottom: var(--space-36); }
.my-37 { margin-top: var(--space-37); margin-bottom: var(--space-37); }
.my-38 { margin-top: var(--space-38); margin-bottom: var(--space-38); }
.my-39 { margin-top: var(--space-39); margin-bottom: var(--space-39); }
.my-40 { margin-top: var(--space-40); margin-bottom: var(--space-40); }
.my-41 { margin-top: var(--space-41); margin-bottom: var(--space-41); }
.my-42 { margin-top: var(--space-42); margin-bottom: var(--space-42); }
.my-43 { margin-top: var(--space-43); margin-bottom: var(--space-43); }
.my-44 { margin-top: var(--space-44); margin-bottom: var(--space-44); }
.my-45 { margin-top: var(--space-45); margin-bottom: var(--space-45); }
.my-46 { margin-top: var(--space-46); margin-bottom: var(--space-46); }
.my-47 { margin-top: var(--space-47); margin-bottom: var(--space-47); }
.my-48 { margin-top: var(--space-48); margin-bottom: var(--space-48); }
.my-49 { margin-top: var(--space-49); margin-bottom: var(--space-49); }
.my-50 { margin-top: var(--space-50); margin-bottom: var(--space-50); }
/* スペーシング (パディング)
===========================================================================*/
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-7 { padding: var(--space-7); }
.p-8 { padding: var(--space-8); }
.p-9 { padding: var(--space-9); }
.p-10 { padding: var(--space-10); }
.p-11 { padding: var(--space-11); }
.p-12 { padding: var(--space-12); }
.p-13 { padding: var(--space-13); }
.p-14 { padding: var(--space-14); }
.p-15 { padding: var(--space-15); }
.p-16 { padding: var(--space-16); }
.p-17 { padding: var(--space-17); }
.p-18 { padding: var(--space-18); }
.p-19 { padding: var(--space-19); }
.p-20 { padding: var(--space-20); }
.p-21 { padding: var(--space-21); }
.p-22 { padding: var(--space-22); }
.p-23 { padding: var(--space-23); }
.p-24 { padding: var(--space-24); }
.p-25 { padding: var(--space-25); }
.p-26 { padding: var(--space-26); }
.p-27 { padding: var(--space-27); }
.p-28 { padding: var(--space-28); }
.p-29 { padding: var(--space-29); }
.p-30 { padding: var(--space-30); }
.p-31 { padding: var(--space-31); }
.p-32 { padding: var(--space-32); }
.p-33 { padding: var(--space-33); }
.p-34 { padding: var(--space-34); }
.p-35 { padding: var(--space-35); }
.p-36 { padding: var(--space-36); }
.p-37 { padding: var(--space-37); }
.p-38 { padding: var(--space-38); }
.p-39 { padding: var(--space-39); }
.p-40 { padding: var(--space-40); }
.p-41 { padding: var(--space-41); }
.p-42 { padding: var(--space-42); }
.p-43 { padding: var(--space-43); }
.p-44 { padding: var(--space-44); }
.p-45 { padding: var(--space-45); }
.p-46 { padding: var(--space-46); }
.p-47 { padding: var(--space-47); }
.p-48 { padding: var(--space-48); }
.p-49 { padding: var(--space-49); }
.p-50 { padding: var(--space-50); }
/* Padding Top */
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }
.pt-7 { padding-top: var(--space-7); }
.pt-8 { padding-top: var(--space-8); }
.pt-9 { padding-top: var(--space-9); }
.pt-10 { padding-top: var(--space-10); }
.pt-11 { padding-top: var(--space-11); }
.pt-12 { padding-top: var(--space-12); }
.pt-13 { padding-top: var(--space-13); }
.pt-14 { padding-top: var(--space-14); }
.pt-15 { padding-top: var(--space-15); }
.pt-16 { padding-top: var(--space-16); }
.pt-17 { padding-top: var(--space-17); }
.pt-18 { padding-top: var(--space-18); }
.pt-19 { padding-top: var(--space-19); }
.pt-20 { padding-top: var(--space-20); }
.pt-21 { padding-top: var(--space-21); }
.pt-22 { padding-top: var(--space-22); }
.pt-23 { padding-top: var(--space-23); }
.pt-24 { padding-top: var(--space-24); }
.pt-25 { padding-top: var(--space-25); }
.pt-26 { padding-top: var(--space-26); }
.pt-27 { padding-top: var(--space-27); }
.pt-28 { padding-top: var(--space-28); }
.pt-29 { padding-top: var(--space-29); }
.pt-30 { padding-top: var(--space-30); }
.pt-31 { padding-top: var(--space-31); }
.pt-32 { padding-top: var(--space-32); }
.pt-33 { padding-top: var(--space-33); }
.pt-34 { padding-top: var(--space-34); }
.pt-35 { padding-top: var(--space-35); }
.pt-36 { padding-top: var(--space-36); }
.pt-37 { padding-top: var(--space-37); }
.pt-38 { padding-top: var(--space-38); }
.pt-39 { padding-top: var(--space-39); }
.pt-40 { padding-top: var(--space-40); }
.pt-41 { padding-top: var(--space-41); }
.pt-42 { padding-top: var(--space-42); }
.pt-43 { padding-top: var(--space-43); }
.pt-44 { padding-top: var(--space-44); }
.pt-45 { padding-top: var(--space-45); }
.pt-46 { padding-top: var(--space-46); }
.pt-47 { padding-top: var(--space-47); }
.pt-48 { padding-top: var(--space-48); }
.pt-49 { padding-top: var(--space-49); }
.pt-50 { padding-top: var(--space-50); }
/* Padding Bottom */
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-7 { padding-bottom: var(--space-7); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-9 { padding-bottom: var(--space-9); }
.pb-10 { padding-bottom: var(--space-10); }
.pb-11 { padding-bottom: var(--space-11); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-13 { padding-bottom: var(--space-13); }
.pb-14 { padding-bottom: var(--space-14); }
.pb-15 { padding-bottom: var(--space-15); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-17 { padding-bottom: var(--space-17); }
.pb-18 { padding-bottom: var(--space-18); }
.pb-19 { padding-bottom: var(--space-19); }
.pb-20 { padding-bottom: var(--space-20); }
.pb-21 { padding-bottom: var(--space-21); }
.pb-22 { padding-bottom: var(--space-22); }
.pb-23 { padding-bottom: var(--space-23); }
.pb-24 { padding-bottom: var(--space-24); }
.pb-25 { padding-bottom: var(--space-25); }
.pb-26 { padding-bottom: var(--space-26); }
.pb-27 { padding-bottom: var(--space-27); }
.pb-28 { padding-bottom: var(--space-28); }
.pb-29 { padding-bottom: var(--space-29); }
.pb-30 { padding-bottom: var(--space-30); }
.pb-31 { padding-bottom: var(--space-31); }
.pb-32 { padding-bottom: var(--space-32); }
.pb-33 { padding-bottom: var(--space-33); }
.pb-34 { padding-bottom: var(--space-34); }
.pb-35 { padding-bottom: var(--space-35); }
.pb-36 { padding-bottom: var(--space-36); }
.pb-37 { padding-bottom: var(--space-37); }
.pb-38 { padding-bottom: var(--space-38); }
.pb-39 { padding-bottom: var(--space-39); }
.pb-40 { padding-bottom: var(--space-40); }
.pb-41 { padding-bottom: var(--space-41); }
.pb-42 { padding-bottom: var(--space-42); }
.pb-43 { padding-bottom: var(--space-43); }
.pb-44 { padding-bottom: var(--space-44); }
.pb-45 { padding-bottom: var(--space-45); }
.pb-46 { padding-bottom: var(--space-46); }
.pb-47 { padding-bottom: var(--space-47); }
.pb-48 { padding-bottom: var(--space-48); }
.pb-49 { padding-bottom: var(--space-49); }
.pb-50 { padding-bottom: var(--space-50); }
/* 水平方向のパディング */
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-7 { padding-left: var(--space-7); padding-right: var(--space-7); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-9 { padding-left: var(--space-9); padding-right: var(--space-9); }
.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.px-11 { padding-left: var(--space-11); padding-right: var(--space-11); }
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
.px-13 { padding-left: var(--space-13); padding-right: var(--space-13); }
.px-14 { padding-left: var(--space-14); padding-right: var(--space-14); }
.px-15 { padding-left: var(--space-15); padding-right: var(--space-15); }
.px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
.px-17 { padding-left: var(--space-17); padding-right: var(--space-17); }
.px-18 { padding-left: var(--space-18); padding-right: var(--space-18); }
.px-19 { padding-left: var(--space-19); padding-right: var(--space-19); }
.px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
.px-21 { padding-left: var(--space-21); padding-right: var(--space-21); }
.px-22 { padding-left: var(--space-22); padding-right: var(--space-22); }
.px-23 { padding-left: var(--space-23); padding-right: var(--space-23); }
.px-24 { padding-left: var(--space-24); padding-right: var(--space-24); }
.px-25 { padding-left: var(--space-25); padding-right: var(--space-25); }
.px-26 { padding-left: var(--space-26); padding-right: var(--space-26); }
.px-27 { padding-left: var(--space-27); padding-right: var(--space-27); }
.px-28 { padding-left: var(--space-28); padding-right: var(--space-28); }
.px-29 { padding-left: var(--space-29); padding-right: var(--space-29); }
.px-30 { padding-left: var(--space-30); padding-right: var(--space-30); }
.px-31 { padding-left: var(--space-31); padding-right: var(--space-31); }
.px-32 { padding-left: var(--space-32); padding-right: var(--space-32); }
.px-33 { padding-left: var(--space-33); padding-right: var(--space-33); }
.px-34 { padding-left: var(--space-34); padding-right: var(--space-34); }
.px-35 { padding-left: var(--space-35); padding-right: var(--space-35); }
.px-36 { padding-left: var(--space-36); padding-right: var(--space-36); }
.px-37 { padding-left: var(--space-37); padding-right: var(--space-37); }
.px-38 { padding-left: var(--space-38); padding-right: var(--space-38); }
.px-39 { padding-left: var(--space-39); padding-right: var(--space-39); }
.px-40 { padding-left: var(--space-40); padding-right: var(--space-40); }
.px-41 { padding-left: var(--space-41); padding-right: var(--space-41); }
.px-42 { padding-left: var(--space-42); padding-right: var(--space-42); }
.px-43 { padding-left: var(--space-43); padding-right: var(--space-43); }
.px-44 { padding-left: var(--space-44); padding-right: var(--space-44); }
.px-45 { padding-left: var(--space-45); padding-right: var(--space-45); }
.px-46 { padding-left: var(--space-46); padding-right: var(--space-46); }
.px-47 { padding-left: var(--space-47); padding-right: var(--space-47); }
.px-48 { padding-left: var(--space-48); padding-right: var(--space-48); }
.px-49 { padding-left: var(--space-49); padding-right: var(--space-49); }
.px-50 { padding-left: var(--space-50); padding-right: var(--space-50); }
/* 垂直方向のパディング */
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-7 { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-9 { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-11 { padding-top: var(--space-11); padding-bottom: var(--space-11); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-13 { padding-top: var(--space-13); padding-bottom: var(--space-13); }
.py-14 { padding-top: var(--space-14); padding-bottom: var(--space-14); }
.py-15 { padding-top: var(--space-15); padding-bottom: var(--space-15); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-17 { padding-top: var(--space-17); padding-bottom: var(--space-17); }
.py-18 { padding-top: var(--space-18); padding-bottom: var(--space-18); }
.py-19 { padding-top: var(--space-19); padding-bottom: var(--space-19); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.py-21 { padding-top: var(--space-21); padding-bottom: var(--space-21); }
.py-22 { padding-top: var(--space-22); padding-bottom: var(--space-22); }
.py-23 { padding-top: var(--space-23); padding-bottom: var(--space-23); }
.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.py-25 { padding-top: var(--space-25); padding-bottom: var(--space-25); }
.py-26 { padding-top: var(--space-26); padding-bottom: var(--space-26); }
.py-27 { padding-top: var(--space-27); padding-bottom: var(--space-27); }
.py-28 { padding-top: var(--space-28); padding-bottom: var(--space-28); }
.py-29 { padding-top: var(--space-29); padding-bottom: var(--space-29); }
.py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); }
.py-31 { padding-top: var(--space-31); padding-bottom: var(--space-31); }
.py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); }
.py-33 { padding-top: var(--space-33); padding-bottom: var(--space-33); }
.py-34 { padding-top: var(--space-34); padding-bottom: var(--space-34); }
.py-35 { padding-top: var(--space-35); padding-bottom: var(--space-35); }
.py-36 { padding-top: var(--space-36); padding-bottom: var(--space-36); }
.py-37 { padding-top: var(--space-37); padding-bottom: var(--space-37); }
.py-38 { padding-top: var(--space-38); padding-bottom: var(--space-38); }
.py-39 { padding-top: var(--space-39); padding-bottom: var(--space-39); }
.py-40 { padding-top: var(--space-40); padding-bottom: var(--space-40); }
.py-41 { padding-top: var(--space-41); padding-bottom: var(--space-41); }
.py-42 { padding-top: var(--space-42); padding-bottom: var(--space-42); }
.py-43 { padding-top: var(--space-43); padding-bottom: var(--space-43); }
.py-44 { padding-top: var(--space-44); padding-bottom: var(--space-44); }
.py-45 { padding-top: var(--space-45); padding-bottom: var(--space-45); }
.py-46 { padding-top: var(--space-46); padding-bottom: var(--space-46); }
.py-47 { padding-top: var(--space-47); padding-bottom: var(--space-47); }
.py-48 { padding-top: var(--space-48); padding-bottom: var(--space-48); }
.py-49 { padding-top: var(--space-49); padding-bottom: var(--space-49); }
.py-50 { padding-top: var(--space-50); padding-bottom: var(--space-50); }