@charset "UTF-8";


:root {
  --colorbase-01: #E1251B; --colorbase-02: ; --colorbase-03: ; --colorbase-04: ; --cl-wh-01:#ffffff;
  --colortxt-01: #0A0A0A; --colortxt-02: ; --colortxt-03: ; --colortxt-04: ;
  --colorbtn-01: ; --colorbtn-02: ;
  --colorbg-01: #F8F9FA; --colorbg-02: ; --colorbg-03: ;
  --colorline-01: #DDDDDD; --colorline-02: ;
  --cl-gradient-01: linear-gradient(180deg, #E1251B 0%, #E1251B 60%,  #7B140F 100%);
  --shadow-01: 0 4px 20px rgba(0, 0, 0, 0.15);
}




/* Base Common Css */
/*---------------------------------------------
  Reset
---------------------------------------------*/
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
html {font-family: 'Noto Sans JP', sans-serif; font-size: 62.5%; overflow-x: hidden; scroll-behavior: smooth;}
body {margin: 0; line-height: 1.6; font-size: 1.6rem; overflow-x: hidden; word-wrap: break-word;}
body::before {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #ffffff;z-index: 9999;opacity: 1;transition: opacity 1.2s ease-out;pointer-events: none;}
body.loaded::before {opacity: 0;visibility: hidden;}
h1,h2,h3,h4,h5,h6,p,a,ul,li,ol,dl,dt,dd,table,tr,th,td,span,strong {margin: 0; padding: 0; line-height: 1.6em; letter-spacing: 0em; font-weight: 400;font-feature-settings : "palt"; color: var(--colortxt-01);}
main {display: block;overflow: hidden;}
ul, ol {list-style: none; margin: 0; padding: 0;}
a, a:visited {color:var(--colortxt-01); text-decoration: none; background-color: transparent; transition: .5s;}
a:hover, a:active {color:var(--colortxt-01);}
abbr[title] {border-bottom: none; text-decoration: underline; text-decoration: underline dotted;}
b, strong {font-weight: bolder;}
code, kbd, samp {font-family: monospace, monospace; font-size: 1em;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none; width: auto; height: auto; max-width: 100%; max-height: 100%; display: block;}
hr {box-sizing: content-box; height: 0; overflow: visible;}
button, input, optgroup, select, textarea {font-size: 100%; line-height: 1.15; margin: 0;}
button, input {overflow: visible;}
button, select {text-transform: none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none; padding: 0;}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {padding: 0.35em 0.75em 0.625em;}
legend {box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;}
progress {vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"], [type="radio"] {box-sizing: border-box; padding: 0;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield; outline-offset: -2px;}
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;}
details {display: block;}
summary {display: list-item;}
template {display: none;}
[hidden] {display: none;}



/*---------------------------------------------
  Common parts
---------------------------------------------*/
#contents {width: 100%;padding: 0;margin: 0;z-index: 0;overflow: hidden;}
section {width: 100%;height: auto; padding: 0;margin: 0 auto;display: block;position: relative;}
#low-contents{width: 100%;padding: 0;margin: 0;z-index: 0;overflow: hidden;background: ;}
.inbox {width: 100%; height: auto; padding: 10vw 3vw; margin: 0 auto; display: block; position: relative; }
.inbox h2 {font-family: "Merriweather", serif; font-size: 6.7vw; line-height: 1.2em; color: var(--colorbase-01); font-weight: 900; text-align: left; margin-bottom: 5vw;}
.big-tl {font-family: "Merriweather", serif; font-size: 6.7vw; color: var(--colorbase-01); font-weight: 900; text-align: left; margin: 0 0 5vw 4vw;}
.inbox h3 {font-family: "Merriweather", serif; font-size: 1.8rem; font-weight: bold; text-align: left; margin-bottom: 30px;}
.txt-bg-box { background-color: var(--colortxt-01); padding: 10px 20px; display: inline-block; position: relative; transform: skewX(20deg); transform-origin: 0 0;}
.txt-bg-box .tx-content {font-family: "Noto Serif JP", serif; display: inline-block; font-size: 3vw; font-weight: bold; transform: skewX(-20deg); color: var(--colorbase-01); margin-bottom: 0 !important;}
.sp-none {display: none !important;} .tb-none {display: block !important;} .tbl-none {display: block !important;} .pc-none {display: block !important;} .sp-tb-none {display: none !important;} .tb-tbl-none {display: block !important;} .tbl-pc-none {display: block !important;}.sp-block {display: block !important;}.tb-block {display: none !important;}.tbl-block {display: none !important;}.pc-block {display: none !important;}
.flex-wrap-sb {display: flex; justify-content: space-between; align-items: center; margin: 0 auto;}
.flex-wrap-sa {display: flex; justify-content: space-around; align-items: center; margin: 0 auto;}
.flex-wrap-sb-tb, .flex-wrap-sa-tb{display: block;}
.flex-wrap-sb-tbl, .flex-wrap-sa-tbl{display: block;}
.flex-wrap-sb-pc, .flex-wrap-sa-pc{display: block;}
.flex-wrap-ct-tbl {display: block;}
@media screen and (min-width: 768px) {
  .inbox h2 {font-size: 3.8rem; margin-bottom: 5vw;}
  .big-tl {font-size: 3.8rem; margin: 0 0 5vw 4vw;}
  .sp-none {display: block !important;} .tb-none {display: none !important;} .tb-tbl-none {display: none !important;} .sp-block {display: none !important;}.tb-block {display: block !important;}
  .flex-wrap-sb-tb{display: flex;justify-content: space-between;align-items: center; margin: 0 auto;}
  .flex-wrap-sa-tb{display: flex;justify-content: space-around;align-items: center; margin: 0 auto;}
}
@media screen and (min-width: 1024px) {
  .inbox {padding: 5vw 4vw;}
  .inbox h2 {font-size: 3.8vw; margin-bottom: 5vw;}
  .big-tl {font-size: 4vw; margin: 0 0 5vw 4vw;}
  .tb-none {display: block !important;} .tbl-none {display: none !important;} .sp-tb-none {display: block !important;} .tbl-pc-none {display: none !important;}.tb-block {display: none !important;}.tbl-block {display: block !important;}
  .flex-wrap-sb-tbl{display: flex;justify-content: space-between;align-items: center; margin: 0 auto;}
  .flex-wrap-sa-tbl{display: flex;justify-content: space-around;align-items: center; margin: 0 auto;}
  .flex-wrap-ct-tbl {display: flex;justify-content: center; align-items: stretch; margin: 0 auto;}
}
@media screen and (min-width: 1100px) {
  .inbox {max-width: 90%; padding: 6vw 0; margin: 0 auto; }
  .inbox h2 {font-size: 3.1vw; line-height: 1.4em; margin-bottom: 5vw;}
  .big-tl {font-size: 4vw; margin: 0 0 5vw 4vw;}
  .tbl-none {display: block !important;} .pc-none {display: none !important;} .tb-tbl-none {display: block !important;} .tbl-block {display: none !important;}.pc-block {display: block !important;}
  .flex-wrap-sb-pc{display: flex;justify-content: space-between;align-items: center; margin: 0 auto;}
  .flex-wrap-sa-pc{display: flex;justify-content: space-around;align-items: center; margin: 0 auto;}
}


/* Button */
.btn-base-01, .btn-base-01:visited {width: fit-content;display: inline-block;padding: 15px 60px;color: var(--cl-wh-01);font-size: 1.6rem;font-weight: 600;text-decoration: none;background-color: var(--colortxt-01);transition: .3s;border-radius: 6px;position: relative;overflow: hidden;}
.btn-base-01::before {content: '';position: absolute;display: block;background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.4));width: 50px;height: 50px;top: -60px;left: -60px;animation-name: shine-run;animation-delay: 0s;animation-duration: 10s;animation-timing-function: ease-in;animation-iteration-count: infinite;}
.btn-base-01:active, .btn-base-01:hover {color: var(--cl-wh-01);background-color: var(--colortxt-01);}

