@charset "UTF-8";
/*  すべてのWEBページに適用される */
html{
  font-family: sans-serif;
}
html * {
  box-sizing: border-box;
}
body {
  background-color: #191970
}
.wrapper {
  margin: 0 auto 0 auto;
  max-width: 1000px;
}
  h2{
  color: #FFCCCC;
  font-size: 22px;
  border-bottom: solid 3px #999999;
  position: relative;
}
h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px lightpink;
  bottom: -23px;
  width: 50%;

  margin-top: 20px;
  margin-right: 0px;
  margin-bottom: 20px;
  margin-left: 0px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom:5px;
  padding-left:5px;
}
h3{
  color: #D9E5FF;
}

h1{
  color: #D9E5FF;
}
p{
  line-height: 1.6;
  color: #D9E5FF;
}
a:link{
  color: #d25833;
}
a:visited {
  color: #d25833;
}
a:hover {
  color: #e3937a;
}
a:active {
  color: #ff6a3b
}

/*すべてのWEBページに適用 - ヘッダー -*/
.logo {
  margin: 50px 50px 50px 50px;
  line-height: 0;
  text-align: center;
}
.nav li{
  display: inline;
  list-style-type:none;
  padding-right: 30px;
}
.nav ul{
  margin: 0 0 0 0;
  padding:12px 12px 12px 12px;
  background-image: url(../images/menu-bg.png);
  background-repeat: repeat-x;
}

.nav a:link{
  color: #FFD5EC;
  text-decoration: none;
}

.nav a:visited{
  color: #FFD5EC;
  text-decoration: none;
}

.nav a:hover{
  color: #FF69A3;
  text-decoration: none;
}

.nav a:active{
  color: #FF69A3;
  text-decoration: none;
}

/*すべてのページに適用　- フッター　-*/
.footer{
  background-image: url(../images/footer-bg.png);
  background-repeat: no-repeat;
  margin-top: 30px;
  padding: 80px 15px 20px 15px;
  font-size: 12px;
  color: #3f5170;
}
/*個別のスタイル*/
/* index.html*/
.keyvisual img {
  width: 800px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 写真を中央にして幅を揃える */
.keyvisual img {
  width: 800px;
  height: auto;
  display: block;
  margin: 0 auto 30px;   /* 下に30pxの余白 */
}

/* 動画も同じ幅で中央にして余白をつける */
.news-movie {
  width: 800px;
  max-width: 100%;
  display: block;
  margin: 30px auto;     /* 上下30pxの余白＋中央寄せ */
}


/* about.html*/
.shop-photo{
    float: left;
    padding: 0 1.5em 1.5em 0; /* 写真の周りに余白を増やす */
    margin: 10px;            /* 写真の外側にも余白を追加 */
  }

.clear {
  clear: both;
}
.info{
  border-collapse: collapse;
}
.info th, .info td {
  padding: 8px;
  border: 1px solid #bec2c7;
  text-align: left;
}
.info th {
  background-color: #dde2ea;
  width: 99px;
  color: #3f5170;
  vertical-align: top;
}

/* menu.html */
.menu-item{
  display: flex;
  border-bottom: 1px dashed #bec2c7;
  padding:20px;
}

/* 写真と文字の余白を整える */
.menu-item {
  display: flex;
  gap: 30px;
  padding: 30px 0;
  border-bottom: 1px dashed #bec2c7;
}

/* 写真の余白 */
.menu-photo img {
  border-radius: 10px;
  margin: 10px;
}

/* 文字側の余白 */
.menu-text {
  padding: 10px 0;
}

/* ヘッダー中央寄せ */
.header {
  text-align: center;
}

/* ナビ中央寄せ */
.nav ul {
  display: inline-block;
  padding: 12px;
}

/* keyvisual（写真）中央寄せ */
.keyvisual {
  text-align: center;
}

.keyvisual img {
  display: block;
  margin: 0 auto;
}