.k-fade-slider {
position: relative;
width: 100%;
aspect-ratio: 16 / 8;
overflow: hidden;
padding-bottom: 1em;
} .full-slider .k-fade-slider {
position: relative;
width: 100%;
aspect-ratio: 16 / 6.4;
overflow: hidden;
padding-bottom: 2em;
} @media (max-width: 767.98px) {
.full-slider .k-fade-slider {
aspect-ratio: 1 / 1;
padding-bottom: 1em;
}
} .diff-fonts.k-fade-slider {
position: relative;
width: 100%;
aspect-ratio: 16 / 8;
padding-bottom: 1em;
}
@media (max-width: 767.98px) {
.diff-fonts.k-fade-slider {
aspect-ratio: 16 / 9;
padding-bottom: 10px;
}
} .how-char.k-fade-slider {
position: relative;
width: 100%;
aspect-ratio: 16 / 7;
overflow: hidden;
padding-bottom: 1em;
}
@media (max-width: 767.98px) {
.how-char.k-fade-slider {
aspect-ratio: 9 / 5.5;
padding-bottom: 10px;
}
} .diff-so-n.k-fade-slider {
aspect-ratio: 16 / 11;
padding-bottom: 1em;
}
@media (max-width: 991.98px) and (min-width: 782px) {
.diff-so-n.k-fade-slider {
aspect-ratio: 3 / 2;
}
}
@media (max-width: 781.98px) and (min-width: 768px) {
.diff-so-n.k-fade-slider {
aspect-ratio: 5 / 2;
}
}
@media (max-width: 767.98px) and (min-width: 480px) {
.diff-so-n.k-fade-slider {
aspect-ratio: 2 / 1;
padding: 0 5em 1em 5em;
}
}
@media (max-width: 479.98px) {
.diff-so-n.k-fade-slider {
aspect-ratio: 3 / 2;
padding: 0 2em 1em 2em;
}
} .k-fade-slider .swiper-wrapper,
.k-fade-slider .swiper-slide {
height: 100%;
}
.k-fade-slider .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
padding: 1em 1em 1.5em 1em;
}
.full-slider.k-fade-slider .swiper-slide {
padding: 0 !important;
}
.k-fade-slider .swiper-slide>.slide-inner {
width: 95%;
height: 95%;
margin: auto;
}
.k-fade-slider img {
width: 100%;
height: 100%;
margin: auto;
object-fit: contain;
} @media screen and (max-width: 767.98px) {
.alignfull.full-slider {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
padding: 0 !important;
}
.k-fade-slider,
.k-fade-slider .swiper-wrapper,
.k-fade-slider .swiper-slide {
background: none !important;
background-color: transparent !important;
}
.k-fade-slider .swiper-slide {
padding: 0 !important;
margin: 0 !important;
height: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.k-fade-slider .swiper-slide picture:not(.slide-bg-picture),
.k-fade-slider .swiper-slide img:not(.slide-bg-img) {
display: block !important;
width: 100% !important;
height: auto !important;
object-fit: contain !important;
background: none !important;
}
.full-slider {
margin: 0 !important;
padding: 0 !important;
background: none !important;
}
.k-fade-slider .swiper-wrapper {
height: auto !important;
}
.k-fade-slider .swiper-slide::before,
.k-fade-slider .swiper-slide::after {
display: none !important;
content: none !important;
}
}  .full-slider .k-fade-slider .swiper-pagination {
bottom: -25px;
}
.moij-or-zukei.k-fade-slider .swiper-pagination,
.how-char.k-fade-slider .swiper-pagination {
bottom: 0px;
} .k-fade-slider .swiper-pagination-bullet {
width: 25px;
height: 5px;
border-radius: 3px;
background-color: rgba(255, 132, 0, 0.2);
opacity: 1 !important;
transition: background-color 0.3s;
}
.k-fade-slider .swiper-pagination-bullet-active {
background-color: rgba(255, 132, 0, 0.8);
} .k-fade-slider .swiper-button-prev,
.k-fade-slider .swiper-button-next {
color: var(--kc-color-primary);
font-weight: bold;
opacity: 0.5;
background: transparent;
transition: opacity 0.3s;
}
.k-fade-slider .swiper-button-next::after,
.k-fade-slider .swiper-button-prev::after {
font-size: 2.2em;
line-height: 3;
}
.swiper-button-dummy {
display: none !important;
}
.k-fade-slider .swiper-button-prev:hover,
.k-fade-slider .swiper-button-next:hover {
opacity: 0.8;
} @media screen and (max-width: 767.98px) {
.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;
}
} .k-fade-slider.k-has-slide-title .k-slider-title {
position: absolute;
top: 0.8em;
left: 0.8em;
height: 1.75rem;
line-height: 1.25;
z-index: 30;
pointer-events: none;
}
.k-fade-slider.k-has-slide-title .k-slider-title>span {
display: inline-block;
padding: .25em .6em;
border-radius: .5em;
background: rgba(255, 132, 0, 0.88);
border: 1px solid rgba(255, 132, 0, 0.25);
color: #fefefe;
font-size: clamp(.85rem, 1.2vw, 1.05rem);
font-weight: 700;
height: 1.75rem;
line-height: 1.2;
min-width: 6em;
box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
@media (max-width: 767.98px) {
.k-fade-slider.k-has-slide-title img {
padding: 1em !important;
}
.k-fade-slider.k-has-slide-title .k-slider-title {
top: 0.2em;
left: 0.2em;
}
.k-fade-slider.k-has-slide-title .k-slider-title>span {
padding: .2em .4em;
border-radius: .4em;
font-size: .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: .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: .5em .8em;
font-size: 1.1em;
margin: .2em .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-balloon__bubble {
font-size: .9em;
}
} .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;
}  .fix-2-slides {
--fv-top: 5%; --fv-left: 6%; --fv-right: 3%; --fv-text-w: 38%; --fv-board-w: 54%; --fv-text-max: 620px;
--fv-board-max: 1050px;
} @media (max-width: 1200px) {
.fix-2-slides {
--fv-top: 5%;
--fv-text-w: 42%;
--fv-board-w: 52%;
}
}
.alignfull.full-slider.fix-2-slides {
margin-bottom: 45px;
}
.fix-2-slides .k-fade-slider {
overflow: visible !important;
padding-bottom: 0px !important;
position: relative;
z-index: 5;
}
.fix-2-slides .k-fade-slider .swiper-wrapper {
overflow: hidden;
} .fix-2-slides .slide-bg-switch {
position: relative;
width: 100%;
height: 100%;
aspect-ratio: 16 / 6.4;
overflow: hidden;
background: transparent;
}
.fix-2-slides .slide-bg-picture {
position: absolute !important;
top: 0;
left: 0;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0;
pointer-events: none;
}
.fix-2-slides .slide-bg-img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: top center !important;
font-family: "object-fit: cover;"; }  .fix-2-slides .hero-content {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
z-index: 10;
} .fix-2-slides .hero-text-area {
position: absolute !important; top: var(--fv-top) !important;
left: var(--fv-left) !important;
width: var(--fv-text-w) !important;
max-width: var(--fv-text-max) !important;
text-align: left !important;
z-index: 2;
padding: 0 !important;
transform: none !important;
} .fix-2-slides .hero-image-area {
position: absolute !important; top: var(--fv-top) !important;
right: var(--fv-right) !important;
width: var(--fv-board-w) !important;
max-width: var(--fv-board-max) !important;
text-align: right !important;
z-index: 1;
padding: 0 !important;
transform: none !important;
}
.fix-2-slides .hero-image-area img {
width: 100% !important;
height: auto !important;
max-width: none !important;
object-fit: contain !important;
filter: drop-shadow(5px 5px 20px rgba(255, 132, 0, 0.15));
padding: .4em 0 .2em 2em;
}  .fix-2-slides .hero-title {
font-family: inherit !important;
color: #f7820a; font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
font-weight: bold;
margin-bottom: 0.3em !important;
line-height: 1.1 !important;
letter-spacing: -0.02em;
transform: none !important;
} .fix-2-slides .hero-desc {
font-family: "GenJyuuGothicX", "MPR", system-ui, sans-serif !important;
color: #513530; font-size: clamp(1.1rem, 2.5vw, 2rem) !important;
line-height: 1.5 !important;
font-weight: bold;
margin-bottom: 0;
transform: none !important;
}
.fix-2-slides .hero-desc span.desc-strong {
color: #d06e0d;
} .fix-2-slides .highlight {
background: linear-gradient(transparent 60%, #ffdca6 60%);
display: inline-block;
}
.fix-2-slides .hero-title--mark {
position: relative;
display: inline-block;
z-index: 0;
padding: 0 .06em;
}
.fix-2-slides .hero-title--mark::after {
content: "";
position: absolute;
left: -0.10em;
right: -0.10em;
height: 0.42em;
bottom: 0.06em;
background: rgba(255, 132, 0, .38);
z-index: -1;
transform: rotate(-1deg);
clip-path: polygon(0% 55%, 6% 45%, 14% 52%, 25% 44%, 38% 54%, 52% 46%, 66% 56%, 78% 47%, 90% 55%, 100% 48%, 100% 100%, 0% 100%);
border-radius: 999px;
} .fix-2-slides .swiper-pagination {
position: absolute !important;
;
left: 50% !important;
transform: translateX(-50%);
width: fit-content !important;
bottom: -24px !important;
z-index: 50 !important;
}   @media (max-width: 767.98px) { .fix-2-slides .k-fade-slider {
aspect-ratio: auto !important;
padding-bottom: 12px !important;
height: auto !important;
overflow: visible !important;
} .fix-2-slides .slide-bg-switch { aspect-ratio: 1 / 1 !important;
height: auto !important;
overflow: hidden !important; display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}
.fix-2-slides .slide-bg-picture {
width: 100% !important;
height: 100% !important;
display: block !important;
}
.fix-2-slides .slide-bg-img {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
object-position: bottom center !important;
} .fix-2-slides .hero-content { position: relative !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 3.5% 4% 0 4% !important;
gap: 0 !important;
} .fix-2-slides .hero-text-area { position: static !important;
flex: 0 0 auto !important;
height: auto !important;
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
transform: none !important;
margin-bottom: 8px !important;
}
.fix-2-slides .hero-title {
font-size: 2.6rem !important;
margin-bottom: 0.2em !important;
}
.fix-2-slides .hero-desc {
font-size: 1.15rem !important;
line-height: 1.5 !important;
} .fix-2-slides .hero-image-area {
position: static !important;
flex: 0 0 auto !important;
width: 75% !important;
max-width: 340px !important;
text-align: center !important;
margin: 0 auto !important;
padding: 0 !important;
}
.fix-2-slides .hero-image-area img {
width: 100% !important;
height: auto !important;
padding: 0 !important;
object-fit: contain !important;
} .fix-2-slides .swiper-pagination { bottom: calc(-20px + env(safe-area-inset-bottom)) !important;
height: auto !important;
}
} @media (min-width: 530px) and (max-width: 767.98px) {
.alignfull.full-slider.fix-2-slides {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
box-sizing: border-box !important;
} .fix-2-slides .slide-bg-switch {
aspect-ratio: auto !important;
height: clamp(520px, 62vh, 590px) !important;
}
.fix-2-slides .hero-image-area {
width: 80% !important;
max-width: 400px !important;
}
.fix-2-slides .swiper-pagination {
bottom: calc(-20px + env(safe-area-inset-bottom)) !important;
}
}  .fix-2-slides .k-fade-slider:not(.swiper-initialized) .swiper-wrapper .swiper-slide:first-child {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
z-index: 2 !important;
} .k-fade-slider.swiper-initialized .swiper-slide {
z-index: auto;
}
.fix-2-slides {
background-color: #fef9f0;
} .fix-2-slides .slide-bg-picture,
.fix-2-slides .slide-bg-img {
opacity: 1 !important;
visibility: visible !important;
display: block !important; transition: none !important;
animation: none !important;
transform: none !important; will-change: opacity;
} .swiper-slide { will-change: opacity, transform;
} .kc-news.vk_post_list_slider .vk_post.media {
margin-bottom: .5em;
}
.vk_post_list_slider .swiper-button-prev,
.vk_post_list_slider .swiper-button-next {
color: var(--kc-color-primary);
opacity: 0.5;
background: transparent;
transition: opacity 0.3s;
}
.vk_post_list_slider .swiper-button-prev:hover,
.vk_post_list_slider .swiper-button-next:hover {
opacity: 0.8;
}
.vk_post_list_slider .swiper-button-prev::after,
.vk_post_list_slider .swiper-button-next::after {
font-size: 1.5em;
font-weight: bold;
}
.vk_post_list_slider .swiper-pagination {
margin-top: .5em
}
.vk_post_list_slider .swiper-pagination-bullet {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 132, 0, 0.3);
opacity: 1 !important;
transition: background-color 0.3s;
}
.vk_post_list_slider .swiper-pagination-bullet-active {
background-color: rgba(255, 132, 0, 0.8);
}  .news-top-title {
margin-bottom: 0;
color: #777;
} .news-slider {
position: relative;
background: #fffaf0;
padding: 0.8em 0 2.2em;
max-height: 180px;
} .news-slider .news-swiper {
width: 100%;
height: 130px;
overflow: hidden;
position: relative;
margin-bottom: 36px;
}
.news-slider .news-swiper {
visibility: hidden; }
.news-slider .news-swiper.is-ready {
visibility: visible;
}
@media (max-width: 767.98px) {
.news-slider .news-swiper {
height: 120px;
}
}
.news-swiper .swiper-wrapper {
align-items: center;
}
.news-swiper .swiper-slide {
height: 100%;
box-sizing: border-box;
border: 1px solid #ffdbb3;
border-radius: 8px;
background: #fff;
overflow: hidden;
position: relative;
transition: transform .2s ease;
}
.news-swiper .swiper-slide:hover {
transform: translateY(-3px);
}
.news-swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
} .news-slider .news-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 0.8em;
line-height: 1.3;
background: rgba(255, 255, 255, 0.85);
color: #333;
margin: 0;
padding: 4px 6px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
@media (max-width: 768px) {
.news-slider .news-title {
font-size: 0.6em;
-webkit-line-clamp: 3;
line-height: 1.3;
height: calc(1.3em * 3 + 8px);
padding: 4px 6px;
}
} .news-slider .swiper-pagination {
position: absolute;
bottom: 6px;
left: 0;
width: 100%;
text-align: center;
z-index: 20;
pointer-events: auto;
}
@media (max-width: 767.98px) {
.news-slider .swiper-pagination {
bottom: 18px;
}
}
.news-slider .swiper-pagination-bullet {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ffdbb3;
opacity: 1;
transition: background-color 0.3s ease;
}
.news-slider .swiper-pagination-bullet-active {
background-color: #ff8400;
}
.news-swiper .swiper-button-prev,
.news-swiper .swiper-button-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
color: #ff8400;
} .news-thumb {
position: relative;
}
.news-thumb .news-new-label {
position: absolute;
top: 6px;
left: 6px;
background: rgba(255, 255, 255, 0.9);
color: #D84A4A;
font-size: 0.75em;
font-weight: bold;
padding: 2px 6px;
border-radius: 6px;
z-index: 6;
line-height: 1.2;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
min-height: 1.4em;
white-space: nowrap;
}
.news-thumb .news-date {
position: absolute;
top: 6px;
right: 6px;
background: rgba(255, 255, 255, 0.85);
color: #333;
font-size: 0.7em;
font-weight: bold;
padding: 2px 6px;
border-radius: 6px;
z-index: 5;
line-height: 1.4;
}
@media (max-width: 767.98px) {
.news-thumb .news-new-label {
font-size: 0.65em;
top: 4px;
left: 4px;
padding: 2px 4px;
}
.news-thumb .news-date {
font-size: 0.6em;
bottom: 4px;
right: 4px;
top: auto;
padding: 2px 4px;
background: rgba(255, 255, 255, 0.9);
}
} .news-links {
text-align: right;
margin-top: 0.5em;
padding-right: 1em;
font-size: 0.9em;
line-height: 1.5;
color: #333;
}
.news-links a {
color: #777;
text-decoration: none;
transition: color 0.2s ease;
}
.news-links a:hover {
color: #d84a4a;
text-decoration: underline;
}
.news-links .divider {
color: #999;
margin: 0 0.4em;
}
@media (max-width: 768px) {
.news-links {
text-align: center;
padding-right: 0;
font-size: 0.85em;
}
} @media (min-width: 480px) and (max-width: 767.98px) {
.news-slider {
max-height: none;
}
.news-slider .news-swiper {
height: 145px;
} .news-swiper .swiper-slide {
display: flex;
flex-direction: column;
height: 100%;
} .news-thumb {
position: relative;
flex: 0 0 62%; width: 100%;
overflow: hidden;
} .news-thumb img {
f width: 100%;
height: 100%;
object-fit: cover; display: block;
} .news-slider .news-title {
position: static;
flex: 0 0 38%; font-size: 0.6em;
line-height: 1.3; height: calc(1.3em * 3 + 8px) !important;
background: rgba(255, 255, 255, 0.95);
padding: 4px 6px;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
} .news-thumb .news-date {
top: auto;
bottom: 4px;
right: 4px;
}
} @media (max-width: 480px) {
.news-swiper .swiper-slide {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
height: auto !important;
}
.news-thumb {
position: relative;
flex: 1 1 50%;
width: 100%;
overflow: hidden;
}
.news-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-slider .news-title {
position: static;
flex: 1 1 50%;
font-size: 0.65em;
line-height: 1.4;
height: calc(1.3em * 2 + 8px) !important;
background: rgba(255, 255, 255, 0.95);
padding: 6px 8px;
margin: 0;
-webkit-line-clamp: 3;
overflow: hidden;
}
.news-thumb .news-new-label {
top: 4px;
left: 4px;
font-size: 0.6em;
padding: 2px 4px;
}
.news-thumb .news-date {
bottom: 4px;
right: 4px;
top: auto;
font-size: 0.6em;
padding: 2px 4px;
}
}