@charset "utf-8";

/*
  File Name   : top.css
  Description : Write top content styles
*/

/* kv-wrap
============================================================ */
#home .kv-wrap {
    /*
  position: relative;
  z-index: 1;
*/
    width: 100%;
    margin: 0 auto;
}

#home .kv-wrap .kv-inner {
    /*
  position: relative;
  z-index: 2;
*/
    width: 100%;
}

#home .kv-wrap .kv-inner .kv-area {
    /*
  overflow: hidden;
  position: relative;
  z-index: 1;
*/
    width: 100%;
    opacity: 0;
}

#home .kv-wrap .kv-inner .kv-item {
    vertical-align: top;
}

#home .kv-wrap .kv-inner .kv-item:nth-child(n+2) {
    display: none;
}

#home .kv-wrap .kv-inner .slick-initialized .kv-item {
    display: inline-block;
}

#home .kv-wrap .kv-inner .kv-item .kv-item-img {
    overflow: hidden;
    text-indent: -9999px;
    height: 700px;
    background: no-repeat center center;
    background-size: cover;
}

#home .kv-wrap .kv-inner .kv-item .sp-img {
    display: none;
}

#home .kv-wrap .kv-inner .slick-list {
    overflow: hidden;
    width: 100%;
    height: auto;
    padding: 0;
}

.kv-anime {
    position: relative;
    text-align: center;
    overflow: hidden;
}

@media screen and (max-width: 830px) {
    .kv-anime {
        height: 800px;
    }
}



@media screen and (max-width: 810px) {
    .kv-anime {
        height: 770px;
    }
}

@media screen and (max-width: 540px) {
    .kv-anime {
        height: 680px;
    }
}

@media screen and (max-width: 480px) {
    .kv-anime {
        height: 710px;
    }
}


.kv-anime img {}

.kv-anime-img-wrap {
    position: relative;
    padding-bottom: 80px;
}

img.kv-bg-anime {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

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

    .kv-anime-img-wrap {
        padding-bottom: 100px;
    }

}

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

    .kv-anime-img-wrap {
        padding-bottom: 120px;
    }

}

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

    .kv-anime-img-wrap {
        padding-bottom: 80px;
    }

}


@media screen and (max-width: 510px) {
    img.kv-bg-anime {
        width: 150%;
        max-width: none;
    }
}

img.kv-bg-anime {
    animation: scale 13s infinite ease;
}

@keyframes scale {
    0% {
        transform: scale(0.8);
    }


    50% {
        transform: scale(1);
    }


    100% {
        transform: scale(0.8);
    }
}


.kv-main {
    position: absolute;
    top: 60px;
    width: 100%;
    text-align: center;
}


.kv-main .com-btn-list {
    margin: 2.5em 0 -20px;
}


.kv-main h1 {
    text-align: center;
}



.kv-main h1 img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

@media screen and (max-width: 540px) {
    .kv-main h1 img {
        max-width: 300px;
    }
}


@media screen and (max-width: 540px) {
    .kv-main h1 img {
        max-width: 240px;
    }
}


p.kv-copy {
    text-align: center;
    font-size: 170%;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-style: normal;
    color: #3e598b;
    letter-spacing: 5px;
    margin-top: 30px;
    margin-bottom: 50px;
}



@media screen and (max-width: 850px) {
    p.kv-copy {
        font-size: 140%;
        letter-spacing: 3px;
        margin-bottom: 30px;
    }
}


@media screen and (max-width: 540px) {
    p.kv-copy {
        font-size: 120%;
        letter-spacing: 2px;
    }
}


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


    p.kv-copy {
        font-size: 130%;
        line-height: 220%;
        margin-top: 20px;
    }

    p.kv-copy span {
        display: block;
    }
}


.main-img {
    text-align: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}



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


    .main-img {
        max-width: 400px;
    }
}

@media screen and (max-width: 1010px) {
    .main-img {
        max-width: 350px;
    }
}

@media screen and (max-width: 950px) {
    .main-img {
        max-width: 250px;
    }
}

@media screen and (max-width: 480px) {
    .main-img {
        max-width: 180px;
    }
}

.main-img img {
    width: 100%;
}




