div.office{
}
div.office h4{
}
div#company_staff{
    display: flex;
    align-items: flex-start;
}
div#company_staff img{
    display: block;
    width: 50%;
    margin: auto 0 0 auto;
    border-radius: 4vw;
}
div#company_staff ul{
    display: block;
    width: 50%;
}
div#flow{
    padding: 0 0 8% 0;
    text-align: center;
    border-collapse: separate;
    border-spacing: 0px 16px;
    border-radius: 4vw;
    position: relative;
}
div#flow ol{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    list-style-type: none;
}
div#flow ol li{
    display: flex;
    flex-flow: column;
    width: 45%;
    height: 12em;
    margin: 0 auto;
    margin-bottom: 1em;
    text-align: center;
    border: 2px #999 solid;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
}
div#flow ol li:nth-child(1){background-color: #b1c6ea;}
div#flow ol li:nth-child(2){background-color: #bde4b1;}
div#flow ol li:nth-child(3){background-color: #ffc9a9;}
div#flow ol li:nth-child(4){background-color: #ffe88f;}
div#flow ol li:nth-child(5){background-color: #bde4b1;}
div#flow ol li:nth-child(6){background-color: #b1c6ea;}

div#flow ol li:nth-child(odd):not(:first-child){
    margin-top: -7em;
}
div#flow ol li:nth-child(2){
    margin-top: 7em;
}
div#flow ol li div.arrow{
    position: absolute;
    width: 80px;
    height: 80px;
    background-image: url("../images/flow/arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

div#flow ol li:nth-child(odd):not(:last-child) div.arrow{
    transform: rotate( -150deg );
    right: -14%;
    bottom: 10%;
}
div#flow ol li:nth-child(even):not(:last-child) div.arrow{
    transform: rotate( -30deg );
    left: -14%;
    bottom: 10%;
}

div#flow ol li h5{
    margin: 10px auto 0 auto;
    font-size: 1.6rem;
}
div#flow ol li p{
    margin: 0 auto auto auto;
}
div#flow img{
    width: 25%;
    position: absolute;
    bottom: 1%;
    left: 5%;
}
table.charge{
    width: 100%;
    border-collapse: collapse;
}
table.charge th, table.charge td{
    padding: 2px 1em;
    border: 1px #666 solid;
    box-sizing: border-box;
}
table.charge td:nth-child(1){
    width: 8em;
}
table.charge td:nth-child(2){
    width: calc(100% - 8em - 8em);
}
table.charge td:nth-child(3){
    width: 8em;
    text-align: right;
}

div.other{
    padding: 0 0 12% 0;
    position: relative;
}
div.other img{
    width: 25%;
    position: absolute;
    bottom: 0;
    right: 0;
}

/* facility */
div.facility{
    width: 100%;
    margin: auto;
}

div.img{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 0;
}

/* 施設紹介 */
/* box1 */
div#box1{
    width: 100%;
    height: 60vw;
    margin: 4% auto;
}
div#box1contents{
    height: 100%;
    width: 100%;
    position: relative;
}
div#box1contents p{
    padding: 0 2%;
    position: absolute;
    z-index: 10;
    white-space: nowrap;
}
div#box1contents p:nth-of-type(1){
    top: 10%;
    left: 45%;
}
div#box1contents p:nth-of-type(1) span:nth-of-type(1){
    color: red;
}
div#box1contents p:nth-of-type(1) span:nth-of-type(2){
    background-color: #ddd;
    -webkit-text-decoration:underline wavy red;
    text-decoration: underline wavy red;
}
div#box1contents p:nth-of-type(2){
    bottom: 3%;
    right: 40%;
    background-color: #faa;
    border-radius: 4vw;
}
div#box1contents div.img{
    background-image: url("../images/about/facility/image2.png"), url("../images/about/facility/image4.png"), url("../images/about/facility/image5.png"), url("../images/about/facility/image6.png"), url("../images/about/facility/image1.png"), url("../images/about/facility/image3.png");
    background-position:
        top right 10%,
        bottom 20% left,
        bottom 40% left 20%,
        bottom right 30%,
        top 20% left 10%,
        bottom right 10%
    ;
    background-size:
        16% auto,
        16% auto,
        16% auto,
        16% auto,
        50% auto,
        30% auto
    ; 
}
@media (max-width: 900px) {
    div#box1{
        height: 82vw;
    }
    div#box1contents p:nth-of-type(1){
        top: 10%;
        left: 45%;
        font-size: 0.95rem;
    }
}
/* box2 */
div#box2{
    width: 100%;
    height: 45vw;
    margin: 4% auto;
}
@media (max-width: 900px) {
}
div#box2contents{
    width: 100%;
    height: 100%;
    position: relative;
}
div#box2contents div.img{
    background-image: url("../images/about/facility/image10.png"), url("../images/about/facility/image8.png"), url("../images/about/facility/image9.png");
    background-position:
        bottom left 10%,
        top left 15%,
        bottom right 15%
    ;
    background-size:
        20% auto,
        45% auto,
        50% auto
    ;
}
div#box2contents p{
    padding: 0 2%;
    background-color: #afa;
    border-radius: 4vw;
    position: absolute;
    z-index: 10;
    right: 20%;
    bottom: 3%;
    white-space: nowrap;
}

