@charset "utf-8";

/*-----------------------
    page_contents.css
------------------------*/

/*----- about -----*/

/* intro */

.about_intro {
    position: relative;
    padding: 150px 0 90px;
}
.about_intro .scroll_x {
    position: absolute;
    z-index: 99;
    bottom: 60px;
}
.about_intro .scroll_x .catch {
    color: var(--white);
    font-size: 170px;
    font-weight: 500;
}
.about_intro .frame {
    display: flex;
    justify-content: space-between;
}
.about_intro .frame .conts {
    width: 56%;
}
.about_intro .frame .conts .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.about_intro .frame .conts .inner .texts {
    width: calc(100% - 180px)
}
.about_intro .frame .conts .inner .texts .pm {
    margin-bottom: 30px;
}
.about_intro .frame .conts .inner .name {
    width: 180px;
}
.about_intro .frame .conts .pict {
    margin-top: 60px;
    width: 80%;
}
.about_intro .frame .conts .pict img {
    border-radius: 5px;
}

.about_intro .frame .pic {
    width: 41%;
}
.about_intro .frame .pic img {
    aspect-ratio: 31/43;
    border-radius: 5px;
}

@media screen and (min-width: 768px) and (max-width: 1600px){
    
    .about_intro .scroll_x .catch {
        font-size: 10vw;
    }

}
@media screen and (max-width: 1500px){
    
    .about_intro .frame .conts .inner {
        display: block;
    }
    .about_intro .frame .conts .inner .texts {
        width: 100%
    }
    .about_intro .frame .conts .inner .name {
        width: 100%
    }    
    
}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .about_intro {
        padding: 8vw 0 7vw;
    }
    .about_intro .scroll_x {
        bottom: 5vw;
    }
    .about_intro .scroll_x .catch {
        font-size: 10vw;
    }
    .about_intro .frame .conts .pict {
        margin-top: 5vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .about_intro {
        padding: 50px 0;
    }
    .about_intro .scroll_x {
        bottom: 45px;
    }
    .about_intro .scroll_x .catch {
        font-size: 10vw;
    }
    .about_intro .frame {
        display: block;
    }
    .about_intro .frame .conts {
        width: 100%;
    }
    .about_intro .frame .conts .pict {
        margin: 30px auto 0;
        width: min(400px,100%);
    }

    .about_intro .frame .pic {
        margin: 30px auto 0;
        width: min(400px,100%);
    }
    
}

/* outline */

.about_out {
    padding: 100px 0 150px;
}
.about_out .frame {
    display: flex;
    justify-content: space-between;
}
.about_out .frame .conts {
    width: 66.66%;
}
.about_out .frame .conts .dl {
    width: 640px;
}
.about_out .frame .conts .dl > div {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
}
.about_out .frame .conts .dl .dt {
    width: 20%;
    padding: 45px 0 15px;
    text-align: center;
    border-bottom: 1px solid var(--green);
}
.about_out .frame .conts .dl .dd {
    width: calc(80% - 5px);
    padding: 45px 15px 15px;
    border-bottom: 1px solid var(--text);
}
.about_out .frame .conts .dl .dd a {
    color: var(--text);
}
.about_out .frame .conts .dl .dd br {
    display: none;
}
.about_out .frame .pic {
    width: 50%;
    margin-top: 150px;
    margin-right: calc(50% - 40vw);
    margin-left: 1%;
    flex: 1;
}
.about_out .frame .pic img {
    aspect-ratio: 33/25;
    border-radius: 5px;
}
.about_out .profile {
    margin-top: 120px;
    padding: 50px 100px;
    background: var(--green);
    color: var(--white);
      border-radius: 5px;
}
.about_out .profile .name {
    margin: 20px 0 40px;
    display: flex;
    align-items: flex-end;
    color: var(--beige_text);
}
.about_out .profile .name .text {
    margin-right: 20px;
    font-size: 30px;
}
.about_out .profile .p_frame {
    display: flex;
    justify-content: space-between;
}
.about_out .profile .p_frame .pic {
    width: 44%;
}
.about_out .profile .p_frame .pic img {
    aspect-ratio: 439/343;
    border-radius: 5px;
}
.about_out .profile .p_frame .conts {
    width: 50%;
}

