@charset "UTF-8";

/* お知らせ一覧 */
#news_archive {padding-top: 130px;}
#news_archive .news_area {
    width: 80%;
    margin: 0 auto;
}
#news_archive .news_ttl {
    width: 100%;
    padding: 0;
}

/* お知らせ個別ページ */
#news_single {padding-top: 130px;}
#news_single h1 {margin: 40px 0;}
#news_single .news_area {
    width: 70%;
    max-width: 1250px;
    margin: 150px auto;
}
#news_single .news_area .lastupdate {
    text-align: right;
    margin-top: 50px;
}

/* サブページ共通ヘッター */
.subtop {
    width: 100%;
    padding-top: 125px;
}
.subtop .main {
    margin-top: 80px;
}

/* 学習方針・先生紹介 */
#teacher {position: relative;}
#teacher #animal_01{
    position: absolute;
    top: 10rem;
    left: calc(25% - 14rem);
    width: 17%;
}
#teacher #animal_02{
    position: absolute;
    top: 9rem;
    right: calc(25% - 14rem);
    width: 15%;
}
#teacher #animal_03{
    position: absolute;
    top: 40rem;
    left: calc(12% - 14rem);
    width: 17%;
}
#teacher #animal_04{
    position: absolute;
    top: 110rem;
    right: 0%;
    width: 12%;
}
#teacher #animal_05{
    position: absolute;
    bottom: 60rem;
    left: 5%;
    width: 17%;
}
#teacher #animal_06{
    position: absolute;
    bottom: 60rem;
    right: 5%;
    width: 16%;
}
#teacher #animal_01_sp{
    position: absolute;
    top: 153rem;
    right: -4%;
    width: 85%;
}
#teacher #animal_02_sp{
    position: absolute;
    bottom: 73rem;
    left: -8%;
    width: 33%;
}
#teacher #animal_03_sp{
    position: absolute;
    bottom: 34rem;
    right: -6%;
    width: 27%;
}
#teacher #animal_04_sp{
    position: absolute;
    bottom: 107rem;
    left: -11%;
    width: 27%;
}
#teacher .book_area {
    background: url(../img/teacher/book_bg.png) no-repeat center;
    background-size: contain;
    width: 100%;
    height: 500px;
}
#teacher .kongo {
    padding: 0 20px;
    margin: 70px 0px 120px;
}
#teacher .kongo h3 {
    max-width: 200px;
    margin: 0 auto;
    padding: 20px 0;
}
#teacher .teacher_inner{
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 0 40px;
}
#teacher .teacher_inner h3.ttl {
    text-align: center;
}
#teacher .profile_box .box {
    width: 45%;
    margin: 30px 0;
}
#teacher .profile_box .box p {padding: 10px 30px 0;}

@media screen and (max-width: 768px) {
    .subtop {padding-top: 135px;}
    .subtop .main {
        margin-top: 40px;
    }
    #teacher .book_area {
        background: url(../img/teacher/book_bg_sp.png) no-repeat center;
        height: 430px;
        width: 100%;
        background-size: cover;
    }
    #teacher .kongo {
        padding: 0;
        margin: 10px 0px -120px;
    }
    #teacher .teacher_inner {padding: 170px 0 0;}
    #teacher .profile_box .box {
        width: 100%;
        margin: 0 auto 90px;
    }
    #teacher .profile_box .box:last-child {
        margin: 0 auto 0;
    }
    #teacher .kongo h3 {
        width: 180px;
    }
}

