@charset "utf-8";

/* body----------------------------------- */

body {
    background-image: url(../images/bg_img\ .jpg);
    font-family: '小塚ゴシック Pr6N', 'calibri', sans-serif;
}

/* header--------------------------------- */
header {
    color: #edebeb;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    width: 1000px;
    justify-content: space-between;
    margin: 0 auto;
}

header ul {
    display: flex;
    width: 500px;
    justify-content: space-between;
    margin: 60px 0 0;
    text-shadow: 4px 2px rgba(0, 0, 0, 0.35);
}

header ul li:hover {
    text-decoration: underline solid #02b7cb 3px;
}

/* header---------------------------------------------- */

/* eye chatch--------------------------------------- */
.eyecatch1 {
    color: #bbce20;
    font-weight: bold;
    font-size: 30px;
    text-shadow: 4px 2px rgba(0, 0, 0, 0.35);
    display: flex;
    width: 1200px;
    margin: 87px auto 100px;
    justify-content: space-between;
}

.EyeText1 {
    flex-basis: 336px;
    margin-top: 33px;
}

.EyeText2 {
    flex-basis: 315px;
    margin-top: 274px;
}

/* eyecatch------------------------------------------- */

/* main--------------------------------------------------- */
#STAFF,
#MENU,
#GOODS,
#ACCESS {
    color: #edebeb;
    font-size: 72px;
    font-weight: bold;
    text-shadow: 4px 2px rgba(0, 0, 0, 0.35);
    text-decoration: underline solid #02b7cb 3px;
    display: inline-block;
    margin: 40px 721px 32px 99px;
}

.staff,
.menu,
.goods,
.access {
    background-color: rgba(255, 255, 255, 0.7);
    width: 1000px;
    margin: 0 auto 100px;
    border-radius: 80px;
    padding-bottom: 50px;
}

/* stuff------------------------------------------------- */
.doggys {
    display: flex;
    gap: 14px;
    margin: 0 20px 40px;
}

.doggys img:hover {
    scale: 1.3;
    transition-duration: 350ms;
}

.doginfo h3 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
    position: relative;
    padding-left: 41px;
}

.doginfo h3::before {
    content: url(../images/images_13.png);
    position: absolute;
    left: 0;
    bottom: -3px;
}

.doginfo h3::after {
    content: url(../images/images_13.png);
    position: absolute;
    bottom: -3px;
}

.doginfo {
    flex-basis: 100%;
    font-weight: bold;
}

.Dinfo {
    display: flex;
    justify-content: space-evenly;
    line-height: 2.0;
}

.Dinfo ul {
    flex-basis: 150px;
}

.Dinfo p {
    flex-basis: 550px;
}

/* menu-------------------------------- */
.menu h3 {
    font-size: 30px;
    font-weight: bold;
}

.menu div {
    margin: 0 39px;
    display: flex;
    justify-content: space-between;
}

.menu div section {
    flex-basis: 411px;
}

dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 70px;
    font-size: 20px;
}

.menu dt {
    flex-basis: 340px;
}

.menu dd {
    font-weight: bold;
}

.warning {
    line-height: 150%;
    font-size: 18px;
}

/* goods---------------------------------- */
.goods div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 20px;
    gap: 20px;
}

.goods dl {
    display: grid;
    grid-template-columns: 4fr 6fr;
}

.gimg {
    grid-column: 1/2;
    grid-row: 1/3;
}

.gname {
    font-size: 24px;
}

.gname::before {
    content: url(../images/images_13.png);
}

.gname::after {
    content: url(../images/images_13.png);
}

.goods dl dd {
    font-weight: bold;
    font-size: 24px;
    text-align: right;
}

/* eyecatch2------------------------ */
.eyecatch2 {
    color: #bbce20;
    font-weight: bold;
    font-size: 25px;
    text-shadow: 4px 2px rgba(0, 0, 0, 0.35);
    display: flex;
    width: 1000px;
    margin: 87px auto 100px;
    justify-content: space-between;
}

.EyeText2_1 {
    flex-basis: 394px;
    margin: 50px 0 0 -30px;
}

.EyeText2_2 {
    flex-basis: 348px;
    margin: 200px -50px 0 0;
}

/* access--------------------------------- */
.accessInfo {
    margin: 0 80px;
}

.accessText {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 60px;
    line-height: 1.7;
}

.station::before {
    content: url(../images/images_13.png);

}

.station::after {
    content: url(../images/images_13.png);

}

.station {
    margin-left: -41px;
}

/* footer----------------------------------------- */
footer {
    background-color: #680d17;
    color: #edebeb;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    padding: 37px 0 15px 0;
}

footer ul {
    display: flex;
    width: 400px;
    margin: 41px auto;
    justify-content: space-evenly;
}

footer ul li:hover {
    text-decoration: underline solid #02b7cb 3px;

}

/* animation---------------------- */
@keyframes waveAnime {
   0%, 100% {
    rotate: -2deg;
    transform-origin: bottom;
   }
   50% {
    rotate: 2deg;
    transform-origin: bottom;
   }
}

.eyecatch1 img {
    animation-name: waveAnime;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes bounceAnime {
    0%, 100% {
    transform: translateY(0) translateX(-30px);
  }
  50% {
    transform: translateY(-15px) translateX(0);
  }
}

.eyecatch2 img {
    animation-name: bounceAnime;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}