@media screen and (min-width: 768px) and (max-width: 1500px){
    
    .about_out .frame .conts {
        width: 56%;
    }
    .about_out .frame .pic {
        width: 43%;
        margin: 120px 0 0;
        flex: none;
    }
    .about_out .frame .conts .dl {
        width: min(640px,100%);
    }

}
@media screen and (min-width: 768px) and (max-width: 1260px){

    .about_out {
        padding: 7vw 0 9vw;
    }
    .about_out .frame .conts .dl > div {
        font-size: 1.25vw;
    }
    .about_out .frame .conts .dl .dt {
        width: 20%;
        padding: 3vw 0 1.5vw;
    }
    .about_out .frame .conts .dl .dd {
        width: calc(80% - .5vw);
        padding: 3vw 1vw 1.5vw;
    }
    .about_out .frame .pic {
        width: 40%;
        margin: 9vw 0 0;
    }
    .about_out .profile {
        margin-top: 7vw;
        padding: 4vw 5vw;
    }
    .about_out .profile .name {
        margin: 1.5vw 0 3vw;
    }
    .about_out .profile .name .text {
        margin-right: 2vw;
        font-size: 2.5vw;
    }
    
}
@media screen and (max-width: 767px){

    .about_out {
        padding: 50px 0;
    }
    .about_out .frame {
        display: block;
    }
    .about_out .frame .conts {
        width: 100%;
    }
    .about_out .frame .conts .dl {
        width: 100%;
        margin-top: 30px;
        border-top: 1px solid var(--text);
    }
    .about_out .frame .conts .dl > div {
        display: block;
        font-size: min(3.875vw,16px);
        line-height: 1.75;
    }
    .about_out .frame .conts .dl .dt {
        width: 100%;
        padding: 15px 0 10px;
        text-align: left;
        border-bottom: none;
    }
    .about_out .frame .conts .dl .dd {
        width: 100%;
        padding: 0 0 15px;
    }
    .about_out .frame .conts .dl .dd br {
        display: inline-block;
    }
    .about_out .frame .pic {
        width: min(400px,100%);
        margin: 30px auto 0;
        flex: none;
    }
    .about_out .profile {
        margin-top: 40px;
        padding: 25px 5vw;
    }
    .about_out .profile .name {
        margin: 15px 0 30px;
    }
    .about_out .profile .name .text {
        margin-right: 15px;
        font-size: 24px;
    }
    .about_out .profile .p_frame {
        display: block;
    }
    .about_out .profile .p_frame .pic {
        width: min(400px,100%);
        margin: 0 auto 20px;
    }
    .about_out .profile .p_frame .conts {
        width: 100%;
    }
    
    
}

/* what */

.about_what {
    padding: 110px 0 150px;
}
.about_what .frame {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}
.about_what .frame .conts {
    order: 2;
    width: 50%;
}
.about_what .frame .pic {
    width: 45%;
}
.about_what .frame .pic img {
    aspect-ratio: 33/25;
    border-radius: 5px;
}

@media screen and (min-width: 768px) and (max-width: 1260px){

    .about_what {
        padding: 8vw 0 10vw;
    }
    .about_what .frame {
        margin-top: 5vw;
    }
    
}
@media screen and (max-width: 767px){
 
    .about_what {
        padding: 50px 0;
    }
    .about_what .frame {
        display: block;
        margin-top: 30px;
    }
    .about_what .frame .conts {
        width: 100%;
    }
    .about_what .frame .pic {
        margin: 30px auto 0;
        width: min(400px,100%);
    }
   
}

/* action */

