@charset "utf-8";
/* CSS Document */
body{
    margin:0px;
    font-size: 1.0rem;
}
p{
    color:rgb(52, 52, 52);
}
h1{
    color:rgb(52, 52, 52);
}
h2{
    color:rgb(50, 50, 50);
}
img{
    width: 100%;
}
@media screen and (min-width: 1025px){

/* アリサ動物病院リクルートメインイメージ start*/
.main-container{
    width: 100%;
    margin-top: 100px;
    background-color: #fef7fa;
}
.main-container h1{
    padding-top: 50px;
    margin-left: 20%;
}
.main-section{
    width: 90%;
    max-width: 1300px;
    margin: auto;
    padding: 100px 0px;
}
.main-content{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 50px;
    width: 60%;
    margin: auto;
    grid-template-areas:
    "card01 card02 card03 card04 card05";
}
.main-card01{
    width:100%;
    text-align: center;
    grid-area: card01;
}
.main-card02{
    width:100%;
    text-align: center;
    grid-area: card02;
}
.main-card03{
    width:100%;
    text-align: center;
    grid-area: card03;
}
.main-card04{
    width:100%;
    text-align: center;
    grid-area: card04;
}
.main-card05{
    width:100%;
    text-align: center;
    grid-area: card05;
}
.entry-content{
    width: 20%;
    margin:50px auto;
}
.entry-button{
    width: 100%;
    background-color: #eb7093;
    border-radius: 10px;
    text-align: center;
    padding: 20px 0px 20px 0px;
    box-shadow: 5px 5px 2px #b4b4b4;
}

.entry-content a{
    text-align: center;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
}
/* アリサ動物病院リクルートメインイメージ end*/

/*　バー　start*/
.separator{
    width: 100%;
    background-color: #fef7fa;
    height: 80px;
    margin: 80px 0px;
}
.title-bar{
    width: 100%;
    background-color: #f2b6c7;
    margin-top: 100px;
}
.title-bar h1{
    color:rgb(255, 255, 255);
    font-size: 1.6rem;
    padding: 20px 0px;
    margin-left: 20%;
}
/*　バー　end*/

/*　職種　start */
.job-container{
    width: 100%;
}
.job-section{
    width: 90%;
    max-width: 1300px;
    margin: auto;
}
.job-content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 50px;
    row-gap: 20px;
}
.job-card{
    display: grid;
    grid-template-columns: 1fr 1fr 8fr;
    gap: 15px;
    align-items: center;
    box-shadow: 5px 5px 2px #eaeaea;
    justify-content: center;
}
.job-arrow{
    width: 50%;
    margin:auto auto auto 20px;
}
.job-icon{
    text-align: center;
    max-width: 80px;

}
.job-text p{
    padding: 10px;
}
.job-text h2{
    line-height: 0.6rem;
}
/*　職種　end */

/*どんな病院 アリサ動物病院の特徴　院長からのメッセージ　start*/
.common-container{
    width: 100%;
}
.common-section{
    width: 80%;
    max-width: 1200px;
    margin: auto;
}
.common-content{
    display: grid;
    grid-template-columns: 3fr 2fr;
    column-gap: 50px;
    place-items:center;
    margin: 50px auto 50px auto;
}
.common-image{
    margin: 80px auto;
}
.common-text{
}
.link{
    background-color: rgb(237, 130, 214);
    width: 60%;
    border-radius: 10px;
    padding: 1px;
    box-shadow: 5px 5px 2px #d3d3d3;
}
.link p{
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    text-align: center;
}
/*どんな病院 アリサ動物病院の特徴　院長からのメッセージ end*/

