/* *** グローバル定数エリア ******* * * ******* ***********/ :root { /** レスポンシブデザイン計算用定数 **/ --VW_MAX: 1440; /* 画面幅の最大値 */ --VW_MIN: 375; /* 画面幅の最小値 */ --VW_DIFF: calc(var(--VW_MAX) - var(--VW_MIN)); /* 画面幅の最大値と最小値の差分 */ } /* *** 汎用クラスエリア ******* * * ******* *********/ .flxcontainer{ flex-direction: column; display: inline-flex; } .flxcontainerCol{ flex-direction: column; justify-content: center; align-items: center; display: inline-flex; } .flxcontainerRow{ flex-direction: row; justify-content: center; align-items: center; display: inline-flex; } .flxcontainerStart{ flex-direction: column; justify-content: flex-start; align-items: center; display: inline-flex; } .alignCenter{ text-align: center; } .alignRight{ text-align: right; } .alignLeft{ text-align: left; } .textboxTrim{ text-box-trim: trim-both; text-box-edge: cap alphabetic; } .standardTxt{ color: white; font-family: Noto Sans JP; font-weight: 700; word-wrap: break-word; } /* *** コンテナクラスエリア ******* * * ・レスポンシブデザイン計算が必要ないもの * ******* **********/ body { width: 100%; height: 100%; position: relative; background: black; margin: 0; overflow-x: hidden; } .area1{ width: 100%; /* 背景画像設定 */ background-image: url(./img/Bacgkround\ 11.png); background-size: cover; background-position: center center; background-repeat: no-repeat; } .area2{ width: 100%; } .area3{ width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; display: inline-flex; } /* *** レスポンシブデザイン計算用 ******* * * ・各オブジェクト用クラスの定数を参照して各サイズを算出 * ・clamp()関数を利用 * 　指定した"傾き"に沿って、CSS_MIN-CSS_MAX の間で流動的に値が変化する *     * 【新しい変数の役割】     * --V_START_XX: 最小画面幅(VW_MIN)での目標値     * --V_END_XX: 最大画面幅(VW_MAX)での目標値     * --CSS_MIN_XX: clamp()の最小値 (物理的に最も小さい値)     * --CSS_MAX_XX: clamp()の最大値 (物理的に最も大きい値) ******* ********** *************/ .fluid-clamp { /* font-size用 */ --SLOPE_RATIO_FONT: calc((var(--V_END_FONT) - var(--V_START_FONT)) / var(--VW_DIFF)); --INTERCEPT_CALC_FONT: calc(var(--V_START_FONT) - (var(--SLOPE_RATIO_FONT) * var(--VW_MIN))); --FLUID_RESULT_FONT: clamp( calc(var(--CSS_MIN_FONT) * 1px), calc(var(--INTERCEPT_CALC_FONT) * 1px + var(--SLOPE_RATIO_FONT) * 100vw), calc(var(--CSS_MAX_FONT) * 1px)); /* letter-spacing用 */ --SLOPE_RATIO_SPACE: calc((var(--V_END_SPACE) - var(--V_START_SPACE)) / var(--VW_DIFF)); --INTERCEPT_CALC_SPACE: calc(var(--V_START_SPACE) - (var(--SLOPE_RATIO_SPACE) * var(--VW_MIN))); --FLUID_RESULT_SPACE: clamp( calc(var(--CSS_MIN_SPACE) * 1px), calc(var(--INTERCEPT_CALC_SPACE) * 1px + var(--SLOPE_RATIO_SPACE) * 100vw), calc(var(--CSS_MAX_SPACE) * 1px)); /* line-height用 */ --SLOPE_RATIO_LINE: calc((var(--V_END_LINE) - var(--V_START_LINE)) / var(--VW_DIFF)); --INTERCEPT_CALC_LINE: calc(var(--V_START_LINE) - (var(--SLOPE_RATIO_LINE) * var(--VW_MIN))); --FLUID_RESULT_LINE: clamp( calc(var(--CSS_MIN_LINE) * 1px), calc(var(--INTERCEPT_CALC_LINE) * 1px + var(--SLOPE_RATIO_LINE) * 100vw), calc(var(--CSS_MAX_LINE) * 1px)); /* width用 */ --SLOPE_RATIO_WIDTH: calc((var(--V_END_WIDTH) - var(--V_START_WIDTH)) / var(--VW_DIFF)); --INTERCEPT_CALC_WIDTH: calc(var(--V_START_WIDTH) - (var(--SLOPE_RATIO_WIDTH) * var(--VW_MIN))); --FLUID_RESULT_WIDTH: clamp( calc(var(--CSS_MIN_WIDTH) * 1px), calc(var(--INTERCEPT_CALC_WIDTH) * 1px + var(--SLOPE_RATIO_WIDTH) * 100vw), calc(var(--CSS_MAX_WIDTH) * 1px)); /* height用 */ --SLOPE_RATIO_HEIGHT: calc((var(--V_END_HEIGHT) - var(--V_START_HEIGHT)) / var(--VW_DIFF)); --INTERCEPT_CALC_HEIGHT: calc(var(--V_START_HEIGHT) - (var(--SLOPE_RATIO_HEIGHT) * var(--VW_MIN))); --FLUID_RESULT_HEIGHT: clamp( calc(var(--CSS_MIN_HEIGHT) * 1px), calc(var(--INTERCEPT_CALC_HEIGHT) * 1px + var(--SLOPE_RATIO_HEIGHT) * 100vw), calc(var(--CSS_MAX_HEIGHT) * 1px)); /* length用 */ --SLOPE_RATIO_LENGTH: calc((var(--V_END_LENGTH) - var(--V_START_LENGTH)) / var(--VW_DIFF)); --INTERCEPT_CALC_LENGTH: calc(var(--V_START_LENGTH) - (var(--SLOPE_RATIO_LENGTH) * var(--VW_MIN))); --FLUID_RESULT_LENGTH: clamp( calc(var(--CSS_MIN_LENGTH) * 1px), calc(var(--INTERCEPT_CALC_LENGTH) * 1px + var(--SLOPE_RATIO_LENGTH) * 100vw), calc(var(--CSS_MAX_LENGTH) * 1px)); /* padding用 */ --SLOPE_RATIO_PAD: calc((var(--V_END_PAD) - var(--V_START_PAD)) / var(--VW_DIFF)); --INTERCEPT_CALC_PAD: calc(var(--V_START_PAD) - (var(--SLOPE_RATIO_PAD) * var(--VW_MIN))); --FLUID_RESULT_PAD: clamp( calc(var(--CSS_MIN_PAD) * 1px), calc(var(--INTERCEPT_CALC_PAD) * 1px + var(--SLOPE_RATIO_PAD) * 100vw), calc(var(--CSS_MAX_PAD) * 1px)); /* padding-top用 */ --SLOPE_RATIO_PADT: calc((var(--V_END_PADT) - var(--V_START_PADT)) / var(--VW_DIFF)); --INTERCEPT_CALC_PADT: calc(var(--V_START_PADT) - (var(--SLOPE_RATIO_PADT) * var(--VW_MIN))); --FLUID_RESULT_PADT: clamp( calc(var(--CSS_MIN_PADT) * 1px), calc(var(--INTERCEPT_CALC_PADT) * 1px + var(--SLOPE_RATIO_PADT) * 100vw), calc(var(--CSS_MAX_PADT) * 1px)); /* padding-bottom用 */ --SLOPE_RATIO_PADB: calc((var(--V_END_PADB) - var(--V_START_PADB)) / var(--VW_DIFF)); --INTERCEPT_CALC_PADB: calc(var(--V_START_PADB) - (var(--SLOPE_RATIO_PADB) * var(--VW_MIN))); --FLUID_RESULT_PADB: clamp( calc(var(--CSS_MIN_PADB) * 1px), calc(var(--INTERCEPT_CALC_PADB) * 1px + var(--SLOPE_RATIO_PADB) * 100vw), calc(var(--CSS_MAX_PADB) * 1px)); /* padding-left用 */ --SLOPE_RATIO_PADL: calc((var(--V_END_PADL) - var(--V_START_PADL)) / var(--VW_DIFF)); --INTERCEPT_CALC_PADL: calc(var(--V_START_PADL) - (var(--SLOPE_RATIO_PADL) * var(--VW_MIN))); --FLUID_RESULT_PADL: clamp( calc(var(--CSS_MIN_PADL) * 1px), calc(var(--INTERCEPT_CALC_PADL) * 1px + var(--SLOPE_RATIO_PADL) * 100vw), calc(var(--CSS_MAX_PADL) * 1px)); /* padding-right用 */ --SLOPE_RATIO_PADR: calc((var(--V_END_PADR) - var(--V_START_PADR)) / var(--VW_DIFF)); --INTERCEPT_CALC_PADR: calc(var(--V_START_PADR) - (var(--SLOPE_RATIO_PADR) * var(--VW_MIN))); --FLUID_RESULT_PADR: clamp( calc(var(--CSS_MIN_PADR) * 1px), calc(var(--INTERCEPT_CALC_PADR) * 1px + var(--SLOPE_RATIO_PADR) * 100vw), calc(var(--CSS_MAX_PADR) * 1px)); /* border-top用 */ --SLOPE_RATIO_BORDERT: calc((var(--V_END_BORDERT) - var(--V_START_BORDERT)) / var(--VW_DIFF)); --INTERCEPT_CALC_BORDERT: calc(var(--V_START_BORDERT) - (var(--SLOPE_RATIO_BORDERT) * var(--VW_MIN))); --FLUID_RESULT_BORDERT: clamp( calc(var(--CSS_MIN_BORDERT) * 1px), calc(var(--INTERCEPT_CALC_BORDERT) * 1px + var(--SLOPE_RATIO_BORDERT) * 100vw), calc(var(--CSS_MAX_BORDERT) * 1px)); /* border-bottom用 */ --SLOPE_RATIO_BORDERB: calc((var(--V_END_BORDERB) - var(--V_START_BORDERB)) / var(--VW_DIFF)); --INTERCEPT_CALC_BORDERB: calc(var(--V_START_BORDERB) - (var(--SLOPE_RATIO_BORDERB) * var(--VW_MIN))); --FLUID_RESULT_BORDERB: clamp( calc(var(--CSS_MIN_BORDERB) * 1px), calc(var(--INTERCEPT_CALC_BORDERB) * 1px + var(--SLOPE_RATIO_BORDERB) * 100vw), calc(var(--CSS_MAX_BORDERB) * 1px)); /* border-left用 */ --SLOPE_RATIO_BORDERL: calc((var(--V_END_BORDERL) - var(--V_START_BORDERL)) / var(--VW_DIFF)); --INTERCEPT_CALC_BORDERL: calc(var(--V_START_BORDERL) - (var(--SLOPE_RATIO_BORDERL) * var(--VW_MIN))); --FLUID_RESULT_BORDERL: clamp( calc(var(--CSS_MIN_BORDERL) * 1px), calc(var(--INTERCEPT_CALC_BORDERL) * 1px + var(--SLOPE_RATIO_BORDERL) * 100vw), calc(var(--CSS_MAX_BORDERL) * 1px)); /* border-right用 */ --SLOPE_RATIO_BORDERR: calc((var(--V_END_BORDERR) - var(--V_START_BORDERR)) / var(--VW_DIFF)); --INTERCEPT_CALC_BORDERR: calc(var(--V_START_BORDERR) - (var(--SLOPE_RATIO_BORDERR) * var(--VW_MIN))); --FLUID_RESULT_BORDERR: clamp( calc(var(--CSS_MIN_BORDERR) * 1px), calc(var(--INTERCEPT_CALC_BORDERR) * 1px + var(--SLOPE_RATIO_BORDERR) * 100vw), calc(var(--CSS_MAX_BORDERR) * 1px)); /* margin-top用 */ --SLOPE_RATIO_MART: calc((var(--V_END_MART) - var(--V_START_MART)) / var(--VW_DIFF)); --INTERCEPT_CALC_MART: calc(var(--V_START_MART) - (var(--SLOPE_RATIO_MART) * var(--VW_MIN))); --FLUID_RESULT_MART: clamp( calc(var(--CSS_MIN_MART) * 1px), calc(var(--INTERCEPT_CALC_MART) * 1px + var(--SLOPE_RATIO_MART) * 100vw), calc(var(--CSS_MAX_MART) * 1px)); /* margin-bottom用 */ --SLOPE_RATIO_MARB: calc((var(--V_END_MARB) - var(--V_START_MARB)) / var(--VW_DIFF)); --INTERCEPT_CALC_MARB: calc(var(--V_START_MARB) - (var(--SLOPE_RATIO_MARB) * var(--VW_MIN))); --FLUID_RESULT_MARB: clamp( calc(var(--CSS_MIN_MARB) * 1px), calc(var(--INTERCEPT_CALC_MARB) * 1px + var(--SLOPE_RATIO_MARB) * 100vw), calc(var(--CSS_MAX_MARB) * 1px)); /* margin-left用 */ --SLOPE_RATIO_MARL: calc((var(--V_END_MARL) - var(--V_START_MARL)) / var(--VW_DIFF)); --INTERCEPT_CALC_MARL: calc(var(--V_START_MARL) - (var(--SLOPE_RATIO_MARL) * var(--VW_MIN))); --FLUID_RESULT_MARL: clamp( calc(var(--CSS_MIN_MARL) * 1px), calc(var(--INTERCEPT_CALC_MARL) * 1px + var(--SLOPE_RATIO_MARL) * 100vw), calc(var(--CSS_MAX_MARL) * 1px)); /* margin-right用 */ --SLOPE_RATIO_MARR: calc((var(--V_END_MARR) - var(--V_START_MARR)) / var(--VW_DIFF)); --INTERCEPT_CALC_MARR: calc(var(--V_START_MARR) - (var(--SLOPE_RATIO_MARR) * var(--VW_MIN))); --FLUID_RESULT_MARR: clamp( calc(var(--CSS_MIN_MARR) * 1px), calc(var(--INTERCEPT_CALC_MARR) * 1px + var(--SLOPE_RATIO_MARR) * 100vw), calc(var(--CSS_MAX_MARR) * 1px)); /* top用 */ --SLOPE_RATIO_TOP: calc((var(--V_END_TOP) - var(--V_START_TOP)) / var(--VW_DIFF)); --INTERCEPT_CALC_TOP: calc(var(--V_START_TOP) - (var(--SLOPE_RATIO_TOP) * var(--VW_MIN))); --FLUID_RESULT_TOP: clamp( calc(var(--CSS_MIN_TOP) * 1px), calc(var(--INTERCEPT_CALC_TOP) * 1px + var(--SLOPE_RATIO_TOP) * 100vw), calc(var(--CSS_MAX_TOP) * 1px)); /* bottom用 */ --SLOPE_RATIO_BOT: calc((var(--V_END_BOT) - var(--V_START_BOT)) / var(--VW_DIFF)); --INTERCEPT_CALC_BOT: calc(var(--V_START_BOT) - (var(--SLOPE_RATIO_BOT) * var(--VW_MIN))); --FLUID_RESULT_BOT: clamp( calc(var(--CSS_MIN_BOT) * 1px), calc(var(--INTERCEPT_CALC_BOT) * 1px + var(--SLOPE_RATIO_BOT) * 100vw), calc(var(--CSS_MAX_BOT) * 1px)); /* left用 */ --SLOPE_RATIO_LEFT: calc((var(--V_END_LEFT) - var(--V_START_LEFT)) / var(--VW_DIFF)); --INTERCEPT_CALC_LEFT: calc(var(--V_START_LEFT) - (var(--SLOPE_RATIO_LEFT) * var(--VW_MIN))); --FLUID_RESULT_LEFT: clamp( calc(var(--CSS_MIN_LEFT) * 1px), calc(var(--INTERCEPT_CALC_LEFT) * 1px + var(--SLOPE_RATIO_LEFT) * 100vw), calc(var(--CSS_MAX_LEFT) * 1px)); /* right用 */ --SLOPE_RATIO_RIGHT: calc((var(--V_END_RIGHT) - var(--V_START_RIGHT)) / var(--VW_DIFF)); --INTERCEPT_CALC_RIGHT: calc(var(--V_START_RIGHT) - (var(--SLOPE_RATIO_RIGHT) * var(--VW_MIN))); --FLUID_RESULT_RIGHT: clamp( calc(var(--CSS_MIN_RIGHT) * 1px), calc(var(--INTERCEPT_CALC_RIGHT) * 1px + var(--SLOPE_RATIO_RIGHT) * 100vw), calc(var(--CSS_MAX_RIGHT) * 1px)); /* box-shadow第1引数用 */ --SLOPE_RATIO_SDW1: calc((var(--V_END_SDW1) - var(--V_START_SDW1)) / var(--VW_DIFF)); --INTERCEPT_CALC_SDW1: calc(var(--V_START_SDW1) - (var(--SLOPE_RATIO_SDW1) * var(--VW_MIN))); --FLUID_RESULT_SDW1: clamp( calc(var(--CSS_MIN_SDW1) * 1px), calc(var(--INTERCEPT_CALC_SDW1) * 1px + var(--SLOPE_RATIO_SDW1) * 100vw), calc(var(--CSS_MAX_SDW1) * 1px)); /* box-shadow第2引数用 */ --SLOPE_RATIO_SDW2: calc((var(--V_END_SDW2) - var(--V_START_SDW2)) / var(--VW_DIFF)); --INTERCEPT_CALC_SDW2: calc(var(--V_START_SDW2) - (var(--SLOPE_RATIO_SDW2) * var(--VW_MIN))); --FLUID_RESULT_SDW2: clamp( calc(var(--CSS_MIN_SDW2) * 1px), calc(var(--INTERCEPT_CALC_SDW2) * 1px + var(--SLOPE_RATIO_SDW2) * 100vw), calc(var(--CSS_MAX_SDW2) * 1px)); /* box-shadow第3引数用 */ --SLOPE_RATIO_SDW3: calc((var(--V_END_SDW3) - var(--V_START_SDW3)) / var(--VW_DIFF)); --INTERCEPT_CALC_SDW3: calc(var(--V_START_SDW3) - (var(--SLOPE_RATIO_SDW3) * var(--VW_MIN))); --FLUID_RESULT_SDW3: clamp( calc(var(--CSS_MIN_SDW3) * 1px), calc(var(--INTERCEPT_CALC_SDW3) * 1px + var(--SLOPE_RATIO_SDW3) * 100vw), calc(var(--CSS_MAX_SDW3) * 1px)); /* filter用 */ --SLOPE_RATIO_FILTER: calc((var(--V_END_FILTER) - var(--V_START_FILTER)) / var(--VW_DIFF)); --INTERCEPT_CALC_FILTER: calc(var(--V_START_FILTER) - (var(--SLOPE_RATIO_FILTER) * var(--VW_MIN))); --FLUID_RESULT_FILTER: clamp( calc(var(--CSS_MIN_FILTER) * 1px), calc(var(--INTERCEPT_CALC_FILTER) * 1px + var(--SLOPE_RATIO_FILTER) * 100vw), calc(var(--CSS_MAX_FILTER) * 1px)); /* gap用 */ --SLOPE_RATIO_GAP: calc((var(--V_END_GAP) - var(--V_START_GAP)) / var(--VW_DIFF)); --INTERCEPT_CALC_GAP: calc(var(--V_START_GAP) - (var(--SLOPE_RATIO_GAP) * var(--VW_MIN))); --FLUID_RESULT_GAP: clamp( calc(var(--CSS_MIN_GAP) * 1px), calc(var(--INTERCEPT_CALC_GAP) * 1px + var(--SLOPE_RATIO_GAP) * 100vw), calc(var(--CSS_MAX_GAP) * 1px)); } /* *** 各オブジェクトクラスエリア ******* * * ・レスポンシブデザイン計算が必要なもの * ************ *************/ .Frame1085{ /* レスポンシブ用：マージン上 */ --V_START_MART: 89; --V_END_MART: 210; --CSS_MIN_MART: 89; --CSS_MAX_MART: 210; margin-top: var(--FLUID_RESULT_MART); /* レスポンシブ用：マージン下 */ --V_START_MARB: 89; --V_END_MARB: 195; --CSS_MIN_MARB: 89; --CSS_MAX_MARB: 195; margin-bottom: var(--FLUID_RESULT_MARB); } .Frame1084{ /* レスポンシブ用：マージン左 */ --V_START_MARL: 24; --V_END_MARL: 39; --CSS_MIN_MARL: 24; --CSS_MAX_MARL: 39; margin-left: var(--FLUID_RESULT_MARL); /* レスポンシブ用：マージン右 */ --V_START_MARR: 24; --V_END_MARR: 39; --CSS_MIN_MARR: 24; --CSS_MAX_MARR: 39; margin-right: var(--FLUID_RESULT_MARR); } .Frame7 { /* 固定スタイル */ width: 100%; /* レスポンシブ用：幅 */ --V_START_WIDTH: 327; --V_END_WIDTH: 709; --CSS_MIN_WIDTH: 327; --CSS_MAX_WIDTH: 709; width: var(--FLUID_RESULT_WIDTH); /* レスポンシブ用：高さ */ --V_START_HEIGHT: 65; --V_END_HEIGHT: 72; --CSS_MIN_HEIGHT: 65; --CSS_MAX_HEIGHT: 72; height: var(--FLUID_RESULT_HEIGHT); } .Frame10 { /* 固定スタイル */ position: relative; justify-content: center; display: inline-flex; background: #E41E1B; overflow: hidden; border: 0; /* レスポンシブ用：幅 */ --V_START_WIDTH: 245; --V_END_WIDTH: 496; --CSS_MIN_WIDTH: 245; --CSS_MAX_WIDTH: 496; width: var(--FLUID_RESULT_WIDTH); /* レスポンシブ用：高さ */ --V_START_HEIGHT: 50; --V_END_HEIGHT: 77; --CSS_MIN_HEIGHT: 50; --CSS_MAX_HEIGHT: 77; height: var(--FLUID_RESULT_HEIGHT); /* レスポンシブ用：パディング左 */ --V_START_PADL: 21; --V_END_PADL: 48; --CSS_MIN_PADL: 21; --CSS_MAX_PADL: 48; padding-left: var(--FLUID_RESULT_PADL); /* レスポンシブ用：パディング右 */ --V_START_PADR: 21; --V_END_PADR: 48; --CSS_MIN_PADR: 21; --CSS_MAX_PADR: 48; padding-right: var(--FLUID_RESULT_PADR); /* レスポンシブ用：パディング上 */ --V_START_PADT: 18; --V_END_PADT: 24; --CSS_MIN_PADT: 18; --CSS_MAX_PADT: 24; padding-top: var(--FLUID_RESULT_PADT); /* レスポンシブ用：パディング下 */ --V_START_PADB: 18; --V_END_PADB: 24; --CSS_MIN_PADB: 18; --CSS_MAX_PADB: 24; padding-bottom: var(--FLUID_RESULT_PADB); } .Frame11 { /* 固定スタイル */ position: relative; justify-content: flex-start; display: inline-flex; background: #E41E1B; overflow: hidden; border: 0; /* レスポンシブ用：幅 */ --V_START_WIDTH: 203; --V_END_WIDTH: 400; --CSS_MIN_WIDTH: 203; --CSS_MAX_WIDTH: 400; width: var(--FLUID_RESULT_WIDTH); /* レスポンシブ用：高さ */ --V_START_HEIGHT: 16; --V_END_HEIGHT: 29; --CSS_MIN_HEIGHT: 16; --CSS_MAX_HEIGHT: 29; height: var(--FLUID_RESULT_HEIGHT); /* レスポンシブ用：パディング左 */ --V_START_PADL: 21; --V_END_PADL: 48; --CSS_MIN_PADL: 21; --CSS_MAX_PADL: 48; padding-left: var(--FLUID_RESULT_PADL); /* レスポンシブ用：パディング右 */ --V_START_PADR: 21; --V_END_PADR: 48; --CSS_MIN_PADR: 21; --CSS_MAX_PADR: 48; padding-right: var(--FLUID_RESULT_PADR); /* レスポンシブ用：パディング上 */ --V_START_PADT: 18; --V_END_PADT: 24; --CSS_MIN_PADT: 18; --CSS_MAX_PADT: 24; padding-top: var(--FLUID_RESULT_PADT); /* レスポンシブ用：パディング下 */ --V_START_PADB: 18; --V_END_PADB: 24; --CSS_MIN_PADB: 18; --CSS_MAX_PADB: 24; padding-bottom: var(--FLUID_RESULT_PADB); } .Frame50 { width: 100%; gap: 80px; } .Frame49 { flex-direction: column; display: inline-flex; } .FrameFlex4x { width: auto; max-width: 1200px; flex: 1 1 0; border-bottom: 1px white solid; gap: 10px; /* レスポンシブ用：パディング */ --V_START_PAD: 24; --V_END_PAD: 48; --CSS_MIN_PAD: 24; --CSS_MAX_PAD: 48; padding: var(--FLUID_RESULT_PAD); } .FrameFlex4x:nth-child(1) { border-top: 1px white solid; } @media (min-width: 1200px) { .Frame49 { /* 画面幅1200px以上の場合、コンテナは横並び */ flex-direction: row; justify-content: space-between; } .FrameFlex4x { /* 横並び用デザイン */ border-top: 1px white solid; border-bottom: 1px white solid; border-right: 1px white solid; } .FrameFlex4x:nth-child(4) { /* 右端のコンテナは右のborderなし */ border-right: none; } } .Frame1094 { /* 固定スタイル */ right:  0px; top: 0; position: absolute; height: 100%; /* レスポンシブ用：位置指定右 */ --V_START_RIGHT: 18; --V_END_RIGHT: 48; --CSS_MIN_RIGHT: 18; --CSS_MAX_RIGHT: 48; right: var(--FLUID_RESULT_RIGHT); } .Frame1095 { /* 固定スタイル */ top: 0; position: absolute; height: 100%; /* レスポンシブ用：位置指定右 */ --V_START_RIGHT: -5; --V_END_RIGHT: 18; --CSS_MIN_RIGHT: -5; --CSS_MAX_RIGHT: 18; right: var(--FLUID_RESULT_RIGHT); } .Frame1080 { /* 固定スタイル */ padding: 10px; } .maskgroup { /* 固定スタイル */ width: 100%; height: 480px; position: relative; overflow: hidden; /* 背景画像設定 */ background-image: url(./img/3.png); background-size: cover; background-position: center center; background-repeat: no-repeat; clip-path: polygon(0% 44.9%, 100% 0%, 100% 55.1%, 0% 100%); } @media (max-width: 460px) { .maskgroup { /* 画面幅460px以下の場合、角度をゆるやかに */ clip-path: polygon(0% 40%, 100% 20%, 100% 60%, 0% 80%); } } .Frame1104 { /* 固定スタイル */ width: 100%; height: 100%; justify-content: center; flex-direction: column; display: inline-flex; align-items: center; gap: 88px; /* レスポンシブ用：パディング上 */ --V_START_PADT: 48; --V_END_PADT: 147; --CSS_MIN_PADT: 48; --CSS_MAX_PADT: 147; padding-top: var(--FLUID_RESULT_PADT); } @media (min-width: 708px) { .Frame1104 { /* 画面幅708px以上の場合、コンテナは縦並び */ flex-direction: row; } } .Frame1103 { /* 固定スタイル */ width: 100%; height: 100%; justify-content: center; flex-direction: column; display: inline-flex; align-items: center; gap: 108px; /* レスポンシブ用：パディング上 */ --V_START_PADT: 40; --V_END_PADT: 177; --CSS_MIN_PADT: 40; --CSS_MAX_PADT: 177; padding-top: var(--FLUID_RESULT_PADT); } .Frame1103-x { /* 固定スタイル */ display: none; } .Frame1103-y { /* 固定スタイル */ display: flex; } @media (min-width: 708px) { .Frame1103 { /* 画面幅708px以下の場合、コンテナは縦並び */ flex-direction: row; } .Frame1103-x { /* 画面幅708px以下の場合、横並び用コンテナ非表示 */ display: flex; } .Frame1103-y { /* 画面幅708px以下の場合、縦並び用コンテナ表示 */ display: none; } } .Frame1089 { /* 固定スタイル */ position: relative; justify-content: flex-start; display: inline-flex; background: #E41E1B; overflow: hidden; align-items: center; border: 0; padding-left: 36px; padding-right: 36px; padding-top: 18px; padding-bottom: 18px; /* レスポンシブ用：幅 */ --V_START_WIDTH: 245; --V_END_WIDTH: 372; --CSS_MIN_WIDTH: 245; --CSS_MAX_WIDTH: 372; width: var(--FLUID_RESULT_WIDTH); /* レスポンシブ用：高さ */ --V_START_HEIGHT: 52; --V_END_HEIGHT: 58; --CSS_MIN_HEIGHT: 52; --CSS_MAX_HEIGHT: 58; height: var(--FLUID_RESULT_HEIGHT); } @media (min-width: 708px) { .Frame1103 { /* 画面幅708px以上の場合、コンテナは縦並び */ flex-direction: row; } } .Frame1106 { /* レスポンシブ用：パディング上 */ --V_START_PADT: 81; --V_END_PADT: 147; --CSS_MIN_PADT: 81; --CSS_MAX_PADT: 147; padding-top: var(--FLUID_RESULT_PADT); /* レスポンシブ用：パディング下 */ --V_START_PADB: 40; --V_END_PADB: 66; --CSS_MIN_PADB: 40; --CSS_MAX_PADB: 66; padding-bottom: var(--FLUID_RESULT_PADB); } .Frame1099 { /* 固定スタイル */ width: 100%; height: 100%; justify-content: center; flex-direction: column; display: inline-flex; align-items: center; gap: 72px; /* レスポンシブ用：パディング下 */ --V_START_PADB: 48; --V_END_PADB: 180; --CSS_MIN_PADB: 48; --CSS_MAX_PADB: 180; padding-bottom: var(--FLUID_RESULT_PADB); } @media (min-width: 760px) { .Frame1099 { /* 画面幅760px以上の場合、コンテナは横並び */ flex-direction: row; } } .Frame1096 { /* 固定スタイル */ justify-content: center; flex-direction: column; display: inline-flex; align-items: center; gap: 48px; outline: 1px white solid; outline-offset: -1px; /* レスポンシブ用：幅 */ --V_START_WIDTH: 181; --V_END_WIDTH: 270; --CSS_MIN_WIDTH: 181; --CSS_MAX_WIDTH: 270; width: var(--FLUID_RESULT_WIDTH); /* レスポンシブ用：高さ */ --V_START_HEIGHT: 271; --V_END_HEIGHT: 282; --CSS_MIN_HEIGHT: 271; --CSS_MAX_HEIGHT: 282; height: var(--FLUID_RESULT_HEIGHT); /* レスポンシブ用：パディング */ --V_START_PADT: 56; --V_END_PADT: 79.5; --CSS_MIN_PADT: 56; --CSS_MAX_PADT: 79.5; --V_START_PADL: 32; --V_END_PADL: 42; --CSS_MIN_PADL: 32; --CSS_MAX_PADL: 42; padding: var(--FLUID_RESULT_PADT) var(--FLUID_RESULT_PADL); } .Frame1098 { /* 固定スタイル */ width: 100%; /* レスポンシブ用：パディング上 */ --V_START_PADT: 32; --V_END_PADT: 56; --CSS_MIN_PADT: 32; --CSS_MAX_PADT: 56; padding-top: var(--FLUID_RESULT_PADT); /* レスポンシブ用：パディング左 */ --V_START_PADL: 53; --V_END_PADL: 372.5; --CSS_MIN_PADL: 53; --CSS_MAX_PADL: 372.5; padding-left: var(--FLUID_RESULT_PADL); /* レスポンシブ用：パディング右 */ --V_START_PADR: 53; --V_END_PADR: 372.5; --CSS_MIN_PADR: 53; --CSS_MAX_PADR: 372.5; padding-right: var(--FLUID_RESULT_PADR); } @media (min-width: 300px) { .Frame1098 { /* 画面幅300px以上の場合、コンテナは横並び */ padding-left: 0; padding-right: 0; } } .Frame1097 { /* 固定スタイル */ justify-content: center; flex-direction: row; display: inline-flex; align-items: center; /* レスポンシブ用：パディング下 */ --V_START_PADB: 32; --V_END_PADB: 56; --CSS_MIN_PADB: 32; --CSS_MAX_PADB: 56; padding-bottom: var(--FLUID_RESULT_PADB); } @media (max-width: 458px) { .Frame1097 { /* 画面幅458px以下の場合、縦並び */ flex-direction: column; } } .Frame1073 { /* 固定スタイル */ gap: 24px; width: 100%; } .Frame1074 { /* 固定スタイル */ width: 270px; gap: 24px; } .area4{ width: 100%; height: 100%; position: relative; /* レスポンシブ用：パディング下 */ --V_START_PADB: 16; --V_END_PADB: 160; --CSS_MIN_PADB: 16; --CSS_MAX_PADB: 160; padding-bottom: var(--FLUID_RESULT_PADB); } .bkImg-area4 { /* 固定スタイル */ position: absolute; top: -400px; width: 100%; } @media (max-width: 1203px) { .bkImg-area4 { /* 画面幅1203px以下の場合、非表示 */ display: none; } } .Frame1113 { /* 固定スタイル */ width: 100%; position: relative; background: linear-gradient(160deg, #666666 0%, black 55%, #666666 100%); /* レスポンシブ用：パディング上 */ --V_START_PADT: 61; --V_END_PADT: 110; --CSS_MIN_PADT: 61; --CSS_MAX_PADT: 110; padding-top: var(--FLUID_RESULT_PADT); /* レスポンシブ用：パディング下 */ --V_START_PADB: 28; --V_END_PADB: 124; --CSS_MIN_PADB: 28; --CSS_MAX_PADB: 124; padding-bottom: var(--FLUID_RESULT_PADB); } .Frame1112-narrow { /* 固定スタイル */ display: inline-flex; } .Frame1112-wide { /* 固定スタイル */ display: none; } @media (min-width: 430px) { .Frame1112-narrow { /* 画面幅430px以下の場合、小デバイス用コンテナ非表示 */ display: none; } .Frame1112-wide { /* 画面幅430px以下の場合、小デバイス用コンテナ表示 */ display: inline-flex; } } .Frame1112-y { /* 固定スタイル */ flex-direction: column; justify-content: center; align-items: flex-start; display: inline-flex; gap: 24px; } @media (min-width: 400px) { .Frame1114 { /* 画面幅800px以上の場合、横並び */ flex-direction: row; gap: 0; } } .Frame1114 { /* 固定スタイル */ flex-direction: column; justify-content: center; align-items: flex-start; display: inline-flex; gap: 24px; } @media (min-width: 800px) { .Frame1114 { /* 画面幅800px以上の場合、横並び */ flex-direction: row; gap: 0; } } .Frame1147-narrow { /* 固定スタイル */ display: inline-flex; /* レスポンシブ用：パディング */ --V_START_PADT: 64; --V_END_PADT: 160; --CSS_MIN_PADT: 64; --CSS_MAX_PADT: 160; --V_START_PADB: 32; --V_END_PADB: 95; --CSS_MIN_PADB: 32; --CSS_MAX_PADB: 95; padding: var(--FLUID_RESULT_PADT) 0 var(--FLUID_RESULT_PADB) 0; } .Frame1147-wide { /* 固定スタイル */ display: none; /* レスポンシブ用：パディング */ --V_START_PADT: 64; --V_END_PADT: 160; --CSS_MIN_PADT: 64; --CSS_MAX_PADT: 160; --V_START_PADR: 92; --V_END_PADR: 390; --CSS_MIN_PADR: 92; --CSS_MAX_PADR: 390; --V_START_PADB: 32; --V_END_PADB: 95; --CSS_MIN_PADB: 32; --CSS_MAX_PADB: 95; --V_START_PADL: 88; --V_END_PADL: 410; --CSS_MIN_PADL: 88; --CSS_MAX_PADL: 410; padding: var(--FLUID_RESULT_PADT) var(--FLUID_RESULT_PADR) var(--FLUID_RESULT_PADB) var(--FLUID_RESULT_PADL); } @media (min-width: 1330px) { .Frame1147-narrow { /* 画面幅1330px以下の場合、小デバイス用コンテナ非表示 */ display: none; } .Frame1147-wide { /* 画面幅1330px以下の場合、小デバイス用コンテナ表示 */ display: inline-flex; } } .Group47262 { /* 固定スタイル */ background: white; border-radius: 20px; overflow: hidden; /* レスポンシブ用：幅 */ --V_START_WIDTH: 327; --V_END_WIDTH: 965; --CSS_MIN_WIDTH: 327; --CSS_MAX_WIDTH: 965; width: var(--FLUID_RESULT_WIDTH); /* レスポンシブ用：パディング下 */ --V_START_PADB: 39; --V_END_PADB: 73; --CSS_MIN_PADB: 39; --CSS_MAX_PADB: 73; padding-bottom: var(--FLUID_RESULT_PADB); } .Frame1122 { /* 固定スタイル */ justify-content: flex-start; flex-direction: column; display: inline-flex; align-items: flex-start; position: relative; overflow: hidden; width: 100%; /* レスポンシブ用：高さ */ --V_START_HEIGHT: 212; --V_END_HEIGHT: 250; --CSS_MIN_HEIGHT: 212; --CSS_MAX_HEIGHT: 250; height: var(--FLUID_RESULT_HEIGHT); /* レスポンシブ用：パディング左 */ --V_START_PADL: -11; --V_END_PADL: 7; --CSS_MIN_PADL: -11; --CSS_MAX_PADL: 7; padding-left: var(--FLUID_RESULT_PADL); } .Frame1122-1 { /* 固定スタイル */ justify-content: flex-start; flex-direction: column; display: inline-flex; align-items: flex-start; position: relative; width: 100%; height: 165px; /* レスポンシブ用：位置指定左 */ --V_START_LEFT: -11; --V_END_LEFT: 0; --CSS_MIN_LEFT: -11; --CSS_MAX_LEFT: 0; left: var(--FLUID_RESULT_LEFT); /* レスポンシブ用：位置指定上 */ --V_START_TOP: -10; --V_END_TOP: 0; --CSS_MIN_TOP: -10; --CSS_MAX_TOP: 0; top: var(--FLUID_RESULT_TOP); /* レスポンシブ用：パディング左 */ --V_START_PADL: -11; --V_END_PADL: 7; --CSS_MIN_PADL: -11; --CSS_MAX_PADL: 7; padding-left: var(--FLUID_RESULT_PADL); } .Frame1122-2 { /* 固定スタイル */ justify-content: flex-start; flex-direction: column; display: inline-flex; align-items: flex-start; position: absolute; width: 100%; height: 100%; left: 44px; /* レスポンシブ用：位置指定上 */ --V_START_TOP: 92; --V_END_TOP: 140; --CSS_MIN_TOP: 50; --CSS_MAX_TOP: 140; top: var(--FLUID_RESULT_TOP); /* レスポンシブ用：パディング左 */ --V_START_PADL: -11; --V_END_PADL: 7; --CSS_MIN_PADL: -11; --CSS_MAX_PADL: 7; padding-left: var(--FLUID_RESULT_PADL); } @media (min-width: 1200px) { .Frame1122-2 { /* 画面幅1200px以上の場合、横並び */ top: 50px; /* レスポンシブ用：位置指定左 */ --V_START_LEFT: 44; --V_END_LEFT: 510; --CSS_MIN_LEFT: 44; --CSS_MAX_LEFT: 510; left: var(--FLUID_RESULT_LEFT); } } .line11 { /* 固定スタイル */ outline: 1px #B2B2B2 solid; outline-offset: -0.50px; position: absolute; overflow: hidden; /* レスポンシブ用：幅 */ width: 100%; } .Frame1121 { /* 固定スタイル */ position: relative; width: 100%; padding-bottom: 72px; /* レスポンシブ用：高さ */ --V_START_HEIGHT: 221; --V_END_HEIGHT: 199; --CSS_MIN_HEIGHT: 199; --CSS_MAX_HEIGHT: 221; height: var(--FLUID_RESULT_HEIGHT); } .Frame1118 { /* 固定スタイル */ background: #303030; align-items: flex-start; position: absolute; gap: 15px; /* レスポンシブ用：幅 */ --V_START_WIDTH: 230; --V_END_WIDTH: 730; --CSS_MIN_WIDTH: 230; --CSS_MAX_WIDTH: 730; width: var(--FLUID_RESULT_WIDTH); /* レスポンシブ用：高さ */ --V_START_HEIGHT: 157; --V_END_HEIGHT: 104; --CSS_MIN_HEIGHT: 104; --CSS_MAX_HEIGHT: 157; height: var(--FLUID_RESULT_HEIGHT); /* レスポンシブ用：パディング */ --V_START_PADL: 29.4; --V_END_PADL: 45; --CSS_MIN_PADL: 29.4; --CSS_MAX_PADL: 45; --V_START_PADB: 22.9; --V_END_PADB: 35; --CSS_MIN_PADB: 22.9; --CSS_MAX_PADB: 35; padding: var(--FLUID_RESULT_PADB) var(--FLUID_RESULT_PADL); /* レスポンシブ用：位置指定左 */ --V_START_LEFT: 12; --V_END_LEFT: 64; --CSS_MIN_LEFT: 12; --CSS_MAX_LEFT: 64; left: var(--FLUID_RESULT_LEFT); } @media (max-width: 610px) { .Frame1118 { /* 画面幅610px以下の場合、スキマなし */ gap: 0; } .Frame1118 > div:nth-child(2) { /* 画面幅610px以下の場合、縦並びに合わせてアイコン中央揃え */ align-self: center; } } .Frame1119 { /* 固定スタイル */ flex-direction: column; justify-content: center; align-items: start; display: inline-flex; /* レスポンシブ用：すき間 */ --V_START_GAP: 8; --V_END_GAP: 74; --CSS_MIN_GAP: 8; --CSS_MAX_GAP: 74; gap: var(--FLUID_RESULT_GAP); } @media (min-width: 610px) { .Frame1119 { /* 画面幅610px以上の場合、コンテナは横並び */ flex-direction: row; align-items: baseline; } } .Frame1123-x { /* 固定スタイル */ display: none; } .Frame1123-y { /* 固定スタイル */ flex-direction: column; justify-content: center; align-items: start; display: flex; gap: 8px; } @media (min-width: 610px) { .Frame1123-x { /* 画面幅610px以上の場合、横並び用コンテナ表示 */ display: flex; align-items: baseline; } .Frame1123-y { /* 画面幅610px以上の場合、縦並び用コンテナ非表示 */ display: none; } } .Frame1116 { /* 固定スタイル */ flex-direction: column; justify-content: center; align-items: center; display: inline-flex; position: relative; } .Frame1117 { /* 固定スタイル */ background: #D9D9D9; position: absolute; /* レスポンシブ用：幅 */ --V_START_WIDTH: 225; --V_END_WIDTH: 730; --CSS_MIN_WIDTH: 225; --CSS_MAX_WIDTH: 730; width: var(--FLUID_RESULT_WIDTH); /* レスポンシブ用：高さ */ --V_START_HEIGHT: 157; --V_END_HEIGHT: 104; --CSS_MIN_HEIGHT: 104; --CSS_MAX_HEIGHT: 157; height: var(--FLUID_RESULT_HEIGHT); /* レスポンシブ用：パディング左 */ --V_START_PADL: 29.4; --V_END_PADL: 45; --CSS_MIN_PADL: 29.4; --CSS_MAX_PADL: 45; padding-left: var(--FLUID_RESULT_PADL); /* レスポンシブ用：パディング右 */ --V_START_PADR: 29.4; --V_END_PADR: 45; --CSS_MIN_PADR: 29.4; --CSS_MAX_PADR: 45; padding-right: var(--FLUID_RESULT_PADR); /* レスポンシブ用：パディング上 */ --V_START_PADT: 22.9; --V_END_PADT: 35; --CSS_MIN_PADT: 22.9; --CSS_MAX_PADT: 35; padding-top: var(--FLUID_RESULT_PADT); /* レスポンシブ用：パディング下 */ --V_START_PADB: 22.9; --V_END_PADB: 35; --CSS_MIN_PADB: 22.9; --CSS_MAX_PADB: 35; padding-bottom: var(--FLUID_RESULT_PADB); /* レスポンシブ用：位置指定左 */ --V_START_LEFT: 28; --V_END_LEFT: 88; --CSS_MIN_LEFT: 28; --CSS_MAX_LEFT: 88; left: var(--FLUID_RESULT_LEFT); /* レスポンシブ用：位置指定上 */ --V_START_TOP: 18; --V_END_TOP: 25; --CSS_MIN_TOP: 18; --CSS_MAX_TOP: 25; top: var(--FLUID_RESULT_TOP); } .Frame1120 { /* レスポンシブ用：幅 */ --V_START_WIDTH: 27; --V_END_WIDTH: 44; --CSS_MIN_WIDTH: 27; --CSS_MAX_WIDTH: 44; width: var(--FLUID_RESULT_WIDTH); /* レスポンシブ用：高さ */ --V_START_HEIGHT: 32; --V_END_HEIGHT: 12; --CSS_MIN_HEIGHT: 12; --CSS_MAX_HEIGHT: 32; height: var(--FLUID_RESULT_HEIGHT); } .Frame1120 > img { /* レスポンシブ用：幅 */ --V_START_WIDTH: 14; --V_END_WIDTH: 22; --CSS_MIN_WIDTH: 14; --CSS_MAX_WIDTH: 22; width: var(--FLUID_RESULT_WIDTH); /* レスポンシブ用：高さ */ --V_START_HEIGHT: 8; --V_END_HEIGHT: 12; --CSS_MIN_HEIGHT: 8; --CSS_MAX_HEIGHT: 12; height: var(--FLUID_RESULT_HEIGHT); } .Frame1124 { /* 固定スタイル */ position: relative; width: 100%; } .Frame1125 { /* 固定スタイル */ flex-direction: row; justify-content: center; align-items: center; display: inline-flex; position: relative; /* レスポンシブ用：マージン左 */ --V_START_MARL: 40; --V_END_MARL: 76; --CSS_MIN_MARL: 40; --CSS_MAX_MARL: 76; margin-left: var(--FLUID_RESULT_MARL); /* レスポンシブ用：マージン右 */ --V_START_MARR: 42; --V_END_MARR: 69; --CSS_MIN_MARR: 42; --CSS_MAX_MARR: 69; margin-right: var(--FLUID_RESULT_MARR); /* レスポンシブ用：スキマ */ --V_START_GAP: 16; --V_END_GAP: 32; --CSS_MIN_GAP: 16; --CSS_MAX_GAP: 32; gap: var(--FLUID_RESULT_GAP); } @media (max-width: 610px) { .Frame1125 { /* 画面幅610px以上の場合、縦並び */ flex-direction: column; } } .Frame1125Img { /* レスポンシブ用：幅 */ --V_START_WIDTH: 16; --V_END_WIDTH: 24; --CSS_MIN_WIDTH: 16; --CSS_MAX_WIDTH: 24; width: var(--FLUID_RESULT_WIDTH); /* レスポンシブ用：高さ */ --V_START_HEIGHT: 16; --V_END_HEIGHT: 24; --CSS_MIN_HEIGHT: 16; --CSS_MAX_HEIGHT: 24; height: var(--FLUID_RESULT_HEIGHT); } .area5{ width: 100%; flex-direction: column; justify-content: flex-start; align-items: center; display: inline-flex; gap: 32px; position: relative; overflow: hidden; /* レスポンシブ用：パディング下 */ --V_START_PADB: 64; --V_END_PADB: 254; --CSS_MIN_PADB: 64; --CSS_MAX_PADB: 254; padding-bottom: var(--FLUID_RESULT_PADB); } .area6{ width: 100%; flex-direction: column; justify-content: flex-start; align-items: center; display: inline-flex; gap: 32px; position: relative; /* 背景画像設定 */ background-image: url(./img/Frame\ 1128.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .Frame1127{ /* レスポンシブ用：マージン上 */ --V_START_MART: 125; --V_END_MART: 160; --CSS_MIN_MART: 125; --CSS_MAX_MART: 160; margin-top: var(--FLUID_RESULT_MART); /* レスポンシブ用：マージン下 */ --V_START_MARB: 80; --V_END_MARB: 160; --CSS_MIN_MARB: 80; --CSS_MAX_MARB: 160; margin-bottom: var(--FLUID_RESULT_MARB); /* レスポンシブ用：スキマ */ --V_START_GAP: 56; --V_END_GAP: 89; --CSS_MIN_GAP: 56; --CSS_MAX_GAP: 89; gap: var(--FLUID_RESULT_GAP); } .Frame1128{ /* 固定スタイル */ flex-direction: column; justify-content: center; align-items: center; display: inline-flex; /* レスポンシブ用：パディング左 */ --V_START_PADL: 24; --V_END_PADL: 300; --CSS_MIN_PADL: 24; --CSS_MAX_PADL: 300; padding-left: var(--FLUID_RESULT_PADL); /* レスポンシブ用：パディング右 */ --V_START_PADR: 24; --V_END_PADR: 300; --CSS_MIN_PADR: 24; --CSS_MAX_PADR: 300; padding-right: var(--FLUID_RESULT_PADR); } .area7{ width: 100%; } .footer1{ box-sizing: border-box; flex-direction: column; justify-content: center; align-items: flex-end; display: inline-flex; width: 100%; gap: 56px; /* レスポンシブ用：マージン */ --V_START_PADR: 48; --V_END_PADR: 128; --CSS_MIN_PADR: 48; --CSS_MAX_PADR: 128; --V_START_PADL: 48; --V_END_PADL: 128; --CSS_MIN_PADL: 48; --CSS_MAX_PADL: 128; padding: 80px var(--FLUID_RESULT_PADR) 88px var(--FLUID_RESULT_PADL); } /* *** 各テキストクラスエリア ******* * * * ************ **********/ .txtFrame1{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 12; --V_END_FONT: 20; --CSS_MIN_FONT: 12; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.6; --V_END_SPACE: 1; --CSS_MIN_SPACE: 0.6; --CSS_MAX_SPACE: 1; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame2{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 36; --V_END_FONT: 96; --CSS_MIN_FONT: 36; --CSS_MAX_FONT: 96; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1.44; --V_END_SPACE: 3.84; --CSS_MIN_SPACE: 1.44; --CSS_MAX_SPACE: 3.84; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame3{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 24; --V_END_FONT: 64; --CSS_MIN_FONT: 24; --CSS_MAX_FONT: 64; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1.20; --V_END_SPACE: 3.20; --CSS_MIN_SPACE: 1.20; --CSS_MAX_SPACE: 3.20; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame4{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 24; --V_END_FONT: 36; --CSS_MIN_FONT: 24; --CSS_MAX_FONT: 36; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.48; --V_END_SPACE: 0.72; --CSS_MIN_SPACE: 0.48; --CSS_MAX_SPACE: 0.72; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame5{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 36; --V_END_FONT: 36; --CSS_MIN_FONT: 36; --CSS_MAX_FONT: 36; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.72; --V_END_SPACE: 0.72; --CSS_MIN_SPACE: 0.72; --CSS_MAX_SPACE: 0.72; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame6{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 24; --V_END_FONT: 36; --CSS_MIN_FONT: 24; --CSS_MAX_FONT: 36; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.48; --V_END_SPACE: 0.72; --CSS_MIN_SPACE: 0.48; --CSS_MAX_SPACE: 0.72; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame7{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 14; --V_END_FONT: 20; --CSS_MIN_FONT: 14; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.7; --V_END_SPACE: 1; --CSS_MIN_SPACE: 0.7; --CSS_MAX_SPACE: 1; letter-spacing: var(--FLUID_RESULT_SPACE); /* レスポンシブ用：行間 */ --V_START_LINE: 24; --V_END_LINE: 30; --CSS_MIN_LINE: 24; --CSS_MAX_LINE: 30; line-height: var(--FLUID_RESULT_LINE); } .txtFrame7x{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 13; --V_END_FONT: 24; --CSS_MIN_FONT: 13; --CSS_MAX_FONT: 24; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.26; --V_END_SPACE: 0.48; --CSS_MIN_SPACE: 0.26; --CSS_MAX_SPACE: 0.48; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame8{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 13; --V_END_FONT: 24; --CSS_MIN_FONT: 13; --CSS_MAX_FONT: 24; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.26; --V_END_SPACE: 0.48; --CSS_MIN_SPACE: 0.26; --CSS_MAX_SPACE: 0.48; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame8x{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 16; --V_END_FONT: 20; --CSS_MIN_FONT: 16; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.64; --V_END_SPACE: 0.80; --CSS_MIN_SPACE: 0.64; --CSS_MAX_SPACE: 0.80; letter-spacing: var(--FLUID_RESULT_SPACE); /* レスポンシブ用：行間 */ --V_START_LINE: 32; --V_END_LINE: 32; --CSS_MIN_LINE: 32; --CSS_MAX_LINE: 32; line-height: var(--FLUID_RESULT_LINE); } .txtFrame9{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 20; --V_END_FONT: 32; --CSS_MIN_FONT: 20; --CSS_MAX_FONT: 32; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1; --V_END_SPACE: 1.6; --CSS_MIN_SPACE: 1; --CSS_MAX_SPACE: 1.6; letter-spacing: var(--FLUID_RESULT_SPACE); /* レスポンシブ用：行間 */ --V_START_LINE: 40; --V_END_LINE: 48; --CSS_MIN_LINE: 40; --CSS_MAX_LINE: 48; line-height: var(--FLUID_RESULT_LINE); } .txtFrame10{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 20; --V_END_FONT: 32; --CSS_MIN_FONT: 20; --CSS_MAX_FONT: 32; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1; --V_END_SPACE: 1.6; --CSS_MIN_SPACE: 1; --CSS_MAX_SPACE: 1.6; letter-spacing: var(--FLUID_RESULT_SPACE); /* レスポンシブ用：行間 */ --V_START_LINE: 40; --V_END_LINE: 48; --CSS_MIN_LINE: 40; --CSS_MAX_LINE: 48; line-height: var(--FLUID_RESULT_LINE); } .txtFrame10x{ line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 15; --V_END_FONT: 20; --CSS_MIN_FONT: 15; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.75; --V_END_SPACE: 1; --CSS_MIN_SPACE: 0.75; --CSS_MAX_SPACE: 1; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame11{ text-align: center; line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 20; --V_END_FONT: 36; --CSS_MIN_FONT: 20; --CSS_MAX_FONT: 36; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1; --V_END_SPACE: 1.8; --CSS_MIN_SPACE: 1; --CSS_MAX_SPACE: 1.8; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame12{ text-align: center; line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 15; --V_END_FONT: 20; --CSS_MIN_FONT: 15; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.75; --V_END_SPACE: 1; --CSS_MIN_SPACE: 0.75; --CSS_MAX_SPACE: 1; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame13{ line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 15; --V_END_FONT: 20; --CSS_MIN_FONT: 15; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.75; --V_END_SPACE: 1; --CSS_MIN_SPACE: 0.75; --CSS_MAX_SPACE: 1; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame14{ line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 15; --V_END_FONT: 20; --CSS_MIN_FONT: 15; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.75; --V_END_SPACE: 1; --CSS_MIN_SPACE: 0.75; --CSS_MAX_SPACE: 1; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame15{ line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 20; --V_END_FONT: 32; --CSS_MIN_FONT: 20; --CSS_MAX_FONT: 32; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1; --V_END_SPACE: 1.6; --CSS_MIN_SPACE: 1; --CSS_MAX_SPACE: 1.6; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame16{ line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 15; --V_END_FONT: 20; --CSS_MIN_FONT: 15; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.75; --V_END_SPACE: 1; --CSS_MIN_SPACE: 0.75; --CSS_MAX_SPACE: 1; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame17{ line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 20; --V_END_FONT: 32; --CSS_MIN_FONT: 20; --CSS_MAX_FONT: 32; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1; --V_END_SPACE: 1.6; --CSS_MIN_SPACE: 1; --CSS_MAX_SPACE: 1.6; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame18{ line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 15; --V_END_FONT: 20; --CSS_MIN_FONT: 15; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.75; --V_END_SPACE: 1; --CSS_MIN_SPACE: 0.75; --CSS_MAX_SPACE: 1; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame19{ line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 11; --V_END_FONT: 14; --CSS_MIN_FONT: 11; --CSS_MAX_FONT: 14; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.6; --V_END_SPACE: 0.7; --CSS_MIN_SPACE: 0.6; --CSS_MAX_SPACE: 0.7; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame19x{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 13; --V_END_FONT: 18; --CSS_MIN_FONT: 13; --CSS_MAX_FONT: 18; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.26; --V_END_SPACE: 0.36; --CSS_MIN_SPACE: 0.26; --CSS_MAX_SPACE: 0.36; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame20{ text-align: center; line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 13; --V_END_FONT: 18; --CSS_MIN_FONT: 13; --CSS_MAX_FONT: 18; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.26; --V_END_SPACE: 0.36; --CSS_MIN_SPACE: 0.26; --CSS_MAX_SPACE: 0.36; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame21{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 16; --V_END_FONT: 20; --CSS_MIN_FONT: 16; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.32; --V_END_SPACE: 0.40; --CSS_MIN_SPACE: 0.32; --CSS_MAX_SPACE: 0.40; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame22{ line-height: 24px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 12; --V_END_FONT: 14; --CSS_MIN_FONT: 12; --CSS_MAX_FONT: 14; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.48; --V_END_SPACE: 0.56; --CSS_MIN_SPACE: 0.48; --CSS_MAX_SPACE: 0.56; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame23{ line-height: 48px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 24; --V_END_FONT: 40; --CSS_MIN_FONT: 24; --CSS_MAX_FONT: 40; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1.2; --V_END_SPACE: 2; --CSS_MIN_SPACE: 1.2; --CSS_MAX_SPACE: 2; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame24{ font-size: 16px; line-height: 40px; letter-spacing: 0.8px; } .txtFrame25{ line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 24; --V_END_FONT: 32; --CSS_MIN_FONT: 24; --CSS_MAX_FONT: 32; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1.2; --V_END_SPACE: 1.6; --CSS_MIN_SPACE: 1.2; --CSS_MAX_SPACE: 1.6; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame26{ font-size: 20px; line-height: 40px; letter-spacing: 1px; } .txtFrame27{ line-height: 40px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 15; --V_END_FONT: 16; --CSS_MIN_FONT: 15; --CSS_MAX_FONT: 16; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.75; --V_END_SPACE: 0.8; --CSS_MIN_SPACE: 0.75; --CSS_MAX_SPACE: 0.8; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame28{ opacity: 0.50; color: rgba(255, 255, 255, 0.30); font-family: Smooch Sans; font-weight: 700; word-wrap: break-word; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 24; --V_END_FONT: 40; --CSS_MIN_FONT: 24; --CSS_MAX_FONT: 40; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1.2; --V_END_SPACE: 2; --CSS_MIN_SPACE: 1.2; --CSS_MAX_SPACE: 2; letter-spacing: var(--FLUID_RESULT_SPACE); /* レスポンシブ用：行間 */ --V_START_LINE: 40; --V_END_LINE: 48; --CSS_MIN_LINE: 40; --CSS_MAX_LINE: 48; line-height: var(--FLUID_RESULT_LINE); } .txtFrame29{ color: white; font-family: Nova Square; word-wrap: break-word; font-size: 16px; font-weight: 400; letter-spacing: 0.32px; } .txtFrame30{ font-size: 24px; letter-spacing: 0.48px; } .txtFrame31{ line-height: 28px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 12; --V_END_FONT: 14; --CSS_MIN_FONT: 12; --CSS_MAX_FONT: 14; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.72; --V_END_SPACE: 0.56; --CSS_MIN_SPACE: 0.56; --CSS_MAX_SPACE: 0.72; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame32{ line-height: 48px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 24; --V_END_FONT: 40; --CSS_MIN_FONT: 24; --CSS_MAX_FONT: 40; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1.2; --V_END_SPACE: 2; --CSS_MIN_SPACE: 1.2; --CSS_MAX_SPACE: 2; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame33{ opacity: 0.50; color: rgba(255, 255, 255, 0.30); font-family: Smooch Sans; font-weight: 700; word-wrap: break-word; line-height: 48px; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 24; --V_END_FONT: 40; --CSS_MIN_FONT: 24; --CSS_MAX_FONT: 40; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1.2; --V_END_SPACE: 2; --CSS_MIN_SPACE: 1.2; --CSS_MAX_SPACE: 2; letter-spacing: var(--FLUID_RESULT_SPACE); /* レスポンシブ用：位置指定上 */ --V_START_TOP: 12; --V_END_TOP: 21; --CSS_MIN_TOP: 12; --CSS_MAX_TOP: 21; top: var(--FLUID_RESULT_TOP); } .txtFrame34{ color: rgba(0, 0, 0, 0.15); font-family: Smooch Sans; font-weight: 700; line-height: 102px; word-wrap: break-word; position: absolute; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 128; --V_END_FONT: 228; --CSS_MIN_FONT: 128; --CSS_MAX_FONT: 228; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 6.4; --V_END_SPACE: 11.4; --CSS_MIN_SPACE: 6.4; --CSS_MAX_SPACE: 11.4; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame35{ color: #1D1918; font-family: Noto Sans JP; font-weight: 700; word-wrap: break-word; position: absolute; height: 100%; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 24; --V_END_FONT: 36; --CSS_MIN_FONT: 24; --CSS_MAX_FONT: 36; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.48; --V_END_SPACE: 0.72; --CSS_MIN_SPACE: 0.48; --CSS_MAX_SPACE: 0.72; letter-spacing: var(--FLUID_RESULT_SPACE); /* レスポンシブ用：位置指定上 */ top: 20px; } @media (min-width: 1200px) { .txtFrame35 { /* 画面幅1200px以上の場合、コンテナは横並び */ top: 20px; } } .txtFrame36{ color: white; font-family: Smooch Sans; font-weight: 700; word-wrap: break-word; /* レスポンシブ用：幅 */ --V_START_WIDTH: 27; --V_END_WIDTH: 45; --CSS_MIN_WIDTH: 27; --CSS_MAX_WIDTH: 45; width: var(--FLUID_RESULT_WIDTH); /* レスポンシブ用：高さ */ --V_START_HEIGHT: 14; --V_END_HEIGHT: 24; --CSS_MIN_HEIGHT: 14; --CSS_MAX_HEIGHT: 24; height: var(--FLUID_RESULT_HEIGHT); /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 12; --V_END_FONT: 20; --CSS_MIN_FONT: 12; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.24; --V_END_SPACE: 0.4; --CSS_MIN_SPACE: 0.24; --CSS_MAX_SPACE: 0.4; letter-spacing: var(--FLUID_RESULT_SPACE); } @media (min-width: 610px) { .txtFrame36 { /* 画面幅610px以上の場合、横並び用コンテナ表示 */ text-align: center; } } .txtFrame37{ color: white; font-family: Noto Sans JP; font-weight: 700; word-wrap: break-word; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 12; --V_END_FONT: 20; --CSS_MIN_FONT: 12; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.24; --V_END_SPACE: 0.4; --CSS_MIN_SPACE: 0.24; --CSS_MAX_SPACE: 0.4; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame38{ color: white; font-family: Noto Sans JP; font-weight: 700; word-wrap: break-word; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 16; --V_END_FONT: 32; --CSS_MIN_FONT: 16; --CSS_MAX_FONT: 32; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.32; --V_END_SPACE: 0.64; --CSS_MIN_SPACE: 0.32; --CSS_MAX_SPACE: 0.64; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame39{ color: #1D1918; font-family: Noto Sans JP; font-weight: 700; line-height: 24px; word-wrap: break-word; /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 12; --V_END_FONT: 14; --CSS_MIN_FONT: 12; --CSS_MAX_FONT: 14; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.48; --V_END_SPACE: 0.56; --CSS_MIN_SPACE: 0.48; --CSS_MAX_SPACE: 0.56; letter-spacing: var(--FLUID_RESULT_SPACE); } .txtFrame40{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 24; --V_END_FONT: 40; --CSS_MIN_FONT: 24; --CSS_MAX_FONT: 40; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 1.2; --V_END_SPACE: 0.8; --CSS_MIN_SPACE: 0.8; --CSS_MAX_SPACE: 1.2; letter-spacing: var(--FLUID_RESULT_SPACE); /* レスポンシブ用：行間 */ --V_START_LINE: 40; --V_END_LINE: 10; --CSS_MIN_LINE: 10; --CSS_MAX_LINE: 40; line-height: var(--FLUID_RESULT_LINE); } .txtFrame41{ /* レスポンシブ用：フォントサイズ */ --V_START_FONT: 14; --V_END_FONT: 20; --CSS_MIN_FONT: 14; --CSS_MAX_FONT: 20; font-size: var(--FLUID_RESULT_FONT); /* レスポンシブ用：文字間 */ --V_START_SPACE: 0.7; --V_END_SPACE: 0.4; --CSS_MIN_SPACE: 0.4; --CSS_MAX_SPACE: 0.7; letter-spacing: var(--FLUID_RESULT_SPACE); /* レスポンシブ用：行間 */ --V_START_LINE: 24; --V_END_LINE: 18; --CSS_MIN_LINE: 18; --CSS_MAX_LINE: 24; line-height: var(--FLUID_RESULT_LINE); }