.about_act {
    padding: 80px 0 50px;
}
.about_act .frame {
    margin-top: 60px;
}
.about_act .frame .box {
    margin-bottom: 50px;
    display: flex;
    box-sizing: border-box;
}
.about_act .frame .box .pic {
    width: 24%;
}
.about_act .frame .box .pic img {
    aspect-ratio: 29/30;
}
.about_act .frame .box .conts {
    width: 76%;
    padding: 30px 40px;
    background: var(--brown);
    color: var(--white);
}
.about_act .frame .box:nth-of-type(2) .conts {
    background: var(--green);
}
.about_act .frame .box .conts .ttl {
    margin-bottom: 20px;
    color: var(--beige_text);
    font-size: 30px;
}
.about_act .frame .box .conts .link {
    margin-top: 40px;
}
.about_act .frame .box .conts .link a {
    padding: 10px 90px 10px 60px;
    background: var(--green);
    color: var(--white);
    font-size: 20px;
    font-weight: 500;
}
.about_act .frame .box:nth-of-type(2) .conts .link a {
    background: var(--brown);
    color: var(--white);
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .about_act {
        padding: 7vw 0 4vw;
    }
    .about_act .frame {
        margin-top: 5vw;
    }
    .about_act .frame .box {
        margin-bottom: 4vw;
    }
    .about_act .frame .box .pic {
        width: 28%;
    }
    .about_act .frame .box .conts {
        width: 72%;
        padding: 2vw 3vw;
    }
    .about_act .frame .box .conts .ttl {
        margin-bottom: 1.5vw;
        font-size: 2.25vw;
    }
    .about_act .frame .box .conts .link {
        margin-top: 3vw;
    }
    .about_act .frame .box .conts .link a {
        padding: 1vw 7vw 1vw 4vw;
        font-size: 1.8vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .about_act {
        padding: 50px 0;
    }
    .about_act .frame {
        margin-top: 30px;
    }
    .about_act .frame .box {
        margin-bottom: 30px;
        display: block;
    }
    .about_act .frame .box .pic {
        width: 100%;
    }
    .about_act .frame .box .pic img {
        height: 60vw;
    }
    .about_act .frame .box .conts {
        width: 100%;
        padding: 20px 5vw 40px;
    }
    .about_act .frame .box .conts .ttl {
        margin-bottom: 15px;
        font-size: 22px;
    }
    .about_act .frame .box .conts .link {
        margin: 30px auto 0;
        text-align: center;
    }
    .about_act .frame .box .conts .link a {
        padding: 10px 90px 10px 60px;
        font-size: 20px;
    }
    
    
}

/* donate */

.about_donate {
    padding: 140px 0 50px;    
}
.about_donate .frame {
    padding: 50px 100px;
    background: var(--white);
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}
.about_donate .frame .box {
    width: 47.5%;
    background: #f5f5f5;
    box-sizing: border-box;
    padding: 40px 30px;
}
.about_donate .frame .box .ttl {
    margin-bottom: 45px;
    color: var(--green);
    font-size: 31px;
    text-align: center;
}
.about_donate .frame .box .dl > div {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    line-height: 1.75;
}
.about_donate .frame .box .dl .dt {
    padding: 15px 10px;
    width: 33%;  
    border-bottom: 1px solid var(--text);
}
.about_donate .frame .box .dl .dd {
    padding: 15px 20px;
    width: calc(67% - 5px);    
    border-bottom: 1px solid var(--text);
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .about_donate {
        padding: 9vw 0 4vw;    
    }
    .about_donate .frame {
        padding: 4vw 6vw;
        margin-top: 5vw;
    }
    .about_donate .frame .box {
        width: 47.5%;
        padding: 3vw 2vw;
    }
    .about_donate .frame .box .ttl {
        margin-bottom: 2vw;
        font-size: 2.4vw;
    }
    .about_donate .frame .box .dl > div {
        font-size: 1.5vw;
    }
    .about_donate .frame .box .dl .dt {
        padding: 1.5vw 1vw;
    }
    .about_donate .frame .box .dl .dd {
        padding: 1.5vw 2vw;
    }

}
@media screen and (max-width: 767px){
    
    .about_donate {
        padding: 50px 0;    
    }
    .about_donate .frame {
        padding: 30px 5vw 15px;
        display: block;
        margin-top: 30px;
    }
    .about_donate .frame .box {
        width: min(400px,100%);
        margin-bottom: 20px;
        padding: 20px 4vw;
    }
    .about_donate .frame .box .ttl {
        margin-bottom: 20px;
        font-size: min(6vw,24px);
    }
    .about_donate .frame .box .dl > div {
        font-size: min(4vw,15px);
    }
    .about_donate .frame .box .dl .dt {
        padding: 10px 0;
        width: 33%;  
    }
    .about_donate .frame .box .dl .dd {
        padding: 10px 5px;
        width: calc(67% - 5px);    
    }
    
}

/*----- what we do -----*/

/* intro */

.what_intro {
    padding: 60px 0;
}
.what_intro .ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 30px;
    margin-top: 45px;
}
.what_intro .ul .li.m_btn {
    margin-top: 0;
}
.what_intro .ul .li.m_btn a {
    width: 200px;
    padding: 12px 0;
    text-align: center;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .what_intro {
        padding: 5vw 0;
    }
    .what_intro .ul {
        gap: 0 2.5vw;
        margin-top: 4vw;
    }
    .what_intro .ul .li.m_btn a {
        width: 20vw;
        padding: 1.5vw 0;
    }
    
}
@media screen and (max-width: 767px){
    
    .what_intro {
        padding: 50px 0;
    }
    .what_intro .ul {
        gap: 15px 15px;
        margin-top: 30px;
    }
    .what_intro .ul .li.m_btn a {
        width: 150px;
        padding: 15px 0;
    }
    
}

/* carry */