.kv-main h1,
.main-img,
.kv-copy {
    animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeup {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* sp
------------------------------------------------------------ */
@media screen and (max-width: 811px) {
    #home .kv-wrap .kv-inner .kv-item .kv-item-img {
        min-height: 500px;
        height: calc(100vh - 60px);
        max-height: 790px;
    }

    #home .kv-wrap .kv-inner .kv-item .pc-img {
        display: none;
    }

    #home .kv-wrap .kv-inner .kv-item .sp-img {
        display: block;
    }
}

@media screen and (max-width: 481px) {
    #home .kv-wrap .kv-inner .kv-item .kv-item-img {
        min-height: inherit;
        height: 370px;
        max-height: inherit;
    }
}

/* kv loading
============================================================ */
#home .kv-loading {
    position: absolute;
    z-index: 0;
    top: calc(50% - 40px - 30px);
    left: calc(50% - 40px);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#home .kv-loading::after {
    content: "";
    position: absolute;
    z-index: -1;
    overflow: hidden;
    width: 80px;
    height: 80px;
    border-top: 4px solid rgba(0, 0, 0, .1);
    border-right: 4px solid rgba(0, 0, 0, .1);
    border-bottom: 4px solid rgba(0, 0, 0, .1);
    border-left: 4px solid #333;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load-animation 1.1s infinite linear;
    animation: load-animation 1.1s infinite linear;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 811px) {
    #home .kv-loading {
        top: calc(50% - 35px);
        left: calc(50% - 35px);
    }

    #home .kv-loading::after {
        width: 70px;
        height: 70px;
    }
}

@-webkit-keyframes load-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* h2
------------------------------------------------------------ */

.title-wrap {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

h2.title {
    font-family: "Shippori Mincho B1", serif;
    font-size: 260%;
    font-weight: 100;
    font-style: normal;
    letter-spacing: -1px;
    margin-right: 20px;
}

.sub-h2 {
    font-weight: bold;
    position: relative;
}

.sub-h2 span {
    display: flex;
    align-items: center;
    color: #333;
    font-size: 18px;
    text-transform: uppercase;
}

.sub-h2 span::before {
    content: '';
    display: inline-block;
    margin-right: 20px;
    width: 40px;
    height: 1px;
    background-color: #666;
}


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

    .title-wrap {
        display: block;
    }


    h2.title {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .sub-h2 span {
        font-size: 15px;
    }

}



@media screen and (max-width: 430px) {
    h2.title {
        font-size: 200%;
    }

    .sub-h2 span {
        font-size: 12px;
    }

}



/* top-inner
------------------------------------------------------------ */

.top-inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 40px;
}


@media screen and (max-width: 570px) {
    .top-inner {
        padding: 50px 30px;
    }
}

@media screen and (max-width: 530px) {
    .top-inner {
        padding: 50px 15px;
    }
}

/* top-column
------------------------------------------------------------ */

.top-column {
    background-color: rgba(255, 255, 255, 0.7);
}



