.diff-fonts.k-fade-slider {
position: relative;
width: 100%;
aspect-ratio: 16 / 8;
padding-bottom: 1em;
}
.diff-fonts picture {
display: block;
width: 100%;
}
.diff-fonts img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 767.98px) {
.diff-fonts.k-fade-slider {
aspect-ratio: 16 / 9;
padding-bottom: 10px;
}
.diff-fonts.k-fade-slider .swiper-pagination-bullet {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 132, 0, 0.3);
}
.diff-fonts.k-fade-slider .swiper-pagination-bullet-active {
background-color: rgba(255, 132, 0, 0.8);
}
.diff-fonts.k-fade-slider .swiper-pagination {
bottom: 0.5rem;
}
.diff-fonts.k-fade-slider .swiper-button-next::after,
.diff-fonts.k-fade-slider .swiper-button-prev::after {
font-size: 1.5em;
line-height: 1;
}
} .k-fade-slider.k-has-slide-title .k-slider-title {
position: absolute;
top: 0;
left: 0;
z-index: 30;
pointer-events: none;
}
.k-fade-slider.k-has-slide-title .k-slider-title > span {
display: inline-flex;
align-items: center; justify-content: center; min-height: 1.75rem;
box-sizing: border-box;
padding: 0.25em 0.6em;
border-radius: 0.5em;
background: rgba(255, 132, 0, 0.88);
border: 1px solid rgba(255, 132, 0, 0.25);
color: #fefefe;
font-size: clamp(0.85rem, 1.2vw, 1.05rem);
font-weight: 700;
line-height: 1.2;
min-width: 6em;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
@media (max-width: 767.98px) {
.k-fade-slider.k-has-slide-title img {
padding: 1.2em !important;
}
.k-fade-slider.k-has-slide-title .k-slider-title {
top: 0.1em;
left: 0.1em;
}
.k-fade-slider.k-has-slide-title .k-slider-title > span {
padding: 0.2em 0.4em;
border-radius: 0.4em;
font-size: 0.9em !important;
}
}  .kc-diffchar-slider .kc-dcs-overlay {
position: relative;
width: 100%;
height: 100%;
}
.kc-diffchar-slider .kc-dcs-fig {
margin: 0;
}
.kc-diffchar-slider .kc-dcs-fig > img {
width: 100%;
height: auto;
display: block;
} .kc-diffchar-slider .kc-dcs-pos {
position: absolute;
z-index: 2;
} .kc-diffchar-slider .kc-dcs-pos--top {
top: 3%;
left: 50%;
transform: translateX(-50%);
max-width: 90%;
min-width: 70%;
width: auto;
} .kc-diffchar-slider .kc-dcs-pos--top .kc-balloon__bubble {
width: auto;
max-width: 95%;
} .kc-diffchar-slider .kc-dcs-pos--bottom-left {
left: 3%;
width: 45%;
}
.kc-diffchar-slider .kc-dcs-pos--bottom-right {
right: 3%;
width: 45%;
} .kc-diffchar-slider .kc-dcs-pos--bottom-left .kc-balloon__bubble,
.kc-diffchar-slider .kc-dcs-pos--bottom-right .kc-balloon__bubble {
max-width: 95%;
} .kc-diffchar-slider .kc-dcs-pos--avatar-left {
left: 3%;
}
.kc-diffchar-slider .kc-dcs-pos--avatar-right {
right: 3%;
}
.kc-diffchar-slider .kc-dcs-avatar {
width: 125px;
text-align: center;
font-size: 0.8em;
line-height: 1.2;
color: #666;
word-break: break-word;
}
.kc-diffchar-slider .kc-balloon__name {
color: #666;
}
.kc-diffchar-slider .kc-dcs-avatar img {
width: 120px;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto 2px;
} .kc-diffchar-slider .kc-balloon__side {
width: 125px;
flex: 0 0 125px;
}
.kc-diffchar-slider .kc-balloon__icon {
border-radius: 0;
overflow: visible;
background: transparent;
width: 120px;
height: auto;
}
.kc-diffchar-slider .kc-balloon {
margin: 1em 0 0 0;
align-items: flex-end;
}
.kc-diffchar-slider .kc-dcs-pos--top .kc-balloon {
align-items: flex-start;
} .kc-diffchar-slider .kc-balloon__icon img {
border-radius: 0;
}
.kc-diffchar-slider .kc-balloon__bubble {
padding: 0.5em 0.8em;
font-size: 1.1em;
margin: 0.2em 0.2em;
}
.kc-diffchar-slider .kc-dcs-pos--bottom-left,
.kc-diffchar-slider .kc-dcs-pos--bottom-right {
bottom: 32.8px;
}
.kc-diffchar-slider .kc-dcs-pos--avatar-left,
.kc-diffchar-slider .kc-dcs-pos--avatar-right {
bottom: 32px;
} .kc-diffchar-slider .kc-dcs-pos--bottom-left .kc-balloon__bubble,
.kc-diffchar-slider .kc-dcs-pos--bottom-right .kc-balloon__bubble {
max-width: calc(100% - 125px - 6px);
}  @media (min-width: 1200px) {
.k-fade-slider.kc-diffchar-slider,
.k-fade-slider.kc-diffchar-slider .kc-dcs-fig--ratio {
aspect-ratio: 16 / 9;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.k-fade-slider.kc-diffchar-slider,
.k-fade-slider.kc-diffchar-slider .kc-dcs-fig--ratio {
aspect-ratio: 16 / 11;
}
} @media (min-width: 768px) and (max-width: 991.98px) {
.k-fade-slider.kc-diffchar-slider,
.k-fade-slider.kc-diffchar-slider .kc-dcs-fig--ratio {
aspect-ratio: 5 / 4 !important;
}
.kc-diffchar-slider .kc-dcs-pos--bottom-left {
left: 3%;
width: 47%;
}
.kc-diffchar-slider .kc-dcs-pos--bottom-right {
right: 3%;
width: 47%;
}
.kc-diffchar-slider .kc-balloon__side,
.kc-diffchar-slider .kc-balloon__icon,
.kc-diffchar-slider .kc-dcs-avatar {
max-width: 110px;
}
.kc-dcs-avatar__label,
.kc-balloon__name {
font-size: 14px;
}
.kc-balloon__name .kc-fonts-bold,
.kc-dcs-avatar__label .kc-fonts-bold {
font-size: 12px;
}
.kc-diffchar-slider .kc-balloon__bubble {
font-size: 0.8em;
padding: 0.5em 0.5em 0.5em 0.5em;
margin: 0;
}
} .kc-diffchar-slider .kc-dcs-fig--ratio {
overflow: hidden;
}
.kc-diffchar-slider .kc-dcs-fig--ratio > img {
width: 100%;
height: 100%;
object-fit: contain; display: block;
}    .kcode-full-wrapper {
--kc-bg: #fef9f0;
--kc-surface: rgba(255, 255, 255, 0.97);
--kc-surface-2: #fffdf9;
--kc-text: #513530;
--kc-subtext: #7f6b66;
--kc-line: rgba(255, 132, 0, 0.18);
--kc-accent: #f5a64a;
--kc-accent-deep: #ea8f1e;
--kc-shadow: 0 14px 32px rgba(173, 106, 34, 0.1);
--kc-shadow-hover: 5px 12px 20px rgba(255, 132, 0, 0.1);
--kc-radius-lg: 24px;
--kc-radius-md: 18px;
position: relative;
overflow: hidden;
padding-top: clamp(58px, 6vw, 78px);
padding-bottom: 18px;
} .kcode-bg-deco-container {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.bg-line {
position: absolute;
height: auto;
opacity: 0.12;
transform-origin: center center;
} .kcode-routing-section {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
.kcode-routing-header {
text-align: center;
max-width: 820px;
margin: 0 auto 38px;
} .kcode-routing-lead {
margin: 0 auto 18px;
max-width: 760px;
color: var(--kc-text);
font-size: clamp(15px, 1.7vw, 19px);
font-weight: 600;
line-height: 1.95;
letter-spacing: 0.04em;
}
.kcode-routing-lead span {
display: inline;
}
.kcode-routing-kicker {
margin: 0 0 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--kc-accent-deep);
}
.kcode-routing-title {
margin: 0;
padding: 0;
border: none !important;
background: none !important;
color: var(--kc-text) !important;
font-size: clamp(18px, 2.6vw, 30px) !important;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.03em;
text-align: center;
}
.kcode-routing-title::before {
display: none !important;
}
.kcode-routing-title::after {
content: "";
display: block;
width: 64px;
height: 4px;
margin: 16px auto 0;
border-radius: 999px; background-color: #f5a64a;
}
.kcode-routing-title-en {
margin: 12px 0 0;
color: var(--kc-accent-deep);
font-size: clamp(20px, 1.6vw, 24px) !important;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.06em;
}
.kcode-routing-sub {
margin: 16px auto 0;
max-width: 720px;
color: var(--kc-subtext);
font-size: 15px;
line-height: 1.9;
letter-spacing: 0.03em;
} .kcode-routing-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
align-items: stretch;
} .kcode-card {
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
min-height: 100%;
padding: 24px 26px 22px;
border-radius: var(--kc-radius-lg);
background: var(--kc-surface);
border: 1.4px solid var(--kc-line);
text-decoration: none !important;
color: inherit;
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
border-color 0.28s ease,
background-color 0.28s ease;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.kcode-card:hover,
.kcode-card:focus-visible {
transform: translateY(-6px);
box-shadow: var(--kc-shadow-hover);
border-color: rgba(245, 166, 74, 0.36);
text-decoration: none !important;
outline: none;
}
.kcode-card:focus-visible {
box-shadow:
0 0 0 3px rgba(255, 132, 0, 0.16),
var(--kc-shadow-hover);
}
.kcode-card-top {
display: flex;
align-items: center;
gap: 16px;
}
.kcode-card-icon-wrap {
flex: 0 0 128px;
width: 128px;
height: 128px;
border-radius: 50%;
background: linear-gradient(180deg, #fff6ea 0%, #fff0dd 100%);
display: grid;
place-items: center;
box-shadow: inset 0 0 0 1px rgba(245, 166, 74, 0.14);
}
.kcode-card-icon-wrap img {
width: 100px;
height: auto;
display: block;
}
.kcode-card-heading {
min-width: 0;
}
.kcode-card-title {
margin: 0;
padding: 0;
border: none !important;
background: none !important;
color: var(--kc-text) !important;
font-size: clamp(21px, 2.2vw, 26px) !important;
line-height: 1.35;
font-weight: 700;
letter-spacing: 0.02em;
}
.kcode-card-title::before,
.kcode-card-title::after {
display: none !important;
}
.kcode-card-en {
margin: 8px 0 0;
color: #9a6c45;
font-size: clamp(14px, 1.15vw, 16px);
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.03em;
}
.kcode-card-desc {
margin: 0;
color: var(--kc-subtext);
font-size: 15px !important;
line-height: 1.85;
letter-spacing: 0.02em;
} .kcode-card--first {
background: linear-gradient(
180deg,
rgba(255, 251, 246, 0.985) 0%,
rgba(255, 255, 255, 0.97) 100%
);
}
.kcode-card--workshop {
background: linear-gradient(
180deg,
rgba(255, 252, 248, 0.985) 0%,
rgba(255, 255, 255, 0.97) 100%
);
} .kcode-card-button {
margin-top: auto;
align-self: flex-start;
}
.kcode-card-button.kc-btn--orange.border-light {
border: 1px solid rgba(255, 132, 0, 0.7) !important;
background-color: #fff !important;
} .kcode-card-button .kc-btn__icon-circle svg {
width: 20px;
height: 20px;
display: block;
} body .kcode-card:hover .kcode-card-button,
body .kcode-card:focus-visible .kcode-card-button {
background-color: rgba(255, 132, 0, 0.9) !important;
color: var(--kc-color-primary-text) !important;
border-color: rgba(255, 132, 0, 0.9) !important;
box-shadow: 0 3px 8px rgba(255, 132, 0, 0.4) !important;
transform: translateY(-2px);
opacity: 1 !important;
} body .kcode-card:hover .kcode-card-button .kc-btn__icon-circle,
body .kcode-card:focus-visible .kcode-card-button .kc-btn__icon-circle {
background-color: var(--kc-color-primary-text) !important;
color: rgba(255, 132, 0, 0.9) !important;
} @media (max-width: 767.98px) {
.kcode-full-wrapper {
padding-top: clamp(50px, 8vw, 78px);
}
.kcode-routing-section {
padding: 0 16px;
}
.kcode-routing-header {
margin-bottom: 24px;
max-width: 100%;
}
.kcode-routing-lead {
margin-bottom: 14px;
font-size: 15px !important;
line-height: 1.8;
max-width: 100%;
}
.kcode-routing-sub {
font-size: 14px !important;
line-height: 1.8;
}
.kcode-routing-cards {
grid-template-columns: 1fr;
gap: 18px;
}
.kcode-card {
padding: 22px 18px;
border-radius: 20px;
gap: 16px;
}
.kcode-card-top {
align-items: flex-start;
gap: 14px;
}
.kcode-card-icon-wrap {
flex-basis: 64px;
width: 64px;
height: 64px;
}
.kcode-card-icon-wrap img {
width: 50px;
}
.kcode-card-desc {
font-size: 14px !important;
line-height: 1.8;
}
.bg-line {
opacity: 0.06;
}
.kcode-routing-title-en {
margin-top: 10px;
font-size: 16px !important;
line-height: 1.45;
}
.kcode-card-en {
margin-top: 6px;
font-size: 14px;
}
.kcode-card-button {
min-height: 38px;
font-size: 13px !important;
padding: 4px 5px 4px 14px;
}
.kcode-card-button__icon {
width: 24px;
height: 24px;
font-size: 12px !important;
}
}
@media (max-width: 399.98px) {
.kcode-routing-lead {
margin-bottom: 12px;
font-size: 13px !important;
}
.kcode-routing-title {
font-size: 16px !important;
}
} .line-pos-1 {
width: 17%;
top: -7%;
left: 1.5%;
transform: rotate(-15deg);
}
.line-pos-2 {
width: 15.5%;
top: -1%;
right: 7.5%;
transform: rotate(5deg);
}
.line-pos-3 {
width: 14%;
top: 8%;
left: 22%;
transform: rotate(5deg);
}
.line-pos-4 {
width: 18%;
top: 3%;
right: 21%;
transform: rotate(-5deg);
}
.line-pos-5 {
width: 14%;
top: 18%;
right: 1.5%;
transform: rotate(2deg);
}
.line-pos-6 {
width: 13%;
top: 18%;
left: 7%;
transform: rotate(-8deg);
}
@media screen and (max-width: 767.98px) {
.line-pos-1 {
width: 20%;
top: -1%;
left: 2%;
}
.line-pos-2 {
width: 20%;
top: 1%;
right: 7.5%;
}
.line-pos-3 {
width: 19%;
top: 7.5%;
left: 20%;
}
.line-pos-4 {
width: 27%;
top: 3%;
right: 17%;
}
.line-pos-5 {
width: 18%;
top: 17%;
right: 3.5%;
}
.line-pos-6 {
width: 20%;
top: 14.2%;
left: 5%;
}
} .kc-bridge {
margin: clamp(32px, 5vw, 64px) auto clamp(24px, 4vw, 48px);
padding: 0 clamp(16px, 4vw, 24px);
text-align: center;
max-width: 820px;
color: #555;
}
.kc-bridge__lead {
margin: 0;
font-size: clamp(0.95rem, 1.4vw, 1.05rem) !important;
line-height: 1.8;
letter-spacing: 0.03em;
}
.kc-bridge__br {
display: none;
}
@media (max-width: 600px) {
.kc-bridge__br {
display: block;
}
}
.kc-bridge__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4em;
margin-top: clamp(12px, 2vw, 16px);
font-size: clamp(1rem, 1.5vw, 1.1rem) !important;
font-weight: 700;
color: #ef7d04;
text-decoration: none;
padding: 8px 12px;
border-radius: 6px;
transition: all 0.2s ease;
}
.kc-bridge__link:hover {
text-decoration: underline;
text-underline-offset: 4px;
color: #ff8400 !important;
text-decoration: none !important;
opacity: 1;
} .kc-bridge__arrow {
position: relative;
display: inline-block;
width: 25px;
height: 12px;
margin-left: 5px;
vertical-align: middle;
top: -0.04em;
} .kc-arrow-icon {
display: block;
width: 30px;
height: 12px;
transform: translateX(-10px);
transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
} .kc-arrow-tail {
stroke-dasharray: 30;
stroke-dashoffset: -10;
transition: stroke-dashoffset 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
} .kc-bridge__link:hover .kc-arrow-icon {
transform: translateX(-5px);
}
.kc-bridge__link:hover .kc-arrow-tail {
stroke-dashoffset: -5;
}  .kc-news-section-title {
text-align: center;
font-size: 1.1em !important;
font-weight: bold;
color: #513530;
margin-top: 3em;
margin-bottom: 24px;
} .kc-news-section-title span {
display: inline-block;
position: relative;
}
.kc-news-section-title span::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background-color: #ffb258;
border-radius: 2px;
}  .kc-news-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.85em;
flex-wrap: nowrap;
margin-top: 0.2em;
padding-right: 4px;
color: #836f6b;
line-height: 1;
} .kc-news-footer .kc-bridge__link--muted {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.42em;
margin-top: 0;
padding: 4px 3px;
color: inherit !important;
font-size: 0.9em !important;
font-weight: 400;
line-height: 1;
white-space: nowrap;
text-decoration: none !important;
}
.kc-news-footer .kc-bridge__link--muted:hover {
color: #513530 !important;
background-color: transparent !important;
text-decoration: none !important;
} .kc-news-footer .kc-bridge__link-text {
display: inline-block;
line-height: 1.4;
} .kc-news-footer .kc-bridge__arrow {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 25px;
height: 12px;
margin-left: 2px;
line-height: 0;
vertical-align: middle;
overflow: visible;
top: auto;
transform: translateY(0.03em);
} .kc-news-footer .kc-arrow-icon {
display: block;
width: 30px;
height: 12px;
overflow: visible;
transform: translateX(-10px);
transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kc-news-footer .kc-arrow-tail {
stroke-dasharray: 30;
stroke-dashoffset: -10;
transition: stroke-dashoffset 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
vector-effect: non-scaling-stroke;
}
.kc-news-footer .kc-arrow-head {
vector-effect: non-scaling-stroke;
}
.kc-news-footer .kc-bridge__link--muted:hover .kc-arrow-icon {
transform: translateX(-5px);
}
.kc-news-footer .kc-bridge__link--muted:hover .kc-arrow-tail {
stroke-dashoffset: -5;
} .kc-news-divider {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 0.15em;
color: rgba(81, 53, 48, 0.68);
line-height: 1;
} @media (max-width: 767.98px) {
.kc-news-section-title {
margin-top: 1.2em;
}
.kc-news-footer {
justify-content: center;
gap: 0.7em;
padding-right: 0;
font-size: 0.95rem;
}
.kc-news-footer .kc-bridge__link--muted {
gap: 0.35em;
font-size: 0.9em !important;
}
.kc-news-footer .kc-bridge__arrow {
width: 30px;
height: 12px;
margin-left: 0;
}
.kc-news-divider {
margin: 0 0.05em;
}
} @media (hover: none), (pointer: coarse) {
.kc-news-footer .kc-bridge__link--muted {
gap: 0.26em;
}
.kc-news-footer .kc-bridge__arrow {
width: 25px;
height: 12px;
margin-left: 0;
overflow: hidden;
transform: translateY(0.03em);
}
.kc-news-footer .kc-arrow-icon {
width: 30px;
height: 12px;
transform: translateX(-8px) !important;
transition: none !important;
} .kc-news-footer .kc-arrow-tail {
stroke-dasharray: none !important;
stroke-dashoffset: 0 !important;
transition: none !important;
vector-effect: non-scaling-stroke;
}
.kc-news-footer .kc-arrow-head {
vector-effect: non-scaling-stroke;
}
.kc-news-footer .kc-bridge__link--muted:hover .kc-arrow-icon {
transform: translateX(-8px) !important;
}
.kc-news-footer .kc-bridge__link--muted:hover .kc-arrow-tail {
stroke-dasharray: none !important;
stroke-dashoffset: 0 !important;
}
} @media (max-width: 374.98px) {
.kc-news-footer {
gap: 0.5em;
font-size: 0.86rem;
}
.kc-news-footer .kc-bridge__link--muted {
gap: 0.25em;
}
.kc-news-footer .kc-bridge__arrow {
width: 26px;
height: 12px;
}
.kc-news-footer .kc-arrow-icon {
width: 30px;
height: 12px;
}
}  html.kc-js .kc-reveal-title {
opacity: 0;
transform: translate3d(0, 30px, 0);
transition:
opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
backface-visibility: hidden;
} html.kc-js .kc-reveal-title.kc-reveal-title--main {
transform: translate3d(0, 40px, 0);
transition:
opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
} html.kc-js .kc-reveal-title.kc-reveal-title--soft {
transform: translate3d(0, 30px, 0);
transition:
opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
} html.kc-js .kc-reveal-title.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
will-change: auto;
} @media (prefers-reduced-motion: reduce) {
html.kc-js .kc-reveal-title,
html.kc-js .kc-reveal-title.kc-reveal-title--main,
html.kc-js .kc-reveal-title.kc-reveal-title--soft {
opacity: 1;
transform: none;
transition: none;
will-change: auto;
}
} h2.kc-ovttl { background: transparent !important;
border: none !important;
padding: 0 !important; position: relative !important;
z-index: 1 !important;
isolation: isolate !important;
overflow: visible !important;
margin-top: 0 !important;
margin-bottom: 1.4em !important;
line-height: 1.4 !important;
display: block !important;
color: var(--kc-color-primary) !important;
font-size: 2em;
font-weight: bold !important;
text-shadow:
2px 2px 0 #fff,
-2px -2px 0 #fff,
-2px 2px 0 #fff,
2px -2px 0 #fff;
} h2.kc-ovttl::before {
content: none !important;
display: none !important;
} h2.kc-ovttl::after {
content: "" !important;
display: block !important;
position: absolute !important; height: 5em !important;
width: 5em !important; top: 50% !important;
transform: translateY(-50%) !important;  left: var(--kc-safe-left, -1.5em) !important;  background-image: var(--kc-bg-image) !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important; opacity: 0.2 !important;
z-index: -1 !important;
pointer-events: none !important;
} h2.kc-ovttl.h-longer::after {
height: 6em !important;
width: 6em !important;
}
@media (max-width: 767.98px) {
h2.kc-ovttl {
font-size: 1.7em !important;
}
} h3.kc-ttl-befimg,
h4.kc-ttl-befimg {
background: none !important;
border: none !important;
position: relative !important;
display: block !important;
max-width: 100% !important;
margin: 0 0 0.8em !important;
padding: 0 0 0 calc(var(--icon-w, 2em) + 0.2em) !important;
line-height: 1.5 !important;
color: var(--kc-color-primary) !important;
text-shadow:
2px 2px 0 #fff,
-2px 2px 0 #fff,
2px -2px 0 #fff,
-2px -2px 0 #fff;
line-break: strict;
}
h3.kc-ttl-befimg::after,
h4.kc-ttl-befimg::after {
content: none !important;
display: none !important;
}
h3.kc-ttl-befimg::before,
h4.kc-ttl-befimg::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: calc((1.5em - var(--icon-h, 1.5em)) / 2) !important;
width: var(--icon-w, 2em) !important;
height: var(--icon-h, 1.5em) !important;
background-image: var(--icon-url) !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}  .wave-hm {
width: 100%;
height: 150px; overflow: hidden;
line-height: 0; z-index: -20;
}
.wave-hm svg {
display: block;
width: 100%;
height: 100%;
} .wave-hm-content {
background: rgb(255, 241, 207, 0.7); padding: 50px 20px; } .sec-hm .inner-hm {
max-width: 1100px;
margin: 0 auto;
padding: 48px 20px;
} .wave--up svg {
transform: scaleY(-1);
} .wave-container,
.wave-bottom {
width: 100vw;
overflow: hidden;
}
.wave-container svg,
.wave-bottom svg {
display: block; width: 100%; height: auto;
}
.wave-bottom {
transform: rotate(180deg);
} @media (max-width: 767.98px) { .wave-hm:not(.wave-line) { height: 70px !important;
} .wave-line {
height: 50px !important;
}
}  .wave-line svg path { fill: none !important; stroke: rgba(255, 244, 219, 0.8);  stroke-width: 12px !important; stroke-linecap: round;
stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.wave-line--light svg path {
stroke: rgba(254, 249, 240, 0.8); }
.wave-line.wave-hm {
overflow: visible; } @media (max-width: 767.98px) { .wave-line {
height: 60px !important;
}
.wave-line svg path {
stroke-width: 8px !important;
}
} .wave-line--accent svg .wave-accent-dot { fill: rgba(255, 207, 146, 0.35) !important;
} @media (max-width: 600px) {
.wave-line--accent svg .wave-accent-dot.dot-s {
r: 6;
} .wave-line--accent svg .wave-accent-dot {
fill: rgba(255, 244, 219, 0.18);
}
} .kc-section-bg-dark {
background-color: #fff4db;
padding-top: 56px;
padding-bottom: 2px;
}
.kc-section-bg-light {
padding-top: 56px;
padding-bottom: 56px;
} .kc-section-inner {
width: min(100% - 32px, 1100px);
margin-left: auto;
margin-right: auto;
} .kc-section-inner > :first-child {
margin-top: 0 !important;
}
.kc-section-inner > :last-child {
margin-bottom: 0 !important;
} .wp-block-columns.is-layout-flex.kcode-rules-img {
gap: 1em;
} .kc-svg-block {
display: inline-block;
max-width: 100%;
margin-bottom: 2em;
}
.kc-svg-title {
margin: 0 0 0.5em 0;
font-size: 1em !important;
font-weight: 700;
line-height: 1.4;
}
.kc-svg-row {
display: flex;
align-items: center;
gap: clamp(1.6em, 2.8vw, 2.7em);
flex-wrap: nowrap;
background-color: #fff;
border-radius: 10px;
padding: 0.8em clamp(1em, 2.6vw, 1.8em);
max-width: 100%;
}
.kc-svg-cell {
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 auto;
}
.kc-svg-steps {
display: flex;
align-items: flex-start;
gap: clamp(1em, 2vw, 2em);
flex-wrap: nowrap;
}
.kc-svg-step-label {
margin: 0 0 0.25em 0;
min-height: 1.3em;
font-weight: 700;
line-height: 1.2;
text-align: center;
white-space: nowrap;
}
.kc-svg-step-label.is-empty {
visibility: hidden;
}
.kc-svg-figure {
--kc-svg-body-h: clamp(5.4em, 8vw, 6.4em);
--svg-h-mult: 1;
--svg-shift-x: 0em;
--svg-shift-y: 0em;
height: calc(var(--kc-svg-body-h) + 0.9em);
display: flex;
align-items: center; justify-content: center;
box-sizing: border-box;
line-height: 1;
overflow: visible;
}
.kc-svg-item {
display: block;
width: auto;
max-width: 100%;
flex: 0 0 auto;
}
.kc-svg-figure .kc-svg-item:not(.kc-svg-arrow) {
height: calc(var(--kc-svg-body-h) * var(--svg-h-mult));
transform: translate(var(--svg-shift-x), var(--svg-shift-y));
transform-origin: center center; }
.kc-svg-arrow {
height: clamp(2.2em, 4vw, 3em);
}
.kc-svg-arrow-sp {
display: none;
} .kc-svg-cell-arrow .kc-svg-figure {
align-items: center;
} .kc-svg-cell-arrow .kc-svg-figure {
align-items: center;
} .kc-svg-figure--sen-main {
--svg-h-mult: 0.95;
--svg-shift-y: -0.05em;
}
.kc-svg-figure--sen-1st {
--svg-h-mult: 1;
--svg-shift-y: -0.06em;
}
.kc-svg-figure--sen-2nd {
--svg-h-mult: 0.99;
--svg-shift-y: -0.01em;
}
.kc-svg-figure--sen-3rd {
--svg-h-mult: 1.09;
--svg-shift-y: 0.22em;
} @media (max-width: 1023.98px) {
.kc-svg-row {
gap: 2em;
}
.kc-svg-steps {
gap: 1.5em;
}
} @media (max-width: 767.98px) {
.kc-svg-block {
display: block;
}
.kc-svg-title {
margin: 0 0 0.45em 0;
font-size: 1em !important;
line-height: 1.35;
}
.kc-svg-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35em;
padding: 1.1em 1em 1.2em;
margin-bottom: 1.25em;
} .kc-svg-cell-main .kc-svg-step-label {
display: none;
}
.kc-svg-cell-main .kc-svg-figure {
height: auto;
margin-bottom: 0.15em;
} .kc-svg-cell-arrow .kc-svg-step-label {
display: none;
}
.kc-svg-cell-arrow .kc-svg-figure {
height: auto;
margin-bottom: 0.15em;
}
.kc-svg-arrow-pc {
display: none;
}
.kc-svg-arrow-sp {
display: block;
}
.kc-svg-arrow {
height: 1.5em;
} .kc-svg-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
justify-items: center;
gap: 0.4em 0.7em;
width: 100%;
margin-top: 0.1em;
}
.kc-svg-steps .kc-svg-cell {
width: 100%;
}
.kc-svg-steps .kc-svg-step-label {
min-height: auto;
margin: 0 0 0.2em 0;
font-size: 14px !important;
line-height: 1.2;
white-space: nowrap;
}
.kc-svg-steps .kc-svg-figure {
height: auto;
}
.kc-svg-cell-main .kc-svg-step-label,
.kc-svg-cell-arrow .kc-svg-step-label {
display: none;
}
.kc-svg-arrow {
height: clamp(1.2em, 4vw, 1.5em);
}
.kc-svg-cell-main .kc-svg-figure,
.kc-svg-steps .kc-svg-figure {
--kc-svg-body-h: clamp(3.2em, 9vw, 3.8em);
height: calc(var(--kc-svg-body-h) + 0.28em);
} .kc-svg-cell-main .kc-svg-figure .kc-svg-item:not(.kc-svg-arrow),
.kc-svg-steps .kc-svg-figure .kc-svg-item:not(.kc-svg-arrow) {
height: calc(var(--kc-svg-body-h) * var(--svg-h-mult));
} .kc-svg-cell-main .kc-svg-figure {
margin-bottom: 0;
}
.kc-svg-cell-arrow .kc-svg-figure {
margin-bottom: 0.05em;
} .kc-svg-figure--sen-main {
--svg-h-mult: 0.98;
--svg-shift-y: -0.02em;
}
.kc-svg-figure--sen-1st {
--svg-h-mult: 1;
--svg-shift-y: -0.03em;
}
.kc-svg-figure--sen-2nd {
--svg-h-mult: 1;
--svg-shift-y: 0em;
}
.kc-svg-figure--sen-3rd {
--svg-h-mult: 1.08;
--svg-shift-y: 0.08em;
}
} @media (max-width: 480px) {
.kc-svg-row {
padding: 1em 0.8em 1.05em;
gap: 0.3em;
}
.kc-svg-arrow {
height: 1.2em;
}
.kc-svg-steps {
gap: 0.3em 0.35em;
}
.kc-svg-steps .kc-svg-step-label {
font-size: 13px !important;
font-weight: 700;
margin: 0 0 0.15em 0;
}
.kc-svg-steps .kc-svg-item {
}
.kc-svg-cell-main .kc-svg-figure,
.kc-svg-steps .kc-svg-figure {
--kc-svg-body-h: clamp(2.8em, 10vw, 3.2em);
height: calc(var(--kc-svg-body-h) + 0.22em);
}
.kc-svg-cell-main .kc-svg-figure .kc-svg-item:not(.kc-svg-arrow),
.kc-svg-steps .kc-svg-figure .kc-svg-item:not(.kc-svg-arrow) {
height: calc(var(--kc-svg-body-h) * var(--svg-h-mult));
}
.kc-svg-figure--sen-main {
--svg-h-mult: 0.98;
--svg-shift-y: -0.015em;
}
.kc-svg-figure--sen-1st {
--svg-h-mult: 1;
--svg-shift-y: -0.025em;
}
.kc-svg-figure--sen-2nd {
--svg-h-mult: 1;
--svg-shift-y: 0em;
}
.kc-svg-figure--sen-3rd {
--svg-h-mult: 1.07;
--svg-shift-y: 0.06em;
}
}  .img-3char-parts {
padding: 0 2em;
text-align: center;
}
@media (max-width: 782.98px) and (min-width: 768px) {
.img-3char-parts {
padding: 0;
}
}
.wp-block-columns.kc-cols-3-nowrap {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
} @media (max-width: 767.98px) {
.wp-block-columns.kc-cols-3-nowrap {
flex-direction: row !important;
flex-wrap: nowrap !important;
word-break: break-word;
overflow-wrap: anywhere;
gap: 1em !important;
}
.wp-block-columns.kc-cols-3-nowrap > .wp-block-column {
flex-basis: 33% !important;
flex-grow: 0 !important;
min-width: 0;
}
}
.kc-cols-3-nowrap .charimg-3types .wp-block-image,
.kc-cols-3-nowrap .charimg-3types figure {
width: 100%;
max-width: 100%;
}
.kc-cols-3-nowrap > .charimg-3types {
background-color: #fff;
border-radius: 1em;
padding: 0.8em 1em;
}
.charimg-3types p {
font-size: 1.2em !important;
font-weight: bold !important;
margin-bottom: 0.5em;
word-break: keep-all;
letter-spacing: calc(var(--base-spacing) - 0.03em);
}
.kc-cols-3-nowrap .charimg-3types figure {
display: block;
margin: 0 auto;
box-sizing: border-box;
padding: 1em 1.5em;
}
.kc-cols-3-nowrap .charimg-3types img {
display: block;
width: 100%;
height: auto;
max-width: 180px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
@media (max-width: 767.98px) {
.kc-cols-3-nowrap .charimg-3types img {
max-width: 100%;
}
.kc-cols-3-nowrap .charimg-3types figure {
padding: 0.4em 0.6em;
}
}
@media (max-width: 767.98px) and (min-width: 420px) {
.charimg-3types p {
font-size: 1em !important;
margin-bottom: 0.5rem;
height: auto;
}
}
@media (max-width: 419.98px) {
.charimg-3types p {
font-size: 0.83em !important;
margin-bottom: 0.5rem;
height: auto;
}
}
.charimg-3types-desc {
background: #fff;
border-radius: 1em;
text-align: center;
max-width: 1000px;
padding: 0 1em;
} .exp-char-container {
--exp-bg: #ffffff;
--exp-gap: clamp(12px, 1.6vw, 20px);
--exp-gap-3col: clamp(16px, 2.6vw, 40px);
--exp-pad: clamp(12px, 1.8vw, 18px);
--exp-radius: 14px;
--exp-img-max: 160px;
margin-block: clamp(18px, 3vw, 30px);
}
.exp-char-container .exp-char-lead {
position: relative;
padding-left: 16px;
margin: 0 0 clamp(10px, 1.6vw, 14px);
font-weight: 700;
font-size: clamp(18px, 2vw, 20px) !important;
line-height: 1.75;
}
.exp-char-container .exp-char-lead::before {
content: "";
position: absolute;
left: 0;
top: -1px;
bottom: -1px;
width: 6px;
background: var(--kc-color-primary);
border-radius: 4px;
} .exp-char-row {
display: grid;
gap: var(--exp-gap);
align-items: stretch;
} .exp-char-box {
background: var(--exp-bg);
border-radius: var(--exp-radius);
padding: var(--exp-pad);
display: flex;
flex-direction: column;
min-width: 0;
} .exp-char-title {
margin: 0 0 calc(var(--exp-gap) * 0.75);
font-weight: 700;
font-size: clamp(15px, 1.8vw, 20px) !important;
line-height: 1.2;
text-align: center !important;
} .exp-char-images {
display: grid;
gap: var(--exp-gap);
justify-items: center; align-items: start;
} .exp-char-images--1 {
grid-template-columns: 1fr;
}
.exp-char-images--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.exp-char-images--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.exp-char-images--3.exp-char-images {
gap: var(--exp-gap-3col);
} .exp-char-img {
margin: 0;
width: min(100%, var(--exp-img-max));
justify-self: center;
align-self: start;
display: grid;
place-items: center;
} .exp-char-img img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
} .exp-char-container--one .exp-char-row {
grid-template-columns: 2fr 1fr;
max-width: 1000px;
margin-inline: auto;
gap: 16px;
}
.exp-char-container--two .exp-char-row {
grid-template-columns: 1fr;
justify-items: center;
}
.exp-char-container--two .exp-char-box {
width: min(100%, 1110px);
}
.exp-char-container--two .exp-char-title {
text-align: left !important;
}
.exp-char-container--three .exp-char-row {
grid-template-columns: 1fr 2fr;
} @media (max-width: 860px) {
.exp-char-container {
--exp-gap: 10px;
--exp-pad: 12px;
--exp-img-max: 150px;
}
.exp-char-container--one .exp-char-row {
grid-template-columns: 2fr 1fr; }
.exp-char-container--three .exp-char-row {
grid-template-columns: 1fr 2fr;
}
.exp-char-images--1 {
grid-template-columns: 1fr;
}
.exp-char-images--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.exp-char-images--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.exp-char-container--two .exp-char-box {
width: 100%;
}
.exp-char-title {
margin-bottom: 10px;
}
} @media (max-width: 560px) {
.exp-char-container {
--exp-gap: 8px;
--exp-pad: 10px;
--exp-img-max: 118px;
}
.exp-char-container .exp-char-lead,
p.stroke-equation-lead {
font-size: clamp(16px, 4.2vw, 18px) !important;
line-height: 1.65;
}
.exp-char-title {
font-size: clamp(13px, 3.7vw, 16px) !important;
line-height: 1.3;
}
} @media (max-width: 399.98px) {
.exp-char-container {
--exp-gap: 6px;
--exp-pad: 8px;
--exp-img-max: 96px;
}
.exp-char-container--one .exp-char-row {
grid-template-columns: 2fr 1fr;
gap: 8px;
}
.exp-char-title {
font-size: 12px !important;
line-height: 1.25;
margin-bottom: 8px;
}
.exp-char-container .exp-char-lead,
p.stroke-equation-lead {
font-size: 15px !important;
line-height: 1.6;
}
} .ttl-long .exp-char-title .sp-only {
display: none;
}
@media (max-width: 514.98px) {
.ttl-long .exp-char-title {
height: 2em;
}
.ttl-long .exp-char-title .sp-only {
display: block;
}
}  .stroke-direction-container {
position: relative;
display: flex;
justify-content: space-between;
align-items: stretch;
width: 100%;
max-width: 1000px;
margin: 1.5em auto 0;
background-color: #fff;
border-radius: 1em;
padding: 1.5em 0.5em 1em;
box-sizing: border-box;
gap: 0.5em;
overflow: visible;
}
.stroke-header-group {
position: absolute;
top: -0.8em;
left: 1em;
z-index: 2;
display: flex;
align-items: baseline;
gap: 1em;
background-color: #fdfcf5;
padding: 0 10px;
} .stroke-direction-title {
color: #fff;
background-color: #ffb347;
padding: 0.2em 0.8em;
font-weight: 700;
font-size: 1.1em !important;
line-height: 1;
border-radius: 4px;
} .stroke-description {
margin: 0;
font-weight: bold;
font-size: 1em !important;
color: #333;
} .stroke-direction-item {
display: flex;
flex-direction: column;
flex: 1; min-width: 0;
} .stroke-direction-text-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 4em;
margin-bottom: 12px;
gap: 6px;
}
.stroke-badge {
display: inline-block;
color: #fff;
font-size: 0.9em !important;
letter-spacing: calc(var(--base-spacing) - 0.03em);
font-weight: bold;
padding: 0.4em 0.5em;
border-radius: 1em;
line-height: 1.2;
}
.stroke-badge--green {
background-color: var(--kc-color-green);
}
.stroke-badge--red {
background-color: var(--kc-color-red);
}
.stroke-badge--blue {
background-color: var(--kc-color-blue);
}
.stroke-instruction {
font-weight: bold;
font-size: 1.05em !important;
color: #333333;
line-height: 1.3;
margin: 0;
text-align: center;
white-space: nowrap;
}
.stroke-direction-figure {
flex: 1;
margin: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.stroke-direction-figure img {
width: 100%;
height: auto;
max-width: 200px;
object-fit: contain;
} @media screen and (max-width: 767.98px) and (min-width: 400px) {
.stroke-direction-container {
padding: 1em 0.8em;
gap: 0.8em;
margin-top: 2em;
}
.stroke-header-group {
flex-direction: column;
align-items: flex-start;
gap: 0.3em;
top: -1.2em;
left: 0.5em;
}
.stroke-description {
font-size: 1em !important;
padding: 0 1em;
box-sizing: border-box;
}
.stroke-direction-title {
top: -0.6em;
left: 1em;
font-size: 1.1em !important;
} .stroke-direction-text-wrapper {
height: 4em;
margin-bottom: 0.5em;
}
.stroke-badge {
font-size: 0.85em !important;
}
.stroke-instruction {
white-space: normal;
font-size: 0.8em !important;
} .stroke-direction-item .sp-only {
display: block;
}
}
@media screen and (max-width: 399.98px) {
.stroke-direction-container {
padding: 1em 0.8em;
gap: 0.4em;
}
.stroke-direction-title {
top: 0.65em;
left: 0.65em;
border-width: 3px;
font-size: 1.1em !important;
}
.stroke-badge {
font-size: 0.7em !important;
}
.stroke-instruction {
white-space: normal;
font-size: 0.7em !important;
} .stroke-direction-item .sp-only {
display: block;
}
} @media screen and (min-width: 769px) {
.stroke-direction-item .sp-only {
display: none;
}
} .stroke-equation-lead {
position: relative;
padding-left: 16px;
margin: 0 0 clamp(10px, 1.6vw, 14px);
font-weight: 700;
font-size: clamp(18px, 2vw, 20px) !important;
line-height: 1.75;
}
.stroke-equation-lead::before {
content: "";
position: absolute;
left: 0;
top: -1px;
bottom: -1px;
width: 6px;
background: var(--kc-color-primary);
border-radius: 4px;
} .stroke-equation-container {
display: flex;
justify-content: space-between;
align-items: stretch;
width: 100%; margin: 0 auto;
padding: 0.9em 0;
box-sizing: border-box;
background-color: #fefefe;
border-radius: 1em;
} .stroke-item {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
} .stroke-text-wrapper {
height: 3.2em;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.stroke-text-wrapper > .stroke-text {
font-weight: bold;
font-size: 1.2em !important;
line-height: 1.4;
margin: 0;
text-align: center;
white-space: nowrap;
} .stroke-figure {
flex: 1; margin: 0;
width: 100%;
display: flex;
align-items: center; justify-content: center;
}
.stroke-figure img {
width: 100%;
height: auto;
max-width: 180px;
object-fit: contain;
padding: 0 0.5em;
} .stroke-symbol {
display: flex;
flex-direction: column;
justify-content: center; align-items: center;
width: 3em;
flex-shrink: 0; padding-top: 3.2em;
box-sizing: border-box;
}
.stroke-symbol svg {
width: 2.3em;
height: 2.3em;
color: #333;
display: block;
} @media screen and (max-width: 767.98px) and (min-width: 400px) { .stroke-equation-container {
padding: 0.8em 0;
} .stroke-text-wrapper {
height: 4em;
} .stroke-symbol {
width: 2em;
padding-top: 4em;
}
.stroke-text-wrapper > .stroke-text {
font-size: 1em !important;
white-space: normal; }
.stroke-text .sp-only {
display: block;
}
.stroke-symbol svg {
width: 2em;
height: 2em;
}
}
@media screen and (max-width: 399.98px) { .stroke-equation-container {
padding: 0.8em 0;
} .stroke-text-wrapper {
height: 4em;
} .stroke-symbol {
width: 2em;
padding-top: 4em;
}
.stroke-text-wrapper > .stroke-text {
font-size: 0.9em !important;
white-space: normal; }
.stroke-text .sp-only {
display: block;
}
.stroke-symbol svg {
width: 2em;
height: 2em;
}
}
@media screen and (min-width: 769px) {
.sp-only {
display: none;
}
}  .kc-frame-recognize {
position: relative;
overflow: visible;
background-color: #fefefe;
border-radius: 1em;
padding: 0.8em 1em 1em 1em;
margin-bottom: 1.5em;
}
#kc-frame-recognize__title-1,
#kc-frame-recognize__title-2 {
font-size: 1.25em !important;
font-weight: 700;
color: var(--kc-color-primary);
margin-bottom: 0;
}
.kc-frame-recognize__img {
margin-bottom: 0;
}
.kc-frame-recognize__label {
position: absolute;
left: 50%;
bottom: -1.2em;
transform: translateX(-50%);
z-index: 2;
background: var(--kc-color-primary);
color: #fff;
font-weight: 700;
line-height: 1.5;
padding: 0.3em 1em;
border-radius: 0.5em;
white-space: nowrap !important;
display: inline-flex;
max-width: none !important;
overflow-wrap: normal !important;
word-break: keep-all !important;
}
#kc-frame-recognize__label-1,
#kc-frame-recognize__label-2 {
font-size: 1.2em !important;
}
.kc-frame-recognize .wp-block-columns {
margin-bottom: 5px;
gap: 0.8em;
}
.kc-frame-recognize .diff_lang {
color: #888;
font-weight: bold;
font-size: 0.9em !important;
letter-spacing: calc(var(--base-spacing) - 0.03em);
}
@media (max-width: 991.98px) and (min-width: 782px) {
.wp-block-columns.kc-frame-recognize__col {
gap: 0.6em;
}
.kc-frame-recognize {
padding: 0.8em 0.6em 1em 0.6em;
}
.kc-frame-recognize .diff_lang {
font-size: 0.82em !important;
}
}
@media (max-width: 781.98px) { .kc-frame-recognize__col {
display: block !important;
}
.kc-frame-recognize__col > .wp-block-column {
width: 100% !important;
margin-left: 0 !important;
}
.kc-frame-recognize__col > .wp-block-column + .wp-block-column {
margin-top: 3em !important;
} .kc-frame-recognize > .wp-block-group__inner-container > .wp-block-columns {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 1em !important;
row-gap: 0 !important;
margin-bottom: 0 !important;
}
.kc-frame-recognize
> .wp-block-group__inner-container
> .wp-block-columns
> .wp-block-column {
width: auto !important;
min-width: 0 !important;
flex: none !important;
flex-basis: auto !important;
margin: 0 !important;
} .kc-frame-recognize .wp-block-image {
margin-bottom: 0.5em !important;
}
.kc-frame-recognize .wp-block-image img {
display: block;
width: 100%;
height: auto;
} .kc-frame-recognize .diff_lang {
font-size: 0.95em !important;
line-height: 1.4;
margin: 0;
}
.kc-frame-recognize__label {
white-space: normal;
text-align: center;
padding: 0.2em 0.8em;
}
#kc-frame-recognize__label-1,
#kc-frame-recognize__label-2 {
font-size: 1.1em !important;
}
}
.div-inline-img {
margin: 1em 0 !important;
padding: 1em 2em !important;
max-width: 780px !important;
background-color: #fefefe;
border-radius: 1em;
}
@media (max-width: 767.98px) {
.div-inline-img {
padding: 0.5em 0.5em !important;
}
} .slide-card__mobile {
background-color: #fefefe;
border-radius: 1em;
padding: 0.8em;
margin-bottom: 1.5em;
box-shadow: 0 4px 12px rgba(230, 150, 66, 0.15);
display: flex;
justify-content: center;
align-items: center;
}
.slide-card__mobile picture {
display: block;
width: 100%;
}
.slide-card__mobile img {
max-width: 100%;
height: auto;
display: block;
border-radius: 1em;
} .wp-block-image.learners-img {
justify-content: center;
text-align: center;
}
.wp-block-image.learners-img img {
max-width: 320px !important;
}
@media screen and (min-width: 768px) and (max-width: 839.98px) {
.wp-block-image.learners-img img {
max-width: 300px !important;
}
}
@media screen and (min-width: 440px) and (max-width: 767.98px) {
.wp-block-image.learners-img img {
max-width: 260px !important;
}
}
@media screen and (max-width: 439.98px) {
.wp-block-image.learners-img img {
max-width: 210px !important;
}
} .voice-row {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between;
align-items: flex-start;
gap: 1em;
margin-bottom: 2em;
}
.voice-item {
flex: 0 0 48%;
max-width: 48%;
box-sizing: border-box;
}
@media (max-width: 781.98px) {
.voice-item {
flex: 0 0 100%;
max-width: 100%;
}
} .voice-inner {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-start;
gap: 1em;
} .voice-photo {
flex: 0 0 30%;
max-width: 30%;
margin: 0;
}
.voice-photo picture {
display: block;
width: 100%;
}
.voice-photo img {
width: 100%;
height: auto;
display: block;
}
.voice-text {
flex: 1 1 auto;
line-height: 1.6;
display: flex;
flex-direction: column;
justify-content: flex-start;
} .comm-box {
position: relative; margin: 3em 0 0 0;
background: #fef9f0;
padding: 2em 1em 0.5em 2em;
border-radius: 1em;
height: auto;
}
.comm-box .box-title {
position: absolute;
top: 0;
left: 3%;
transform: translate(-3%, -50%);
font-size: 1.15em !important;
background-color: #ffb347;
padding: 0.2em 0.8em;
text-align: center;
color: #fff;
font-weight: bold;
letter-spacing: calc(var(--base-spacing) + 0.05em);
white-space: nowrap;
}
.comm-box p {
padding: 0.5em 1em;
margin: 0;
}
@media (max-width: 767.98px) {
.comm-box .box-title {
left: 5%;
}
.comm-box p {
padding: 0.5em 0.3em;
margin: 0;
}
}