@charset "utf-8";
/* CSS Document */

h6.year-text {
    font-size: 1em;
    color: var(--black);
    letter-spacing: 0.08em;
    font-weight: var(--fw-bold);
}

small.during {
    margin: 15px auto 0;
    display: inline-block;
    font-size: 0.85em;
    color: var(--text-gray);
}

.all-plan p {
    background: #f7f4ee;
    color: var(--black);
    padding: 10px;
    display: block;
}

.all-plan {
    display: grid;
    gap: 10px;
}

.yearbox-wrap {
    position: sticky;
    height: auto;
    top: 80px;
    left: 0;
    z-index: 1;
    display: none;
}


.year-box{
  display: flex;
  gap: 6px;
  height: 100%;
}

.year-box .year-item{
    background: var(--darkblue);
    color: var(--white);
    font-size: 0.9em;
    padding: 0 5px 12px;
    text-align: center;
    border-radius: 5px;
    width: 17%;
}

.year-box .year-item b {
    display: block;
    line-height: 0.5;
}


.tablepress>:where(thead,tfoot)>tr>* {
    font-size: 0.9em;
    background: #f7f4ee !important;
    border-right: 1px dashed var(--gray) !important;
}

.tablepress>:where(tbody.row-striping)>:nth-child(even of :where(:not(.child,.dtrg-group)))+:where(.child)>*, .tablepress>:where(tbody.row-striping)>:nth-child(even of :where(:not(.child,.dtrg-group)))>* {
    background-color: #f7f4ee !important;
}

thead tr.row-1 th {
    background: #0f507d !important;
    color: var(--white) !important;
}

.tablepress {
    border-collapse: collapse !important;
    width: 100%;
    min-width: 1028px !important;
    border-bottom: 1px solid #0f507d !important;
}

.table-wrap {overflow-x: auto;display: block;}



.tablepress>:where(thead)+tbody>:where(:not(.child))>*, .tablepress>tbody>*~:where(:not(.child))>*, .tablepress>tfoot>:where(:first-child)>* {
    border-right: 1px dashed var(--gray) !important;
    font-size: 0.9em;
}

.tablepress-id-1 .row-4 .column-1,
.tablepress-id-1 .row-5 .column-1,
.tablepress-id-2 .row-4 .column-1,
.tablepress-id-2 .row-5 .column-1,
.tablepress-id-3 .row-4 .column-1,
.tablepress-id-3 .row-5 .column-1,
.tablepress-id-4 .row-4 .column-1,
.tablepress-id-4 .row-5 .column-1,
.tablepress-id-5 .row-4 .column-1,
.tablepress-id-5 .row-5 .column-1,
.tablepress-id-6 .row-4 .column-1,
.tablepress-id-6 .row-5 .column-1{
    background: url(../img/common/bg_noise.jpg) !important;
    border-right: none !important;
}

.tablepress>:where(thead)+tbody>:where(:not(.child))>*,.tablepress>tbody>*~:where(:not(.child))>*,.tablepress>tfoot>:where(:first-child)>* {
    border-top: none !important;
}

.tablepress td:last-child {
    border: none !important;
}

ul.research-list li {
    margin: 50px auto 0;
}

.template p.teacher {
    color: var(--bolack);
    margin: 0 auto 10px;
    font-size: 0.85em;
}

.detail b {
    font-weight: var(--fw-bold);
}

.detail p.blue {
    color: var(--blue);
}

.detail {

    overflow-x: auto;
    width: 100%;
}


li:first-child .title h4 {
    background: #2a9dd0;

}

li:nth-child(2) .title h4 {
    background: #1168ac;

}

li:nth-child(3) .title h4 {
    background: #7077b1;

}

li:nth-child(4) .title h4 {
    background: #2f9ebf;

}

li:nth-child(5) .title h4 {
    background: #2b9d7a;

}

li:nth-child(6) .title h4 {
    background: #55ad50;

}

.title h4 {
    color: var(--white);
    padding: 23px 10px 14px;
    border-radius: 5px;
    text-align: center;
    line-height: 1.5;
}

.template .templatebox .title h4:before {
    font-size: 1.5em;
    position: absolute;
    top: -20px;
    transform: inherit;
    counter-increment: number 1;
    content: counter(number) " ";
    text-align: center;
    width: 45px;
    display: inline-block;
    height: 45px;
    vertical-align: text-top;
    border-radius: 30px;
    line-height: 1.8;
    left: 0;
    margin: auto;
    right: 0;
    color: var(--white);
    font-family: 'Outfit';
    z-index: 0;
}

li:first-child .title h4:before {
    background: #2a9dd0;
}

li:nth-child(2) .title h4:before {
    background: #1168ac;
}

li:nth-child(3) .title h4:before {
    background: #7077b1;
}

li:nth-child(4) .title h4:before {
    background: #2f9ebf;
}

li:nth-child(5) .title h4:before {
    background: #2b9d7a;
}

li:nth-child(6) .title h4:before {
    background: #55ad50;
}