.top-column-header {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

ul.top-column-header-catTab {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 25px;
}

ul.top-column-header-catTab li {}



ul.top-column-header-catTab li a {
    text-decoration: none;
    color: #666;
    background-color: transparent;
    border-radius: 50px;
    font-weight: bold;
    border: 1px solid #666666;
    font-size: 70%;
    padding: 4px 10px;
    width: auto;
    margin: 0 4px;
    display: block;
    transition: all 0.2s ease-in-out;
}

ul.top-column-header-catTab li a:hover {
    background-color: #41a592;
    transition: all 0.2s ease-in-out;
    color: #fff;
}


ul.top-column-header-catTab li a.active {
    color: #fff;
    background-color: #3e598b;
    border: 1px solid #666666;
}

ul.top-column-header-catTab li a.active:hover {
    background-color: #41a592;
    transition: all 0.2s ease-in-out;
    color: #fff;
}


.news-wrap ul {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    margin-top: 10px;
    justify-content: flex-start;
}

.news-wrap ul li {
    width: 47%;
    margin: 1.5% 1.5% 4.5% 1.5%;
    border-radius: 30px;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.news-wrap ul li .thumb {}

.news-wrap ul li .thumb img {
    width: 100%;
    height: 15em;
    font-family: 'object-fit: cover;';
    display: block;
    object-position: center center;
    object-fit: cover;
    box-shadow: 0 0 15px #bcbcbc;
}


.list-category-mark {
    width: auto;
    text-align: center;
    padding: 2px 12px;
    border-radius: 50px;
    font-size: 75%;
    display: inline-block;
    background-color: #dceae8;
}

.news-wrap ul li .date {
    display: inline-block;
    margin: 25px 0 0px 0;
    color: #41a592;
    font-weight: bold;
    margin-right: 10px;
}

.news-wrap ul li .title {
    font-weight: bold;
    display: block;
    margin-top: 10px;

}

.news-wrap ul li .title a {
    color: #333;
    font-size: 120%;
}

.news-wrap ul li span.new {
    color: #fb8663;
    display: inline-block;
    font-size: 85%;
    margin-left: 7px;
}

.more {
    text-align: right;
    margin-top: 20px;
}

.more-link {
}

.more-link a {
    position: relative;
    text-decoration: none;
    padding: 0 1.5em 0 0;
}

.more-link a::after {
    content: "";
    position: absolute;
    display: block;
    width: 1.0em;
    height: 100%;
    top: 0;
    right: 0;
    background: url(../images/arrow_g.png) no-repeat right center / contain;
    transition: right 0.2s ease;
}

.more-link a:hover {
    opacity: 1 !important;
}

.more-link a:hover::after {
    right: -0.5em;
}


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


    ul.top-column-header-catTab li {
        width: 33.3%;
        margin-bottom: 12px;

    }


    .news-wrap ul li {
        width: 46%;
        margin: 0 2% 40px 2%;
    }

    .news-wrap ul li .thumb img {
        height: 12em;
        box-shadow: 0 0 10px #bcbcbc;
    }

}


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

    .news-wrap ul li .date {
        display: block;
    }

    .news-wrap ul li .title {
        margin-top: 5px;
    }

    .list-category-mark {
        margin-top: 5px;
    }

    ul.top-column-header-catTab {
        justify-content: center;
    }


    ul.top-column-header-catTab li {
        margin: 1%;
        width: 31.3%;
    }

    ul.top-column-header-catTab li a {
        width: 100%;
        margin: 0;
    }

}


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

    .news-wrap ul li .thumb img {
        height: 10em;
    }

}


@media screen and (max-width: 460px) {
    ul.top-column-header-catTab li {
        width: 48%;
    }


    ul.top-column-header-catTab li a {
        font-size: 85%;
    }

    .title-wrap {
        margin-bottom: 20px;
    }

}


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

    .news-wrap ul li .thumb img {
        height: 8em;
    }

    .list-category-mark {
        /*    width: 65px;*/
        font-size: 70%;
    }

    .news-wrap ul li .title {
        margin-top: 5px;
    }

    .news-wrap ul li .date {
        margin: 15px 0 0px 0;
        margin-right: 5px;
    }

    .more {
        text-align: right;
        margin-top: 0;
    }

    /* .more-link a {
        font-size: 80%;
    } */

}


@media screen and (max-width: 430px) {
    .news-wrap ul li {
        width: 100%;
    }

    .news-wrap ul li .thumb img {
        height: 15em;
    }

    .news-wrap ul li .date {
        display: inline-block;
        margin: 20px 5px 0px 0;
    }

    .news-wrap ul li .title {
        margin-top: 10px;
    }



}



@media screen and (max-width: 400px) {
    .news-wrap ul {
        font-size: 90%;
    }
}

@media screen and (max-width: 380px) {
    ul.top-column-header-catTab li a {
        font-size: 60%;
    }
}

/* NEWS
============================================================ */
.top-news {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    background: url(../images/home/news_bg.jpg) no-repeat center / cover;
    padding: 70px 40px;
}

@media screen and (max-width: 1024px) {
    .top-news {
        padding: 60px 20px;
    }
}

@media screen and (max-width: 530px) {
    .top-news {
        padding: 50px 20px;
    }
}

.top-news::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #F4FAFC;
    pointer-events: none;
    backdrop-filter: blur(2px);
    --webkit-backdrop-filter: blur(2px);
    background-color: rgba(255, 255, 255, 0.4)
}

.top-newsInner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
    padding: 50px 20px;
    background: rgba(255,255,255,0.85);
    z-index: 1;
}
@media screen and (max-width: 1024px) {
    .top-newsInner {
        padding: 40px 20px;
    }
}