/* 園での生活 */
#life {position: relative;}
.life {position: relative;}
#life #animal_01{
    position: absolute;
    top: 9rem;
    left: calc(25% - 14rem);
    width: 17%;
}
#life #animal_02{
    position: absolute;
    top: 9rem;
    right: calc(25% - 14rem);
    width: 15%;
}
.life #animal_03{
    position: absolute;
    top: 13rem;
    right: -7rem;
    width: 50%;
}
.life #animal_04{
    position: absolute;
    top: 50rem;
    right: 0rem;
    width: 15%;
}
.life #animal_05{
    position: absolute;
    top: 80rem;
    right: -2rem;
    width: 30%;
}
.life #animal_06{
    position: absolute;
    top: 100rem;
    right: -3rem;
    width: 31%;
}
#life #animal_02_sp{
    width: 195px;
    margin: 1rem 0 0 7rem;
}
.life {
    max-width: 900px;
    margin: 0 auto;
}
.life_topic a {width: 43%;}
.life_topic a:hover, .life_topic a:focus, .life_topic a:active {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

/* 1日のスケジュール */
.daily {padding: 150px 0 0;}
.daily h3.ttl {
    margin-bottom: 5rem;
    margin-left: 3rem;
}
.timeline {position: relative;}
.timeline .flex {align-items: baseline;}
.timeline .layout {position: relative;}
.timeline .layout_b .time_2 {position: relative;}
.timeline .layout_b .time_2::before {
    content: 'Extended Care';
    display: inline-block;
    position: absolute;
    top: -2.2rem;
    right: 2rem;
    font-size: 1.2rem;
    color: #036EB7;
}
.timeline .layout_b .planning {position: relative;}
/* .timeline .layout_b .planning::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 46px;
    background: url(../img/life/tag_planning.png) no-repeat;
    background-size: contain;
    background-position: center center;
    top: -1rem;
    right: 13rem;
} */
.timeline .layout #clock_01, .timeline .layout #clock_02 {
    position: absolute;
    top: 4.5rem;
    left: 2.5rem;
    width: 87px;
}
.timeline .layout_b {position: relative;}
.timeline::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    border-radius: 50px;
    left: 21px;
    top: -45px;
    background: #F5A200;
    z-index: -1;
}
.timeline .layout:after {
    content: '';
    display: block;
    width: 9px;
    height: 100%;
    position: absolute;
    left: 22.5px;
    top: -29px;
    background: #F5A200;
    z-index: -1;
}
.timeline .layout_b:after {
    content: '';
    display: block;
    width: 9px;
    height: 100%;
    position: absolute;
    left: 22.5px;
    top: -30px;
    background-image: linear-gradient(to bottom, #036EB7 6px, #036EB7 6px, transparent 6px, transparent 6px);
    background-size: 9px 9px;
    background-position: left bottom;
    background-repeat: repeat-y;
    z-index: -1;
}
.og {color: #F5A200;}
.blue {color: #036EB7;}
.timeline .time {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 2.5;
    width: 15%;
}
.timeline .what {width: 85%;}
.timeline .time_2 {width: 25%;}
.timeline .what_2 {width: 75%;}
.timeline .life_img_01 {
    position: absolute;
    top: -14rem;
    right: -2rem;
    width: 520px;
}
.timeline .life_img_02 {
    margin: 2rem 0 2rem 5rem;
}
.timeline .time .ribbon_o_01 {
    width: 100%;
    height: auto;
    background: url(../img/life/ribbon_o_01.png) no-repeat;
    background-position: left center;
    background-size: contain;
    color: #fff;
    padding: 23px 25px 27px 18px;
    font-size: 1.6rem;
}
.timeline .time_2 .ribbon_o_02 {
    width: 100%;
    height: auto;
    background: url(../img/life/ribbon_o_02.png) no-repeat;
    background-position: left center;
    background-size: contain;
    color: #fff;
    padding: 23px 25px 27px 18px;
    font-size: 1.6rem;
}
.timeline .time .ribbon_w {
    width: 100%;
    height: auto;
    background: url(../img/life/ribbon_w.png) no-repeat;
    background-position: left center;
    background-size: contain;
    color: #F5A200;
    padding: 25px 20px 27px 18px;
    font-size: 1.2rem;
}
.timeline .time_2 .ribbon_b {
    width: 100%;
    height: auto;
    background: url(../img/life/ribbon_b.png) no-repeat;
    background-position: left center;
    background-size: contain;
    color: #fff;
    padding: 23px 25px 27px 18px;
    font-size: 1.6rem;
}
.txt p {font-weight: bold;}
.txt p.og,.txt p.blue {padding: 2.2rem 0;}
.txt p.og small {color: #F5A200;}
.txt p.blue small {color: #036EB7;}
.txt p small {
    color: #808080;
    margin: 0 7px;
}
.daily .alerm {
    text-align: center;
    font-size: 1rem;
    padding-top: 30px;
}

@media screen and (max-width: 768px) {
    .timeline {padding: 0 20px;}
    .life_topic {padding: 0 35px;}
    .life_topic a {width: 100%;}
    .life_topic a:first-child {margin-bottom: 30px;}
    .life h3.ttl {padding: 0 35px;}

    .daily {padding: 50px 0 0;}
    .daily h3.ttl {
        margin: 0;
    }
    .timeline .layout .time, .timeline .layout_b .time_2 {width: 30%;}
    .timeline .layout .what, .timeline .layout_2 .what_2 {width: 70%;}
    .timeline .layout .time_2, .timeline .layout_b .time_2 {width: 100%;}
    .timeline .layout .what_2, .timeline .layout_b .what_2 {
        width: 100%;
        padding-left: 4rem;
    }
    .life #animal_03 {
        position: static;
        width: 80%;
    }
    .what .txt {padding-left: 1rem;}
    .timeline .life_img_01_sp, .timeline .life_img_02_sp {padding: 5px 0px 25px 40px;}
    .timeline .layout #clock_01 {
        position: absolute;
        top: 1rem;
        left: 16.5rem;
        width: 75px;
    }
    .timeline .layout #clock_02 {
        position: absolute;
        top: 5rem;
        left: 16.5rem;
        width: 75px;
    }
    .timeline .layout_b .time_2::before {
        top: -2rem;
        right: 10rem;
        font-size: 1rem;
    }
    .txt p.og, .txt p.blue {
        padding: 2.5rem 0;
    }
    .timeline .layout_b .planning::before {
        position: static;
        background-position: left center;
        margin-top: 2rem;
        margin-bottom: -2.5rem;
        height: 36px;
    }
    .timeline::before {left: 41px;}
    .daily .alerm {padding-top: 10px;}
}

/* 年間行事 */
#events {
    position: relative;
}
#events #animal_07{
    position: absolute;
    top: 3rem;
    left: -16%;
    width: 30%;
}
#events #animal_08{
    position: absolute;
    top: 5rem;
    right: -15%;
    width: 27%;
}
.events {padding: 150px 0 0;}
.memo {
    text-align: center;
    margin: 30px 10px;
}
.memo h1 {
    margin-top: 30px;
    color: #036EB7;
    font-weight: bold;
    line-height: 1.3;
}
.term_box {padding: 150px 0 0;}
.term_box .flex {align-items: flex-start;}
.term {
    background: rgb(221, 221, 221);
    border-radius: 10px;
    padding: 40px 90px;
    position: relative;
    margin-bottom: 8rem;
}
.term:last-child {margin-bottom: 2rem;}
.term_area::before {
    content: "";
    border-left: 1px solid #000;
    align-self: stretch;
    margin: 0 50px;
}
.term h3 {
    position: absolute;
    margin: 0 auto;
    top: -4.5rem;
    left: calc(50% - 133px);
    width: 270px;
}
.term table tbody tr {line-height: 1.6;}
.term table tbody tr th {
    width: 23%;
    text-align: right;
    padding-right: 0.5rem;
}
.term table tbody tr td {width: 77%;}
.term table tbody tr td small {
    color: #808080;
    margin-left: 7px;
}
.term_left,.term_right {
    width: 45%;
    flex: 1;
}
.term_left {
    order: -1;
}
#first {
    position: relative;
    background: #f19ec21a;
}
#second {
    position: relative;
    background: #ffe04622;
}
#third {
    position: relative;
    background: #036fb711;
}
#first #first_01 {
    position: absolute;
    top: -2.5rem;
    left: -3rem;
    width: 100px;
}
#first #first_02 {
    position: absolute;
    top: 6.5rem;
    left: -2rem;
    width: 92px;
}
#first #first_03 {
    position: absolute;
    top: 5.5rem;
    right: -2rem;
    width: 100px;
}
#second #second_01 {
    position: absolute;
    top: 10rem;
    left: -1rem;
    width: 112px;
}
#second #second_02 {
    position: absolute;
    top: -2.5rem;
    right: -2rem;
    width: 100px;
}
#second #second_03 {
    position: absolute;
    top: 9.5rem;
    right: -2rem;
    width: 100px;
}
#third #third_01 {
    position: absolute;
    top: -4.8rem;
    left: -3rem;
    width: 124px;
}
#third #third_02 {
    position: absolute;
    top: 3rem;
    left: 19rem;
    width: 87px;
}
#third #third_03 {
    position: absolute;
    top: -2.5rem;
    right: -2rem;
    width: 100px;
}
#first th {color: #ED7980;}
#second th {color: #F39800;}
#third th {color: #036EB7;}

