*{
    padding: 0;
    margin: 0;
}

body{
    background-size:cover;
    background-attachment: fixed;
}

/*      ヘッダー      */

header{
    position: sticky;
    top:0;
    z-index:100;
}

header .headers{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    position: relative;
    background-color: rgb(221, 247, 233);
    box-shadow: 0px 10px 3px rgba(0, 255, 221, 0.082);
}

header .tab li{
    display: flex;
    justify-content:center;
    list-style:none ;
    align-items: end;
    flex-direction: row;
    min-width: 5em;
}

header .tab li+li{
    border-left:2px solid rgb(62, 139, 110) ;
    text-align: center;
}

header .tab li a{
    margin: 0 1em 0 1em;
    color: rgb(31, 44, 40);
    text-decoration: none;
    font-size:max(1vw, 10px);
}

header .tab li a:hover {
    color:rgb(0, 160, 147)  ;
    font-weight:bold
}

header .logo{
    position: absolute;
    padding: 0px 0px 0px 0.5vw;
}

header .logo img{
    width:10vw;
}


header .tab{
    margin: 1vw auto;
}

header ul{
    display: flex;
    justify-content: space-around;
    list-style: none;
}

/*      ヘッダーより下全体      */


/*      ホーム      */

main .home img{
    width: 100%;
}
main .home .container{
    width: 100%;
    margin: 0 auto 0 auto;
    text-align: center;
}
main .home .title{
    height:auto;
    position: absolute;
    left: 15%;
    right: 15%;
    background: #000000;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%,
     rgba(0, 0, 0, 0.3) 5%,
      rgba(0, 0, 0, 0.5) 50%,
       rgba(0, 0, 0, 0.3) 95%,
        rgba(0, 0, 0, 0) 100%);
    margin:  4.5vw auto 0 auto;      
    padding: 0px 20px;
}
main .home h2{
    width:100%;
    font-size:1.5vw;
    font-family: "ＭＳ Ｐ明朝";
    color: rgb(255, 255, 255);
    padding: 0.8em 0 0.8em 0px;
    letter-spacing: 0.1rem;
}
main .home p{
    width:100%;
    text-align: center;
    font-size:0.85vw;
    color: rgb(255, 255, 255);
    margin-bottom:1.5em;
}
main .home .picture{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0px 10%;
    margin: 0.5vw 0 5vw 0;
}
main .home .home_picture{
    margin: 0 5px;
    max-width: 500px;
    width: 100%;
}
main .home .home_picture:hover img{
    transform: scale(1.4);/* 拡大 */
}
main .home .home_picture img{
    height: auto;
    transition: transform .3s ease;/* ゆっくり変化させる */
    width: 100%;
    border-radius:1vw;

}

/*      德庄について      */

main .tokushou .container{
    padding: 1% 0 5vw 0;
    margin: 0 5% 10vw 5%;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.836);
    border-radius:3vw;
}
main .tokushou .container h2{
    width: 37%;
    margin: 0.5em auto 1.7em auto;
    font-size: 2vw;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    background: linear-gradient(transparent 60%, rgba(255, 196, 0, 0.24) 30%);
}
main .tokushou .container .title_p{
    width: 50%;
    font-size:1.3vw;
    margin: 0 auto 0.8em auto;
    text-underline-offset: 8px;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    background: linear-gradient(transparent 60%, rgb(156, 255, 169,0.7) 30%);
}
main .tokushou .container .text_p{
    width: 70%;
    margin: 0 auto 1.8vw auto;
    font-size:1vw;
}
main .service_exp1{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 0%;
}
main .service_exp1 img{
    width: 80%;  
    box-shadow: 10px 10px 3px rgba(0,0,0,0.15);
    margin: 0 0 5vw 0;
}
main .service_exp2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 0%;
}
main .service_exp2 img{
    width: 80%;  
    box-shadow: 10px 10px 3px rgba(0,0,0,0.15);
    margin: 0 0 5vw 0;
}

main .service_exp3{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 0%;
}
main .service_exp3 img{
    width: 45%; 
    box-shadow: 10px 10px 3px rgba(0,0,0,0.15);
    margin: 0 20px 0 20px;
}

/*      採用情報      */

main .recruit{
    text-align: center;
    width: auto;
}
main .recruit_box{
    background-image: url(images/recruit_back.png);
    background-size: cover;
    padding: 1vw 0 0 0;
}
main .recruit .rec_title{
    margin: 0 auto 1vw auto;
    width: 60%;
}
main .recruit .rec_title a{
    text-decoration: none;
    padding: 1em 1em 1em 1em;
    margin: 0px auto -1em auto;
    color: rgb(0, 0, 0);
    font-size:1.5vw;
    background-color: #fff;
    border-radius: 2vw;
    border: 0.2em solid #eca200;
}
main .recruit .rec_title a:hover{
    text-decoration: none;
    padding: 1em 1em 1em 1em;
    margin: 0px auto -1em auto;
    color: rgb(255, 255, 255);
    font-size: 1.5vw;
    background-color: #ff8d4b;
    border-radius: 1.5em;
    border: 0.2em solid #eca200;
}

main .recruit h2{
    width: 50%;
    margin: 0px auto;
    padding: 2vw 0px 0px 0px;
    color: black;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    font-size: 1.2vw;
    margin-bottom: 2em
}
main .recruit p{
    width: 15%;
    margin: 0px auto;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    font-size: 1.2vw;
    margin-bottom: 5px;
}
.button {
    display      : inline-block;
    opacity      : 1;
    cursor       : pointer;
    transition   : .3s;
    margin: 0px 0px 0px 0px;
    width: 50%;
    box-shadow: 10px 10px 3px rgba(0,0,0,0.15);
    border-radius: 0.8vw;
}
.button:hover {
    opacity      : 0.6;
    outline:5px solid rgb(3, 255, 255);
}

/*      アクセス      */

main .access{
    background-color: rgba(255, 255, 255, 0.671);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 60%;
    margin:  12% auto; 
    padding: 3em;
    border-radius: 3vw;
    box-shadow: 10px 10px 3px rgba(0,0,0,0.15);
}
main .access .mapA{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}
main .access .map_text{
    padding: 0 0 0 50px;
}
main .access p{
    font-size:1.2vw;
    border-bottom: 0.2vw solid #969696;
    color: rgb(0, 0, 0);
    padding: 0.8em 0 0 0;
}
.map_inn iframe{
    height: 25em;
    width: 100%;
    aspect-ratio:16/10;
}

/*      フッター      */

footer{
    background-color: black;
    color: white;
    padding: 1em;
    text-align: center;
}
footer div img{
    width: 11em;
    padding: 0px 0px 0px 10px;
}

/*     アンカーポイントの位置調整     */

section::before {
    content:'';
    display: block;
    padding-top: 80px;
    margin-top: -80px;
}