/* box3 */
div#box3{
    width: 100%;
    height: 80vw;
    margin: 4% auto;
}

div#box3contents{
    width: 100%;
    height: 100%;
    position: relative;
}
div#box3contents div.img{
    background-image: url("../images/about/facility/image15.png"), url("../images/about/facility/image19.png"), url("../images/about/facility/image12.png"), url("../images/about/facility/image13.png"), url("../images/about/facility/image14.png"), url("../images/about/facility/image17.png");
    background-position:
        top 52% right 35%,
        bottom 10% left 50%,
        top left 10%,
        top 5% right 30%,
        top 40% left 20%,
        bottom right 10%
    ;
    background-size:
        20% auto,
        20% auto,
        40% auto,
        28% auto,
        40% auto,
        35% auto
    ;
}
div#box3contents p{
    padding: 0 2%;
    position: absolute;
    z-index: 10;
    white-space: nowrap;
}
div#box3contents p:nth-of-type(1){
    top: 60%;
    left: 60%;
    transform: translate(-50%, -50%);
    background-color: #acf;
    border-radius: 4vw;
}
div#box3contents p:nth-of-type(2){
    top: 70%;
    right: 50%;
    background-color: #afa;
    border-radius: 4vw;
}


/* 施設紹介(児童発達支援) */
/* box4 */
div#box4{
    width: 100%;
    height: 30vw;
    margin: 4% auto;
}
div#box4contents{
    width: 100%;
    height: 100%;
    position: relative;
}
div#box4contents p{
    margin: 0 auto;
    padding: 0 2%;
    position: absolute;
    z-index: 10;
    white-space: nowrap;
}
div#box4contents p:nth-of-type(1){
    top: 0;
    left: 5%;
    background-color: #acf;
    border-radius: 4vw;
}
div#box4contents p:nth-of-type(2){
    top: 8%;
    right: 12%;
    background-color: #fff;
    border: 4px solid #ffa;
    border-radius: 4vw;
}
div#box4contents p:nth-of-type(2):before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top: 12px solid #fff;
  z-index: 2;
}
div#box4contents p:nth-of-type(2):after {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  border: 14px solid transparent;
  border-top: 14px solid #ffa;
  z-index: 1;
}
div#box4contents div.img{
    background-image: url("../images/about/facility2/image1.jpg"), url("../images/about/facility2/image2.jpg");
    background-position:
        top 50% left 15%,
        bottom 50% right 15%
    ;
    background-size:
        50% auto,
        30% auto
    ;
}

/* box5 */
div#box5{
    width: 100%;
    height: 30vw;
    margin: 4% auto;
}
div#box5contents{
    width: 100%;
    height: 100%;
    position: relative;
}
div#box5contents p{
    margin: 0 auto;
    padding: 0 2%;
    position: absolute;
    z-index: 10;
    white-space: nowrap;
}
div#box5contents p:nth-of-type(1){
    top: 0;
    left: 5%;
    background-color: #afa;
    border-radius: 4vw;
}
div#box5contents p:nth-of-type(2){
    bottom: 0;
    right: 20%;
    background-color: #fff;
    border: 4px solid #ffa;
    border-radius: 4vw;
}
div#box5contents p:nth-of-type(2):before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-bottom: 12px solid #fff;
  z-index: 12;
}
div#box5contents p:nth-of-type(2):after {
  content: "";
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  border: 14px solid transparent;
  border-bottom: 14px solid #ffa;
  z-index: 11;
}
div#box5contents div.img{
    background-image: url("../images/about/facility2/image3.jpg"), url("../images/about/facility2/image4.jpg"), url("../images/about/facility2/image5.jpg"), url("../images/about/facility2/image6.png");
    background-position:
        top 30% left 10%,
        top 30% left 50%,
        top 30% right 10%,
        top 30% left 30%
    ;
    background-size:
        15% auto,
        15% auto,
        15% auto,
        10% auto
    ;
}

