@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&family=Zen+Kaku+Gothic+New&display=swap');

html {
    font-family: "Zen Kaku Gothic New", serif;
    font-style: normal;
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
    text-decoration: none;
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    transition: all 1ms ease 0s;
    background-color: #FFF;
    color: #333;
    font-family: "Zen Kaku Gothic New", serif;
}
*, :before, ::after {
    background-repeat: no-repeat;
    box-sizing: inherit;
}
div {
    margin: 0px;
    padding: 0px;
}
ul {
    list-style-type: none;
}
ol {
    list-style-type: decimal;
    margin-left: 30px;
}
a {
    text-decoration: none;
    color: inherit;
}
img {
    width: 100%;
    vertical-align: top;
}

/* SCROLL */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
}

[data-aos].aos-animate {
    opacity: 1;
    transform: none;
}

::selection {
    background-color: #4b3347;
    color: #fefefe;
}

/* LAYOUT */
.section, .w-700, .w-710, .w-690 {
    width: 100%;
    margin: 0 auto;
}

.section {
    max-width: 750px;
}
.w-700 {
    max-width: 700px;
}
.w-710 {
    max-width: 710px;
}
.w-690 {
    max-width: 690px;
}

/* DISPLAY */
.display {
    display: flex;
    align-items: center;
}
.df {
    display: flex;
}
.ai-e {
    align-items: end;
}
.ai-s {
    align-items: start;
}
.m-0a {
    margin: 0 auto;
}
.jc-c {
    justify-content: center;
}
.jc-sa {
    justify-content: space-around;
}
.jc-sb {
    justify-content: space-between;
}
.jc-e {
    justify-content: end;
}
.jc-s {
    justify-content: start;
}
.fd-col {
    flex-direction: column;
}
.ta-c {
    text-align: center;
}
.ta-s {
    text-align: start;
}
.ta-e {
    text-align: end;
}
.reverse {
    flex-direction: row-reverse;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}

/* FONTS */
.sawarabi {
    font-family: "Sawarabi Mincho", serif;
}

.light {
    color: #EBEEE7;
}
.purple {
    color: #C4A3BF;
}
.red {
    color: #9E1F28;
}
.orange {
    color: #EA6040;
}

.f-12 {
    font-size: 12px;
}
.f-14, .f-14b {
    font-size: 14px;
}
.f-16, .f-16m, .f-16b, .f-16bl {
    /* font-size: clamp(12px, 0.83vw, 16px); */
    font-size: 16px;
}
.f-20, .f-20b {
    /* font-size: clamp(16px, 1.04vw, 20px); */
    font-size: 20px;
}
.f-24, .f-24b {
    /* font-size: clamp(18px, 1.25vw, 24px); */
    font-size: 24px;
}
.f-32 {
    /* font-size: clamp(20px, 1.67vw, 32px); */
    font-size: 32px;
}
.f-42, .f-42b {
    /* font-size: clamp(32px, 2vw, 42px); */
    font-size: 42px;
}
.f-64 {
    /* font-size: clamp(36px, 3.33vw, 64px); */
    font-size: 64px;
}
.f-150 {
    /* font-size: clamp(72px, 6vw, 150px); */
    font-size: 150px;
}

.f-12, .f-16, .f-24, .f-32, .f-42, .f-64 {
    font-weight: 400;
}
.f-16m {
    font-weight: 500;
}
.f-14b, .f-16b, .f-20b, .f-24b, .f-42b {
    font-weight: 700;
}
.f-16bl {
    font-weight: 900;
}

.ls-10 {
    letter-spacing: 0.1em;
}   

/* GAPS */
.g-10 {
    gap: 10px;
}
.g-15 {
    gap: 15px;
}
.g-20 {
    gap: 20px;
}
.g-30 {
    gap: 30px;
}
.g-50 {
    gap: 50px;
}
.g-60 {
    gap: 60px;
}

/* --------------------------------------------------- BACKGROUND PROPERTIES --------------------------------------------------- */