.top-news .top-news-contents {
    width: 100%;
    max-width: 750px;
}

.top-news .com-info-list {
    width: 100%;
}

.top-news .com-info-list>ul>li:first-child {
    border-top: none;
}

.top-news .com-info-list>ul>li>a {
    flex-wrap: nowrap;
    padding: 1.1em 0.5em;
}
@media screen and (max-width: 530px) {
    .top-news .com-info-list>ul>li>a {
        flex-wrap: wrap;
    }
}

.top-news .com-info-list>ul>li>a .date {
    flex-shrink: 0;
}

.top-news .com-info-list>ul>li>a .title {
    width: 100%;
}

.top-news .top-news-moreBtn {
    width: fit-content;
    margin: 40px 0 0 auto;
}
@media screen and (max-width: 1024px) {
    .top-news .top-news-moreBtn {
        margin-top: 30px;
    }
}

/* hover時Style */
.top-news .com-info-list>ul>li>a:hover {
    background-color: rgba(65, 165, 146, 0.08);
}

/* レコード0件時メッセージ */
.top-news .no-content {
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    opacity: 0.8;
}

/* SECTION GROUP 1 (LECTURE,CALENDAR)
============================================================ */
.top-sectionGroup__01 {
    background-color: #E7F2F4;
}

.top-sectionGroup__01Inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 3%;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 90px 40px;
}

@media screen and (max-width: 1024px) {
    .top-sectionGroup__01Inner {
        grid-template-columns: 100%;
        gap: 50px 0;
        padding: 80px 40px;
    }
}

@media screen and (max-width: 530px) {
    .top-sectionGroup__01Inner {
        padding: 50px 15px;
    }
}

/* LECTURE
============================================================ */
.top-lecture {}

.top-lecture .com-info-list>ul>li:first-child {
    border-top: none;
}

.top-lecture .com-info-list>ul>li>a {
    flex-wrap: wrap;
    padding: 1.1em 0.5em;
}

.top-lecture .com-info-list>ul>li>a .title {
    width: 100%;
}

.top-lecture .top-lecture-moreBtn {
    width: fit-content;
    margin: 40px 0 0 auto;
}
@media screen and (max-width: 1024px) {
    .top-lecture .top-lecture-moreBtn {
        margin-top: 30px;
    }
}

/* hover時Style */
.top-lecture .com-info-list>ul>li>a:hover {
    background-color: rgba(255,255,255,0.5);
}

/* レコード0件時メッセージ */
.top-lecture .no-content {
    font-size: 1.1rem;
    font-weight: 500;
    text-align: left;
    opacity: 0.8;
}

/* CALENDAR
============================================================ */
.top-calendar {}


.top-calendar .top-calendar-calendar {
    padding: 40px 20px 30px;
    background-color: #fff;
}

@media screen and (max-width: 599px) {
    .top-calendar .top-calendar-calendar {
        padding: 30px 20px 20px;
    }
}

.top-calendar .top-calendar-calendar .com-mini-schedule {}

.top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    align-content: center;
    gap: 0 1.0rem;
    width: 100%;
}

@media screen and (max-width: 599px) {
    .top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav {
        grid-template-columns: 30px 1fr 30px;
    }
}

.top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav .present {
    grid-column: 2;
    display: block;
    color: #41a592;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.0em;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    text-align: center;
}

@media screen and (max-width: 599px) {
    .top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav .present {
        font-size: 19px;
    }
}

.top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav .prev-month,
.top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav .next-month {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2/1;
    background-color: #41a592;
    overflow: hidden;
    cursor: pointer;
}

.top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav .prev-month::before,
.top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav .next-month::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 70%;
    top: 50%;
    right: 50%;
    background: url(../images/common/arrow_calendar.svg) no-repeat center / contain;
    transform: translate(50%, -50%);
}

.top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav .prev-month {
    grid-column: 1;
}

.top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav .prev-month::before {
    transform: translate(50%, -50%) scale(-1, 1);
}

.top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav .next-month {
    grid-column: 3;
}

.top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav .prev-month .pre,
.top-calendar .top-calendar-calendar .com-mini-schedule .calendar-nav .next-month .next {
    opacity: 0;
    display: block;
    width: 100%;
}