@media screen and (max-width: 768px) {
    .events {
        padding: 60px 0 0;
    }
    .term {
        margin-bottom: 6rem;
        padding: 40px;
    }
    .term_box {padding: 70px 20px 0;}
    .term h3 {
        top: -3.35rem;
        left: calc(50% - 100px);
        width: 200px;
    }
    .term table tbody tr th {width: 100%;}
    .term table tbody tr td {width: 100%;}
    .term_left,.term_right {
        width: 100%;
        flex: none;
    }
    .term table tbody tr {
        display: block;
        text-align: left;
    }
    .term_area::before {border-left: none;}
    .memo h1 {font-size: 1.3rem;}
    #first #first_01 {
        position: absolute;
        top: -4.5rem;
        left: -3rem;
        width: 101px;
    }
    #first #first_02 {
        position: absolute;
        top: -3.5rem;
        left: 13.5rem;
        width: 92px;
    }
    #first #first_03 {
        position: absolute;
        top: 20.5rem;
        right: -2rem;
        width: 100px;
    }
    #second #second_01 {
        position: absolute;
        top: -3rem;
        left: 12rem;
        width: 112px;
    }
    #second #second_02 {
        position: absolute;
        top: -3.5rem;
        right: 13rem;
        width: 75px;
    }
    #second #second_03 {
        position: absolute;
        top: 28rem;
        right: -2.5rem;
        width: 100px;
    }
    #third #third_01 {
        position: absolute;
        top: -0.8rem;
        left: 10.5rem;
        width: 124px;
    }
    #third #third_02 {
        position: absolute;
        top: 6rem;
        left: 13rem;
        width: 87px;
    }
    #third #third_03 {
        position: absolute;
        top: 16.5rem;
        right: -3rem;
        width: 100px;
    }
}