li .r-top h5 {
    color: #2a9dd0;
    font-weight: var(--fw-bold);
    border: none;
    padding: 0;
    font-size: 1em;
    padding: 10px;
    margin: 0 auto;
    border-radius: 5px;
}

li:first-child .r-top h5 {
    color: #2a9dd0;
    background: #f0f9fd;
}


li:nth-child(2) .r-top h5 {
    color: #1168ac;
    background: #f2f8fd;
}

li:nth-child(3) .r-top h5 {
    color: #7077b1;
    background: #f5f5fd;
}

li:nth-child(4) .r-top h5 {
    color: #2f9ebf;
    background: #effbff;
}

li:nth-child(5) .r-top h5 {
    color: #2b9d7a;
    background: #f3fbf9;
}

li:nth-child(6) .r-top h5 {
    color: #55ad50;
    background: #f3fff2;
}


ul.research-list {
  gap: 40px;
  counter-reset: number 0;
}

.r-top {
  padding: 10px;
}

.r_text {
  margin: 10px auto 0;
}

.r_text a.button {
  max-width: none;
}



#research-results {
  margin: 30px auto 0;
}


.plan_last {
    margin: 30px auto 0;
}

.plan_last p {
    border-top: 0.0625rem dashed var(--lightblue);
    padding: 10px;
}

.plan_last p:last-child {
    border-bottom: 0.0625rem dashed var(--lightblue);
}

.scroll-hint.is-right-scrollable {
    background: none;
}

.scroll-hint-icon {
    padding: 20px 0 70px;
}

@media screen and (min-width: 550px) {
 
}

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

  .templatebox {
    max-width: 1200px;
    margin: auto;
  }

  .wp-block-columns {
    width: 100%;
    display: block;
  }

.year-table td {
    font-size: 0.9em;
    padding: 5px;
}

.detail h5 {
    font-size: 1em;
    margin: 0 0 30px 0;
    letter-spacing: 0.08em;
}


  ul.research-list li {
    margin: 0 auto 40px;
  }

    ul.research-list li:last-child {
    margin: 0 auto;
}




.template .templatebox .title h4:before {
    position: relative;
    left: inherit;
    right: inherit;
    margin: 0 6px 0 0;
    top: inherit;
    width: 25px;
    height: 25px;
    font-size: 1em;
    background: var(--white);
}

.title h4 {
    text-align: left;
    padding: 20px;
    width: 100%;
}

.r-top {
    display: block;
    padding: 15px 15px 20px;
}


.r_text {
    margin: 20px auto 0;
}

li:first-child .title h4:before {
    color: #2a9dd0 !important;
}

li:nth-child(2) .title h4:before {
    color: #1168ac !important;
}

li:nth-child(3) .title h4:before {
    color: #7077b1 !important;
}

li:nth-child(4) .title h4:before {
    color: #2f9ebf !important;
}

li:nth-child(5) .title h4:before {
    color: #2b9d7a !important;
}

li:nth-child(6) .title h4:before {
    color: #55ad50 !important;
}

}

@media screen and (min-width: 1100px) {

.year-box .year-item b {
    display: inline-block;
    line-height: 1;
}

.year-box .year-item {
    padding: 7px 10px;
    font-size: 1em;
}
    
.schedule-inner {
    display: flex;
    position: relative;
}

.schedule-wrap {
    width: 89%;
    margin: 0 4% 0 0;
}

 
.plan_last {writing-mode: tb;text-orientation: upright;position: sticky;right: 0;top: 137px;display: inline-block;height: 60vh;margin: 0;}

.plan_last p {
    border-top: none;
    border-right: 0.0625rem dashed var(--lightblue);
}

.plan_last p:last-child {
    border-bottom: none;
    border-left: 0.0625rem dashed var(--lightblue);
}

 
}

@media screen and (min-width: 768px) and (max-height: 900px) {
     
.plan_last {
    writing-mode: tb;
    text-orientation: upright;
    position: sticky;
    right: 0;
    top: 123px;
    display: inline-block;
    height: 79vh;
    margin: 0;
}

    .plan_last p{
        font-size:0.9em;
    }

}

@media screen and (min-width: 1200px) {
.yearbox-wrap {
    top: 140px;
}
    
h6.year-text {
    font-size: 1.1em;
    font-weight: var(--fw-bold);
}
    
.detail h5 {
    font-size: 1.1em;
}
    
    ul.research-list {
    gap: 60px;
}
    
    .title h4 {
    padding: 25px;
}

.template .templatebox .title h4:before {
    width: 40px;
    height: 40px;
    line-height: 2;
    margin: 0 20px 0 0;
    vertical-align: baseline;
}

.template p.teacher {
    font-size: 0.9em;
    margin: 0 auto 20px;
}

li .r-top h5 {
    padding: 20px;
    font-size: 1.1em;
}



.detail {
    /* padding: 10px; */
    align-items: baseline;
    margin: 30px auto 0;
}



.r-top {
    width: 48%;
    padding: 0;
}
}

@media screen and (min-width: 1699px) {
    .yearbox-wrap {
        top: 100px;
    }
}