.what_carry {
    padding: 80px 0 110px;
}
.what_carry .frame .conts > div {
    margin-bottom: 30px;
}
.what_carry .bnr a {
    display: block;
    margin-top: 60px;
    padding: 60px 0;
    background: url("/system_panel/uploads/images/bg_bnr.jpg") no-repeat;
    background-size: cover;
    color: var(--beige_text);
    text-align: center;
}
.what_carry .bnr a .text {
    font-size: 16px;
    margin-bottom: 20px;
}
.what_carry .bnr a .ttl {
    font-size: 50px;
}
.what_carry .bnr a:hover {    
    opacity: .8;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .what_carry {
        padding: 7vw 0 8vw;
    }
    .what_carry .frame .conts > div {
        margin-bottom: 2.5vw;
    }
    .what_carry .bnr a {
        margin-top: 5vw;
        padding: 4.5vw 0;
    }
    .what_carry .bnr a .text {
        font-size: 1.5vw;
        margin-bottom: 1.8vw;
    }
    .what_carry .bnr a .ttl {
        font-size: 4vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .what_carry {
        padding: 50px 0;
    }
    .what_carry .frame .conts > div {
        margin-bottom: 20px;
    }
    .what_carry .bnr a {
        margin-top: 30px;
        padding: 20px 0;
    }
    .what_carry .bnr a .text {
        font-size: min(3.5vw,15px);
        margin-bottom: 15px;
    }
    .what_carry .bnr a .ttl {
        font-size: min(6.5vw,25px);
    }
    
}

/* event */

.what_event {
    padding: 100px 0 110px;    
}
.what_event .m_box .ttl {
    background: url("/system_panel/uploads/images/bg_title_1.png") no-repeat;
    background-size: cover;
}
.what_event .m_box .ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 0;
    width: 520px;
}
.what_event .m_box .ul .li {
    width: 48%;
    padding-top: 10px;
    display: flex;
    align-items: center;
    border-bottom: 2px dashed #999;
}
.what_event .m_box .ul .li .icon img {
    height: 40px;
}
.what_event .m_box .ul .li .text {
    width: calc(100% - 60px);
    text-align: center;
    font-size: 21px;
}
.what_event .frame,
.what_carry .frame {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}
.what_event .frame .conts,
.what_carry .frame .conts {
    order: 2;
    width: 50%;
    margin-right: calc(50% - 36vw);
    margin-left: 5%;
    flex: 1;
}
.what_event .frame .pics,
.what_carry .frame .pics {
    width: 45%;
    position: relative;
}
.what_event .frame .pics .pic img,
.what_carry .frame .pics .pic img {
    max-height: 400px;
    margin: 0 auto;
}
.what_event .frame .pics .thumb,
.what_carry .frame .pics .thumb {
    margin: 5px;
}
.what_event .frame .pics .thumb img,
.what_carry .frame .pics .thumb img {
    aspect-ratio: 27/20;
}
.what_event .frame .pics .slick-arrow,
.what_carry .frame .pics .slick-arrow {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 10px;
    border: none;
    background: none;
    display: block;
    width: 40px;
    height: 40px;
    cursor: pointer;
    text-indent: -9999px;
}
.what_event .frame .pics .slick-arrow::after,
.what_carry .frame .pics .slick-arrow::after{
    display: block;
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    right: 16px;
    width: 16px;
    height: 16px;
    border-top: solid 2px var(--white);
    border-right: solid 2px var(--white);
    transform: rotate(-135deg);
}
.what_event .frame .pics .slick-next,
.what_carry .frame .pics .slick-next {
    left: auto;
    right: 10px;
}
.what_event .frame .pics .slick-next::after,
.what_carry .frame .pics .slick-next::after{
    right: 8px;
    transform: rotate(45deg);
}
.what_event .bnr {
    position: relative;
    background: var(--brown);
    margin-top: 80px;
    padding: 10px;
}
.what_event .bnr .pic {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 303px;
}
.what_event .bnr .dotted {
    display: flex;
    justify-content: flex-end;
    border: 1px dashed var(--white);
    color: var(--white);
}
.what_event .bnr .dotted .inner {
    width: 80%;
    text-align: center;
    padding: 30px 0;
}
.what_event .bnr .ttl {
    font-size: 35px;
    margin-bottom: 15px;
}
.what_event .bnr .ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
.what_event .bnr .ul .li {
    width: 80px;
}
.what_event .bnr .ul .li img {
    width: 40px;
}
.what_event .bnr .ul .li .text {
    margin-top: 5px;
    font-size: 13px;
}
.what_event .bnr .ul .li a:hover {
    opacity: .8;
}

@media screen and (min-width: 768px) and (max-width: 1500px){
    
    .what_event .frame .conts,
    .what_carry .frame .conts {
        width: 50%;
        margin: 0;
        flex: none;
    }    
    
}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .what_event {
        padding: 7.5vw 0;    
    }
    .what_event .m_box .ul {
        gap: 2vw 0;
        width: 40vw;
    }
    .what_event .m_box .ul .li {
        width: 48%;
        padding-top: 1vw;
    }
    .what_event .m_box .ul .li .icon img {
        height: 3.5vw;
    }
    .what_event .m_box .ul .li .text {
        width: calc(100% - 5vw);
        font-size: 1.7vw;
    }
    .what_event .frame,
    .what_carry .frame {
        margin-top: 5vw;
    }
    .what_event .frame .pics,
    .what_carry .frame .pics {
        width: 45%;
    }
    .what_event .frame .pics .pic img,
    .what_carry .frame .pics .pic img {
        max-height: 31vw;
    }
    .what_event .frame .pics .thumb,
    .what_carry .frame .pics .thumb {
        margin: .5vw;
    }
    .what_event .frame .pics .slick-arrow,
    .what_carry .frame .pics .slick-arrow {
        left: 1vw;
        width: 4vw;
        height: 4vw;
    }
    .what_event .frame .pics .slick-arrow::after,
    .what_carry .frame .pics .slick-arrow::after{
        top: calc(50% - .8vw);
        right: 1.6vw;
        width: 1.6vw;
        height: 1.6vw;
    }
    .what_event .frame .pics .slick-next,
    .what_carry .frame .pics .slick-next {
        left: auto;
        right: 1vw;
    }
    .what_event .frame .pics .slick-next::after,
    .what_carry .frame .pics .slick-next::after{
        right: .8vw;
    }
    .what_event .bnr {
        margin-top: 7vw;
        padding: 1vw;
    }
    .what_event .bnr .pic {
        width: 25vw;
    }
    .what_event .bnr .dotted .inner {
        width: 80%;
        padding: 2.5vw 0;
    }
    .what_event .bnr .ttl {
        font-size: 2.75vw;
        margin-bottom: 1.5vw;
    }
    .what_event .bnr .ul .li {
        width: 7vw;
    }
    .what_event .bnr .ul .li img {
        width: 3.5vw;
    }
    .what_event .bnr .ul .li .text {
        margin-top: .5vw;
        font-size: 1.3vw;
    }

}
@media screen and (max-width: 767px){
    
    .what_event {
        padding: 50px 0;    
    }
    .what_event .m_box .ul {
        display: block;
        width: min(400px,100%);
        margin: 0 auto;
    }
    .what_event .m_box .ul .li {
        width: 100%;
        justify-content: center;
    }
    .what_event .m_box .ul .li .icon img {
        height: 30px;
        margin-right: 15px;
    }
    .what_event .m_box .ul .li .text {
        width: auto;
        font-size: 18px;
    }
    .what_event .frame,
    .what_carry .frame {
        display: block;
        margin-top: 30px;
    }
    .what_event .frame .conts,
    .what_carry .frame .conts {
        width: 100%;
        margin: 0;
        flex: none;
    }
    .what_event .frame .pics,
    .what_carry .frame .pics {
        width: 100%;
        margin-top: 30px;
    }
    .what_event .frame .pics .pic img,
    .what_carry .frame .pics .pic img {
        max-height: 66vw;
    }
    .what_event .bnr {
        margin-top: 50px;
    }
    .what_event .bnr .pic {
        width: 30%;
    }
    .what_event .bnr .dotted .inner {
        width: 85%;
        padding: 15px 0;
    }
    .what_event .bnr .ttl {
        font-size: min(3.5vw,19px);
        margin-bottom: 10px;
        line-height: 1.5;
    }
    .what_event .bnr .ul .li {
        width: 60px;
    }
    .what_event .bnr .ul .li img {
        width: 30px;
    }
    .what_event .bnr .ul .li .text {
        font-size: 12px;
    }
    
}