/* BACKGROUND */
.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-between;
}
.bg-left, .bg-right {
    width: calc((100% - 750px) / 2);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bg-left img, .bg-right img {
    /*max-width: 100%;
    max-height: 100%;*/
    object-fit: cover;
    display: block;
    position: fixed;
    top: 0;
    width: calc((100% - 750px) / 2);
    height: 100vh;
    background: no-repeat 50% / cover;
}

/* --------------------------------------------------- PAGE PROPERTIES --------------------------------------------------- */

main {
    position: relative;
    z-index: 1; 
    background-color: #fff;
    width: 750px;
    margin: 0 auto; 
    min-height: 100vh; 
}

/* HEADER */
header {
    height: 115px;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 0 40px;
    position: fixed;
    max-width: 670px;
    width: 100%;
    top: 0;
    z-index: 9999;
}

/* NAV */
nav {
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none;
    z-index: 9997;
}
nav.active {
    display: flex;
}
.nav__content {
    overflow-y: auto;
    max-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-bottom: 30px;
    padding-top: 115px; 
    box-sizing: border-box;
    overflow-y: scroll; 
}
.nav__content::-webkit-scrollbar {
    width: 8px;
}
.nav__content::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 10px;
}
.nav__content::-webkit-scrollbar-thumb {
    background: #91778d;  
    border-radius: 10px;
}
.nav__content::-webkit-scrollbar-thumb:hover {
    background: #443443;
}

.nav__layout {
    width: fit-content;
    /* height: 100vh; */
    gap: 35px;
    margin: 3vh auto 0 auto;
}
.nav__layout li {
    position: relative;
    width: 100%;
}
.nav__layout li::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #333;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.nav__layout li:hover::after {
    transform: scaleX(1); 
}
.nav__layout li a {
    display: inline-block; 
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}
.nav__layout li a:hover {
    transform: translateY(-10px); 
}

.nav__links {
    gap: 10px;
}
.nav__links i {
    color: #C4A3BF;
    font-size: clamp(18px, 1.5vw, 30px);
}

.nav-art {
    max-width: 315.5px;
    height: 315.5px;
    right: 17.25px;
    bottom: 87.35px;
}

/* BURGER MENU */
.burger-menu {
    width: 36px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    cursor: pointer;
    z-index: 9998;
}
.bar1, .bar2, .bar3 {
    height: 5px;
    background-color: #333;
    border-radius: 10px;
    transition: 0.4s;
    position: absolute;
}

