[common/css/style.css]

html {
     overflow: auto;
     }

.wrapper {
         overflow: hidden;
         }

body {
     margin: 0 auto;
     overflow-x: hidden;
     }

/*フォント*/
.zen-maru-gothic-light {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 300;
  font-style: normal;
}

.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
}

.herr-von-muellerhoff-regular {
  font-family: "Herr Von Muellerhoff", cursive;
  font-weight: 400;
  font-style: normal;
}

.jost-<uniquifier> {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


/*文字サイズ*/
p {
   font-size: 20px;
   line-height: 50px;
   font-family: "Zen Maru Gothic", serif;
   font-weight: 400;
   font-style: normal;
   color: #222222;
}

h1 {
   font-size: 26px;
   font-family: "Zen Maru Gothic", serif;
   font-weight: 400;
   font-style: normal;
   color: #222222;
}

h2 {
   font-size: 30px;
   font-family: "Zen Maru Gothic", serif;
   font-weight: 400;
   font-style: normal;
}

h3 {
   font-size: 18px;
   font-family: "Zen Maru Gothic", serif;
   font-weight: 400;
   font-style: normal;
   color: #222222;
}

a {
   text-decoration: none;
   font-family: "Zen Maru Gothic", serif;
   font-weight: 400;
   color: #222222;
   
   }

header ul{
  padding-left:0;
  display: flex;
  justify-content: flex-end;
}

header li {
   list-style:none;
   margin: 0 auto;
   text-align: center;
   border-left: 1px solid #efefef;
   }

header li:last-child{
                    border-right: 1px solid #efefef
                    }
* {
   box-sizing: border-box;
   }


/* 959px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 959px) {

}

/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
	
}



/*ヘッダー*/
header {
        width: 100%;
        height: 120px;
        padding: 5px;
        margin: 0 auto;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 2px rgba(54, 54, 54, .06);
        }
        
.logo {
       height: 100px;
       padding: 0px 10px;
       text-align: center;
       }

nav {
     margin: 0 0 0 auto;
     }

.nav-list {
          min-width: 20%;
          display:flex;
          align-items: center;
          transition: all 0.5s ease-in-out;
          z-index: 999;
          }

.nav-list-item {
               font-size: 16px;
               text-align: center;
               padding: 1em 30px;
               white-space: nowrap;
               font-family: "Zen Maru Gothic", serif;
               font-weight: 400;
               font-style: normal;
               display: inline;
               }

.nav-list-item:hover {
                      background-color: #efefef;
                      cursor: pointer;
                      }

.burger  div {
             display: none;
             cursor: pointer;
             width: 25px;
             height: 3px;
             background-color: #222222;
             margin: 5px;
             transition: all 0.5s ease-in-out;
             }


/* 959px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 959px) {
body {
     overflow-x: hidden;
     }

header {
       max-width: 959px;
       }

header ul{
         flex-direction: column;
         justify-content: normal;
         }

header li:first-child{
                    padding-top: 40px;
                    }

.logo img {
          max-width: 200px;
          }

.logo {
      max-height: 60px;
      }

.nav-list {
          position: absolute;
          right: 0;
          height: 380px;
          top: 100px;
          background-color: #efefef;
          flex-direction: column;
          align-items: center;
          width: 100%;
          visibility: hidden;
          opacity: 0;
          transition: opacity 1s, visibility 1s;
          }

.nav-active {
            visibility: visible;
            opacity: 1;
            }

@keyframes fadein{
    from{
    opacity: 0;
    transform: translatey(-20px);
    }
    opacity: 1;
    transform: translatey(0);
    }

.nav-list a {
            font-size: 20px;
            }

.nav-list-item {
               padding: 30px;
               }

.burger div {
            display: block;
            margin-right: 30px;
            }

.toggle .line1 {
               transform: rotate(-45deg) translate(-5px, 6px);
               }

.toggle .line2 {
               opacity: 0;
               }

.toggle .line3 {
               transform: rotate(45deg) translate(-5px, -6px);
               }
}


/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
	
}



/*フッター*/
footer {
       background-image: url(../img0/soil3.png);
       background-image: image-set(url(../img0/soil3.png) 1x, url(../img0/soil3@2x.png) 2x);
       background-image: -webkit-image-set(url(../img0/soil3.png) 1x, url(../img0/soil3@2x.png) 2x);
       width: 100%;
       height: 800px;
       }

.pagetop {
         text-align: right;
         position: relative;
         top: -50px;
         }

.pagetop:hover {
               animation: pagetop 0.5s linear 0s 1;
               }

@keyframes pagetop {

  0%   { transform: translate(0%, 0%); }
  10%  { transform: translate(0%, -5%); }
  40%  { transform: translate(0%, -15%); }
  100% { transform: translate(0%, 0%); }
}

.box2 {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      top: 80px;
      left: 0px;
      gap: 0 100px;
      }

.sticker {
         width: 300px;
         height: auto;
         }

.sticker img {
             width: 300px;
             height: auto;
             }

.map {
      display: flex;
      justify-content:  space-between;
      gap: 15px 80px;
      }

footer .map a:hover {
                    cursor: pointer;
                    color: #222222;
                    }

footer .map a {
          font-size: 20px;
          line-height: 3em;
          color: #ffffff;
          }

.copy p {
        text-align: center;
        position: relative;
        bottom: -200px;
        margin-top: 16px;
        }

footer .copy p {
               color: #ffffff;
               }


/* 2560px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 2560px) {
footer {
       background-image: url(../img0/soil3@2x.png);
       background-image: image-set(url(../img0/soil3@2x.png) 1x, url(../img0/soil7@2x.png) 2x);
       background-image: -webkit-image-set(url(../img0/soil3@2x.png) 1x, url(../img0/soil7@2x.png) 2x);
       }
}

/* 1920px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 1920px) {
footer {
       background-image: url(../img0/soil3.png);
       background-image: image-set(url(../img0/soil3.png) 1x, url(../img0/soil3@2x.png) 2x);
       background-image: -webkit-image-set(url(../img0/soil3.png) 1x, url(../img0/soil3@2x.png) 2x);
       }
}

/* 1200px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 1200px) {
.box2 {
      flex-direction: column-reverse;
      align-items: center;
      top: 70px;
      }

.sticker img {
          max-width: 200px;
          }

.sticker {
         margin-right: 250px;
         width: 300px;
         }

.map {
     margin: 0px 0px 30px;
     width: 80%;
     gap: 15px 80px;
     justify-content: center;
     }

footer {
       height: 700px;
       }

footer .map a {
              font-size: 16px;
              line-height: 3em;
              }

.copy p {
        bottom: -5px;
        left: 0px;
        font-size: 16px;
        }
}

/* 850px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 850px) {
footer {
       background-image: url(../img0/soil4.png);
       background-image: image-set(url(../img0/soil4.png) 1x, url(../img0/soil4@2x.png) 2x);
       background-image: -webkit-image-set(url(../img0/soil4.png) 1x, url(../img0/soil4@2x.png) 2x);
       height: 800px;
       }

.sticker {
         margin-right: 300px;
         max-width: 250px;
         }
}

/* 670px以下に適用されるCSS */
@media screen and (max-width: 670px) {
footer {
       background-image: url(../img0/soil5.png);
       background-image: image-set(url(../img0/soil5.png) 1x, url(../img0/soil5@2x.png) 2x);
       background-image: -webkit-image-set(url(../img0/soil5.png) 1x, url(../img0/soil5@2x.png) 2x);
       height: 900px;
       }

.pagetop img {
             width: 200px;
            }

.pagetop {
         top: 0px;
         }

.box2 {
      top: 50px;
      align-items: flex-start;
      padding-left: 80px;
      }

.map {
     flex-direction: column;
     }

.sticker {
         margin-left: 0px;
         margin-right: 0px;
         }

.copy {
      height: 10px;
      }

.copy p {
        text-align: left;
        bottom: -20px;
        margin-bottom: 0px;
        padding-left: 80px;
        }
}

/* 500px以下に適用されるCSS */
@media screen and (max-width: 500px) {
footer {
       background-image: url(../img0/soil6.png);
       background-image: image-set(url(../img0/soil6.png) 1x, url(../img0/soil6@2x.png) 2x);
       background-image: -webkit-image-set(url(../img0/soil6.png) 1x, url(../img0/soil6@2x.png) 2x);
       }

.pagetop img {
             width: 120px;
             }

.pagetop {
         top: 80px;
         }

.box2 {
      top: 120px;
      }

.copy p {
        bottom: -90px;
        }
}