/* box6 楽器*/
div#box6{
    width: 100%;
    height: 25vw;
    margin: 4% auto;
}
div#box6contents{
    width: 100%;
    height: 100%;
    position: relative;
}
div#box6contents p{
    margin: 0 auto;
    padding: 0 2%;
    position: absolute;
    z-index: 10;
    white-space: nowrap;

    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #faa;
    border-radius: 4vw;
}
div#box6contents div.img{
    background-image: url("../images/about/facility2/image9.jpg");
    background-position:
        top 50% left 50%
    ;
    background-size:
        50% auto
    ;
}

/* box7 遊具 */
div#box7{
    width: 100%;
    height: 25vw;
    margin: 4% auto;
}
div#box7contents{
    width: 100%;
    height: 100%;
    position: relative;
}
div#box7contents p{
    margin: 0 auto;
    padding: 0 2%;
    position: absolute;
    z-index: 10;
    white-space: nowrap;

    top: 0;
    left: 5%;
    background-color: #acf;
    border-radius: 4vw;
}
div#box7contents div.img{
    background-image: url("../images/about/facility2/image10.jpg")/*, url("../images/about/facility2/image11.jpg"), url("../images/about/facility2/image12.jpg")*/;
    background-position:
        top 50% left 10%
/*
*/
    ;
    background-size:
        50% auto
/*
*/
    ;
}

/* box8 おもちゃ */
div#box8{
    width: 100%;
    height: 25vw;
    margin: 4% auto;
}
div#box8contents{
    width: 100%;
    height: 100%;
    position: relative;
}
div#box8contents p{
    margin: 0 auto;
    padding: 0 2%;
    position: absolute;
    z-index: 10;
    white-space: nowrap;

    top: 0;
    right: 5%;
    background-color: #afa;
    border-radius: 4vw;
}
div#box8contents div.img{
    background-image: url("../images/about/facility2/image14.jpg"), url("../images/about/facility2/image15.jpg"), url("../images/about/facility2/image16.jpg");
    background-position:
        top 10% left 10%,
        bottom 10% left 30%,
        top 50% right 10%
    ;
    background-size:
        12% auto,
        12% auto,
        50% auto
    ;
}

/* box9 絵本 */
div#box9{
    width: 100%;
    height: 25vw;
    margin: 4% auto;
}
div#box9contents{
    width: 100%;
    height: 100%;
    position: relative;
}
div#box9contents p{
    margin: 0 auto;
    padding: 0 2%;
    position: absolute;
    z-index: 10;
    white-space: nowrap;

    top: 0;
    left: 5%;
    background-color: #faa;
    border-radius: 4vw;
}
div#box9contents div.img{
    background-image: url("../images/about/facility2/image17.jpg"), url("../images/about/facility2/image18.jpg")/*, url("../images/about/facility2/image19.jpg"), url("../images/about/facility2/image19.jpg"), url("../images/about/facility2/image20.jpg")*/;
    background-position:
        top 50% right 10%,
        top 50% left 10%
    ;
    background-size:
        20% auto,
        50% auto
    ;
}

/* コロナ対策 */
/* box10 */
div#box10{
    width: 100%;
    height: 100vw;
    margin: 4% auto;
}
div#box10contents{
    width: 100%;
    height: 100%;
    position: relative;
}
div#box10contents p{
    padding: 0 2%;
    position: absolute;
    bottom: 30%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, 0);
    white-space: nowrap;
    background-color: #afa;
    border-radius: 4vw;
}
div#box10contents div.img{
    background-image:
        url("../images/about/facility/image19.png"),
        url("../images/about/facility/image20.png"),
        url("../images/about/facility/image21.png"),
        url("../images/about/facility/image22.png"),
        url("../images/about/facility/image23.png"),
        url("../images/about/facility/image26.png"),
        url("../images/about/facility/image27.png")
    ;
    background-position:
        bottom 25% right 45%,
        top right,
        top left,
        top 45% left,
        top 45% right,
        bottom right 25%,
        bottom left
    ;
    background-size:
        20% auto,
        45% auto,
        45% auto,
        45% auto,
        45% auto,
        29.3% auto,
        45% auto
    ;
}