/* breed */

.what_breed {
    padding: 90px 0 150px;
}
.what_breed .frame {
    margin: 60px 0 45px;
    padding: 0 6vw;
    display: flex;
    justify-content: space-between;
}
.what_breed .frame .conts {
    order: 2;
    width: 50%;
}
.what_breed .frame .conts > div {
    margin-bottom: 30px;
}
.what_breed .frame .pic {
    width: 47%;
}
.horse_slider_ul {
    position: relative;
    margin-top: 60px;
}
.horse_slider_ul .li {
    position: relative;
    margin: 20px 10px 0;
}
.horse_slider_ul .li .name {
    position: absolute;
    z-index: 999;
    top: -20px;
    left: 20px;
    padding: 7px;
    background: var(--brown);
    color: var(--white);
    font-size: 23px;
    writing-mode: vertical-rl;
}
.horse_slider_ul .li .pic img {
    aspect-ratio: 66/53;
    border-radius: 5px;
}
.horse_slider_ul .slick-arrow {
    position: absolute;
    top: -60px;
    right: 30%;
    border: none;
    display: block;
    width: 45px;
    height: 45px;
    background: #fdd005;
    border-radius: 50%;
    cursor: pointer;
    text-indent: -9999px;
}
.horse_slider_ul .slick-arrow::after{
    display: block;
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    right: 18px;
    width: 6px;
    height: 6px;
    border-top: solid 2px var(--brown);
    border-right: solid 2px var(--brown);
    transform: rotate(-135deg);
}
.horse_slider_ul .slick-next {
    right: calc(30% - 80px);
}
.horse_slider_ul .slick-next::after{
    right: 20px;
    transform: rotate(45deg);
}

@media screen and (min-width: 768px) and (max-width: 1500px){
    
    .what_breed .frame {
        padding: 0 30px;
    }
    
}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .what_breed {
        padding: 7.5vw 0 10vw;
    }
    .what_breed .frame {
        margin: 5vw 0 4vw;
    }
    .what_breed .frame .conts {
        width: 50%;
    }
    .what_breed .frame .conts > div {
        margin-bottom: 3vw;
    }
    .what_breed .frame .pic {
        width: 47%;
    }
    .horse_slider_ul {
        margin-top: 5vw;
    }
    .horse_slider_ul .li {
        margin: 2vw 1vw 0;
    }
    .horse_slider_ul .li .name {
        top: -2vw;
        left: 2vw;
        padding: 1.5vw;
        font-size: 2vw;
    }
    .horse_slider_ul .slick-arrow {
        top: -6vw;
        right: 20%;
        width: 4vw;
        height: 4vw;
    }
    .horse_slider_ul .slick-arrow::after{
        right: 1.5vw;
    }
    .horse_slider_ul .slick-next {
        right: calc(30% - 15vw);
    }
    .horse_slider_ul .slick-next::after{
        right: 1.7vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .what_breed {
        padding: 50px 0;
    }
    .what_breed .frame {
        margin: 30px 0;
        display: block;
    }
    .what_breed .frame .conts {
        width: 100%;
    }
    .what_breed .frame .conts > div {
        margin-bottom: 20px;
    }
    .what_breed .frame .pic {
        width: 100%;
        margin: 30px 0 0;
    }
    .horse_slider_ul .li {
        margin: 10px 5px 0;
    }
    .horse_slider_ul .li .name {
        top: -15px;
        left: 15px;
        padding: 10px;
        font-size: 18px;
    }
    .horse_slider_ul .slick-arrow {
        top: -50px;
        right: calc(50% + 20px);
        width: 40px;
        height: 40px;
    }
    .horse_slider_ul .slick-arrow::after{
        right: 16px;
    }
    .horse_slider_ul .slick-next {
        right: calc(50% - 60px);
    }
    .horse_slider_ul .slick-next::after{
        right: 18px;
    }
    
}