/* カリキュラム・料金表 */
#curri {position: relative;}
.curri {
    max-width: 1200px;
    margin: 0 auto;
}
#curri #animal_01{
    position: absolute;
    top: 10rem;
    left: calc(30% - 14rem);
    width: 15%;
}
#curri #animal_02{
    position: absolute;
    top: 10rem;
    right: 13%;
    width: 14%;
}
#curri #animal_03{
    position: absolute;
    top: 92rem;
    left: 2%;
    width: 14%;
    z-index: 1;
}
#curri #animal_01_sp{
    position: static;
}
#curri #animal_02_sp{
    position: static;
}
.curri_intro {
    max-width: 900px;
    margin: 0 auto;
}
.curri_intro p, .curri_intro img {width: 47%;}
#curri h3.ttl_curri_01 {max-width: 600px;}
#curri h3.ttl_curri_02 {max-width: 220px;}
.select {padding: 40px 0;}
.select p {text-align: center;}
.classes {padding: 70px 0 20px;}
.classes p {text-align: left;}
.classes .japanese {background: url(../img/curri/bg_japan.png) no-repeat;}
.classes .english {background: url(../img/curri/bg_eng.png) no-repeat;}
.classes .japanese h1 {color: #F39800;}
.classes .english h1 {color: #03AF7A;}
.classes .japanese img {
    position: absolute;
    top: 3rem;
    right: 5.5rem;
    width: 13%;
}
.classes .english img {
    position: absolute;
    top: 3rem;
    left: 4.5rem;
    width: 13%;
}
.classes .japanese, .classes .english {
    position: relative;
    width: 47%;
    height: 470px;
    padding: 70px 120px;
    background-size: contain;
    background-position: center center;
}
.classes .japanese h1, .classes .english h1 {
    margin-bottom: 30px;
}
.classes .japanese h1 small, .classes .english h1 small {
    color: #808080;
    font-size: 1rem;
}
.classes .or {
    width: 3%;
    line-height: 1;
    text-align: center;
}

.curri_box {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 55px;
    margin: 50px 0;
}
.curri_box .box {
    position: relative;
    border: 3px solid #808080;
    border-radius: 7px;
    padding: 30px 20px 10px;
}
.curri_box .box .pin {
    position: absolute;
    top: -1.5rem;
    left: calc(50% - 20px);
    width: 35px;
}
.curri_box .box .art {
    position: absolute;
    top: 1rem;
    right: 2rem;
    width: 25%;
}
.curri_box .box .science {
    position: absolute;
    top: -1rem;
    right: 1rem;
    width: 22%;
}
.curri_box .box .music {
    position: absolute;
    top: 1rem;
    left: 3rem;
    width: 11%;
}
.curri_box .box .pe {
    position: absolute;
    top: 1.5rem;
    left: 2rem;
    width: 11%;
}
.curri_box .box .math {
    position: absolute;
    top: 1rem;
    right: 2rem;
    width: 16%;
}
.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item2 {
    grid-column-start: 3;
    grid-column-end: 4;
}
.item3 {
    grid-column-start: 1;
    grid-column-end: 2;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}
.item5 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item6 {
    grid-column-start: 3;
    grid-column-end: 4;
}
.item2, .item3, .item6 {padding-top: 60px;}
.curri_box .box .left, .curri_box .box .right {width: 49%;} 
.curri_box .box h1 small {
    color: #808080;
    font-size: 1rem;
}
.curri_box .box p {
    text-align: left;
    padding: 30px;
}
#box_blue {border-color: #036EB7;}
#box_blue h1 {color: #036EB7;}
#box_pink {border-color: #ED7980;}
#box_pink h1 {color: #ED7980;}
#box_purple {border-color: #A86DAE;}
#box_purple h1 {color: #A86DAE;}
#box_orange {border-color: #F39800;}
#box_orange h1 {color: #F39800;}
#box_red {border-color: #EA5548;}
#box_red h1 {color: #EA5548;}
#box_green {border-color: #03AF7A;}
#box_green h1 {color: #03AF7A;}

.extra {position: relative;}
.extra #animal_04{
    position: absolute;
    top: 8rem;
    right: 2%;
    width: 16%;
}
.extra #animal_05{
    position: absolute;
    top: 32rem;
    left: 5%;
    width: 12%;
}
.extra_sch {
    width: 100%;
    max-width: 650px;
    text-align: center;
    margin: 50px auto 30px;
}
.extra_info .txt {
    width: 100%;
    max-width: 810px;
    margin: 40px auto 0;
}
.extra_info .extra_type {
    max-width: 850px;
    margin: 40px auto 0;
}
.extra_info .type {width: 80%;}
.extra_info .type p {margin-top: 10px;}
.extra_info .extra_img {width: 20%;}
.extra_info .txt span {
    font-size: 1.4rem;
    color: #036EB7;
    font-weight: bold;
}
.extra_info .txt p {margin-top: 10px;}
.extra_ribbon {
    position: relative;
    width: 100%;
    text-align: left;
    background: #036EB7;
    color: #fff;
    padding: 7px 20px 6px 15px;
    display: table-cell;
    font-size: 1.2rem;
}
.extra_ribbon:after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 10px 22px 0;
    border-right-color: #fff;
    color: transparent;
    content: "";
}
.extra_ribbon large {
    font-size: 1.7rem;
    color: #FFE488;
    margin-right: 10px;
}

