/* すべてのページに適用される設定 */
html {
    font-size: 16px;
    font-family: sans-serif;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0 0 0 0;
}
p, li, td {
     line-height: 1.7;
}
a:link {
    color: #F07D34;
    text-decoration: none;
}
a:visited {
    color: #F07D34;
    text-decoration: none;
}
a:hover {
    color: #F07D34;
    text-decoration: underline;
}
a:active {
    coror: #F07D34;
    text-decoration: underline;
}
img {
    max-width: 100%;
}

/* すべてのページに適用　- ヘッダー */
.header {
    padding-top: 40px;
    background-image: url(../images/stripe.png);
    background-repeat: repeat-x;
}
.logo {
    text-align: center;
}
.nav ul {
    margin: 30px 0 0 0;
    padding: 0;
    list-style-type: none;

     display: flex;
     justify-content: center;
     gap: 40px;
}

.nav a:link {
    color: #253958;
}
.nav a:visited {
    color: #253958;
}
.nav a:hover {
    text-decoration: none;
}
.nav a:active {
    text-decoration: none;
}
/* すべてのページに適用　- ヒーロー */
.hero {
    padding: 137px 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #FFFFFF;
    text-align: center;
}

.hero.access {
    background-image: url(../images/access-hero.jpg);
}
.hero.menu {
    background-image: url(../images/menu-hero.jpg);
}
.hero.contact {
    background-image: url(../images/contact-hero.jpg);
}

/* すべてのページに適用　- メイン */
main {
  margin: 90px auto 90px auto;
  max-width: 1000px;
}
main h2 {
  margin: 60px 0 20px 0;
  border-bottom: 2px solid #253958;
  padding: 0 0 5px 0;
    color: #253958 ;
    font-size: 1.3rem;
}

/* すべてのページに適用　- フッター */
#page_top {
    position: fixed;
    bottom: 15px;
    right: 15px;
}

.copyright {
    margin-top: 20px;
    margin-bottom: 0;
  padding-top: 75px;
  padding-bottom: 75px;
  background-color: #253958;
  color: #FFFFFF;
  text-align: center;
}

/* 個別のスタイル */
/* index.html */
/*Slick slider*/
.sliderArea {
    position: relative;
    width: 100%;
}

.sliderArea ul {
    list-style: none;
    padding: 0;
}

.slider img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    /* 画像をトリミングしてエリア全体にフィットさせる */
}

/*矢印*/
.slick-prev {
    left: 20px !important;
}

.slick-next {
    right: 20px !important;
}

.slick-prev,
.slick-next {
    z-index: 1;
    text-shadow: 1px 1px 5px #000;
}

.slick-prev:before {
    content: '＜';
    font-size: 30px !important;
    color: #fff !important;
}

.slick-next:before {
    content: '＞';
    font-size: 30px !important;
    color: #fff !important;
}

.logo-whale {
    text-align: center;
}
.shop-info {
    border-collapse: collapse;
}
.shop-info th, .shop-info td {
    border: 1px solid #DBDBDB;
    padding: 20px;
}
.shop-info th {
    width: 112px;
    text-align-last: left;
    vertical-align: top;
}

/* menu.html */
.items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

/* contact.html */
form {
    margin: 0 auto;
    max-width: 640px;
}
input[type="text"],textarea {
    padding: 6px;
    width: 100%;
    font-size: 1rem;
}
textarea{
    height: 140px;
}
.submit {
    text-align: center;
}
input[type="submit"] {
border: none;
padding: 20px;
width: 200px;
background-color: #253958;
color: #FFFFFF;
font-size: 1rem;
}

/* モバイル対応 */
@media(max-width: 767px) {
    .nav ul {
        flex-wrap: wrap;
        gap: 20px;
    }
    main {
        padding: 0 4%;
    }
}
    /* index.html */
    .hero.index {
        padding: 28vh 0;
    }

  /* menu.html */
  .items {
    grid-template-columns: 1fr 1fr;
  }