/* test */

.what_test {
    padding: 70px 0;
}
.what_test .frame {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}
.what_test .frame .conts {
    order: 2;
    width: 50%;
    margin-right: calc(50% - 33.33vw);
    margin-left: 5%;
    flex: 1;
}
.what_test .frame .pic {
    width: 45%;
}
.what_test .frame .pic img {
    aspect-ratio: 27/20;
    border-radius: 5px;
}
.what_test .m_box .text {
    padding: 15px;
    border-bottom: 2px dashed #999;
    color: var(--green);
    font-size: 21px;
}

@media screen and (min-width: 768px) and (max-width: 1500px){
    
    .what_test .frame .conts {
        width: 53%;
        margin-right: 0;
        margin-left: 0;
        flex: none;
    }
    .what_test .frame .pic {
        width: 43%;
    }
    
}
@media screen and (min-width: 768px) and (max-width: 1260px){

    .what_test {
        padding: 6vw 0;
    }
    .what_test .frame {
        margin-top: 5vw;
    }
    .what_test .frame .conts {
    }
    .what_test .frame .pic {
    }
    .what_test .m_box .text {
        padding: 1.5vw;
        font-size: 1.8vw;
    }

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

    .what_test {
        padding: 50px 0;
    }
    .what_test .frame {
        display: block;
        margin-top: 30px;
    }
    .what_test .frame .conts {
        width: 100%;
        margin: 0;
        flex: none;
    }
    .what_test .frame .pic {
        margin: 30px auto 0;
        width: min(400px,100%);
    }
    .what_test .m_box .text {
        padding: 10px 0;
        font-size: min(4.5vw,16px);
    }
    
}

/*----- owners -----*/

/* intro */

.own_intro {
    padding: 100px 0 80px;
}
.own_intro .frame {
    display: flex;
    justify-content: space-between;
}
.own_intro .frame .pic {
    width: 45%;
}
.own_intro .frame .pic img {
    aspect-ratio: 33/25;
    border-radius: 5px;
}
.own_intro .frame .conts {
    order: 2;
    width: 50%;
    margin-right: calc(50% - 45vw);
    margin-left: 5%;
    flex: 1;
}
.own_intro .frame .conts .m_ttl {
    line-height: 1.5;
}
.own_intro .limit {
    display: inline-block;
    margin-bottom: 10px;
    padding: 10px 20px;
    background: var(--red);
    border-radius: 5px;
    color: var(--white);
    font-size: 20px;
    font-weight: 500;
}
.own_intro .sched {
    margin: -15px 0 30px;
    font-size: 20px;
    font-weight: 500;
}
.own_intro .pm.m_red {
    margin-top: 15px;
}

/* merit */