/* stafflist */
ul.staff_list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 900px) {
    ul.staff_list{
        grid-template-columns: 1fr 1fr;
    }
}
ul.staff_list li{
    display: block;
    width: 96%;
    height: 96%;
    margin: 2% auto;
    padding: 2% 1%;
    position: relative;
    border-collapse: collapse;
    border-radius: 4vw;
    background-color: #fff;
}
ul.staff_list li div.staffinfoimage{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    background-repeat: no-repeat; 
    background-position: bottom 5% right 10%;
}
ul.staff_list li div.staffinfoimage#sii1{
    background-image: url("../images/about/staff/image10.jpeg");
    background-size: 25%;
}
ul.staff_list li div.staffinfoimage#sii2{
    background-image: url("../images/about/staff/image9.png");
    background-size: 35%;
}
ul.staff_list li div.staffinfoimage#sii3{
    background-image: url("../images/about/staff/image11.png");
    background-size: 25%;
}
div.staffinfo1{
    width: 100%;
    margin: 2% auto;
}
div.staffinfo1 p{
    width: 80%;
    margin: 0 auto;
    white-space: nowrap;
}
div.staffinfo1 p:nth-child(1){
    font-size: 0.9rem;
}
div.staffinfo1 p:nth-child(2){
    font-size: 1.1rem;
    text-align: center;
}
div.staffinfo2{
    width: 100%;
}
div.staffinfo2 img{
    display: block;
    width: 90%;
    margin: 0 auto;
}
div.staffinfo3{
    width: 100%;
}
div.staffinfo3 p{
    width: 90%;
    margin: 5% auto;
}

.access{
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.access iframe{
    width: 100%;
	margin: 0 auto;
}

@media (max-width: 900px) {
    div#flow ol li h5{
        font-size: 1.4rem;
    }
    div#flow ol li{
        width: 50%;
        height: 11em;
    }
    div#flow ol li:nth-child(odd):not(:first-child){
        margin-top: -6em;
    }
    div#flow ol li:nth-child(2){
        margin-top: 6em;
    }
    div#flow ol li div.arrow{
        width: 4rem;
        height: 4rem;
    }
    div#flow ol li p{
        font-size: 0.8em;
    }
    div#box3{
        height: 90vw;
    }
    div#box4{
        height: 70vw;
    }
    div#box4contents p:nth-of-type(2){
        top: 40%;
    }
    div#box4contents div.img{
        background-image: url("../images/about/facility2/image1.jpg"), url("../images/about/facility2/image2.jpg");
        background-position:
            top 0 left 50%,
            bottom 0 left 50%
        ;
        background-size:
            60% auto,
            60% auto
        ;
    }
    div#box5{
        height: 48vw;
    }
    div#box5contents p:nth-of-type(2){
        width: 90%;
        left: 5%;
    }
    div#box5contents div.img{
        background-position:
            top 30% left 10%,
            top 30% left 50%,
            top 30% right 10%,
            top 30% left 30%
        ;
        background-size:
            18% auto,
            18% auto,
            18% auto,
            18% auto
        ;
    }
    div#box6contents p{
        left: 80%;
    }
    div#box6contents div.img{
        background-position: bottom left;
        background-size: 60% auto;
    }
    div#box7{
        height: 35vw;
    }
    div#box7contents p{
        width: 60%;
        top: 0;
        left: 0;
    }
    div#box7contents div.img{
        background-position: bottom right;
        background-size: 60% auto;
    }
    div#box8{
        height: 40vw;
    }
    div#box8contents p{
        width: 80%;
    }
    div#box8contents div.img{
        background-position:
            bottom left 10%,
            bottom left 30%,
            bottom right 10%
        ;
        background-size:
            15% auto,
            15% auto,
            50% auto
        ;
    }
    div#box9{
        height: 30vw;
    }
    div#box9contents p{
    }
    div#box9contents div.img{
        background-position:
            bottom right 10%,
            bottom left 10%
        ;
        background-size:
            35% auto,
            50% auto
        ;
    }
    div#box10{
        height: 120vw;
    }
    div#box10contents p{
        padding: 0 2%;
        position: absolute;
        bottom: 25%;
        left: 50%;
        z-index: 10;
        transform: translate(-50%, 0);
        white-space: nowrap;
        background-color: #afa;
        border-radius: 4vw;
    }
    div#box10contents div.img{
        background-position:
            bottom 25% right 45%,
            top right 5%,
            top left 5%,
            top 40% left 5%,
            top 40% right 5%,
            bottom right 25%,
            bottom left 5%
        ;
    }
}