.price {position: relative;}
.price #animal_06{
    position: absolute;
    top: 5rem;
    right: 0%;
    width: 17%;
}
.price #animal_07{
    position: absolute;
    top: 58rem;
    left: -10%;
    width: 15%;
}
.price {padding: 0 0 70px;}
.price p {text-align: center;}
.price .detail {
    max-width: 800px;
    margin: 50px auto -35px;
}
.price .kome {
    max-width: 800px;
    margin: 5px auto 0;
}
.price table {
    max-width: 800px;
    margin: 50px auto 0;
}
.price .detail li {
    margin: 20px 0;
    color: #036EB7;
}
.price .detail li span {color: #000;}
.price .table_area {
	width: 100%;
	margin: 0 auto;
	overflow-x: auto;
}
.price table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
	min-width: 800px;
}
.price table tbody {
    border: 1px solid #000;
    margin: 0;
    padding: 0;
}
.price table th, .price table td {
    padding: 20px;
    text-align: center;
    line-height: 1.7;
}
.price table th {
    background: #E6E6E6;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    width: 200px;
}
.price table th.white {background: #fff;}
.price table td {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    width: 200px;
}
.price table th.left {
    text-align: left;
}

.course {
    margin: 100px auto 20px;
    padding: 40px;
    background: #ECF2F9;
    border-radius: 10px;
    max-width: 1100px;
}
.course p {text-align: center;}
.course .left, .course .right {width: 49%;}
.course .left img {
    max-width: 400px;
    margin: -30px auto 30px;
}

@media screen and (max-width: 768px) {
    .curri {padding: 0 20px 0;}
    .curri_intro p, .curri_intro img {
        width: 100%;
        margin-bottom: 10px;
    }
    .select {padding: 0;}
    .select p:first-child, .select p:last-child {text-align: left;}
    .classes {padding: 35px 0;}
    .classes .or {
        width: 100%;
        margin: 20px auto 5px;
    }
    .classes .japanese {background: url(../img/curri/bg_japan_sp.png) no-repeat;}
    .classes .english {background: url(../img/curri/bg_eng_sp.png) no-repeat;}
    .classes .japanese, .classes .english {
        width: 100%;
        height: 460px;
        padding: 50px 60px;
        background-size: contain;
        background-position: center center;
    }
    .classes .japanese img {
        position: absolute;
        top: 1rem;
        right: 2rem;
        width: 17%;
    }
    .classes .english img {
        position: absolute;
        top: 1rem;
        left: 2rem;
        width: 17%;
    }
    .classes .japanese h1, .classes .english h1 {margin-bottom: 20px;}
    .curri_box {display: block;}
    .curri_box .box {
        margin: 60px 0;
        padding: 55px 15px 10px;
    }
    .curri_box .box p {padding: 30px 10px;}
    .curri_box .box .left, .curri_box .box .right {width: 100%;}
    .curri_box .box .read {
        position: absolute;
        top: -1.5rem;
        right: 0.5rem;
        width: 22%;
    }
    .curri_box .box .science {
        position: absolute;
        top: -1rem;
        right: 16rem;
        width: 22%;
    }
    .curri_box .box .music {
        position: absolute;
        top: 1rem;
        left: 2rem;
        width: 20%;
    }
    .curri_box .box .pe {
        position: absolute;
        top: 1.5rem;
        left: 16rem;
        width: 20%;
    }
    .curri_box .box .math {
        position: absolute;
        top: 1rem;
        right: 17rem;
        width: 16%;
    }
    .extra_sch {margin: 25px auto 20px;}
    .extra_ribbon {
        font-size: 1rem;
        padding: 5px 18px 8px 13px;
    }
    .extra_ribbon large {font-size: 1.5rem;}
    .price {padding: 20px 0 0;}
    .price p {text-align: left;}
    .price .table_area {
        overflow-x: scroll;
    }
    .price table th, .price table td {padding: 10px;}

    .course {
        margin: 50px 0 0;
        padding: 20px;
    }
    .course p {
        text-align: left;
        margin-bottom: 15px;
    }
    .course .left, .course .right {width: 100%;}
    .course .left img {margin: 5px auto 20px;}
    .price table th.left {
       font-size: 0.8rem;
    }
    .extra_info .type {width: 100%;}
    .extra_info .extra_img {
        width: 100%;
        margin-top: 10px;
    }
}

/* お問い合わせ */
#contact {position: relative;}
#contact #animal_01{
    position: absolute;
    top: 9rem;
    left: calc(25% - 14rem);
    width: 9%;
}
#contact #animal_02{
    position: absolute;
    top: 15rem;
    left: calc(35% - 14rem);
    width: 9%;
}
#contact #animal_03{
    position: absolute;
    top: 9rem;
    right: calc(25% - 14rem);
    width: 15%;
}
.contact_txt h1 {
    text-align: center;
    font-weight: bold;
    color: #036EB7;
    line-height: 1.5;
}
.contact_txt p {
    text-align: center;
    font-weight: bold;
    line-height: 1.8;
    margin-top: 50px;
}
.contact_txt ul {
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
}
.contact_txt ul li {
    font-size: 18px;
    font-weight: bold;
}
.contact_txt ul li.read {
    color: #036EB7;
    font-size: 1.5rem;
}
.contact_area {
    width: 100%;
    max-width: 760px;
    margin: 60px auto;
    box-sizing: border-box;
    overflow: hidden;
}
.form {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    box-sizing: border-box;
    border-collapse: separate;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 700;
}
.form th {
    width: 30%;
    box-sizing: border-box;
    vertical-align: middle;
    font-weight: 700;
    text-align: left;
}
.form th span {
    background: #036EB7;
    padding: 7px;
    color: #fff;
    font-size: 0.7rem;
    margin-left: 5%;
}
.form td {
    vertical-align: middle;
}
.wpcf7-form-control {
    width: 100%;
    height: 50px;
    padding: 0 10px;
    margin: 10px 0;
    background: #eeeeee;
    font-size: 14px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    box-sizing: border-box;
    border: 2px solid #eeeeee;
    padding: 0.7vw 2vw;
}
.textarea .wpcf7-form-control {
    width: 100%;
    height: 150px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    padding: 1vw 2vw;
}
.form_foot input {
    width: 200px;
    margin: 20px auto 0;
    display: block;
    border: 0;
    border-radius: 0;
    font-size: 15px;
    font-weight: bold;
    -webkit-appearance: none;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    background: #036EB7;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .contact_inner {
        padding: 0 20px;
    }
    .contact_txt h1 {font-size: 1.3rem;}
    .contact_txt p {
        text-align: left;
        margin-top: 30px;
    }
    .contact_txt ul li {
        font-size: 16px;
    }
    .contact_txt ul li.read {
        font-size: 1.3rem;
    }
    .form tr,td {
        display: block;
        width: 100%;
    }
    .anchor{
        display: block;
        padding-top: 140px;
        margin-top: -70px;
    }

}