.top-calendar .top-calendar-calendar .mini-calendar {
    width: 100%;
    font-size: 18px;
    line-height: 1.0em;
    margin: 1.0em 0 0;
}

@media screen and (max-width: 599px) {
    .top-calendar .top-calendar-calendar .mini-calendar {
        font-size: 14px;
    }
}

.top-calendar .top-calendar-calendar .mini-calendar>thead {
    border-bottom: 1px solid #41a592;
}

.top-calendar .top-calendar-calendar .mini-calendar>thead>tr {}

.top-calendar .top-calendar-calendar .mini-calendar>thead>tr>th {
    text-align: center;
    vertical-align: middle;
    padding: 1.0em 0.25em;
}

.top-calendar .top-calendar-calendar .mini-calendar>tbody {}

.top-calendar .top-calendar-calendar .mini-calendar>tbody>tr {}

.top-calendar .top-calendar-calendar .mini-calendar>tbody>tr>td {
    padding: 0.8em 0.25em 0;
}

.top-calendar .top-calendar-calendar .mini-calendar>tbody>tr>td>span {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 2.5em;
}

.top-calendar .top-calendar-calendar .mini-calendar>tbody>tr>td>span.today {
    background-color: #E7F2F4;
    border-radius: 0.25em;
}

.top-calendar .top-calendar-calendar .mini-calendar>tbody>tr>td>span>a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.top-calendar .top-calendar-calendar .mini-calendar>tbody>tr>td>span:has(a) {
    position: relative;
}

.top-calendar .top-calendar-calendar .mini-calendar>tbody>tr>td>span:has(a)::before {
    content: "";
    position: absolute;
    display: block;
    width: 2.0em;
    height: auto;
    aspect-ratio: 1 / 1;
    top: calc(50% + 0.06em);
    right: 50%;
    transform: translate(50%, -50%);
    background-color: #41a592;
    border: 1px solid #41a592;
    border-radius: 50%;
    pointer-events: none;
    transition: background-color 0.2s ease-in-out;
    z-index: 0;
}

.top-calendar .top-calendar-calendar .mini-calendar>tbody>tr>td>span:hover::before {
    background-color: #fff;
}

.top-calendar .top-calendar-calendar .mini-calendar>tbody>tr>td>span:hover>a {
    opacity: 1;
    color: #41a592;
}

/* 曜日の色 */
.top-calendar .top-calendar-calendar .mini-calendar>thead>tr>th.sunday,
.top-calendar .top-calendar-calendar .mini-calendar>tbody>tr>td:first-child {
    color: #F2866D;
}

.top-calendar .top-calendar-calendar .mini-calendar>thead>tr>th.saturday,
.top-calendar .top-calendar-calendar .mini-calendar>tbody>tr>td:last-child {
    color: #3E598B;
}

/* moreBtn */
.top-calendar .top-calendar-moreBtn {
    width: fit-content;
    margin: 40px 0 0 auto;
}
@media screen and (max-width: 1024px) {
    .top-calendar .top-calendar-moreBtn {
        margin-top: 30px;
    }
}

/* material-area
------------------------------------------------------------ */

.material-area {
    background-image: url(../images/mt-bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

ul.mt-list {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    margin-top: 10px;
    justify-content: center;
}

ul.mt-list li {
    width: 47%;
    margin: 1.5% 1.5% 0 1.5%;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 15px #bcbcbc;
    background-color: #fff;
    text-align: center;
}

ul.mt-list li a {
    text-decoration: none;
    font-weight: bold;
    font-size: 150%;
    padding: 120px 20px 50px 20px;
    display: block;
}


ul.mt-list li.or {}

ul.mt-list li.or a {
    color: #f2866d;
    background-image: url(../images/icon01.png), url(../images/arrow_w.png);
    background-repeat: no-repeat, no-repeat;
    background-position: center top 35px, right bottom;
    background-size: 70px, 20px;
}


ul.mt-list li.bl {}

ul.mt-list li.bl a {
    color: #5b79a8;
    background-image: url(../images/icon02.png), url(../images/arrow_w.png);
    background-repeat: no-repeat, no-repeat;
    background-position: center top 35px, right bottom;
    background-size: 70px, 20px;
}


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

    ul.mt-list li a {
        font-size: 130%;
        padding: 120px 20px 30px 20px;
    }
}



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

    ul.mt-list li {
        width: 100%;
        margin: 0 10px 30px 10px;
    }


    ul.mt-list li:last-child {
        margin-bottom: 0;
    }

}