.bar1, .bar3 {
    width: 65%;
}
.bar1 {
    top: 0;
    right: 0;
}
.bar2 {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
.bar3 {
    bottom: 0;
    left: 0;
}

.burger-menu.active .bar1 {
    transform: translateY(12px) rotate(45deg);
    width: 100%;
}
.burger-menu.active .bar2 {
    opacity: 0;
}
.burger-menu.active .bar3 {
    transform: translateY(-12px) rotate(-45deg);
    width: 100%;
}

/* LOGO */
.logo-container {
    width: fit-content;
    top: 149px;
    left: 207px;
}
.logo__link img {
    max-width: 50px;
    max-height: 50px;
}

/* CIRCLE TEXT */
.circle {
    position: relative;
    border-radius: 100%;
    animation: rotate-animation 8s infinite linear;
    width: clamp(120px, 30vw, 175px); 
    height: clamp(120px, 30vw, 175px); 
}
.circle span {
    position: absolute;
    transform-origin: top left;
}
@keyframes rotate-animation {
    from { transform: rotate(0); }
    to { transform: rotate(-360deg); }
}
.circle__text {
    width: fit-content;
    position: absolute;
}
.circle__text div {
    font-size: 14px;
}

/*OPACITY FILTERS*/
.logo__link, .nav__links a, .index-sec04__news .item a, .blog__link, .line-links a,
.social-links, .school-desc__layout .text a, .school-course__layout.c3 .desc ul li a,
.news__list .item a {
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.logo__link:hover, .nav__links a:hover, .index-sec04__news .item a:hover,
.blog__link:hover, .line-links a:hover, .social-links a:hover, .school-desc__layout .text a:hover,
.school-course__layout.c3 .desc ul li a:hover, .news__list .item a:hover {
    filter: brightness(1);
    opacity: 0.7;
}

/* --------------------------------------------------- MV PROPERTIES --------------------------------------------------- */

.mv__headline .mv__slick-slider .slick-slide img {
    /* max-width: 522px; */
    width: auto !important;
    max-height: 295px !important;
}

/* TOP */
.mv__top video {
    width: 100%;
    height: 580px;
    object-fit: cover;
}

/* SP */
.mv__sp {
    width: 100%;
    height: auto;
}

/* ERROR */
.mv__error {
    position: relative;
    height: 550px;
}
.mv__error img {
    display: block;
    width: 100%; 
    height: 100%;
    object-fit: cover;
}
.mv__error .title {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --------------------------------------------------- SECTIONS PROPERTIES --------------------------------------------------- */

/* WRAPPER */
.page-wrapper {
    padding: 50px 0;
}

/* BUTTONS */
.btn-more i, .btn-map i, .btn-trim i, .btn-news-prev i, .btn-news-next i,
.btn-blog-list i {
    /* font-size: clamp(10px, 0.6vw, 14px); */
    font-size: 14px;
}
.btn-contact i, .btn-phone i {
    /* font-size: clamp(18px, 1.25vw, 24px); */
    font-size: 24px;
}

.btn-more, .btn-contact, .btn-phone, .btn-map, .btn-trim, .btn-news-prev, 
.btn-news-next, .btn-blog-list {
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.btn-more, .btn-map, .btn-trim, .btn-blog-list {
    width: fit-content;
    gap: 10px;
    line-height: 20px;
}
.btn-more, .btn-map, .btn-trim, .btn-blog-list {
    padding: 10px 50px;
}
.btn-contact, .btn-phone, .btn-news-prev, .btn-news-next {
    padding: 10px 0;
    gap: 20px;
}

.btn-contact, .btn-phone {
    width: 280px;
}
.btn-news-prev, .btn-news-next {
    width: 330px;
}

.btn-more.l, .btn-contact:hover, .btn-phone:hover, .btn-map, .btn-trim, 
.btn-news-prev, .btn-news-next, .btn-blog-list {
    background-color: #EBEEE7;
}
.btn-more.p, .btn-contact, .btn-phone {
    background-color: #C4A3BF;
}

.btn-more:hover, .btn-contact:hover, .btn-phone:hover, .btn-map:hover, .btn-trim:hover,
.btn-news-prev:hover, .btn-news-next:hover, .btn-blog-list:hover {
    transform: translateY(3px);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
}
.btn-more:hover, .btn-map:hover, .btn-trim:hover, .btn-news-prev:hover, .btn-news-next:hover,
.btn-blog-list:hover {
    background-color: #C4A3BF;
}

/* FOOTER */
.footer__content {
    padding-bottom: 10px;
}
.footer__layout {
    width: 100%;
}
.f-banner {
    max-width: 500px;
    height: auto;
    margin: 0 auto;
}
.art-mdog {
    top: 655.16px;
    left: 0;
}
.art-mdog img {
    max-width: 334px;
    max-height: 341px;
}

/* SEC CONTACT */
.sec-contact {
    border-radius: 50px;
    background: #EBEEE7;
    width: 100%;
}
.sec-contact__layout .btn {
    flex-wrap: wrap;
}

/* SEC INFO */
.logo-img {
    max-width: 284px;
    max-height: 24px;
}
.line-links {
    flex-wrap: wrap;
}
.line-links a {
    width: 150px;
}
.line-links a img {
    max-width: 50px;
    max-height: 50px;
}
.social-links a i {
    /* font-size: clamp(18px, 1.5vw, 30px); */
    font-size: 30px;
}

/* QR */
.qr img {
    max-width: 300px;
    height: auto;
}

/* TABLE */
.paw-head img {
    max-width: 30px;
    max-height: 30px;
}

.table-info table {
    max-width: 690px;
    width: 100%;
    margin: 0 auto;
    border-collapse: separate; 
    border-spacing: 0; 
}
.table-info table tr.first {
    padding: 0 0 30px 0;
}
.table-info table tr {
    padding: 30px 0;
    border-bottom: 1px solid #C4A3BF;
}
.table-info table tr th {
    width: 200px;
}
.table-info table tr td {
    width: 440px;
}
.table-info table tr td img {
    max-width: 200px;
    max-height: 200px;
}

/* BULLET LIST */
.bullet-list {
    list-style-type: disc;
    margin-left: 30px;
}

/* --------------------------------------------------- INDEX PROPERTIES --------------------------------------------------- */

.index-sec02__layout, .index-sec04__content, .index-sec06__content,
.index-sec09__layout, .sec-contact__layout {
    padding: 50px 0;
}

.index-sec02__content, .index-sec06__content {
    border-radius: 50px;
    background: rgba(196, 163, 191, 0.10);
}

/* SEC01 */
.index-sec01__layout .head {
    max-height: 200px;
}
.index-sec01__layout .head .sec-title {
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    padding: 0 !important;
}
.index-sec01__layout .head .sec-title .about h5 {
    background-color: #fff;
}
.index-sec01__layout .head .sec-title .about h6 {
    width: 100%;
}

.about-top__slider, .about-bot__slider {
    width: 100%;
    opacity: 0.3;
}
.about-top-slider .slick-slide, .about-bot-slider .slick-slide {
    width: 150px !important;
    margin: 0 5px !important;
}
.about-top-slider .slick-slide img, .about-bot-slider .slick-slide img {
    max-width: 150px;
    max-height: 100px;
    object-fit: cover;
}

.index-sec01__layout .desc p {
    max-width: 400px;
    width: 100%;
}
.index-sec01__layout .desc img {
    max-width: 180.1px;
    max-height: 158.08px;
}

.index-sec01__layout img.main {
    max-width: 580px;
    max-height: 375px;
}
.top-art2 {
    max-width: 128px;
    max-height: 157px;
    right: 104px;
    top: 145px;
}

/* SEC02 */ 
.top-art3 {
    max-width: 99px;
    max-height: 127px;
    left: 87px;
    top: -26px;
}

.index-sec02__layout .desc p {
    max-width: 330px;
}
.index-sec02__layout .desc img {
    max-width: 360px;
    max-height: 300px;
}

/* SEC03 */
.index-sec03__layout .head .title {
    padding: 10px 0;
}
.index-sec03__layout .head img {
    max-width: 50px;
    max-height: 50px;
}
.top-art4 {
    margin-left: 71px;
}
.top-art5 {
    margin-right: 71px;
}

.index-sec03__layout .activities .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: fit-content;
    margin: 0 auto;
}
.index-sec03__layout .activities .list .item {
    max-width: 200px;
}
.index-sec03__layout .activities .list .item img {
    border-radius: 50px 50px 0px 0px;
    max-width: 200px;
    max-height: 200px;
    object-fit: cover;
}

/* SEC04 */ 
.index-sec04 {
    border-radius: 0px 50px 50px 0px;
    background-color: #EBEEE7;
}
.index-sec04__news {
    max-width: 630px;
    width: 100%;
    margin: 0 auto;
}
.index-sec04__news .item a {
    padding-bottom: 60px;
    border-bottom: 1px solid #fff;
}
.index-sec04__news .item a time {
    opacity: 0.5;
}

/* SEC05 */ 
.index-sec05__layout .desc {
    max-width: 310px;
}

.index-sec05__slider {
    max-width: 380px;
}
.sec-menu__slider {
    width: auto;
    overflow: hidden;
}
.sec-menu__slider .slick-slide {
    width: 300px !important;
    margin: 0 5px !important;
}
.sec-menu__item {
    max-width: 300px;
}
.sec-menu__item img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
}

.top-art6 {
    max-width: 247.45px;
    max-height: 265.04px;
    top: 107px;
    left: 154px;
    z-index: -1;
}

/* SEC06 */     
.sec-school__container {
    width: 590px;
}
.sec-school__items .slick-slide {
    width: 590px;
}
.sec-school__items .slick-slide img {
    max-width: 590px;
    max-height: 395px;
    object-fit: cover;
    border-radius: 100px 0px 0px 100px !important; 
}
.sec-school__items .slick-dots {
    display: flex;
    flex-direction: column;
    width: fit-content;
    left: -128px;
    bottom: 39px;
}
.sec-school__items .slick-dots li {
    margin: 5px !important;
}

.sec-school__items .slick-active .dot-active {
    width: fit-content;
    border: 1px solid #333;
    background-color: #333;
}
.sec-school__items .slick-active .dot {
    background-color: #333;
}
.sec-school__items.slider.slick-initialized.slick-slider.slick-dotted {
    margin-bottom: 0 !important;
}

.dot__container {
    gap: 10px;
    display: flex;
    align-items: center;
    width: fit-content;
}
.dot-active {
    border-radius: 50%;
    padding: 5px;
    border: 1px solid transparent;
}
.dot {
    width: 10px;
    height: 10px;
    background-color: #C4C4C4;
    border-radius: 50%;
}
.line {
    width: 155px;
    height: 1px;
    background-color: #333;
}

.dot-number {
    /* font-size: clamp(12px, 0.83vw, 16px); */
    font-size: 16px;
    text-align: right; 
    margin-right: 0; 
}
.number-left {
    flex-direction: row; 
}

.dot-active.page {
    border: 1px solid #333;
}
.dot-active.page .dot {
    background-color: #333;
}

/* SEC07 */
.index-sec07__content {
    padding-bottom: 50px;
    border-bottom: 1px solid #C4A3BF;
}
.top-art7 {
    max-width: 50px;
    max-height: 50px;
    top: 95px;
    right: 15px;
    z-index: 1;
}

/* SEC09 */
.index-sec09__content {
    border-radius: 50px 0px 0px 50px;
    background: #C4A3BF
}

.index-sec09__layout .map {
    width: 690px;
    height: 415px;
}
.index-sec09__layout .map iframe {
    width: 100%;
    height: 100%;
}

.index-sec09__layout .info table {
    max-width: 630px;
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0; 
}
.index-sec09__layout .info table tr {
    margin-bottom: 20px;
}
.index-sec09__layout .info table tr.last {
    margin-bottom: 0;
}
.index-sec09__layout .info table tr th,
.index-sec09__layout .info table tr td {
    width: 200px;
}

.top-art8 {
    max-width: 244px;
    max-height: 343px;
    right: 0;
    bottom: 35px;
}

/* --------------------------------------------------- SHOP PROPERTIES --------------------------------------------------- */

/* MAIN */
.shop-main__content .img {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: fit-content;
    margin: 0 auto;
}
.shop-main__content .img img {
    max-width: 215px;
    max-height: 200px;
}
.shop-imgr {
    display: none;
}

/* CAT */
.shop-cat__content {
    padding-bottom: 50px;
    border-bottom: 1px solid #C4A3BF;
}

.shop-cat__layout .map {
    width: 100%;
    height: 416px;
}
.shop-cat__layout .map iframe {
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------- GREETING PROPERTIES --------------------------------------------------- */

/* MAIN */
.greet-main__content .img img {
    max-width: 690px;
    max-height: 350px;
    margin: 0 auto;
}
.greet-main__content .own img {
    max-width: 360px;
    max-height: 350px;
}

.greet-main__content .sub p {
    max-width: 330px;
}
.greet-main__content .sub img {
    max-width: 360px;
    max-height: 300px;
}

.greet-main__content .own .desc {
    max-width: 360px;
}

/* --------------------------------------------------- TRIMMING PROPERTIES --------------------------------------------------- */

.trim-sec02__layout, .trim-sec03__layout {
    padding-bottom: 50px;
    border-bottom: 1px solid #C4A3BF;
}

/* SEC01 */
.trim-sec01__layout .main img {
    max-width: 345px;
    max-height: 300px;
}
.trim-sec01__layout .main .desc {
    max-width: 345px;
}

/* --------------------------------------------------- TRIMMING MENU PROPERTIES --------------------------------------------------- */

/* SEC01 */
.trimenu-sec01__layout .text {
    max-width: 345px;
}
.trimenu-sec01__layout .img img {
    max-width: 345px;
    max-height: 300px;
}

/* SEC03 */
.trimenu-sec03__layout .table .table__container {
    max-width: 690px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap; 
}

.trimenu-sec03__layout .table .table__container::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
.trimenu-sec03__layout .table .table__container::-webkit-scrollbar {
    height: 8px;
}
.trimenu-sec03__layout .table .table__container::-webkit-scrollbar-thumb {
    background: #91778d;  
    border-radius: 4px; 
}
.trimenu-sec03__layout .table .table__container::-webkit-scrollbar-thumb:hover {
    background: #443443;
}

.trimenu-sec03__layout .table .table__container table {
    border-collapse: collapse; 
    width: 100%;
}
.trimenu-sec03__layout .table .table__container table th,
.trimenu-sec03__layout .table .table__container table td {
    border: 1px solid #B7B7B7; 
    padding: 10px;
    width: 170px;
    text-wrap: wrap;
}
.trimenu-sec03__layout .table .table__container table td {
    display: flex;
    justify-content: center;
    align-items: center;
}
.trimenu-sec03__layout .table .table__container table th {
    gap: 10px;
    height: 116px;
    background: rgba(196, 163, 191, 0.30);
}

/* SEC04 */
.trimenu-sec04__layout .item .single-img {
    max-width: 690px;
    height: auto;
}
.trimenu-sec04__layout .item .col .col-img {
    max-width: 250px;
    height: auto;
}

/* SEC05 & SEC07 */
.trimenu-sec05__layout .table table,
.trimenu-sec07__layout .table table {
    border-collapse: collapse; 
    width: 100%;
}
.trimenu-sec05__layout .table table tr.first,
.trimenu-sec07__layout .table table tr.first {
    padding: 0 0 30px 0;
}
.trimenu-sec05__layout .table table tr,
.trimenu-sec07__layout .table table tr {
    padding: 30px 0;
    border-bottom: 1px solid #C4A3BF;
}
.trimenu-sec05__layout .table table th,
.trimenu-sec07__layout .table table th {
    width: 400px;
}
.trimenu-sec05__layout .table table td,
.trimenu-sec07__layout .table table td {
    width: 260px;
}

/* SEC07 */
.trimenu-sec07__layout .col-text .col {
    max-width: 330px;
}

/* --------------------------------------------------- VOLUNTEER PROPERTIES --------------------------------------------------- */

/* MAIN */
.volunteer-main__layout .img1 img {
    max-width: 690px;
    max-height: 500px;
}
.volunteer-main__layout .img2 img {
    max-width: 600px;
    max-height: 400px;
}

/* GALLERY */
.volunteer-gallery__layout .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: fit-content;
}
.volunteer-gallery__layout .gallery img {
    max-width: 320px;
    max-height: 215px;
    margin: 0 auto;
}

/* --------------------------------------------------- SCHOOL PROPERTIES --------------------------------------------------- */

/* MAIN */
.school-main__layout .img img {
    max-width: 690px;
    max-height: 460px;
}

/* CAT */
.school-cat__content .layout img {
    max-width: 345px;
    max-height: 300px;
}
.school-cat__content .layout .desc {
    max-width: 345px;
}

/* CURRICULUM */
.school-cur__layout .info table {
    border-collapse: collapse; 
    width: 100%;
}
.school-cur__layout .info table tr.first {
    padding: 0 0 30px 0;
}
.school-cur__layout .info table tr{
    padding: 30px 0;
    border-bottom: 1px solid #C4A3BF;
}
.school-cur__layout .info table th {
    width: 200px;
}
.school-cur__layout .info table td {
    width: 460px;
}
.school-cur__layout .info table td ul {
    list-style-type: disc;
}

/* COURSE */
.school-course__layout.c2 .desc div p {
    margin-left: 10px;
}
.school-course__layout.c2 .img2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
}
.school-course__layout.c2 .img2 img {
    max-width: 320px;
    max-height: 200px;
}

.school-course__layout.c3 .desc ul li,
.school-course__layout.c4 .desc ul li {
    padding: 30px 0;
    border-bottom: 1px solid #C4A3BF;
}
.school-course__layout.c3 .desc ul li.first,
.school-course__layout.c4 .desc ul li.first {
    padding: 0 0 30px 0;
}
.school-course__layout.c3 li .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: fit-content;
}