/*どこにある？ start*/
.where-container{
    width: 100%;
}
.where-section{
    width: 80%;
    max-width: 1200px;
    margin: auto;
}
.where-content1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    place-items:center;
    margin: 50px auto 50px auto;
}
.where-map{
}
.where-map img{
    height: 400px;
}
.where-item{
}
.where-item img{
    gap:50px;
}
.where-area{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 50px;
}
.where-area img{
    width: 80px;
}
.where-logo{
    width:50%;
}
.where-content2{
    display: grid;
    grid-template-columns: 1fr 3fr 4fr;
    column-gap: 50px;
    place-items:center;
    margin: 50px auto 50px auto;
    grid-template-areas: 
    "where-icon where-image where-text";
}
.where-icon{
    text-align: center;
    grid-area: where-icon;
}
.where-icon img{
    width:50%;
}
.where-image{
    grid-area: where-image;
}
.where-text{
    grid-area: where-text;
}
.where-content3{
    display: grid;
    grid-template-columns: 4fr 5fr;
    column-gap: 50px;
    place-items:center;
    margin: 50px auto 50px auto;
    grid-template-areas:
    "where-access where-by";
}
.where-access{
    width: 80%;
    grid-area: where-access;
}
.where-access p{
    font-size: 1.1rem;
    text-align: center;
}
.where-by{
    grid-area: where-by;
}
.where-by p{
    font-size: 1.1rem;
    text-align: center;
}
.where-means{
    margin: 20px auto;
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 3fr 3fr 3fr 3fr 3fr 3fr;
    column-gap: 20px;
    place-items: center;
    border-radius: 10px;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.1);
    padding: 10px 10px;
    grid-template-areas:
    "box1 box2 box3 box4 box5 box6 box7"
    ;
}
.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7 p{
    font-size: 0.8rem;
    text-align: center;
}
.box1{
    grid-area: box1;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box2{
    grid-area: box2;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box3{
    grid-area: box3;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box4{
    grid-area: box4;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box5{
    grid-area: box5;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box6{
    grid-area: box6;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box7{
    grid-area: box7;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
/*どこにある？ end*/

/*サイドバー start*/
.bottom-bar{
    display: none;
}
.bottom-bar img{
    width:20%;
    padding:10px 10px 10px 10px;
}
.bottom-bar h3{
    color: white;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 0.1rem;
    padding-right: 10px;
}

/*サイドバー end*/
}

@media screen and (min-width: 481px) and (max-width: 1024px){

/* アリサ動物病院リクルートメインイメージ start*/
.main-container{
    width: 100%;
    margin-top: 100px;
    background-color: #fef7fa;
}
.main-container h1{
    padding-top: 50px;
    margin-left: 5%;
}
.main-section{
    width: 90%;
    max-width: 1300px;
    margin: auto;
    padding: 100px 0px;
}
.main-content{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
    width: 80%;
    margin: auto;
    grid-template-areas:
    "card01 card02 card03"
    "card01 card04 card05";
    max-width: 500px;
}
.main-card01{
    width:100%;
    text-align: center;
    grid-area: card01;
}
.main-card02{
    width:100%;
    text-align: center;
    grid-area: card02;
}
.main-card03{
    width:100%;
    text-align: center;
    grid-area: card03;
}
.main-card04{
    width:100%;
    text-align: center;
    grid-area: card04;
}
.main-card05{
    width:100%;
    text-align: center;
    grid-area: card05;
}
.entry-content{
    width: 80%;
    margin:50px auto;
    max-width:500px;
}
.entry-button{
    width: 100%;
    background-color: #eb7093;
    border-radius: 10px;
    text-align: center;
    padding: 20px 0px 20px 0px;
    box-shadow: 5px 5px 2px #b4b4b4;
}

.entry-content a{
    text-align: center;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
}

/* アリサ動物病院リクルートメインイメージ end*/

/*　バー　start*/
.separator{
    width: 100%;
    background-color: #fef7fa;
    height: 80px;
    margin: 80px 0px;
}
.title-bar{
    width: 100%;
    background-color: #f2b6c7;
    margin-top: 100px;
}
.title-bar h1{
    color:rgb(255, 255, 255);
    font-size: 1.6rem;
    padding: 20px 0px;
    margin-left: 10%;
}
/*　バー　end*/

/*　職種　start */
.job-container{
    width: 100%;
}
.job-section{
    width: 90%;
    max-width: 1300px;
    margin: auto;
}
.job-content{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 50px;
    row-gap: 20px;
}
.job-card{
    width: 90%;
    max-width: 600px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 8fr;
    gap: 15px;
    align-items: center;
    box-shadow: 5px 5px 2px #eaeaea;
    justify-content: center;
}
.job-arrow{
    width: 50%;
    margin:auto auto auto 20px;
}
.job-icon{
    text-align: center;
    max-width: 80px;

}
.job-text p{
    padding: 10px;
}
.job-text h2{
    line-height: 0.6rem;
}
/*　職種　end */

/*どんな病院 アリサ動物病院の特徴　院長からのメッセージ　start*/
.common-container{
    width: 100%;
}
.common-section{
    width: 80%;
    max-width: 1200px;
    margin: auto;
}
.common-content{
    display: grid;
    grid-template-columns: 1fr;
    place-items:center;
    margin: 20px auto 20px auto;
}
.common-image{
    margin: 40px auto;
}
.common-text{
}
.link{
    background-color: rgb(237, 130, 214);
    width: 60%;
    border-radius: 10px;
    padding: 1px;
    box-shadow: 5px 5px 2px #d3d3d3;
}
.link p{
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    text-align: center;
}
/*どんな病院 アリサ動物病院の特徴　院長からのメッセージ end*/

/*どこにある？ start*/
.where-container{
    width: 100%;
}
.where-section{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}
.where-content1{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 50px;
    place-items:center;
    margin: 50px auto 50px auto;
}
.where-map{
    width:85%;
    max-width: 500px;
}
.where-item{
    margin-top: 50px;
    place-items:center;
}
.where-item img{
    gap:50px;
}
.where-area{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 50px;
}
.where-area img{
    width: 80px;
}
.where-logo{
    width:50%;
}
.where-content2{
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 50px;
    place-items:center;
    margin: 50px auto 50px auto;
    grid-template-areas: 
    "where-icon where-image"
    "where-text where-text";
}
.where-icon{
    text-align: center;
    grid-area: where-icon;
}
.where-icon img{
    width: 80%;
    max-width: 100px;
}
.where-image{
    grid-area: where-image;
}
.where-text{
    grid-area: where-text;
}
.where-content3{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 50px;
    place-items:center;
    margin: 50px auto 50px auto;
    grid-template-areas:
    "where-access"
    "where-by";
}
.where-access{
    width: 90%;
    grid-area: where-access;
    max-width: 550px;
}
.where-access p{
    font-size: 1.1rem;
    text-align: center;
}
.where-by{
    grid-area: where-by;
    width: 80%;
}
.where-by p{
    font-size: 1.1rem;
    text-align: center;
}
.where-means{
    margin: 20px auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 20px;
    place-items: center;
    border-radius: 10px;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.1);
    padding: 10px 10px;
    grid-template-areas:
    "box1"
    "box2"
    "box3"
    "box4"
    "box5"
    "box6"
    "box7"
    ;
}
.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7 p{
    font-size: 1.0rem;
    text-align: center;
}
.box1 img{
    width:80%;
    max-width: 120px;
}
.box2 img, .box3 img, .box4 img, .box5 img, .box6 img, .box7 img{
    width: 50%;
    max-width:100px;
}
.box1{
    grid-area: box1;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box2{
    grid-area: box2;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box3{
    grid-area: box3;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box4{
    grid-area: box4;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box5{
    grid-area: box5;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box6{
    grid-area: box6;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box7{
    grid-area: box7;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
}

/*どこにある？ end*/
/*サイドバー start*/
.bottom-bar{
    display: none;
}
.bottom-bar img{
    width:20%;
    padding:10px 10px 10px 10px;
}
.bottom-bar h3{
    color: white;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 0.1rem;
    padding-right: 10px;
}

/*サイドバー end*/
}

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

/* アリサ動物病院リクルートメインイメージ start*/
.main-container{
    width: 100%;
    margin-top: 100px;
    background-color: #fef7fa;
}
.main-container h1{
    padding-top: 50px;
    margin-left: 5%;
}
.main-section{
    width: 90%;
    max-width: 1300px;
    margin: auto;
    padding: 100px 0px;
}
.main-content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 50px;
    row-gap: 10px;
    width: 80%;
    margin: auto;
    grid-template-areas:
    "card01 card01"
    "card02 card03"
    "card04 card05";
    max-width: 500px;
}
.main-card01{
    margin: auto;
    width:30%;
    text-align: center;
    grid-area: card01;
}
.main-card02{
    margin: auto;
    width:80%;
    text-align: center;
    grid-area: card02;
}
.main-card03{
    margin: auto;
    width:80%;
    text-align: center;
    grid-area: card03;
}
.main-card04{
    margin: auto;
    width:80%;
    text-align: center;
    grid-area: card04;
}
.main-card05{
    margin: auto;
    width:80%;
    text-align: center;
    grid-area: card05;
}
.entry-content{
    width: 90%;
    margin:50px auto;
}
.entry-button{
    width: 100%;
    background-color: #eb7093;
    border-radius: 10px;
    text-align: center;
    padding: 20px 0px 20px 0px;
    box-shadow: 5px 5px 2px #b4b4b4;
}

.entry-content a{
    text-align: center;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
}
/* アリサ動物病院リクルートメインイメージ end*/

/*　バー　start*/
.separator{
    width: 100%;
    background-color: #fef7fa;
    height: 80px;
    margin: 40px 0px;
}
.title-bar{
    width: 100%;
    background-color: #f2b6c7;
    margin-top: 100px;
}
.title-bar h1{
    color:rgb(255, 255, 255);
    font-size: 1.6rem;
    padding: 20px 0px;
    margin-left: 5%;
}
/*　バー　end*/

/*　職種　start */
.job-container{
    width: 100%;
}
.job-section{
    width: 95%;
    max-width: 1300px;
    margin: auto;
}
.job-content{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 50px;
    row-gap: 20px;
}
.job-card{
    width: 95%;
    max-width: 600px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: center;
    box-shadow: 5px 5px 2px #eaeaea;
    justify-content: center;
    grid-template-areas:
    "arrow icon"
    "text  text";
}
.job-arrow{
    width: 50%;
    margin:auto auto auto 20px;
    grid-area: arrow;
}
.job-icon{
    text-align: center;
    max-width: 80px;
    grid-area: icon;
}
.job-text{
    grid-area:text;
}
.job-text h2{
    line-height: 0.6rem;
    padding-left: 10px;
}
.job-text p{
    padding: 10px;
}

/*　職種　end */

/*どんな病院 /アリサ動物病院の特徴/院長からのメッセージ start*/
.common-container{
    width: 100%;
}
.common-section{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}
.common-content{
    display: grid;
    grid-template-columns: 1fr;
    place-items:center;
    margin: 10px auto 10px auto;
}
.common-image{
    margin: 20px auto;
}
.common-text{
}
.link{
    background-color: rgb(237, 130, 214);
    width: 60%;
    border-radius: 10px;
    padding: 1px;
    box-shadow: 5px 5px 2px #d3d3d3;
}
.link p{
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    text-align: center;
}
/*どんな病院 アリサ動物病院の特徴　院長からのメッセージ end*/

/*どこにある？ start*/
.where-container{
    width: 100%;
}
.where-section{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}
.where-content1{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 50px;
    place-items:center;
    margin: 50px auto 50px auto;
}
.where-map{
    width:85%;
    max-width: 500px;
}
.where-item{
    margin-top: 50px;
    place-items:center;
}
.where-item img{
    gap:50px;
}
.where-area{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 50px;
}
.where-area img{
    width: 80px;
}
.where-logo{
    width:50%;
}
.where-content2{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 50px;
    place-items:center;
    margin: 50px auto 50px auto;
    grid-template-areas: 
    "where-icon"
    "where-image"
    "where-text";
}
.where-icon{
    display: flex;
    flex-flow: row-reverse wrap;
    text-align: center;
    grid-area: where-icon;
    gap: 20px;
    margin:auto auto 20px auto;
  }
.where-icon img{
    width: 50%;
    max-width: 100px;
}
.where-image{
    grid-area: where-image;
}
.where-text{
    grid-area: where-text;
}
.where-content3{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 50px;
    place-items:center;
    margin: 20px auto 20px auto;
    grid-template-areas:
    "where-access"
    "where-by";
}
.where-access{
    width: 90%;
    grid-area: where-access;
    max-width: 550px;
}
.where-access p{
    font-size: 1.1rem;
    text-align: center;
}
.where-by{
    grid-area: where-by;
    width: 80%;
}
.where-by p{
    font-size: 1.1rem;
    text-align: center;
}
.where-means{
    margin: 20px auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 20px;
    place-items: center;
    border-radius: 10px;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.1);
    padding: 10px 10px;
    grid-template-areas:
    "box1"
    "box2"
    "box3"
    "box4"
    "box5"
    "box6"
    "box7"
    ;
}
.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7 p{
    font-size: 1.0rem;
    text-align: center;
}
.box1 img{
    width: 60%;
    max-width: 120px;
}
.box2 img, .box3 img, .box4 img, .box5 img, .box6 img, .box7 img{
    width: 50%;
    max-width:100px;
}
.box1{
    grid-area: box1;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box2{
    grid-area: box2;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box3{
    grid-area: box3;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box4{
    grid-area: box4;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box5{
    grid-area: box5;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box6{
    grid-area: box6;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.box7{
    grid-area: box7;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
}

/*どこにある？ end*/
/*サイドバー start*/
.bottom-bar{
    width: calc(90% - 10px);
    /*background-color: #eb7093;*/
    background-color: #70cceb;   
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    left: 10px;
    opacity: 0.85;
}
.bottom-bar img{
    width:12%;
    padding: 5px 40px 5px 10px;
}
.bottom-bar h3{
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 0.1rem;
    padding-right: 10px;
}
.bottom-bar p{
    color: white;
    font-size: 0.8rem;
}

/*サイドバー end*/
}