.own_merit {
    padding: 70px 0 80px;
}
.merits {
    margin-top: 60px;
}
.merits .box {
    display: flex;
    margin-bottom: 30px;
    background: var(--brown);
    box-sizing: border-box;
}
.merits .box:nth-of-type(2n) {
    background: var(--green);
}
.merits .box .pic {
    width: 26%;
}
.merits .box .pic img {
    aspect-ratio: 52/50;
}
.merits .box .conts {
    width: 74%;
    padding: 30px 40px;
    color: var(--white);
}
.merits .box .conts .ttl {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.merits .box .conts .ttl .num {
    width: 70px;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.5;
}
.merits .box .conts .ttl .text {
    width: calc(100% - 70px);
    font-size: 30px;
    line-height: 1.5;
    color: var(--beige_text);
}
.merits .box:nth-of-type(2n) .conts .ttl .text {
    color: #d0ebdb;
}

/* fee */

.own_fee {
    padding: 90px 0 120px;
}
.fee_sheet {
    width: 100%;
    border-top: 1px solid #c3c3bf;
    border-left: 1px solid #c3c3bf;
    margin: 60px 0 15px;
}
.fee_sheet .tr {
    display: flex;
}
.fee_sheet .tr .th,
.fee_sheet .tr .td {
    width: 33.33%;
    padding: 20px 0;
    box-sizing: border-box;
    border-right: 1px solid #c3c3bf;
    border-bottom: 1px solid #c3c3bf;
    color: var(--green);
    font-size: 21px;
    font-weight: 500;
    text-align: center;
}
.fee_sheet .tr .th {
    background: var(--green);
    color: var(--beige_text);
}
.own_fee .ps {
    margin-bottom: 40px;
    line-height: 2;
}
.fee_box {
    padding: 40px 0;
    background: url("/system_panel/uploads/images/bg_fee.jpg") center no-repeat;
    background-size: cover;
}
.fee_box .ttl {
    margin-bottom: 20px;
    font-size: 40px;
    color: var(--beige_text);
    text-align: center;
}

/* sta */

.own_sta {
    padding: 70px 0 100px;
}
.own_sta .frame {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}
.own_sta .frame .pic {
    width: 45%;
}
.own_sta .frame .pic img {
    aspect-ratio: 27/20;
    border-radius: 5px;
}
.own_sta .frame .conts {
    order: 2;
    width: 50%;
    margin-right: calc(50% - 40vw);
    margin-left: 5%;
    flex: 1;
}

/* faq */

.own_faq {
    padding: 110px 0 60px;
}
.faq_box {
    margin-bottom: 20px;
    padding: 30px 40px 20px;
    background: var(--white);
}
.faq_box .question {
    position: relative;
    padding: 0 50px 15px 0;
    cursor: pointer;
}
.faq_box .question::after {
    position: absolute;
    content: "＋";
    top: 10px;
    right: 15px;
    font-size: 20px;
}
.faq_box .question.open::after {
    content: "－";
}
.faq_box .question .text {
    font-size: 23px;
    color: var(--green);
    line-height: 1.75;
}
.faq_box .answer {
    display: none;
    border-top: 2px dashed #999;
    padding: 15px 0 10px;
}
/* for CMS */
body:has(#wrapper) .faq_box .answer {
    display: block;
}

@media screen and (min-width: 768px) and (max-width: 1500px){
    
    /* intro */
    .own_intro .frame .conts {
        margin-right: 0;
        margin-left: 0;
        flex: none;
    }

    /* sta */

    .own_sta .frame .conts {
        margin-right: 0;
        margin-left: 0;
        flex: none;
    }
    
}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
    /* intro */

    .own_intro {
        padding: 8vw 0 6.6vw;
    }
    .own_intro .limit {
        margin-bottom: 1vw;
        padding: 1vw 2vw;
        font-size: 2vw;
    }
    .own_intro .sched {
        margin: 0 0 3vw;
        font-size: 1.8vw;
    }
    .own_intro .pm.m_red {
        margin-top: 1.5vw;
    }

    /* merit */

    .own_merit {
        padding: 6vw 0 7vw;
    }
    .merits {
        margin-top: 5vw;
    }
    .merits .box {
        margin-bottom: 2.5vw;
    }
    .merits .box .pic {
        width: 28%;
    }
    .merits .box .pic img {
        aspect-ratio: 52/50;
    }
    .merits .box .conts {
        width: 72%;
        padding: 2vw 2.5vw;
    }
    .merits .box .conts .ttl {
        margin-bottom: 2vw;
    }
    .merits .box .conts .ttl .num {
        width: 6vw;
        font-size: 2.4vw;
    }
    .merits .box .conts .ttl .text {
        width: calc(100% - 6vw);
        font-size: 2.4vw;
    }

    /* fee */

    .own_fee {
        padding: 7vw 0 9vw;
    }
    .fee_sheet {
        margin: 5vw 0 1.5vw;
    }
    .fee_sheet .tr .th,
    .fee_sheet .tr .td {
        padding: 2vw 0;
        font-size: 1.8vw;
    }
    .own_fee .ps {
        margin-bottom: 4vw;
    }
    .fee_box {
        padding: 3vw 0;
    }
    .fee_box .ttl {
        margin-bottom: 2vw;
        font-size: 3vw;
    }

    /* sta */

    .own_sta {
        padding: 6vw 0 8vw;
    }
    .own_sta .frame {
        margin-top: 5vw;
    }
    
    /* faq */

    .own_faq {
        padding: 8vw 0 5vw;
    }
    .faq_box {
        margin-bottom: 2vw;
        padding: 2vw 3vw 1vw;
    }
    .faq_box .question {
        padding: 0 4vw 1.5vw 0;
    }
    .faq_box .question::after {
        top: 1vw;
        right: 1.5vw;
        font-size: 2vw;
    }
    .faq_box .question .text {
        font-size: 2vw;
    }
    .faq_box .answer {
        padding: 1.5vw 0 1vw;
    }

}
@media screen and (max-width: 767px){
    
    /* intro */

    .own_intro {
        padding: 50px 0;
    }
    .own_intro .frame {
        display: block;
    }
    .own_intro .frame .pic {
        width: min(400px,100%);
        margin: 30px auto 0;
    }
    .own_intro .frame .conts {
        width: 100%;
        margin: 0;
        flex: none;
    }
    .own_intro .limit {
        margin-bottom: 10px;
        padding: 5px 15px;
        font-size: 16px;
    }
    .own_intro .sched {
        margin: 0 0 25px;
        font-size: 17px;
    }
    .own_intro .pm.m_red {
        margin-top: 15px;
    }
    
    /* merit */

    .own_merit {
        padding: 50px 0;
    }
    .merits {
        margin-top: 30px;
    }
    .merits .box {
        display: block;
        margin-bottom: 30px;
    }
    .merits .box .pic {
        width: 100%;
    }
    .merits .box .pic img {
        height: 40vw;
    }
    .merits .box .conts {
        width: 100%;
        padding: 20px 5vw;
    }
    .merits .box .conts .ttl {
        margin-bottom: 15px;
    }
    .merits .box .conts .ttl .num {
        width: 50px;
        font-size: 22px;
    }
    .merits .box .conts .ttl .text {
        width: calc(100% - 50px);
        font-size: 22px;
    }
    
    /* fee */

    .own_fee {
        padding: 50px 0;
    }
    .fee_sheet {
        margin: 30px 0 15px;
    }
    .fee_sheet .tr .th,
    .fee_sheet .tr .td {
        padding: 15px 0;
        font-size: min(4vw,18px);
    }
    .own_fee .ps {
        margin-bottom: 30px;
    }
    .fee_box {
        padding: 30px 0;
    }
    .fee_box .ttl {
        margin-bottom: 0;
        font-size: 20px;
    }

    /* sta */

    .own_sta {
        padding: 50px 0;
    }
    .own_sta .frame {
        display: block;
        margin-top: 30px;
    }
    .own_sta .frame .pic {
        width: min(400px,100%);
        margin: 40px auto 0;
    }
    .own_sta .frame .conts {
        width: 100%;
        margin: 0;
    }

    /* faq */

    .own_faq {
        padding: 50px 0;
    }
    .faq_box {
        margin-bottom: 15px;
        padding: 15px 4vw 5px;
    }
    .faq_box .question {
        padding: 0 30px 10px 0;
    }
    .faq_box .question::after {
        top: 7px;
        right: 0;
        font-size: 18px;
    }
    .faq_box .question .text {
        font-size: 18px;
    }
    
}

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