.btn-base-02, .btn-base-02:visited {width: fit-content;display: inline-block;padding: 15px 60px;color: #fff;font-size: 1.6rem;font-weight: 600;text-decoration: none;background-color: #E1251B;transition: .3s;border-radius: 30px;position: relative;overflow: hidden;}
.btn-base-02::before {content: '';position: absolute;display: block;background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.4));width: 50px;height: 50px;top: -60px;left: -60px;animation-name: shine-run;animation-delay: 0s;animation-duration: 6s;animation-timing-function: ease-in;animation-iteration-count: infinite;}
.btn-base-02:active, .btn-base-02:hover {color: #fff;background-color: #f13228;}

@keyframes shine-run {
  0% {transform: scale(0) rotate(50deg);opacity: 0;}
  20% {transform: scale(1) rotate(50deg);opacity: 1;}
  40% {transform: scale(250) rotate(50deg);opacity: 0;}
  100% {transform: scale(250) rotate(50deg);opacity: 0;}
}

@media screen and (min-width: 768px) {
  .btn-base-01, .btn-base-01:visited {padding: 15px 60px;font-size: 1.8rem;}
}
@media screen and (min-width: 1024px) {
}
@media screen and (min-width: 1100px) {
  .btn-base-01, .btn-base-01:visited {padding: 15px 60px;font-size: 1.8rem;}
}




/* Form */
input {padding: .3rem .5rem;}
button, input, optgroup, select, textarea {font-size: 1rem;}


/* Animation ----------------------- */
.mv-left-in-pt1,.mv-left-in-pt2,.mv-right-in-pt1,.mv-right-in-pt2,.mv-bottom-in-pt1,.mv-bottom-in-pt2,.mv-scale-in-pt1,.mv-scale-in-pt2 { opacity: 0;will-change: transform, opacity;}
.mv-scale-in {opacity: 0;transform: scale(0.8);}
.reveal-lr {clip-path: inset(0 100% 0 0);will-change: clip-path;transform: translateZ(0);backface-visibility: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.reveal-tb {clip-path: inset(100% 0 0 0);will-change: clip-path;transform: translateZ(0);backface-visibility: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.reveal-rl {clip-path: inset(0 0 0 100%);will-change: clip-path;transform: translateZ(0);backface-visibility: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.reveal-bt {clip-path: inset(0 0 100% 0);will-change: clip-path;transform: translateZ(0);backface-visibility: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.reveal-center {clip-path: inset(50% 50% 50% 50%);will-change: clip-path;transform: translateZ(0);backface-visibility: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.parallax-up, .parallax-down, .parallax-fade-left, .parallax-fade-right {will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden; }
.parallax-up {}
.parallax-down {}
.parallax-fade-left { opacity: 0.3; transform: translateX(-100px);}
.parallax-fade-right {opacity: 0.3; transform: translateX(100px);}
@media (max-width: 768px) {
  .parallax-up:not(.parallax-mobile-enabled),.parallax-down:not(.parallax-mobile-enabled),.parallax-fade-left:not(.parallax-mobile-enabled),.parallax-fade-right:not(.parallax-mobile-enabled) {transform: none !important;opacity: 1 !important;will-change: auto !important;}
  .parallax-mobile-enabled {will-change: transform, opacity;transform: translateZ(0);}
  .parallax-up,.parallax-down,.parallax-fade-left,.parallax-fade-right {will-change: auto;}
}
@media (min-width: 769px) and (max-width: 1024px) {
  .parallax-up,.parallax-down,.parallax-fade-left,.parallax-fade-right {transform: translateZ(0);}
}
.parallax-disabled {transform: none !important;opacity: 1 !important;will-change: auto !important;}
.parallax-subtle {}
.parallax-strong {}
.parallax-layer-back {z-index: 1;}
.parallax-layer-middle {z-index: 2;}
.parallax-layer-front {z-index: 3;}
.mv-fade-in-pt1, .mv-fade-in-pt2, .mv-fade-in-slow-pt1, .mv-fade-in-slow-pt2, .mv-fade-in-fast-pt1, .mv-fade-in-fast-pt2 { opacity: 0;}
.gsap-loaded .mv-fade-in-pt1, .gsap-loaded .mv-fade-in-pt2, .gsap-loaded .mv-fade-in-slow-pt1, .gsap-loaded .mv-fade-in-slow-pt2, .gsap-loaded .mv-fade-in-fast-pt1, .gsap-loaded .mv-fade-in-fast-pt2 { opacity: 1; }




/*---------------------------------------------
  Preloader
---------------------------------------------*/




/*---------------------------------------------
  Header
---------------------------------------------*/
.header {width: 95%; position: fixed;top: 10px;left: 0;right: 0;margin: auto; background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(10px);z-index: 1000;padding: 0 20px;transition: all 0.3s ease; border-radius: 6px; box-shadow: 0px 2px 11px -4px #ababab;}
.header-container {margin: 0 auto;display: flex;align-items: center;justify-content: space-between;height: 70px;}
.h-logo {width: 10rem; display: flex;align-items: center;}
.h-logo img {width: 100%;}

/* PC版メニュー */
.nav-menu {display: none;list-style: none;margin: 0;padding: 0;}
.nav-menu li {display: inline-block;margin: 0 15px;}
.nav-menu a {font-size: 1.8rem; text-decoration: none;color: var(--colortxt-01);padding: 10px 0;position: relative;transition: color 0.3s ease;}
.nav-menu a:visited {color: var(--colortxt-01);}
.nav-menu a:hover {color: var(--colortxt-01);}
.nav-menu a::after {content: '';position: absolute;bottom: 5px;left: 0;width: 0;height: 1px;background: var(--colortxt-01);transition: width 0.3s ease;}
.nav-menu a:hover::after {width: 100%;}
.nav-menu a.btn-base-01 {color: var(--cl-wh-01); padding: 8px 30px;}

/* ハンバーガーメニューボタン */
.hamburger {display: block;width: 30px;height: 30px;cursor: pointer;position: relative;z-index: 1001;}
.hamburger span {display: block;width: 100%;height: 2px;background: var(--colortxt-01);margin: 6px 0;transition: all 0.3s ease;transform-origin: center;}
.hamburger.active span:nth-child(1) {transform: rotate(45deg) translate(4px, 4px);}
.hamburger.active span:nth-child(2) {opacity: 0;}
.hamburger.active span:nth-child(3) {transform: rotate(-45deg) translate(8px, -7px);}

/* 背景オーバーレイ */
.mobile-menu-backdrop {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.5);z-index: 998;opacity: 0;visibility: hidden;transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);}
.mobile-menu-backdrop.active {opacity: 1;visibility: visible;}

/* モバイルメニューオーバーレイ */
.mobile-menu-overlay {position: fixed;top: 50%;left: 50%;width: 95%;background: rgba(255, 255, 255, 0.98);backdrop-filter: blur(10px);border-radius: 12px;z-index: 999;display: flex;align-items: center;justify-content: center;transform: translate(-50%, -60%) scale(0.8);opacity: 0;visibility: hidden;transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);}
.mobile-menu-overlay.active {transform: translate(-50%, -60%) scale(1);opacity: 1;visibility: visible;top: 65vw;}
.mobile-menu {text-align: center;width: 100%;padding: 60px 30px 30px 30px;}
.mobile-menu li {list-style: none;margin: 0;border-bottom: 1px solid var(--bs-br-01);transform: translateY(20px);opacity: 0;transition: all 0.3s ease;}
.mobile-menu-overlay.active .mobile-menu li {transform: translateY(0);opacity: 1;}
.mobile-menu-overlay.active .mobile-menu li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-overlay.active .mobile-menu li:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-menu li:nth-child(3) { transition-delay: 0.3s; }
.mobile-menu-overlay.active .mobile-menu li:nth-child(4) { transition-delay: 0.4s; }
.mobile-menu-overlay.active .mobile-menu li:nth-child(5) { transition-delay: 0.5s; }
.mobile-menu-overlay.active .mobile-menu li:nth-child(6) { transition-delay: 0.6s; }
.mobile-menu-overlay.active .mobile-menu li:nth-child(7) { transition-delay: 0.7s; }
.mobile-menu li:first-child {border-top: 1px solid var(--bs-br-01);}
.mobile-menu li:last-child, .mobile-menu li:nth-last-of-type(2) {border-bottom: none;margin-top: 20px;}
.mobile-menu a {display: block;padding: 1.8rem 0;text-decoration: none;color: var(--colortxt-01);font-size: 1.6rem;transition: color 0.3s ease;}
.mobile-menu a:visited {color: var(--colortxt-01);}
.mobile-menu .btn-base-01 {display: block; width: 100%; color: var(--cl-wh-01);}
.mobile-menu .btn-base-01:visited {color: var(--cl-wh-01);}
.mobile-menu .hotelier-btn {width: 100%; background: var(--bs-br-01);color: var(--cl-wh-01) !important;margin: 15px auto 0 !important;border-radius: 2px;display: block;padding: 1.4rem 0;}
.mobile-menu .contact-btn {background: var(--bs-bc-01);color: var(--cl-wh-01) !important;margin: 0 !important;border-radius: 2px;display: block;padding: 1.4rem 0;}
/* ボディがメニュー開いてる時のスクロール制御 */
body.menu-open {overflow: hidden;}
body.menu-open .header { box-shadow: none;}
@media screen and (min-width: 768px) {
  .header-container {height: 8rem;}
  .h-logo {width: 10rem;}
}
@media screen and (min-width: 1024px) {
  .header-container {height: 7rem;}
  .hamburger {display: block;}
  .nav-menu {display: none;}
  .mobile-menu-overlay {top: 21%;}
  .mobile-menu-overlay.active {top: 21%;}
}
@media screen and (min-width: 1100px) {
  .header {box-shadow: 0px 2px 11px -4px #ababab;}
  .hamburger {display: none;}
  .nav-menu {display: flex;align-items: center;}
  .mobile-menu-overlay {width: 80%;max-width: 600px;}
}




/*---------------------------------------------
  Footer
---------------------------------------------*/
.copy { font-size: 3vw; color: var(--cl-wh-01); margin: 5vw 0; text-align: center;}
@media screen and (min-width: 768px) {
  .copy { font-size: 2.4vw; margin: 3vw 0;}
}
@media screen and (min-width: 1024px) {
  .copy { font-size: 2vw; margin: 3vw 0;}
}
@media screen and (min-width: 1100px) {
  .copy { font-size: .8vw; margin: 0;}
}




/*---------------------------------------------
  Top page
---------------------------------------------*/
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 1024px) {
}
@media screen and (min-width: 1100px) {
}

/* Main ----------------------- */
.main {width: 100%;height: auto; background: url('../images/main-bg-sp.webp') 0 100%/100% no-repeat, var(--cl-gradient-01);}
.main .inbox { padding: 40vw 4vw 30vw;}
.main .inbox p {font-size: 5vw; font-weight: bold; color: var(--cl-wh-01); margin-bottom: 4vw;}
.main .inbox h2 {font-size: 12vw; line-height: 1.1em; color: var(--cl-wh-01); margin-bottom: 12vw; text-align: left;}
.main .inbox .txt-bg-box { margin: 0 0 6vw;}
.main .inbox .tx-content {font-size: 5.2vw; font-weight: 400; color: var(--colorbase-01); text-indent: -3em; padding-left: 3em;}
.main .inbox span {display: block; color: var(--cl-wh-01); font-size: 4vw; margin-bottom: 6vw;}
@media screen and (min-width: 768px) {
  .main {background: url('../images/main-bg-sp.webp') 0 20%/100% no-repeat, var(--cl-gradient-01);}
  .main .inbox { padding: 20vw 4vw 10vw;}
  .main .inbox p {font-size: 2.6rem;}
  .main .inbox h2 {font-size: 7rem;}
  .main .inbox .tx-content {font-size: 3.2vw; }
  .main .inbox .tx-content br {display: none;}
  .main .inbox span {font-size: 1.8rem; margin-bottom: 6vw;}
}
@media screen and (min-width: 1024px) {
  .main {background: url('../images/main-bg-pc.webp') 50% 100%/120% no-repeat, var(--cl-gradient-01);}
  .main .inbox { padding: 18vw 4vw 10vw;}
  .main .inbox p {font-size: 3.2rem;}
  .main .inbox h2 {font-size: 9rem;}
  .main .inbox .txt-bg-box { margin: 0 0 3vw;}
  .main .inbox span {font-size: 2.2rem; margin-bottom: 3vw;}
}
@media screen and (min-width: 1100px) {
  .main {background: url('../images/main-bg-pc.webp') 100% 100%/68% no-repeat, var(--cl-gradient-01);}
  .main .inbox {height: 100vh;}
  .main .inbox { padding-top: 11vw;}
  .main .inbox p {font-size: 3rem; margin-bottom: 2vw;}
  .main .inbox h2 {font-size: 6vw; margin-bottom: 1.2vw;}
  .main .inbox .txt-bg-box { margin: 0 0 2vw;}
  .main .inbox .tx-content {font-size: 1.8vw; }
  .main .inbox span {font-size: 1vw; margin-bottom: 2vw;}
}



.upper-group {display: block; width: 100%; height: auto; overflow: hidden; position: relative;}
.upper-group::after {content: ''; display: block; width: 15%; height: 150%; background: rgba(127, 127, 127, 0.1); transform:rotate(-20deg); position: absolute; left: -10%; top: -30%;}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 1024px) {
  .upper-group::after {left: -5%; top: -30%;}
}
@media screen and (min-width: 1100px) {
}



/* PROFESSIONAL */
.professional {width: 100%; padding: 10vw 0 0;}
.professional .big-tl {margin-bottom: 2vw; font-size: 6.7vw;}
.professional .inbox {background: var(--cl-gradient-01); overflow: hidden; }
.professional .inbox::after {content: ''; display: block; width: 40%; height: 150%; background: rgba(255, 255, 255, 0.1); transform:rotate(-20deg); position: absolute; right: -20%; top: -30%;}
.professional .inbox h2 {color: var(--cl-wh-01); margin-bottom: 2vw;}
.professional .inbox .txt-bg-box {margin: 0 0 3vw 0;}
.professional .inbox .txt-bg-box .tx-content {font-size: 4vw;}
.professional .inbox .under {font-size: 1.8rem; color: var(--cl-wh-01);}
.professional .inbox .under br {display: none;}
@media screen and (min-width: 768px) {
  .professional .big-tl {font-size: 3.8rem;}
  .professional .inbox .under br {display: block;}
  .professional .inbox .txt-bg-box .tx-content {font-size: 3vw;}
}
@media screen and (min-width: 1024px) {
  .professional {width: 100%; padding: 10vw 0 ;}
  .professional {width: 80%; padding: 6vw 0; margin-left: 20%;}
  .professional .big-tl {font-size: clamp(3rem, 4vw, 5.5rem); margin-bottom: 1vw;  margin-left: 0;}
  .professional .inbox {max-width: none; padding: 5vw 4vw; }
  .professional .inbox::after {width: 20%; height: 140%; right: -10%; top: -25%;}
  .professional .inbox .txt-bg-box .tx-content {font-size: 2.4rem;}
}
@media screen and (min-width: 1100px) {
  .professional {width: 70%; margin-left: 30%;}
  .professional .inbox h2 {margin-bottom: 0;}
  .professional .inbox .txt-bg-box {margin: 0 0 3vw 0;}

}



/* About */
.about .inbox h2 {margin-bottom: 0;}
.about .inbox h2 + p { font-size: 1.8rem; }
.about .inbox .flex-wrap-sa-tbl {margin: 6vw 0 0;}
.about .inbox .flex-wrap-sa-tbl h3 {font-size: 5.6vw; margin-bottom: 3vw;}
.about .inbox .flex-wrap-sa-tbl .item:first-child { display: block; margin-bottom: 6vw;}
.about .inbox .flex-wrap-sa-tbl .item:first-child p { font-size: 1.8rem;}
.about .inbox .item .text-block:first-child { margin-bottom: 6vw;}
.about .inbox .inline-bg {width: fit-content; display: block; text-align: left; background-color: var(--colortxt-01);color: var(--cl-wh-01);padding: 3px 15px;line-height: 2.0em; margin-bottom: 5px; font-size: 3.5vw;}
@media screen and (min-width: 768px) {
  .about .inbox .flex-wrap-sa-tbl {margin: 4vw 0 0;}
  .about .inbox .flex-wrap-sa-tbl h3 {font-size: 3.2rem;}
  .about .inbox .item .text-block:first-child { margin-bottom: 4vw;}
  .about .inbox .flex-wrap-sa-tbl .item:first-child p {font-size: 2rem;}
  .about .inbox .inline-bg {padding: 3px 15px;line-height: 2.0em; margin-bottom: 5px; font-size: 2vw;}
}
@media screen and (min-width: 1024px) {
  .about .inbox .flex-wrap-sa-tbl {margin: 3vw 0 0; align-items: flex-start;}
  .about .inbox .flex-wrap-sa-tbl h3 {font-size: 3.8vw;}
  .about .inbox .flex-wrap-sa-tbl .item:first-child { width: 45%;}
  .about .inbox .flex-wrap-sa-tbl .item:last-child { width: 50%;}
  .about .inbox .item .text-block:first-child { margin-bottom: 3vw;}
  .about .inbox .inline-bg {padding: 3px 10px; font-size: 1.8vw;}
}
@media screen and (min-width: 1100px) {
  .about .inbox h2 + p { font-size: 1.5vw; }
  .about .inbox .flex-wrap-sa-tbl h3 {font-size: 3.2vw;}
  .about .inbox .flex-wrap-sa-tbl .item:first-child { width: 45%;}
  .about .inbox .flex-wrap-sa-tbl .item:first-child p {font-size: 1.3vw;}
  .about .inbox .flex-wrap-sa-tbl .item:last-child { width: 35%;}
  .about .inbox .item .text-block:first-child { margin-bottom: 1vw;}
  .about .inbox .inline-bg {padding: 4px 18px; font-size: 1.3vw;}
}



/* TFLOPS Wallet */
.tflops-wallet {background: var(--colorbg-01); padding: 0;}
.tflops-wallet .inbox h2 {text-align: center; color: var(--colorbase-01); margin-bottom: 0;}
.tflops-wallet .inbox > p {font-size: 1.8rem; text-align: center; margin-bottom: 8vw; color: var(--colortxt-01);}

.wallet-cards {display: grid; grid-template-columns: 1fr; gap: 5vw; margin: 0 auto 6vw; max-width: 100%;}
.wallet-card {position: relative; background: var(--cl-wh-01); border: 2px solid #e0e0e0; border-radius: 12px; padding: 6vw 4vw; text-align: center; transition: all 0.3s ease; box-shadow: 0 2px 12px rgba(0,0,0,0.08);}
.wallet-card:hover {transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15);}

.wallet-icon {width: 18vw; height: 18vw; margin: 0 auto 3vw; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8vw; transition: all 0.3s ease;}
.wallet-icon.wallet-icon-gold {background: linear-gradient(135deg, #f9d276 0%, #D4AF37 100%); color: var(--cl-wh-01);}
.wallet-icon.wallet-icon-red {background: linear-gradient(135deg, #ff6b6b 0%, var(--colorbase-01) 100%); color: var(--cl-wh-01);}

.wallet-label {font-size: 3.8vw; color: var(--colortxt-01); margin-bottom: 2vw; font-weight: 500;}
.wallet-value {font-size: 9vw; font-weight: 900; color: var(--colortxt-01); font-family: "Merriweather", serif;}
.wallet-value.wallet-value-gold {color: #D4AF37;}

.wallet-action {text-align: center; margin: 6vw auto;}
.btn-charge {display: inline-block; padding: 4vw 8vw; background: var(--colorbase-01); color: var(--cl-wh-01); font-size: 4vw; font-weight: 600; border-radius: 30px; transition: all 0.3s ease; text-decoration: none; box-shadow: 0 4px 12px rgba(225,37,27,0.3);}
.btn-charge:hover {background: #f13228; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(225,37,27,0.4);}
.btn-charge i {margin-right: 1.5vw;}

.transaction-history {background: var(--cl-wh-01); border: 2px solid #e0e0e0; border-radius: 12px; padding: 5vw 4vw; margin-top: 6vw;}
.transaction-history h3 {font-size: 4.5vw; color: #D4AF37; margin-bottom: 3vw; font-weight: 700; display: flex; align-items: center; justify-content: flex-start;}
.transaction-history h3 i {margin-right: 2vw;}
.transaction-empty {text-align: center; padding: 6vw 2vw;}
.transaction-empty p {font-size: 3.6vw; color: #999;}

@media screen and (min-width: 768px) {
  .tflops-wallet .inbox > p {font-size: 2rem; margin-bottom: 6vw;}
  .wallet-cards {grid-template-columns: repeat(3, 1fr); gap: 4vw; margin-bottom: 5vw;}
  .wallet-card {padding: 4vw 3vw;}
  .wallet-icon {width: 10vw; height: 10vw; font-size: 5vw; margin-bottom: 2vw;}
  .wallet-label {font-size: 1.8rem; margin-bottom: 1.5vw;}
  .wallet-value {font-size: 4.5vw;}
  .btn-charge {padding: 2vw 5vw; font-size: 2rem; border-radius: 30px;}
  .btn-charge i {margin-right: 1vw;}
  .wallet-action {margin: 5vw auto;}
  .transaction-history {padding: 4vw 3vw; margin-top: 5vw;}
  .transaction-history h3 {font-size: 2.4rem; margin-bottom: 2vw;}
  .transaction-history h3 i {margin-right: 1.5vw;}
  .transaction-empty {padding: 5vw 2vw;}
  .transaction-empty p {font-size: 1.8rem;}
}

@media screen and (min-width: 1024px) {
  .wallet-cards {gap: 3vw; margin-bottom: 4vw;}
  .wallet-card {padding: 3vw 2.5vw;}
  .wallet-icon {width: 8vw; height: 8vw; font-size: 4vw;}
  .wallet-label {font-size: 1.6rem;}
  .wallet-value {font-size: 3.8vw;}
  .btn-charge {padding: 1.5vw 4.5vw; font-size: 1.8rem;}
  .wallet-action {margin: 4vw auto;}
  .transaction-history {padding: 3vw 2.5vw; margin-top: 4vw;}
  .transaction-history h3 {font-size: 2.2rem;}
  .transaction-empty {padding: 4vw;}
  .transaction-empty p {font-size: 1.6rem;}
}

@media screen and (min-width: 1100px) {
  .tflops-wallet .inbox {max-width: 1200px; margin: 0 auto;}
  .tflops-wallet .inbox > p {font-size: 1.5vw; margin-bottom: 3vw;}
  .wallet-cards {gap: 2vw; margin-bottom: 3vw;}
  .wallet-card {padding: 2.5vw 2vw;}
  .wallet-icon {width: 6vw; height: 6vw; font-size: 3vw;}
  .wallet-label {font-size: 1.4rem;}
  .wallet-value {font-size: 3vw;}
  .btn-charge {padding: 1.2vw 4vw; font-size: 1.6rem;}
  .wallet-action {margin: 3vw auto;}
  .transaction-history {padding: 2.5vw 2vw; margin-top: 3vw;}
  .transaction-history h3 {font-size: 2rem;}
  .transaction-empty {padding: 3vw;}
  .transaction-empty p {font-size: 1.4rem;}
}

/* TFLOPS Plan */
.tflops-plan {background: var(--cl-wh-01); padding: 0;}
.tflops-plan .inbox h2 {text-align: center; color: var(--colortxt-01); margin-bottom: 0;}
.tflops-plan .inbox h2 .plan-accent {color: #D4AF37; margin-left: 0.5em;}
.tflops-plan .plan-subtitle {font-size: 1.8rem; text-align: center; margin-bottom: 8vw; color: var(--colortxt-01);}

.plan-grid {display: grid; grid-template-columns: 1fr; gap: 5vw; margin: 0 auto 6vw; max-width: 100%;}
.plan-card {position: relative; background: var(--cl-wh-01); border: 2px solid #e0e0e0; border-radius: 12px; padding: 5vw 4vw; transition: all 0.3s ease; box-shadow: 0 2px 12px rgba(0,0,0,0.08);}
.plan-card:hover {transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); border-color: #D4AF37;}

.plan-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 4vw;}
.plan-name {font-size: 4.5vw; color: #666; font-weight: 600; margin: 0;}
.plan-badge {background: var(--colorbase-01); color: var(--cl-wh-01); padding: 1vw 3vw; border-radius: 20px; font-size: 3vw; font-weight: 600;}

.plan-rate {font-size: 12vw; font-weight: 900; color: #D4AF37; font-family: "Merriweather", serif; line-height: 1; margin-bottom: 2vw; text-align: center;}
.plan-period {font-size: 3.5vw; color: #888; margin-bottom: 5vw; text-align: center;}

.plan-details {margin-bottom: 4vw;}
.plan-detail-row {display: flex; justify-content: space-between; align-items: center; padding: 2.5vw 0; border-bottom: 1px solid #f0f0f0;}
.plan-detail-row:last-child {border-bottom: none;}
.detail-label {font-size: 3.5vw; color: #666;}
.detail-value {font-size: 3.5vw; color: var(--colortxt-01); font-weight: 600;}
.detail-value-gold {color: #D4AF37;}

.plan-warning {background: #FFF9E6; border: 1px solid #F5D547; border-radius: 8px; padding: 3vw; margin-bottom: 4vw;}
.plan-warning p {font-size: 3.2vw; color: #8B7500; margin: 0; line-height: 1.5;}

.plan-btn {width: 100%; padding: 3.5vw; border: none; border-radius: 8px; font-size: 4vw; font-weight: 600; cursor: pointer; transition: all 0.3s ease;}
.plan-btn-enabled {background: red; color: #FFF; cursor: not-allowed;}
.plan-btn-disabled {background: #d0d0d0; color: #888; cursor: not-allowed;}

.plan-footer {font-size: 3.5vw; color: #888; text-align: center; margin-top: 6vw;}

@media screen and (min-width: 768px) {
  .tflops-plan .plan-subtitle {font-size: 2rem; margin-bottom: 6vw;}
  .plan-grid {grid-template-columns: repeat(2, 1fr); gap: 4vw; margin-bottom: 5vw;}
  .plan-card {padding: 4vw 3vw;}
  .plan-header {margin-bottom: 3vw;}
  .plan-name {font-size: 2rem;}
  .plan-badge {padding: 0.8vw 2.5vw; font-size: 1.4rem;}
  .plan-rate {font-size: 6vw; margin-bottom: 1.5vw;}
  .plan-period {font-size: 1.6rem; margin-bottom: 4vw;}
  .plan-detail-row {padding: 2vw 0;}
  .detail-label {font-size: 1.6rem;}
  .detail-value {font-size: 1.6rem;}
  .plan-warning {padding: 2.5vw; margin-bottom: 3vw;}
  .plan-warning p {font-size: 1.5rem;}
  .plan-btn {padding: 2.5vw; font-size: 1.8rem;}
  .plan-footer {font-size: 1.6rem; margin-top: 5vw;}
}

@media screen and (min-width: 1024px) {
  .plan-grid {grid-template-columns: repeat(3, 1fr); gap: 3vw; margin-bottom: 4vw;}
  .plan-card {padding: 3vw 2.5vw;}
  .plan-header {margin-bottom: 2.5vw;}
  .plan-name {font-size: 1.8rem;}
  .plan-badge {padding: 0.6vw 2vw; font-size: 1.3rem;}
  .plan-rate {font-size: 5vw; margin-bottom: 1.2vw;}
  .plan-period {font-size: 1.4rem; margin-bottom: 3vw;}
  .plan-detail-row {padding: 1.5vw 0;}
  .detail-label {font-size: 1.4rem;}
  .detail-value {font-size: 1.4rem;}
  .plan-warning {padding: 2vw; margin-bottom: 2.5vw;}
  .plan-warning p {font-size: 1.3rem;}
  .plan-btn {padding: 2vw; font-size: 1.6rem;}
  .plan-footer {font-size: 1.4rem; margin-top: 4vw;}
}

@media screen and (min-width: 1100px) {
  .tflops-plan .inbox {max-width: 1200px; margin: 0 auto;}
  .tflops-plan .plan-subtitle {font-size: 1.5vw; margin-bottom: 3vw;}
  .plan-grid {gap: 2vw; margin-bottom: 3vw;}
  .plan-card {padding: 2.5vw 2vw;}
  .plan-header {margin-bottom: 2vw;}
  .plan-name {font-size: 1.6rem;}
  .plan-badge {padding: 0.5vw 1.8vw; font-size: 1.2rem;}
  .plan-rate {font-size: 4vw; margin-bottom: 1vw;}
  .plan-period {font-size: 1.3rem; margin-bottom: 2.5vw;}
  .plan-detail-row {padding: 1.2vw 0;}
  .detail-label {font-size: 1.3rem;}
  .detail-value {font-size: 1.3rem;}
  .plan-warning {padding: 1.8vw; margin-bottom: 2vw;}
  .plan-warning p {font-size: 1.2rem;}
  .plan-btn {padding: 1.8vw; font-size: 1.5rem;}
  .plan-footer {font-size: 1.3rem; margin-top: 3vw;}
}

/* TFLOPS BTC Calculator */
.tflops-btc-calc {background: var(--colorbg-01); padding: 0;}
.tflops-btc-calc .inbox h2 {text-align: center; margin-bottom: 6vw;}
.tflops-btc-calc .calc-title {color: #D4AF37; font-family: "Merriweather", serif; font-weight: 900;}

.calc-container {background: var(--cl-wh-01); border: 2px solid #e0e0e0; border-radius: 12px; padding: 6vw 4vw; max-width: 100%;}

.calc-inputs {margin-bottom: 5vw;}
.input-row {display: grid; grid-template-columns: 1fr; gap: 4vw; margin-bottom: 4vw;}
.input-group {display: flex; flex-direction: column;}
.input-group label {font-size: 3.5vw; color: var(--colortxt-01); margin-bottom: 2vw; font-weight: 500;}
.input-group input, .input-group select {padding: 3vw; font-size: 3.8vw; border: 1px solid #d0d0d0; border-radius: 8px; background: var(--cl-wh-01); color: var(--colortxt-01); font-family: inherit; transition: all 0.3s ease;}
.input-group input:focus, .input-group select:focus {outline: none; border-color: #D4AF37; box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);}
.input-group select {appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 3vw center; padding-right: 10vw;}

.calc-warning {background: #FFF9E6; border: 1px solid #F5D547; border-radius: 8px; padding: 3.5vw 4vw; margin-bottom: 5vw; display: flex; align-items: flex-start; gap: 3vw;}
.calc-warning i {color: #D4AF37; font-size: 5vw; flex-shrink: 0; margin-top: 0.5vw;}
.calc-warning p {font-size: 3.2vw; color: #8B7500; margin: 0; line-height: 1.5;}

.calc-results {display: grid; grid-template-columns: 1fr; gap: 4vw; margin-bottom: 5vw;}
.result-card {background: linear-gradient(135deg, #4a3728 0%, #5a4532 100%); border-radius: 12px; padding: 5vw 4vw; text-align: center;}
.result-label {font-size: 3.2vw; color: #ccc; margin-bottom: 2vw;}
.result-value {font-size: 6.5vw; color: #D4AF37; font-weight: 900; font-family: "Merriweather", serif; margin-bottom: 1.5vw;}
.result-usd {font-size: 3.5vw; color: #999; margin: 0;}

.calc-disclaimer {font-size: 3vw; color: #888; text-align: center; line-height: 1.6; margin: 0;}

@media screen and (min-width: 768px) {
  .tflops-btc-calc .inbox h2 {margin-bottom: 5vw;}
  .calc-container {padding: 5vw 4vw;}
  .calc-inputs {margin-bottom: 4vw;}
  .input-row {grid-template-columns: repeat(2, 1fr); gap: 3vw; margin-bottom: 3vw;}
  .input-group label {font-size: 1.6rem; margin-bottom: 1.5vw;}
  .input-group input, .input-group select {padding: 2.5vw; font-size: 1.8rem;}
  .input-group select {background-position: right 2.5vw center; padding-right: 8vw;}
  .calc-warning {padding: 3vw 3.5vw; margin-bottom: 4vw; gap: 2.5vw;}
  .calc-warning i {font-size: 2.5rem;}
  .calc-warning p {font-size: 1.5rem;}
  .calc-results {grid-template-columns: repeat(2, 1fr); gap: 3vw; margin-bottom: 4vw;}
  .result-card {padding: 4vw 3vw;}
  .result-label {font-size: 1.5rem; margin-bottom: 1.5vw;}
  .result-value {font-size: 3.5rem; margin-bottom: 1vw;}
  .result-usd {font-size: 1.6rem;}
  .calc-disclaimer {font-size: 1.4rem;}
}

@media screen and (min-width: 1024px) {
  .calc-container {padding: 4vw 3.5vw;}
  .calc-inputs {margin-bottom: 3.5vw;}
  .input-row {gap: 2.5vw; margin-bottom: 2.5vw;}
  .input-group label {font-size: 1.5rem; margin-bottom: 1.2vw;}
  .input-group input, .input-group select {padding: 2vw; font-size: 1.6rem;}
  .input-group select {background-position: right 2vw center; padding-right: 7vw;}
  .calc-warning {padding: 2.5vw 3vw; margin-bottom: 3.5vw; gap: 2vw;}
  .calc-warning i {font-size: 2.2rem;}
  .calc-warning p {font-size: 1.4rem;}
  .calc-results {gap: 2.5vw; margin-bottom: 3.5vw;}
  .result-card {padding: 3.5vw 2.5vw;}
  .result-label {font-size: 1.4rem; margin-bottom: 1.2vw;}
  .result-value {font-size: 3.2rem; margin-bottom: 0.8vw;}
  .result-usd {font-size: 1.5rem;}
  .calc-disclaimer {font-size: 1.3rem;}
}

@media screen and (min-width: 1100px) {
  .tflops-btc-calc .inbox {max-width: 1000px; margin: 0 auto;}
  .tflops-btc-calc .inbox h2 {margin-bottom: 3vw;}
  .calc-container {padding: 3.5vw 3vw;}
  .calc-inputs {margin-bottom: 3vw;}
  .input-row {gap: 2vw; margin-bottom: 2vw;}
  .input-group label {font-size: 1.4rem; margin-bottom: 1vw;}
  .input-group input, .input-group select {padding: 1.8vw; font-size: 1.5rem;}
  .input-group select {background-position: right 1.8vw center; padding-right: 6vw;}
  .calc-warning {padding: 2.2vw 2.8vw; margin-bottom: 3vw; gap: 1.8vw;}
  .calc-warning i {font-size: 2rem;}
  .calc-warning p {font-size: 1.3rem;}
  .calc-results {gap: 2vw; margin-bottom: 3vw;}
  .result-card {padding: 3vw 2.2vw;}
  .result-label {font-size: 1.3rem; margin-bottom: 1vw;}
  .result-value {font-size: 3rem; margin-bottom: 0.7vw;}
  .result-usd {font-size: 1.4rem;}
  .calc-disclaimer {font-size: 1.2rem;}
}

/* Utilization Flow */
.utilization-flow {background: var(--cl-wh-01);}
.utilization-flow .inbox h2 {text-align: center; color: var(--colortxt-01); margin-bottom: 0;}
.utilization-flow .inbox h2 .flow-accent {color: var(--colorbase-01);}
.utilization-flow .inbox h2 + p {font-size: 1.8rem; text-align: center; margin-bottom: 8vw;}

.flow-steps {display: grid; grid-template-columns: 1fr; gap: 6vw; margin: 0 auto 8vw; max-width: 100%;}
.flow-step {position: relative; background: var(--cl-wh-01); border: 2px solid #e0e0e0; border-radius: 12px; padding: 6vw 4vw; text-align: center; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.08);}
.flow-step:hover {transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15);}
.flow-step p {text-align:left;}

.step-icon {width: 15vw; height: 15vw; margin: 0 auto 3vw; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 7vw; transition: all 0.3s ease;}
.step-icon.red-icon {background: linear-gradient(135deg, #ff6b6b 0%, var(--colorbase-01) 100%); color: var(--cl-wh-01);}
.step-icon.gold-icon {background: linear-gradient(135deg, #f9d276 0%, #D4AF37 100%); color: var(--colortxt-01);}

.step-number {font-family: "Merriweather", serif; font-size: 4.5vw; font-weight: 900; margin-bottom: 2vw;}
.step-number.red-number {color: var(--colorbase-01);}
.step-number.gold-number {color: #D4AF37;}


.flow-step h3 {font-size: 4.2vw; font-weight: bold; margin-bottom: 2vw; color: var(--colortxt-01);}
.flow-step p {font-size: 3.6vw; color: var(--colortxt-01); line-height: 1.6;}

.flow-features {display: grid; grid-template-columns: 1fr; gap: 4vw; margin: 0 auto; max-width: 100%;}
.feature-item {padding: 4vw; border-radius: 10px; text-align: center; transition: all 0.3s ease;}
.feature-item.red-feature {background: linear-gradient(135deg, rgba(255,107,107,0.1) 0%, rgba(225,37,27,0.1) 100%); border: 2px solid rgba(225,37,27,0.3);}
.feature-item.gold-feature {background: linear-gradient(135deg, rgba(249,210,118,0.1) 0%, rgba(212,175,55,0.1) 100%); border: 2px solid rgba(212,175,55,0.3);}
.feature-item h4 {font-size: 4.5vw; font-weight: bold; margin-bottom: 1.5vw; color: var(--colortxt-01);}
.feature-item.red-feature h4 {color: var(--colorbase-01);}
.feature-item.gold-feature h4 {color: #D4AF37;}
.feature-item p {font-size: 3.4vw; color: var(--colortxt-01);}

@media screen and (min-width: 768px) {
  .utilization-flow .inbox h2 + p {font-size: 2rem; margin-bottom: 6vw;}
  .flow-steps {grid-template-columns: repeat(2, 1fr); gap: 4vw; margin-bottom: 6vw;}
  .flow-step {padding: 4vw 3vw;}
  .step-icon {width: 12vw; height: 12vw; font-size: 5.5vw; margin-bottom: 2vw;}
  .step-number {font-size: 3.2vw; margin-bottom: 1.5vw;}
  .flow-step h3 {font-size: 2.8vw; margin-bottom: 1.5vw;}
  .flow-step p {font-size: 2.2vw;}
  .flow-features {grid-template-columns: repeat(3, 1fr); gap: 3vw;}
  .feature-item {padding: 3vw;}
  .feature-item h4 {font-size: 2.8vw; margin-bottom: 1vw;}
  .feature-item p {font-size: 2vw;}
}

@media screen and (min-width: 1024px) {
  .utilization-flow .inbox h2 + p {margin-bottom: 4vw;}
  .flow-steps {grid-template-columns: repeat(4, 1fr); gap: 3vw; margin-bottom: 4vw;}
  .flow-step {padding: 3vw 2vw;}
  .step-icon {width: 8vw; height: 8vw; font-size: 3.5vw; margin-bottom: 1.5vw;}
  .step-number {font-size: 2.2vw; margin-bottom: 1vw;}
  .flow-step h3 {font-size: 1.8vw; margin-bottom: 1vw;}
  .flow-step p {font-size: 1.4vw;}
  .feature-item {padding: 2vw;}
  .feature-item h4 {font-size: 2vw; margin-bottom: 0.8vw;}
  .feature-item p {font-size: 1.4vw;}
}

@media screen and (min-width: 1100px) {
  .utilization-flow .inbox {max-width: 1200px;}
  .utilization-flow .inbox h2 + p {font-size: 1.5vw; margin-bottom: 3vw;}
  .flow-steps {gap: 2vw; margin-bottom: 3vw;}
  .flow-step {padding: 2.5vw 1.8vw;}
  .step-icon {width: 6vw; height: 6vw; font-size: 2.8vw; margin-bottom: 1.2vw;}
  .step-number {font-size: 1.8vw; margin-bottom: 0.8vw;}
  .flow-step h3 {font-size: 1.4vw; margin-bottom: 0.8vw;}
  .flow-step p {font-size: 1.1vw;}
  .flow-features {max-width: 1200px; gap: 2vw;}
  .feature-item {padding: 1.8vw;}
  .feature-item h4 {font-size: 1.5vw; margin-bottom: 0.6vw;}
  .feature-item p {font-size: 1.1vw;}
}


/* TFLOPS Flow Section */
.tflops-flow {background: var(--cl-wh-01); padding: 0;}
.tflops-flow .inbox {padding: 10vw 3vw;}
.tflops-flow .inbox h2 {text-align: center; color: var(--colortxt-01); margin-bottom: 2vw; font-size: 6vw;}
.tflops-flow .inbox h2 + p {font-size: 3.6vw; text-align: center; margin-bottom: 8vw; color: var(--colortxt-01);}

.flow-steps-horizontal {display: flex; flex-direction: column; align-items: center; gap: 6vw; margin: 0 auto; max-width: 100%;}

.flow-step-item {background: var(--cl-wh-01); border: 2px solid #e0e0e0; border-radius: 12px; padding: 6vw 4vw; text-align: center; width: 100%; max-width: 90%; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s ease;}
.flow-step-item:hover {transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15);}

.flow-icon {width: 15vw; height: 15vw; margin: 0 auto 3vw; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 7vw; transition: all 0.3s ease;}
.flow-icon.flow-icon-red {background: linear-gradient(135deg, #ff6b6b 0%, var(--colorbase-01) 100%); color: var(--cl-wh-01);}
.flow-icon.flow-icon-gold {background: linear-gradient(135deg, #f9d276 0%, #D4AF37 100%); color: var(--colortxt-01);}

.flow-step-title {font-size: 4.5vw; font-weight: bold; margin-bottom: 2vw; color: var(--colortxt-01);}
.flow-step-desc {font-size: 3.6vw; color: var(--colortxt-01); line-height: 1.6; text-align: left;}

.flow-arrow {font-size: 6vw; color: var(--colorbase-01); display: flex; align-items: center; justify-content: center;}

@media screen and (min-width: 768px) {
  .tflops-flow .inbox h2 {font-size: 4.5vw; margin-bottom: 1.5vw;}
  .tflops-flow .inbox h2 + p {font-size: 2.2vw; margin-bottom: 6vw;}
  .flow-steps-horizontal {flex-direction: row; justify-content: center; align-items: flex-start; gap: 3vw;}
  .flow-step-item {max-width: 25%; padding: 4vw 2vw;}
  .flow-icon {width: 10vw; height: 10vw; font-size: 5vw; margin-bottom: 2vw;}
  .flow-step-title {font-size: 2.8vw; margin-bottom: 1.5vw;}
  .flow-step-desc {font-size: 2.2vw;}
  .flow-arrow {font-size: 4vw; transform: rotate(0deg); margin: 0;}
}

@media screen and (min-width: 1024px) {
  .tflops-flow .inbox {padding: 8vw 3vw;}
  .tflops-flow .inbox h2 {font-size: 3.5vw; margin-bottom: 1vw;}
  .tflops-flow .inbox h2 + p {font-size: 1.6vw; margin-bottom: 4vw;}
  .flow-steps-horizontal {gap: 2vw;}
  .flow-step-item {padding: 3vw 1.8vw;}
  .flow-icon {width: 7vw; height: 7vw; font-size: 3.5vw; margin-bottom: 1.5vw;}
  .flow-step-title {font-size: 1.8vw; margin-bottom: 1vw;}
  .flow-step-desc {font-size: 1.4vw;}
  .flow-arrow {font-size: 3vw;}
}

@media screen and (min-width: 1100px) {
  .tflops-flow .inbox {max-width: 1200px; padding: 6vw 3vw;}
  .tflops-flow .inbox h2 {font-size: 2.5vw; margin-bottom: 0.8vw;}
  .tflops-flow .inbox h2 + p {font-size: 1.2vw; margin-bottom: 3vw;}
  .flow-steps-horizontal {max-width: 1200px; gap: 1.5vw;}
  .flow-step-item {padding: 2.5vw 1.5vw;}
  .flow-icon {width: 5vw; height: 5vw; font-size: 2.5vw; margin-bottom: 1vw;}
  .flow-step-title {font-size: 1.3vw; margin-bottom: 0.8vw;}
  .flow-step-desc {font-size: 1vw;}
  .flow-arrow {font-size: 2.5vw;}
}


/* Product Packages */
.product-packages {background: var(--colorbg-01); padding: 0;}
.product-packages .inbox {padding: 10vw 3vw;}
.product-packages .inbox h2 {text-align: center; color: var(--colortxt-01); margin-bottom: 0;}
.product-packages .inbox h2 .package-accent {color: var(--colorbase-01);}
.product-packages .inbox h2 + p {font-size: 1.8rem; text-align: center; margin-bottom: 8vw;}

.packages-grid {display: grid; grid-template-columns: 1fr; gap: 5vw; margin: 0 auto; max-width: 100%;}

.package-card {position: relative; background: var(--cl-wh-01); border: 2px solid #e8e8e8; border-radius: 12px; padding: 6vw 4vw; transition: all 0.3s ease; box-shadow: 0 2px 12px rgba(0,0,0,0.08);}
.package-card:hover {transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); border-color: var(--colorbase-01);}

.package-card.popular {border: 3px solid var(--colorbase-01); box-shadow: 0 4px 20px rgba(225,37,27,0.2);}
.package-card.popular:hover {box-shadow: 0 16px 40px rgba(225,37,27,0.3);}

.popular-badge {position: absolute; top: -12px; right: 20px; background: linear-gradient(135deg, #ff6b6b 0%, var(--colorbase-01) 100%); color: var(--cl-wh-01); padding: 6px 20px; border-radius: 20px; font-size: 1.4rem; font-weight: bold; box-shadow: 0 4px 12px rgba(225,37,27,0.3);}

.package-header {text-align: center; margin-bottom: 4vw;}

.package-icon {width: 20vw; height: 20vw; margin: 0 auto 3vw; background: linear-gradient(135deg, #4a9eff 0%, #1e88e5 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9vw; color: var(--cl-wh-01);}

.package-header h3 {font-family: "Merriweather", serif; font-size: 5.5vw; font-weight: 900; color: var(--colortxt-01); margin-bottom: 2vw;}

.package-desc {font-size: 3.4vw; color: #666; margin: 0;}

.package-price {text-align: center; padding: 4vw 0; margin-bottom: 4vw; border-top: 2px solid #f0f0f0; border-bottom: 2px solid #f0f0f0;}

.tflops-amount {font-family: "Merriweather", serif; font-size: 11vw; font-weight: 900; color: #D4AF37; line-height: 1; margin-bottom: 2vw;}
.tflops-amount span {font-size: 4vw; margin-left: 5px; color: var(--colortxt-01); font-weight: 600;}

.price-amount {font-size: 6vw; font-weight: bold; color: var(--colortxt-01);}
.price-amount span {font-size: 3vw; color: #999; font-weight: 400; margin-left: 5px;}

.package-features {list-style: none; padding: 0; margin: 0 0 5vw 0;}
.package-features li {padding: 2.5vw 0; border-bottom: 1px solid #f0f0f0; font-size: 3.6vw; color: var(--colortxt-01); display: flex; align-items: center;}
.package-features li:last-child {border-bottom: none;}
.package-features li i {color: #4CAF50; margin-right: 10px; font-size: 4vw;}

.package-btn {display: block; width: 100%; padding: 4vw; background: var(--colortxt-01); color: var(--cl-wh-01); text-align: center; font-size: 4vw; font-weight: bold; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; border: 2px solid var(--colortxt-01);}
.package-btn:hover {background: transparent; color: var(--colortxt-01); transform: translateY(-2px);}

.package-btn.popular-btn {background: var(--colorbase-01); border-color: var(--colorbase-01);}
.package-btn.popular-btn:hover {background: transparent; color: var(--colorbase-01);}

@media screen and (min-width: 768px) {
  .product-packages .inbox h2 + p {font-size: 2rem; margin-bottom: 6vw;}
  .packages-grid {grid-template-columns: repeat(2, 1fr); gap: 4vw;}
  .package-card {padding: 4vw 3vw;}
  .popular-badge {font-size: 1.6rem; padding: 8px 24px;}
  .package-icon {width: 15vw; height: 15vw; font-size: 7vw; margin-bottom: 2vw;}
  .package-header {margin-bottom: 3vw;}
  .package-header h3 {font-size: 3.2vw; margin-bottom: 1.5vw;}
  .package-desc {font-size: 2vw;}
  .package-price {padding: 3vw 0; margin-bottom: 3vw;}
  .tflops-amount {font-size: 7vw; margin-bottom: 1.5vw;}
  .tflops-amount span {font-size: 2.8vw;}
  .price-amount {font-size: 4vw;}
  .price-amount span {font-size: 2vw;}
  .package-features {margin: 0 0 4vw 0;}
  .package-features li {padding: 1.8vw 0; font-size: 2.2vw;}
  .package-features li i {font-size: 2.6vw;}
  .package-btn {padding: 3vw; font-size: 2.4vw;}
}

@media screen and (min-width: 1024px) {
  .product-packages .inbox {padding: 6vw 4vw;}
  .product-packages .inbox h2 + p {margin-bottom: 4vw;}
  .packages-grid {grid-template-columns: repeat(3, 1fr); gap: 3vw;}
  .package-card {padding: 3vw 2vw;}
  .package-icon {width: 10vw; height: 10vw; font-size: 4.5vw; margin-bottom: 1.5vw;}
  .package-header h3 {font-size: 2.2vw; margin-bottom: 1vw;}
  .package-desc {font-size: 1.4vw;}
  .package-price {padding: 2vw 0; margin-bottom: 2vw;}
  .tflops-amount {font-size: 5vw; margin-bottom: 1vw;}
  .tflops-amount span {font-size: 2vw;}
  .price-amount {font-size: 2.8vw;}
  .price-amount span {font-size: 1.4vw;}
  .package-features {margin: 0 0 3vw 0;}
  .package-features li {padding: 1.2vw 0; font-size: 1.4vw;}
  .package-features li i {font-size: 1.6vw;}
  .package-btn {padding: 2vw; font-size: 1.6vw;}
}

@media screen and (min-width: 1100px) {
  .product-packages .inbox {max-width: 1400px; padding: 6vw 0;}
  .product-packages .inbox h2 + p {font-size: 1.5vw; margin-bottom: 3vw;}
  .packages-grid {gap: 2vw;}
  .package-card {padding: 2.5vw 2vw;}
  .popular-badge {font-size: 1.2rem; padding: 6px 18px; top: -10px;}
  .package-icon {width: 8vw; height: 8vw; font-size: 3.5vw; margin-bottom: 1.2vw;}
  .package-header {margin-bottom: 2vw;}
  .package-header h3 {font-size: 1.8vw; margin-bottom: 0.8vw;}
  .package-desc {font-size: 1.1vw;}
  .package-price {padding: 1.5vw 0; margin-bottom: 1.5vw;}
  .tflops-amount {font-size: 4vw; margin-bottom: 0.8vw;}
  .tflops-amount span {font-size: 1.5vw;}
  .price-amount {font-size: 2.2vw;}
  .price-amount span {font-size: 1.1vw;}
  .package-features {margin: 0 0 2vw 0;}
  .package-features li {padding: 1vw 0; font-size: 1.1vw;}
  .package-features li i {font-size: 1.3vw; margin-right: 8px;}
  .package-btn {padding: 1.5vw; font-size: 1.3vw;}
}


/* Features */
.features {background: url('../images/features-bg-img.webp') 50% 50%/cover no-repeat;}
.features .inbox h2 {color: var(--cl-wh-01); text-align: center; margin-bottom: 0;}
.features .inbox h2 + p { font-size: 1.8rem; text-align: center; color: var(--cl-wh-01);}
.features .inbox .flex-wrap-sa-tbl {margin: 8vw 0 0;}
.features .inbox .flex-wrap-sa-tbl .item {width: 90%; display: block; padding: 5vw 3vw; margin: 0 auto 6vw; background: rgba(255, 255, 255, 0.15); border-radius: 6px;}
.features .inbox .flex-wrap-sa-tbl .item img {display: block; width: 20%; margin: 0 auto 5vw;}
.features .inbox .flex-wrap-sa-tbl .item h3 {font-size: 2rem; color: var(--cl-wh-01); margin-bottom: 1vw; text-align: center;}
.features .inbox .flex-wrap-sa-tbl .item span {display: block; width: fit-content; color: var(--colorbase-01); font-size: 1.6rem; margin: 0 auto 3vw;}
.features .inbox .flex-wrap-sa-tbl .item p {text-align: center; color: var(--cl-wh-01); font-size: 3.6vw;}
@media screen and (min-width: 768px) {
  .features .inbox .flex-wrap-sa-tbl .item {width: 60%; padding: 5vw 3vw; margin: 0 auto 6vw; }
  .features .inbox .flex-wrap-sa-tbl .item h3 {font-size: 2.4rem; margin-bottom: 1vw;}
  .features .inbox .flex-wrap-sa-tbl .item p {font-size: 1.6rem;}
}
@media screen and (min-width: 1024px) {
  .features .inbox .flex-wrap-sa-tbl {align-items: stretch;}
  .features .inbox .flex-wrap-sa-tbl .item {width: 32%; padding: 5vw 2vw; margin: 0; }
  .features .inbox .flex-wrap-sa-tbl .item img {width: 25%; margin: 0 auto 3vw;}
  .features .inbox .flex-wrap-sa-tbl .item h3 {font-size: 2.4rem; margin-bottom: 0;}
  .features .inbox .flex-wrap-sa-tbl .item p br {display: none;}
}
@media screen and (min-width: 1100px) {
  .features .inbox h2 + p { font-size: 1.5vw;}
  .features .inbox .flex-wrap-sa-tbl {width: 88%; margin: 4vw auto 0;}
  .features .inbox .flex-wrap-sa-tbl .item {width: 30%; padding: 3vw 3vw; }
  .features .inbox .flex-wrap-sa-tbl .item img {width: 28%; margin: 0 auto 2vw;}
  .features .inbox .flex-wrap-sa-tbl .item h3 {font-size: 1.5vw;}
  .features .inbox .flex-wrap-sa-tbl .item span {font-size: 1.8rem; margin: 0 auto 1vw;}
}



/* Merit */
.merit {}
.merit .inbox h2 {text-align: center; color: var(--colorbase-01); margin-bottom: 0;}
.merit .inbox h2 + p { font-size: 1.8rem; text-align: center;}
.merit .inbox .qa-item {display: block; background: var(--cl-gradient-01); padding: 20px 10px; border-radius: 6px; margin: 8vw auto 0; }
.merit .inbox .qa-item dl {position: relative;display: block; padding: 0;margin-bottom: 15px; cursor: pointer; background: var(--cl-wh-01); border-radius: 6px;}
.merit .inbox .qa-item dl:last-child {margin-bottom: 0;}
.merit .inbox .qa-item dl::before {position: absolute; top: 36px;right: 20px;width: 10px;height: 10px;display: block;margin: auto;content: '';transform: rotate(135deg);border-top: 2px solid var(--colorbase-01);border-right: 2px solid var(--colorbase-01); z-index: 1;}
.merit .inbox .qa-item .open::before {transform: rotate(-45deg); top: 40px;}
.merit .inbox .qa-item dl dt {position: relative;padding: 15px 40px 15px 20px;margin: 0;font-size: 1.6rem;font-weight: bold; background: var(--cl-wh-01); color: var(--colortxt-01); border-radius: 8px;text-indent: -1.4em; padding-left: 4em;}
.merit .inbox .qa-item dl dt span {color: var(--colorbase-01); font-weight: bold; font-family: "Merriweather", serif; font-size: 1.6rem; display: inline-block; margin-right: 10px;}
.merit .inbox .qa-item dl dt br {display: block;}
.merit .inbox .qa-item dl dd {position: relative;display: none;height: auto;margin: 10px 0 0;padding: 10px 15px 10px 15px;font-size: 1.6rem; border-top: 1px solid var(--colorline-01);}
@media screen and (min-width: 768px) {
  .merit .inbox .qa-item dl dd {padding: 2vw 7vw 2vw 7vw;font-size: 1.6rem;}
}
@media screen and (min-width: 1024px) {
  .merit .inbox .qa-item {padding: 2vw 2vw; margin: 6vw auto 0; }
  .merit .inbox .qa-item dl {padding: 0; margin-bottom: 2.4vw;}
  .merit .inbox .qa-item dl:last-child {margin-bottom: 0;}
  .merit .inbox .qa-item dl::before {position: absolute; top: 24px;right: 40px;width: 12px;height: 12px;}
  .merit .inbox .qa-item .open::before {transform: rotate(-45deg); top: 30px;}
  .merit .inbox .qa-item dl dt {padding: 20px 0 20px 30px; font-size: 2rem; text-indent: -1.4em; padding-left: 4em;}
  .merit .inbox .qa-item dl dt span { font-size: 2rem; margin-right: 10px;}
  .merit .inbox .qa-item dl dt br {display: none;}
  .merit .inbox .qa-item dl dd {margin: 0;padding: 30px;font-size: 1.6rem;}
  .merit .inbox .qa-item dl dd ul {padding: 15px 0 15px;}
}
@media screen and (min-width: 1100px) {
  .merit .inbox {max-width: 1200px;}
  .merit .inbox h2 + p { font-size: 1.5vw;}
  .merit .inbox .qa-item {padding: 2vw 2vw; margin: 3vw auto 0; }
  .merit .inbox .qa-item dl {padding: 0; margin-bottom: 1.4vw;}
}



/* Story */
.story .inbox h2 {color: var(--colorbase-01); margin-bottom: 0; text-align: center;}
.story .inbox h2 + p {font-size: 1.8rem; text-align: center;}
.story .inbox .upper-block {display: block; margin: 8vw auto 0;}
.story .inbox .upper-block .rate-block {display: block; width: 100%; padding: 8vw; margin: 0 auto 8vw; border: 2px solid var(--colorbase-01); border-radius: 6px;}
.story .inbox .upper-block .rate-block .tl {text-align: center; font-size: 1.6rem; margin-bottom: 2vw;}
.story .inbox .upper-block .rate-block .rate {text-align: center; font-weight: bold; font-size: 2rem;}
.story .inbox .upper-block .rate-block .rate span {display: inline-block; margin-left: 10px; color: var(--colorbase-01); font-family: "Merriweather", serif; font-size: 5rem; font-weight: bold;}
.story .inbox .upper-block .rate-block .under {text-align: center; font-size: 2rem; font-weight: bold;}
.story .inbox .upper-block .chart-block {display: block; width: 100%; margin: 0 auto;}
.earnings-chart {background: var(--cl-wh-01);padding: 1.5rem; border-radius: 6px; box-shadow: var(--shadow-01); text-align: center; }
.chart-title { color: var(--colortxt-01); font-size: 1.4rem; font-weight: 600;margin-bottom: 1rem;}
.chart-container { width: 100%;height: 60vw;}
.story .inbox .under-block {display: block; width: 100%; margin: 8vw auto 0; position: relative;}
.story .inbox .under-block::before {content: ''; width: 4vw; height: calc( 100% - 20px ); position: absolute; top: 10px; left: 0; right: 0; margin: auto; background: var(--colorbase-01); z-index: -1;}
.story .inbox .under-block .item {display: block; width: 100%; padding: 4vw 6vw; margin: 0 auto 8vw; border-radius: 6px; box-shadow: var(--shadow-01); background: var(--cl-wh-01);}
.story .inbox .under-block .item span {display: block; color: var(--colorbase-01); font-size: 3rem; margin-bottom: 2vw; font-weight: bold; font-family: "Merriweather", serif;}
.story .inbox .under-block .item .txt-bg-box {margin-bottom: 3vw;}
.story .inbox .under-block .item .txt-bg-box .tx-content {color: var(--cl-wh-01); font-size: 1.8rem; font-weight: bold;}
@media screen and (min-width: 768px) {
  .story .inbox h2 {text-align: left;}
  .story .inbox h2 + p {text-align: left;}
  .story .inbox .upper-block .rate-block {width: 70%; padding: 8vw;  margin: 0 auto 8vw;}
  .story .inbox .upper-block .chart-block {width: 70%;}
  .chart-title {font-size: 1.6rem;}
  .chart-container {height: 30vw;}
  .story .inbox .under-block .item {display: block; width: 70%; padding: 4vw 6vw; margin: 0 auto 8vw; }
}
@media screen and (min-width: 1024px) {
  .story .inbox .upper-block {display: flex; align-items: stretch; margin: 6vw 0 0;}
  .story .inbox .upper-block .rate-block {width: 35%; padding: 6vw;  margin: 0 10% 0 0;}
  .story .inbox .upper-block .chart-block {width: 40%; margin: 0;}
  .chart-container {height: 20vw;}
  .story .inbox .under-block {display: flex; justify-content: space-between; align-items: stretch; margin: 5vw auto 0;}
  .story .inbox .under-block::before {width: calc( 100% - 80px ); height: 1.8vw; top: 0; bottom: 0; left: 40px; right: 40px; }
  .story .inbox .under-block .item { width: 30%; padding: 2vw 3vw; margin: 0 auto; }
}
@media screen and (min-width: 1100px) {
    .story .inbox h2 + p { font-size: 1.5vw;}
    .story .inbox .upper-block { margin: 3vw 0 0;}
    .story .inbox .upper-block .rate-block {width: 30%; min-height: 13vw; padding: 3vw; margin: 0 5% 0 0;}
    .story .inbox .upper-block .rate-block .tl {font-size: 1vw; margin-bottom: 1.1vw;}
    .story .inbox .upper-block .rate-block .rate {font-size: 1.4vw;}
    .story .inbox .upper-block .rate-block .rate span {margin-left: 20px; font-size: 3.2vw;}
    .story .inbox .upper-block .rate-block .under {font-size: 1.4vw; font-weight: bold;}
    .story .inbox .upper-block .chart-block {width: 40%;}
    .chart-title {font-size: 1.8rem;}
    .chart-container { min-height: 13vw;  height: auto;}
    .story .inbox .under-block .item { width: 30%; padding: 1vw 2.2vw 1.6vw; margin: 0 auto; }
    .story .inbox .under-block .item span {font-size: 2.4vw; margin-bottom: .8vw;}
    .story .inbox .under-block .item .txt-bg-box {margin-bottom: 1.6vw;}
    .story .inbox .under-block .item .txt-bg-box .tx-content {font-size: 1.2vw; font-weight: bold;}
}





/* Road map */
.road-map {display: block; background: url('../images/road-map-bg.webp') 50% 50%/cover no-repeat;}
.road-map .inbox h2 {text-align: center; color: var(--colorbase-01); margin-bottom: 0;}
.road-map .inbox h2 + p { font-size: 1.8rem; text-align: center; color: var(--cl-wh-01);}
.road-map .inbox .txt-bg-box {width: fit-content; display: block;  margin: 5vw auto 5vw;}
.road-map .inbox .txt-bg-box .tx-content { font-size: 1.6rem;}
.road-map .inbox img {width: 100%; display: block; margin: 0 auto;}
@media screen and (min-width: 768px) {
  .road-map .inbox .txt-bg-box .tx-content { font-size: 1.8rem;}
  .road-map .inbox img {width: 60%;}
}
@media screen and (min-width: 1024px) {
  .road-map .inbox .txt-bg-box .tx-content { font-size: 2.2vw;}
  .road-map .inbox img {width: 100%;}
}
@media screen and (min-width: 1100px) {
  .road-map .inbox {max-width: 1100px;}
  .road-map .inbox h2 + p { font-size: 1.5vw;}
  .road-map .inbox .txt-bg-box {margin: 3vw auto 3vw;}
  .road-map .inbox .txt-bg-box .tx-content { font-size: 1.8vw;}
}



/* Support */
.support {background: var(--cl-wh-01);}
.support .inbox h2 {text-align: center; color: var(--colorbase-01); margin-bottom: 0;}
.support .inbox h2 + p { font-size: 1.8rem; text-align: center;}
.support .inbox .flex-wrap-ct-tbl {margin: 8vw auto 0;}
.support .inbox .flex-wrap-ct-tbl .item {display: block; width: 100%; padding: 6vw; margin: 0 auto 8vw; border: 1px solid var(--colorbase-01); border-radius: 6px; background: var(--cl-wh-01);}
.support .inbox .flex-wrap-ct-tbl .item:last-child {margin-bottom: 0;}
.support .inbox .flex-wrap-ct-tbl .item img {display: block; width: 20%; margin: 0 auto 5vw;}
.support .inbox .flex-wrap-ct-tbl .item p {color: var(--colortxt-01); text-align: center;}
.support .inbox .flex-wrap-ct-tbl .item .tl {font-weight: bold; font-size: 1.8rem; margin-bottom: 5vw;}
@media screen and (min-width: 768px) {
  .support .inbox .flex-wrap-ct-tbl .item {width: 70%; padding: 6vw; margin: 0 auto 6vw;}
}
@media screen and (min-width: 1024px) {
  .support .inbox .flex-wrap-ct-tbl {margin: 6vw auto 0;}
  .support .inbox .flex-wrap-ct-tbl {gap: 3%;}
  .support .inbox .flex-wrap-ct-tbl .item {width: 32%; padding: 4vw 2vw; margin: 0;}
  .support .inbox .flex-wrap-ct-tbl .item img {width: 25%; margin: 0 auto 2vw;}
  .support .inbox .flex-wrap-ct-tbl .item .tl {font-size: 1.8vw; margin-bottom: 2vw;}
}
@media screen and (min-width: 1100px) {
  .support .inbox h2 + p { font-size: 1.5vw;}
  .support .inbox .flex-wrap-ct-tbl {max-width: 1200px; margin: 3vw auto 0;}
  .support .inbox .flex-wrap-ct-tbl .item {width: 28%; padding: 2vw;}
  .support .inbox .flex-wrap-ct-tbl .item img {width: 25%; margin: 0 auto 2vw;}
  .support .inbox .flex-wrap-ct-tbl .item .tl {font-size: 1.3vw; margin-bottom: 2vw;}
}



/* Simulation */
.simulation {}
.simulation .inbox h2 {color: var(--colorbase-01); margin-bottom: 3vw;}
.simulation .inbox h2 + p {font-size: 1.6rem;}
.simulation .inbox .chart-main-area {display: block; width: 100%; padding: 3vw; margin: 8vw auto 1vw; background: var(--colorbg-01); border-radius: 6px; }
.simulation .inbox .chart-main-area h3 {font-family: 'Noto Sans JP', sans-serif; font-size: 5vw; font-weight: bold; text-align: center;}
.simulation .inbox .chart-main-area .flex-wrap-sa {width: fit-content; padding: 3vw 4vw; margin-bottom: 8vw; border: 1px solid var(--colortxt-01); border-radius: 10vw; gap: 5vw;}
.simulation .inbox .chart-main-area .flex-wrap-sa p {width: fit-content;}
.simulation .inbox .chart-main-area .flex-wrap-sa p span {font-size: 4vw; font-weight: bold;}
.simulation .inbox .chart-main-area .chart-container {display: block; width: 100%; height: auto;}
.simulation .inbox .chart-main-area .chart-container .chart-main {display: block; width: 100%; height: auto;}
.simulation .inbox .flex-wrap-sb-tbl { margin: 3vw 0 0;}
.simulation .inbox .flex-wrap-sb-tbl .item {display: block; width: 100%; margin: 0 auto 4vw; border-radius: 6px; padding: 3vw;}
.simulation .inbox .flex-wrap-sb-tbl .item:first-child { background: #FF8781;}
.simulation .inbox .flex-wrap-sb-tbl .item:nth-child(2) {background: var(--colorbase-01);}
.simulation .inbox .flex-wrap-sb-tbl .item:nth-child(3) {background: #921610;}
.simulation .inbox .flex-wrap-sb-tbl .item:nth-child(4) {background: var(--cl-wh-01); border: 2px dashed #9DA2AE; color: var(--colortxt-01);}
.simulation .inbox .flex-wrap-sb-tbl .item span {display: block; width: fit-content; margin: 0 auto 1vw; font-size: 1.6rem; color: var(--cl-wh-01);}
.simulation .inbox .flex-wrap-sb-tbl .item p {font-weight: bold; color: var(--cl-wh-01); font-size: 2rem;text-align: center;}
.simulation .inbox .flex-wrap-sb-tbl .item:nth-child(4) span, .simulation .inbox .flex-wrap-sb-tbl .item:nth-child(4) p {color: var(--colortxt-01);}
.simulation .inbox .chart-main-area .t-center {text-align: center;}
.simulation .inbox .under {text-indent: -1em;padding-left: 1em;}
@media screen and (min-width: 768px) {
  .simulation .inbox h2 + p {font-size: 1.8rem;}
  .simulation .inbox .chart-main-area h3 {font-size: 3vw;}
  .simulation .inbox .chart-main-area .flex-wrap-sa {padding: 2vw 5vw; margin-bottom: 6vw; border-radius: 5vw;}
  .simulation .inbox .chart-main-area .flex-wrap-sa p span {font-size: 2.6vw;}
  .simulation .inbox .flex-wrap-sb-tbl .item {width: 70%; margin: 0 auto 3vw; padding: 3vw;}
  .simulation .inbox .flex-wrap-sb-tbl .item span {margin: 0 auto .6vw; font-size: 1.6rem;}
  .simulation .inbox .flex-wrap-sb-tbl .item p {font-size: 2rem;}
}
@media screen and (min-width: 1024px) {
  .simulation .inbox .chart-main-area {padding: 3vw; margin: 6vw auto 1vw; }
  .simulation .inbox .chart-main-area h3 {font-size: 2.6vw;}
  .simulation .inbox .chart-main-area .flex-wrap-sa {padding: 1.4vw 5vw; margin-bottom: 3vw; border-radius: 5vw;}
  .simulation .inbox .chart-main-area .flex-wrap-sa p span {font-size: 2vw;}
  .simulation .inbox .flex-wrap-sb-tbl .item {width: 23%; margin: 0; padding: 2vw 1vw;}
  .simulation .inbox .flex-wrap-sb-tbl .item:last-child {margin: 0;}
  .simulation .inbox .chart-main-area .t-center {margin-top: 1vw;}
}
@media screen and (min-width: 1100px) {
  .simulation .inbox h2 + p { font-size: 1.5vw;}
  .simulation .inbox .chart-main-area {padding: 3vw 10vw; margin: 3vw auto 1vw; }
  .simulation .inbox .chart-main-area h3 {font-size: 2vw;}
  .simulation .inbox .chart-main-area .flex-wrap-sa {padding: .8vw 3vw; margin-bottom: 2vw; border-radius: 5vw;}
  .simulation .inbox .chart-main-area .flex-wrap-sa p span {font-size: 1.2vw;}
  .simulation .inbox .flex-wrap-sb-tbl { margin: 1vw 0 0;}
  .simulation .inbox .flex-wrap-sb-tbl .item {width: 23%; margin: 0; padding: 1vw 1vw;}
  .simulation .inbox .flex-wrap-sb-tbl .item span {margin: 0 auto .2vw; font-size: .8vw;}
  .simulation .inbox .flex-wrap-sb-tbl .item p {font-size: 1.2vw;}
}



/* Recommendation */
.recmd {}
.recmd .inbox h2 {text-align: center; color: var(--colorbase-01); margin-bottom: 0;}
.recmd .inbox h2 + p { font-size: 1.8rem; text-align: center;}
.recmd .inbox .flex-block {display: block; width: 100%; padding: 0; margin: 8vw auto;}
.recmd .inbox .flex-block .item {display: block; width: 100%; height: 56vw; margin: 0 auto 5vw; position: relative; }
.recmd .inbox .flex-block .item:nth-child(1) {background: url('../images/recmd-img-01.webp') 50% 50%/cover no-repeat;}
.recmd .inbox .flex-block .item:nth-child(2) {background: url('../images/recmd-img-02.webp') 50% 50%/cover no-repeat;}
.recmd .inbox .flex-block .item:nth-child(3) {background: url('../images/recmd-img-03.webp') 50% 50%/cover no-repeat;}
.recmd .inbox .flex-block .item:nth-child(4) {background: url('../images/recmd-img-04.webp') 50% 50%/cover no-repeat;}
.recmd .inbox .flex-block .item .txt-box {display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; position: absolute; bottom: 3vw; right: 4vw; }
.recmd .inbox .flex-block .item .txt-box .tl {width: fit-content; font-size: 4vw; padding: .8vw 4vw; background: var(--colortxt-01); color: var(--cl-wh-01); font-weight: bold; margin: 0 0 3vw 0;}
.recmd .inbox .flex-block .item .txt-box .under {width: fit-content; font-size: 3vw; padding: .6vw 3vw; background: var(--cl-wh-01); color: var(--colortxt-01); margin: 0 0 1vw 0;}
@media screen and (min-width: 768px) {
  .recmd .inbox .flex-block .item {width: 70%; height: 42vw; margin: 0 auto 5vw; }
  .recmd .inbox .flex-block .item .txt-box {bottom: 2vw; right: 2vw; }
  .recmd .inbox .flex-block .item .txt-box .tl {font-size: 2.4vw; padding: .6vw 3vw; margin: 0 0 2vw 0;}
  .recmd .inbox .flex-block .item .txt-box .under {font-size: 2vw; padding: .4vw 2vw;margin: 0 0 .8vw 0;}
}
@media screen and (min-width: 1024px) {
  .recmd .inbox .flex-block {display: flex; justify-content: space-around; align-items: stretch; flex-wrap: wrap; width: 100%; margin: 6vw auto;}
  .recmd .inbox .flex-block .item {width: 45%; height: 30vw; margin: 0 auto 5vw; }
  .recmd .inbox .flex-block .item .txt-box .tl {font-size: 2vw; padding: .6vw 2vw; margin: 0 0 1.6vw 0;}
  .recmd .inbox .flex-block .item .txt-box .under {font-size: 1.8vw; padding: .4vw 2vw;margin: 0 0 .8vw 0;}
}
@media screen and (min-width: 1100px) {
  .recmd .inbox h2 + p { font-size: 1.5vw;}
  .recmd .inbox .flex-block {width: 80%; margin: 3vw auto 0;}
  .recmd .inbox .flex-block .item {width: 45%; height: 19vw; margin: 0 auto 3vw; }
  .recmd .inbox .flex-block .item:nth-child(3), .recmd .inbox .flex-block .item:last-child {margin-bottom: 0;}
  .recmd .inbox .flex-block .item .txt-box .tl {font-size: 1.2vw; padding: .4vw 1vw; margin: 0 0 1vw 0;}
  .recmd .inbox .flex-block .item .txt-box .under {font-size: 1vw; padding: .2vw 1vw;margin: 0 0 .4vw 0;}
}



/* Voice */
.voice {background: var(--colorbg-01);}
.voice .inbox h2 {text-align: center; color: var(--colorbase-01); margin-bottom: 0;}
.voice .inbox h2 + p { font-size: 1.8rem; text-align: center;}
.voice .inbox .flex-wrap-sb-tb {margin: 8vw auto 0;}
.voice .inbox .flex-wrap-sb-tb .item {display: block; width: 90%; padding: 4vw 5vw; margin: 0 auto 5vw; border-radius: 8px; box-shadow: var(--shadow-01);}
.voice .inbox .flex-wrap-sb-tb .item .in-flex {display: flex; align-items: center; margin: 0 0 5vw;}
.voice .inbox .flex-wrap-sb-tb .item .in-flex img { display: block; width: 11vw; margin-right: 5vw;}
.voice .inbox .flex-wrap-sb-tb .item .in-flex div .tl { font-size: 4.4vw; font-weight: bold;}
@media screen and (min-width: 768px) {
  .voice .inbox .flex-wrap-sb-tb {margin: 8vw auto 0; align-items: stretch;}
  .voice .inbox .flex-wrap-sb-tb .item {width: 30%; padding: 3vw 3vw; margin: 0;}
  .voice .inbox .flex-wrap-sb-tb .item .in-flex {margin: 0 0 3vw;}
  .voice .inbox .flex-wrap-sb-tb .item .in-flex img {width: 6vw; margin-right: 3vw;}
  .voice .inbox .flex-wrap-sb-tb .item .in-flex div .tl {font-size: 2.4vw;}
}
@media screen and (min-width: 1024px) {
  .voice .inbox .flex-wrap-sb-tb .item .in-flex img {width: 5vw; margin-right: 2vw;}
  .voice .inbox .flex-wrap-sb-tb .item .in-flex div .tl {font-size: 2.2vw;}
}
@media screen and (min-width: 1100px) {
  .voice .inbox h2 + p { font-size: 1.5vw;}
  .voice .inbox .flex-wrap-sb-tb {width: 80%; margin: 3vw auto 0;}
  .voice .inbox .flex-wrap-sb-tb .item {width: 31%; padding: 1.6vw 2vw;}
  .voice .inbox .flex-wrap-sb-tb .item .in-flex {margin: 0 0 1vw;}
  .voice .inbox .flex-wrap-sb-tb .item .in-flex img {width: 3vw; margin-right: 1vw;}
  .voice .inbox .flex-wrap-sb-tb .item .in-flex div .tl {font-size: 1.4vw;}
}


/* Safety */
.safety {background: var(--cl-wh-01);}
.safety .inbox h2 {text-align: center; color: var(--colorbase-01); margin-bottom: 0;}
.safety .inbox h2 + p { font-size: 1.8rem; text-align: center;}
.safety .inbox .flex-wrap-ct-tbl {margin: 8vw auto 0;}
.safety .inbox .flex-wrap-ct-tbl .item {display: block; width: 100%; padding: 6vw; margin: 0 auto 8vw; border: 1px solid var(--colorbase-01); border-radius: 6px; background: var(--cl-wh-01);}
.safety .inbox .flex-wrap-ct-tbl .item:last-child {margin-bottom: 0;}
.safety .inbox .flex-wrap-ct-tbl .item img {display: block; width: 20%; margin: 0 auto 5vw;}
.safety .inbox .flex-wrap-ct-tbl .item p {color: var(--colortxt-01); text-align: center;}
.safety .inbox .flex-wrap-ct-tbl .item .tl {font-weight: bold; font-size: 1.8rem; margin-bottom: 5vw;}
@media screen and (min-width: 768px) {
  .safety .inbox .flex-wrap-ct-tbl .item {width: 70%; padding: 6vw; margin: 0 auto 6vw;}
}
@media screen and (min-width: 1024px) {
  .safety .inbox .flex-wrap-ct-tbl {margin: 6vw auto 0;}
  .safety .inbox .flex-wrap-ct-tbl {gap: 3%;}
  .safety .inbox .flex-wrap-ct-tbl .item {width: 32%; padding: 4vw 2vw; margin: 0;}
  .safety .inbox .flex-wrap-ct-tbl .item img {width: 25%; margin: 0 auto 2vw;}
  .safety .inbox .flex-wrap-ct-tbl .item .tl {font-size: 1.8vw; margin-bottom: 2vw;}
}
@media screen and (min-width: 1100px) {
  .safety .inbox h2 + p { font-size: 1.5vw;}
  .safety .inbox .flex-wrap-ct-tbl {max-width: 1200px; margin: 3vw auto 0;}
  .safety .inbox .flex-wrap-ct-tbl .item {width: 28%; padding: 2vw;}
  .safety .inbox .flex-wrap-ct-tbl .item img {width: 25%; margin: 0 auto 2vw;}
  .safety .inbox .flex-wrap-ct-tbl .item .tl {font-size: 1.3vw; margin-bottom: 2vw;}
}



/* CTA-wrap */
.cta-wrap {background: url('../images/cta-wrap-img-sp.webp') 100% 100%/100% no-repeat , var(--cl-gradient-01);}
.cta-wrap .inbox {padding: 10vw 3vw 55vw;}
.cta-wrap .inbox h2 {color: var(--cl-wh-01); margin-bottom: 5vw;}
.cta-wrap .inbox h2 + p {color: var(--cl-wh-01); margin-bottom: 5vw;}
.cta-wrap .inbox .btn-base {display: block; margin:0 auto;}
@media screen and (min-width: 768px) {
  .cta-wrap .inbox {padding: 10vw 3vw 45vw;}
  .cta-wrap .inbox h2 { margin-bottom: 5vw;}
  .cta-wrap .inbox h2 br {display: none;}
}
@media screen and (min-width: 1024px) {
  .cta-wrap {background: url('../images/cta-wrap-img-pc.webp') 135% 0/60% no-repeat , var(--cl-gradient-01);}
  .cta-wrap .inbox {padding: 5vw 4vw;}
  .cta-wrap .inbox h2 { margin-bottom: 3vw;}
  .cta-wrap .inbox h2 + p {margin-bottom: 3vw;}
}
@media screen and (min-width: 1100px) {
  .cta-wrap {background: url('../images/cta-wrap-img-pc.webp') 115% 50%/60% no-repeat , var(--cl-gradient-01);}
  .cta-wrap .inbox { width: 80%; margin: 0 auto; padding: 5vw 0;}
  .cta-wrap .inbox h2 { margin-bottom: 1.4vw;}
  .cta-wrap .inbox h2 + p {margin-bottom: 2vw;}
}



/* Thought */
.thought {position: relative; overflow: hidden;}
.thought::after {content: ''; display: block; width: 15%; height: 150%; background: rgba(127, 127, 127, 0.1); transform:rotate(20deg); position: absolute; right: -10%; top: -30%;}
.thought .inbox img {width: ; margin-bottom: 8vw;}
.thought .inbox h2 {color: var(--colorbase-01); margin-bottom: 0; text-align: right;}
.thought .inbox h2 + p {font-size: 1.8rem; text-align: right; margin-bottom: 8vw;}
.thought .inbox .txt-bg-box {margin-bottom: 3vw;}
.thought .inbox .txt-bg-box .tx-content {color: var(--colorbase-01); font-size: 1.8rem; font-weight: bold;}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 1024px) {
  .thought::after {width: 15%; right: 0; top: -30%;}
  .thought .inbox {width: 94%; margin: 0 auto; }
  .thought .inbox img {width: ; margin-bottom: 3vw;}
  .thought .inbox h2 + p { margin-bottom: 3vw;}
  .thought .inbox .txt-bg-box .tx-content {font-size: 1.8vw;}
}
@media screen and (min-width: 1100px) {
  .thought::after {width: 15%; right: 5%; top: -30%;}
  .thought .inbox {width: 70%; margin: 0 auto; }
  .thought .inbox img {width: ; margin-bottom: 2vw;}
  .thought .inbox h2 + p { font-size: 1.5vw; margin-bottom: 2vw;}
  .thought .inbox .txt-bg-box {margin-bottom: 1vw;}
  .thought .inbox .txt-bg-box .tx-content {font-size: 1.5vw;}
}



/* Service */
.service {display: block; background: var(--colortxt-01);}
.service .inbox h2 {color: var(--cl-wh-01); text-align: center; margin-bottom: 0;}
.service .inbox h2 + p { font-size: 1.8rem; text-align: center; color: var(--cl-wh-01);}
.service .inbox .flex-wrap-ct-tbl {margin: 8vw auto 0;}
.service .inbox .flex-wrap-ct-tbl .item {display: block; width: 100%; padding: 6vw; margin: 0 auto 8vw; border-radius: 6px; background: var(--cl-wh-01);}
.service .inbox .flex-wrap-ct-tbl .item:last-child {margin-bottom: 0;}
.service .inbox .flex-wrap-ct-tbl .item .img-box {display: flex; width: 70%; height: 20vw; margin: 0 auto 5vw; align-items: center; justify-content: center;}
.service .inbox .flex-wrap-ct-tbl .item .img-box img {display: block; width: 100%;}
.service .inbox .flex-wrap-ct-tbl .item p {color: var(--colortxt-01); text-align: center;}
.service .inbox .flex-wrap-ct-tbl .item .tl {font-weight: bold; font-size: 1.8rem; margin-bottom: 5vw;}
.service .inbox .flex-wrap-ct-tbl .item.coming {display: flex; align-items: center; justify-content: center; padding: 10vw 0;}
.service .inbox .flex-wrap-ct-tbl .item.coming .tl {margin-bottom: 0; text-align: center;}
@media screen and (min-width: 768px) {
  .service .inbox h2 + p br {display: none;}
  .service .inbox .flex-wrap-ct-tbl .item {width: 70%; padding: 6vw; margin: 0 auto 6vw;}
  .service .inbox .flex-wrap-ct-tbl .item .img-box { height: 10vw;}
}
@media screen and (min-width: 1024px) {
  .service .inbox .flex-wrap-ct-tbl {margin: 6vw auto 0;}
  .service .inbox .flex-wrap-ct-tbl {gap: 3%;}
  .service .inbox .flex-wrap-ct-tbl .item {width: 32%; padding: 4vw 2vw; margin: 0;}
  .service .inbox .flex-wrap-ct-tbl .item .img-box {width: 55%; margin: 0 auto 2vw; height: 6vw;}
  .service .inbox .flex-wrap-ct-tbl .item .tl {font-size: 1.8vw; margin-bottom: 2vw;}
}
@media screen and (min-width: 1100px) {
  .service .inbox h2 + p { font-size: 1.5vw;}
  .service .inbox .flex-wrap-ct-tbl {max-width: 1200px; margin: 3vw auto 0;}
  .service .inbox .flex-wrap-ct-tbl .item {width: 28%; padding: 3vw 2vw 2vw;}
  .service .inbox .flex-wrap-ct-tbl .item .img-box {width: 100%; margin: 0 auto 2vw; height: 3vw; }
  .service .inbox .flex-wrap-ct-tbl .item .tl {font-size: 1.3vw; margin-bottom: 2vw;}
  .service .inbox .flex-wrap-ct-tbl .item.coming {padding: 3vw 0;}
}



/* Faq */
.faq .inbox h2 {text-align: center; color: var(--colorbase-01); margin-bottom: 0;}
.faq .inbox h2 + p { font-size: 1.8rem; text-align: center;}
.faq .inbox .qa-item {display: block; padding: 20px 10px; border-radius: 8px; margin: 8vw auto 0; }
.faq .inbox .qa-item dl {position: relative;display: block; padding: 0;margin-bottom: 15px; cursor: pointer; background: var(--cl-wh-01); border-radius: 6px; box-shadow: var(--shadow-01);}
.faq .inbox .qa-item dl:last-child {margin-bottom: 0;}
.faq .inbox .qa-item dl::before {position: absolute; top: 21px;right: 20px;width: 10px;height: 10px;display: block;margin: auto;content: '';transform: rotate(135deg);border-top: 2px solid var(--colorbase-01);border-right: 2px solid var(--colorbase-01); z-index: 1;}
.faq .inbox .qa-item .open::before {transform: rotate(-45deg); top: 25px;}
.faq .inbox .qa-item dl dt {position: relative;padding: 15px 40px 15px 20px;margin: 0;font-size: 1.6rem;font-weight: bold; background: var(--cl-wh-01); color: var(--colortxt-01); border-radius: 8px;text-indent: -0.7em; padding-left: 2.2em;}
.faq .inbox .qa-item dl dt span {color: var(--colorbase-01); font-weight: bold; font-family: "Merriweather", serif; font-size: 1.6rem; display: inline-block; margin-right: 10px;}
.faq .inbox .qa-item dl dt br {display: block;}
.faq .inbox .qa-item dl dd {position: relative;display: none;height: auto;margin: 10px 0 0;padding: 10px 15px 10px 15px;font-size: 1.6rem; border-top: 1px solid var(--colorline-01);}
@media screen and (min-width: 768px) {
  .faq .inbox .qa-item dl dd {padding: 2vw 7vw 2vw 7vw;font-size: 1.6rem;}
}
@media screen and (min-width: 1024px) {
  .faq .inbox .qa-item {padding: 2vw 2vw; margin: 6vw auto 0; }
  .faq .inbox .qa-item dl {padding: 0; margin-bottom: 2.4vw;}
  .faq .inbox .qa-item dl:last-child {margin-bottom: 0;}
  .faq .inbox .qa-item dl::before {position: absolute; top: 24px;right: 40px;width: 12px;height: 12px;}
  .faq .inbox .qa-item .open::before {transform: rotate(-45deg); top: 30px;}
  .faq .inbox .qa-item dl dt {padding: 20px 0 20px 30px; font-size: 2rem; text-indent: -1.4em; padding-left: 4em;}
  .faq .inbox .qa-item dl dt span { font-size: 2rem; margin-right: 10px;}
  .faq .inbox .qa-item dl dt br {display: none;}
  .faq .inbox .qa-item dl dd {margin: 0;padding: 30px;font-size: 1.6rem;}
  .faq .inbox .qa-item dl dd ul {padding: 15px 0 15px;}
}
@media screen and (min-width: 1100px) {
  .faq .inbox {max-width: 1200px;}
  .faq .inbox h2 + p { font-size: 1.5vw;}
  .faq .inbox .qa-item {padding: 2vw 2vw; margin: 3vw auto 0; }
  .faq .inbox .qa-item dl {padding: 0; margin-bottom: 1.4vw;}
}



/* Seminar */
.seminar {display: block; background: var(--cl-gradient-01); padding-bottom: 5vw;}
.seminar .inbox h2 {text-align: center; color: var(--cl-wh-01); margin-bottom: 4vw;}
.seminar .inbox h2 + p { font-size: 1.8rem; text-align: center; color: var(--cl-wh-01); margin-bottom: 3vw;}
.form-wrapper {display: block; background: var(--cl-wh-01); border-radius: 10px; padding: 30px 20px; box-shadow: var(--shadow-01); max-width: 700px; margin: 0 auto; }
.form-group { margin-bottom: 25px; }
label { display: block; color: var(--colortxt-01); font-size: 1.6rem; font-weight: 600; margin-bottom: 12px; }
input[type="text"], input[type="email"], input[type="tel"] { width: 100%; padding: 15px; font-size:1.6rem; border: 2px solid #ddd; border-radius: 8px; background: var(--cl-wh-01); transition: all 0.3s ease; font-family: inherit; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus { outline: none; border-color: var(--colorbase-01); box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1); }
input::placeholder { color: #bbb; }
.checkbox-wrapper { display: flex; align-items: center; justify-content: center; margin: 30px 0; }
input[type="checkbox"] { width: 24px; height: 24px; margin-right: 12px; cursor: pointer; accent-color: var(--colorbase-01); }
.checkbox-wrapper label { margin: 0; cursor: pointer; font-weight: 500; }
.submit-btn { display: block; width: 100%; max-width: 400px; margin: 0 auto; padding: 18px 30px; background: var(--colorbase-01); color: var(--cl-wh-01); font-size: 1.6rem; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(231, 76, 60, 0.3); }
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(231, 76, 60, 0.4); }
.submit-btn:active { transform: translateY(0); }
@media screen and (min-width: 768px) {
    .form-wrapper { padding: 40px 30px; }
    .form-group { margin-bottom: 30px; }
    label { font-size: 2vw; margin-bottom: 12px; }
    input[type="text"], input[type="email"], input[type="tel"] { padding: 16px 18px; font-size: 2.2vw; }
    .checkbox-wrapper { margin: 35px 0; }
    .submit-btn { padding: 19px 35px; font-size: 2.2vw; }
}

@media screen and (min-width: 1024px) {
    .form-wrapper { padding: 50px 40px; }
    .form-group { margin-bottom: 32px; }
    label { font-size: 1vw; margin-bottom: .2vw; }
    input[type="text"], input[type="email"], input[type="tel"] { padding: 17px 19px; font-size: 1.4vw; }
    .checkbox-wrapper { margin: 38px 0; }
    .submit-btn { padding: 19px 38px; font-size: 1.4vw; }
}

@media screen and (min-width: 1100px) {
    .form-wrapper { padding: 60px; }
    .form-group { margin-bottom: 35px; }
    label { font-size: 1vw; margin-bottom: .2vw; }
    input[type="text"], input[type="email"], input[type="tel"] { padding: 18px 20px; font-size: 1vw;}
    .checkbox-wrapper { margin: 40px 0; }
    .submit-btn { padding: 20px 40px; font-size: 1vw; }
}






/*---------------------------------------------
  TFLOPS Charge Popup
---------------------------------------------*/
/* Popup Overlay */
.tflops-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 20px;
}

.tflops-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Popup Container */
.tflops-popup {
  background: var(--cl-wh-01);
  border-radius: 16px;
  padding: 40px;
  max-width: 600px;
  width: 100%;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease;
  border: 2px solid #e0e0e0;
}

.tflops-popup-overlay.active .tflops-popup {
  transform: scale(1);
}

/* Close Button */
.tflops-popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.tflops-popup-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--colorbase-01);
}

/* Title */
.tflops-popup-title {
  font-size: 28px;
  font-weight: bold;
  color: #D4AF37;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Subtitle */
.tflops-popup-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.5;
}

/* Form Group */
.tflops-popup-form-group {
  margin-bottom: 25px;
}

/* Label */
.tflops-popup-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--colortxt-01);
  margin-bottom: 10px;
}

/* Input */
.tflops-popup-input {
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  border: 2px solid #d0d0d0;
  border-radius: 10px;
  background: var(--cl-wh-01);
  color: var(--colortxt-01);
  transition: all 0.3s ease;
  font-family: "Courier New", monospace;
  letter-spacing: 1px;
}

.tflops-popup-input:focus {
  outline: none;
  border-color: #D4AF37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.tflops-popup-input::placeholder {
  color: #999;
  letter-spacing: 1px;
}

/* Submit Button */
.tflops-popup-btn {
  width: 100%;
  padding: 18px 30px;
  background: linear-gradient(135deg, #f9d276 0%, #D4AF37 100%);
  color: var(--colortxt-01);
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.tflops-popup-btn:hover {
  background: linear-gradient(135deg, #D4AF37 0%, #b8941f 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.tflops-popup-btn:active {
  transform: translateY(0);
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  .tflops-popup {
    padding: 30px 25px;
    max-width: 90%;
  }

  .tflops-popup-close {
    top: 15px;
    right: 15px;
    font-size: 20px;
    width: 35px;
    height: 35px;
  }

  .tflops-popup-title {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .tflops-popup-subtitle {
    font-size: 13px;
    margin-bottom: 25px;
  }

  .tflops-popup-input {
    padding: 14px 16px;
    font-size: 14px;
  }

  .tflops-popup-btn {
    padding: 16px 25px;
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .tflops-popup {
    padding: 25px 20px;
  }

  .tflops-popup-title {
    font-size: 20px;
  }

  .tflops-popup-subtitle {
    font-size: 12px;
    margin-bottom: 20px;
  }

  .tflops-popup-input {
    padding: 12px 14px;
    font-size: 13px;
  }

  .tflops-popup-btn {
    padding: 14px 20px;
    font-size: 14px;
  }
}


/*---------------------------------------------
  Low page
---------------------------------------------*/
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 1024px) {
}
@media screen and (min-width: 1100px) {
}