/* donation-area
------------------------------------------------------------ */

.donation-area {}

.dn-contents {
    padding: 0 10px;
    margin: 50px 0 0 0;
    line-height: 250%;
}

.dn-contents h2 {
    color: #41a592;
    font-size: 140%;
    margin-bottom: 40px;
    line-height: 170%;
}


.dn-contents p {
    margin-bottom: 1em;
}



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

    .dn-contents {
        margin: 40px 0 0 0;
        font-size: 80%;
        line-height: 200%;
    }


    .dn-contents h2 {
        margin-bottom: 20px;
    }

}



/* contact-area
------------------------------------------------------------ */

.contact-area {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 10px;
    background-image: url(../images/bg-contact.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    color: #fff;
    box-shadow: 0 0 10px #bcbcbc;
}

.contact-area .top-inner {
    padding: 60px 40px;
}

.contact-area .title-wrap {
    margin-bottom: 30px;
    display: block;
    padding: 0;
    text-align: center;
    border-bottom: 1px solid #c8e2d3;
    padding-bottom: 35px;
}

.contact-area h2.title {
    margin-right: 0;
}

.contact-area .sub-h2 span {
    display: block;
    align-items: center;
    color: #c8e2d3;
    font-size: 15px;
    text-transform: none;
    margin-top: 20px;
}

.contact-area .sub-h2 span::before {
    display: none;
}

.add-wrap {
    text-align: center;
}

.add-wrap span {
    display: block;
}

.add-wrap span.c-small {
    font-weight: bold;
}


.add-wrap span.c-large {
    font-weight: bold;
    font-size: 150%;
}


.add-wrap span.add {
    margin-top: 20px;
    font-size: 90%;
}


.add-mail {
    width: 100%;
    max-width: 320px;
    margin: 30px auto 0 auto;
    background-color: #fff;
    border-radius: 50px;
    box-shadow: 0 0 10px #505050;
    background-image: url(../images/arrow_g.png);
    background-repeat: no-repeat;
    background-position: right 30px center;
    background-size: 20px;
    transition: all 0.2s ease-in-out;
}

.add-mail:hover {
    background-position: right 25px center;
    transition: all 0.2s ease-in-out;
}

.add-mail a {
    font-weight: bold;
    font-size: 120%;
    display: block;
    padding: 20px 40px;
    text-decoration: none;
    color: #333;
}


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

    .contact-area-wrap {
        padding: 0 30px;
    }

}



@media screen and (max-width: 500px) {
    .contact-area .top-inner {
        padding: 40px 20px;
    }

    .contact-area .title-wrap {
        padding-bottom: 20px;
        margin-bottom: 25px;
    }


    .contact-area .sub-h2 span {
        font-size: 12px;
        margin-top: 0px;
    }

    .add-wrap {
        font-size: 80%;
    }

    .add-mail {
        max-width: 280px;
    }

    .add-mail a {
        padding: 15px 30px;
        font-size: 100%;
    }

    .add-wrap span.c-large {
        font-size: 140%;
    }

}


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

    .add-mail {
        max-width: 260px;
    }

}


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

    .add-wrap {
        font-size: 70%;
    }

}



/* banner-area
------------------------------------------------------------ */

.banner-area {}

ul.bnr-list {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    margin-top: 10px;
    justify-content: center;
}

ul.bnr-list li {
    width: 30%;
    margin: 1.5% 1.5%;
    border-radius: 30px;
    transition: all 0.2s ease-in-out;
}

ul.bnr-list li img {
    width: 100%;
    height: 5em;
    font-family: 'object-fit: cover;';
    display: block;
    object-position: center center;
    object-fit: cover;
    box-shadow: 0 0 5px #bcbcbc;
}


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


    ul.bnr-list li img {
        height: 4em;
    }

}


@media screen and (max-width: 480px) {
    ul.bnr-list li {
        width: 47%;
        margin: 1.5% 1.5%;
    }
}