.contact_intro {
    padding: 60px 0 90px;
}
.contact_intro .frame {
    display: flex;
    justify-content: center;
    gap: 0 30px;
    margin-top: 60px;
}
.contact_intro .frame .box {
    width: 510px;
    background: var(--white);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.contact_intro .frame .box > div {
    width: 100%;
    padding: 25px 0;
}
.contact_intro .frame .box .tel a {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: var(--green);
    margin-bottom: 20px;
}
.contact_intro .frame .box .tel a p {
    font-size: 23px;
}
.contact_intro .frame .box .tel a p:nth-of-type(2) {
    font-size: 37px;
    font-weight: 500;
    margin-left: 10px;
}
.contact_intro .frame .box.sns {
    background: var(--brown);
    padding: 10px;
}
.contact_intro .frame .box.sns .inner {
    border: 2px dashed var(--beige);
    display: flex;
    align-items: center;
}
.contact_intro .frame .box.sns .inner > div {
    width: 100%;
}
.contact_intro .frame .box.sns .ttl {
    color: var(--white);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}
.contact_intro .frame .box.sns .ul {
    display: flex;
    justify-content: center;
    gap: 0 30px;
    margin-top: 10px;
}
.contact_intro .frame .box.sns .ul .li {
    width: 40px;
}
.contact_intro .frame .box.sns .ul .li a:hover {
    opacity: .8;
}

.complete {
    padding: 90px 0;
}

@media screen and (min-width: 768px) and (max-width: 1260px){

    .contact_intro {
        padding: 5vw 0 7.5vw;
    }
    .contact_intro .frame {
        justify-content: space-between;
        gap: 0 3vw;
        margin-top: 5vw;
    }
    .contact_intro .frame .box {
        width: calc(50% - 1.5vw);
    }
    .contact_intro .frame .box > div {
        padding: 2.4vw 0;
    }
    .contact_intro .frame .box .tel a {
        margin-bottom: 2vw;
    }
    .contact_intro .frame .box .tel a p {
        font-size: 3vw;
    }
    .contact_intro .frame .box .tel a p:nth-of-type(2) {
        font-size: 4vw;
        margin-left: 1vw;
    }
    .contact_intro .frame .box.sns {
        padding: 1vw;
    }
    .contact_intro .frame .box.sns .ttl {
        font-size: 1.8vw;
    }
    .contact_intro .frame .box.sns .ul {
        gap: 0 2.5vw;
        margin-top: 1vw;
    }
    .contact_intro .frame .box.sns .ul .li {
        width: 3.3vw;
    }
        
    .complete {
        padding: 7vw 0;
    }
    
}
@media screen and (max-width: 767px){

    .contact_intro {
        padding: 50px 0;
    }
    .contact_intro .frame {
        display: block;
        margin-top: 30px;
    }
    .contact_intro .frame .box {
        width: min(400px,100%);
        display: block;
        margin: 0 auto 20px;
    }
    .contact_intro .frame .box > div {
        padding: 20px 0;
        text-align: center;
    }
    .contact_intro .frame .box .tel a {
        margin-bottom: 15px;
    }
    .contact_intro .frame .box .tel a p {
        font-size: 20px;
    }
    .contact_intro .frame .box .tel a p:nth-of-type(2) {
        font-size: 30px;
        margin-left: 1vw;
    }
    .contact_intro .frame .box.sns {
        padding: 2vw;
    }
    .contact_intro .frame .box.sns .ttl {
        font-size: min(4vw,18px);
    }
    .contact_intro .frame .box.sns .ul {
        gap: 0 20px;
    }
    .contact_intro .frame .box.sns .ul .li {
        width: 30px;
    }

    .complete {
        padding: 50px 0;
    }
    
}
.baji{
  margin:10px;
}

@media screen and (max-width:700px){
   .pm01 br:nth-child(2), .pm02 br:nth-child(2){
     display:none;
  }
}

.c2506 {
margin-top: 30px;
}