/* --------------------------------------------------- STAFF PROPERTIES --------------------------------------------------- */

.staff__list .profile {
    border-radius: 50px;
    background: rgba(196, 163, 191, 0.30);
}
.staff__list .profile .content {
    padding: 30px;
}
.staff__list .profile .content img {
    max-width: 300px;
    max-height: 400px;
}
.staff__list .profile .content .desc {
    max-width: 300px;
}

/* --------------------------------------------------- NEWS + BLOG PROPERTIES --------------------------------------------------- */

/* NEWS */
.news__list .item {
    padding-bottom: 60px;
    border-bottom: 1px solid #C4A3BF;
}
.news__list .item a time, .news__detail .title time {
    opacity: 0.5;
}

.news-detail__layout .btn {
    flex-wrap: wrap;
}

/* BLOG */
.blog__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: fit-content;
    margin: 0 auto;
}
.blog__list .item {
    max-width: 210px;
}
.blog__link img {
    max-width: 210px;
    max-height: 220px;
    object-fit: cover;
}

.blog-detail__layout .img img {
    border-radius: 50px;
    width: 100%;
    height: auto;
}

/* PAGINATION */
.pagination {
    /* margin: 20px auto; */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.page-numbers {
    display: inline-block;
    margin: 0 1vw;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    color: #333;
    transition: background-color 0.3s, border 0.3s ease;
    /* font-size: clamp(14px, 0.83vw, 16px); */
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", serif;
}

.page-numbers:not(.arrow):hover, 
.page-numbers:not(.arrow).current {
    background-color: #C4A3BF;
    color: #fff;
}

/* ----------------------------------------------- RESPONSIVE PROPERTIES ------------------------------------------------ */

/* LARGE SCREEN */
@media screen and (max-width: 1600px) {

    /* BG */
    .logo-container {
        left: 8vw;
        top: 6vw;
    }
    .bg-left, .bg-right {
        align-items: start;
    }
}

/* MEDIUM SCREEN */
@media screen and (max-width: 1200px) {

    /* BG */
    .bg,
    .logo-container {
        display: none;
    }

}

/* TABLET SCREEN */
@media screen and (max-width: 790px) {

    header {
        height: 85px;
    }
    main, .section {
        max-width: 100%;
        width: 100%;
    }

    .w-690, .w-710,
    .f-banner,
    .mv__headline,
    .index-sec01__layout .desc,
    .index-sec03__layout,
    .index-sec06__layout .desc,
    .index-sec07__content,
    .index-sec08__content,
    .index-sec09__layout,
    .greet-main__content .sub,
    .greet-main__content .own,
    .greet-info__content,
    .trim-sec01__layout .main,
    .trim-sec01__layout .btn,
    .trimenu-sec01__layout,
    .volunteer-gallery__layout,
    .school-cat__content {
        width: 90%;
        margin: 0 auto;
    }

    .nav__content {
        padding-top: 85px;
    }

    /* MV */
    .mv__headline .mv__slick-slider .slick-slide img {
        max-height: 30vh !important;
    }

    /* TABLE INFO */
    .table-info table tr th,
    .school-cur__layout .info table th {
        max-width: 200px;
    }
    .table-info table tr th {
        width: 23vw;
    }
    .school-cur__layout .info table th {
        width: 28vw;
    }
    .table-info table tr td,
    .school-cur__layout .info table td {
        max-width: 440px;
        width: 55vw;
    }

    /* ========== INDEX =========== */
    .index-sec01__layout .desc {
        flex-wrap: wrap;
    }
    .index-sec01__layout img.main {
        width: 90%;
    }
    .top-art2 {
        right: 14vw;
    }
    .index-sec02__layout .desc,
    .greet-main__content .sub,
    .trim-sec01__layout,
    .trimenu-sec01__layout {
        flex-direction: column-reverse;
    }
    .index-sec05__layout {
        flex-wrap: wrap;
        justify-content: center;
    }
    .sec-school__container {
        max-width: 590px;
        width: 80vw;
    }
    .line {
        max-width: 155px;
        width: 20vw;
    }
    .sec-school__items .slick-dots {
        left: -17vw;
    }
    .sec-school__items .slick-slide img {
        border-radius: 10vw 0 0 10vw !important;
    }
    .top-art7 {
        right: 0;
    }

    .index-sec09__layout .map,
    .index-sec09__layout .info,
    .trimenu-sec05__layout .table,
    .trimenu-sec05__layout .table table {
        width: 100%;
    }
    .index-sec09__layout .info table {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    /* ========== SHOP =========== */
    .shop-main__content .img {
        grid-template-columns: repeat(2, 1fr);
    }
    .shop-imgr {
        display: flex;
    }

    /* ========== GREETINGS =========== */
    .greet-main__content .own {
        flex-direction: column;
    }

    .greet-main__content .sub p,
    .greet-main__content .own .desc,
    .trim-sec01__layout .main .desc,
    .trimenu-sec01__layout .text,
    .school-cat__content .layout .desc,
    .trimenu-sec07__layout .col-text .col,
    .staff__list .profile .content .desc .head {
        max-width: 100%;
        text-align: center;
    }

    /* ========== SCHOOL =========== */
    .school-cat__content .layout {
        flex-direction: column;
    }

    /* ========== TRIMMING =========== */
    .trim-sec01__layout .main,
    .trim-sec01__layout .btn {
        flex-direction: column-reverse;
    }

    /* ========== TRIMMING MENU =========== */
    .trimenu-sec04__layout .item .col {
        flex-direction: column;
    }

    .trimenu-sec04__layout .item .col .col-img {
        margin: 0 auto;
    }

    .trimenu-sec05__layout .table table th,
    .trimenu-sec07__layout .table table th {
        max-width: 400px;
        width: 100%;
    }

    .trimenu-sec07__layout .col-text {
        flex-direction: column;
    }

    /* ========== STAFF =========== */
    .staff__list .profile .content {
        flex-direction: column;
    }

    .staff__list .profile .content .desc {
        max-width: 100%;
    }
}

@media screen and (max-width: 700px) {

    .top-art2, .top-art3 {
        display: none;
    }
}

/* MOBILE SCREEN */
@media screen and (max-width: 500px) {

    header,
    .nav__layout,
    .nav__links,
    .w-700,
    .w-710,
    .w-690,
    .sec-contact__layout,
    .sec-info,
    .index-sec02__layout,
    .index-sec04__news,
    .index-sec05__layout {
        width: 90%;
    }

    .sec-contact__layout,
    .sec-info,
    .index-sec02__layout,
    .index-sec04__news,
    .index-sec05__layout,
    .nav__links {
        margin: 0 auto;
    }

    .index-sec01__layout,
    .index-sec02__layout,
    .index-sec05__layout,
    .trim-sec02__layout h6,
    .trim-sec02__layout p,
    .trim-sec03__layout .desc h6 {
        text-align: center;
    }

    header {
        padding: 0 20px;
    }

    /* NAV */
    .nav__content {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* GAPS */
    .g-50,
    .g-60 {
        gap: 30px;
    }

    /* MV */
    .mv__headline .mv__slick-slider .slick-slide img {
        max-height: 25vh !important;
    }

    /* BUTTONS */
    .btn-contact,
    .btn-phone {
        max-width: 280px;
        width: 80vw;
    }

    .btn-trim {
        padding: 10px 7vw;
    }

    .btn-news-prev,
    .btn-news-next {
        max-width: 330px;
        width: 70vw;
    }

    /* QR */
    .qr img {
        width: 80%;
    }

    /* TABLE INFO */
    .table-info table tr,
    .school-cur__layout .info table tr,
    .trimenu-sec05__layout .table table tr,
    .trimenu-sec07__layout .table table tr,
    .index-sec09__layout .info table tr {
        flex-direction: column;
        gap: 10px;
        align-items: start;
    }

    .table-info table tr td,
    .trimenu-sec05__layout .table table td,
    .trimenu-sec07__layout .table table td,
    .school-cur__layout .info table td,
    .index-sec09__layout .info table tr td {
        width: -webkit-fill-available;
        max-width: 100%;
        margin-left: 40px;
        text-align: start;
    }

    .table-info table tr th,
    .school-cur__layout .info table th,
    .index-sec09__layout .info table tr th {
        width: -webkit-fill-available;
        max-width: 100%;
    }

    /* ========== INDEX =========== */
    .index-sec01__layout .desc img,
    .top-art2,
    .top-art7 {
        display: none;
    }

    .index-sec02__layout .desc p,
    .index-sec05__layout .desc {
        max-width: 100%;
    }

    .top-art4,
    .top-art5 {
        margin: 0;
    }

    .index-sec03__layout .activities .list,
    .volunteer-gallery__layout .gallery,
    .blog__list,
    .school-course__layout.c2 .img2,
    .school-course__layout.c3 li .gallery {
        grid-template-columns: repeat(1, 1fr);
    }

    .index-sec04__news .item a {
        padding-bottom: 30px;
    }

    .index-sec09__layout .info table {
        justify-content: start;
        width: 80%;
    }

    /* ========== TRIMMING MENU =========== */
    .contact__layout .qr-layout,
    .trimenu-sec02__layout .qr-layout {
        flex-direction: column;
    }

    .contact__layout .qr-layout .qr img,
    .trimenu-sec02__layout .qr-layout .qr img {
        width: 60%;
    }

    /* ========== BLOG =========== */
    .blog__link {
        gap: 20px;
    }

    .blog__link .desc {
        gap: 0;
    }
}

/* MODIFICATION 2025.06.24*/
.logo {
  pointer-events: auto !important;
}
.logo__link {
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}