@charset "UTF-8";

/* テキストの自動拡大を無効化 */
body {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* 基本設定 */

* {
  margin: 0;
}

img {
  width: 100%;
  height: auto;
}

/* ページ全体の設定 */
body {
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  grid-template-rows: 
    [head] 120px
    [title] auto
    [sub] auto
    [table] auto
    [news] auto
    [recent] auto
    [pragin] auto
    [foot] 100px;
  grid-row-gap: 20px;
  row-gap: 20px;
  font-family: "YU Gothic Medium" , "游ゴシック Medium" , "ゴシック体" , "ヒラギノ角ゴ Pro W3" , "sans-serif";
}


/* パーツの配置 */
body > * {
  grid-column: 2 / -2;
}

/* ヘッダー */
header {
  grid-row: head;
  justify-self: center;
  align-self: center;
  font-size: 35px;
  font-family: 'Noto Serif JP' , serif;
  color: #142c40;
  font-weight: bold;
  margin-top: 0px;
  background-color: #bff0f1;
  padding: 0px 10px;
  border-radius: 10px;
}

header a {
  color: inherit;
  text-decoration: none;
}

/* ナビゲーションメニュー */
nav {
  grid-row: head;
  justify-self: center;
  align-self: end;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 20px;
  column-gap: 20px;
}

nav a {
  color: black;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
}

nav a:hover {
  color: orange
}

/* メイン */
figure.hero {
  grid-column: 1 / -1;
  grid-row: title / span 2;
}

figure.hero img {
  object-fit: cover;
  vertical-align: bottom;
  filter:brightness(90%);
  z-index: -1;
  position: relative; /* Edge 用の設定 */
}

/* 静岡県～説明 */
.top h1 { 
  grid-row: title;
  align-self: center;
  color: #f4f5f8;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.5;
  text-shadow: 0 0 5px #444444;
  text-align: left;
  justify-self: end;
}

/* いらっしゃいませ */
.top p {
  grid-row: sub;
  text-align: center;
}

.top p a {
  color: #ffffff;
  border: solid 1px #ffffff;
  padding: 5px 15px;
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 0px;
  border-radius: 10px;
  background-color: rgba(85, 93, 107, 0.5);
  text-decoration: none
}

.top p a:hover {
  background-color: orange
}

/* 営業時間 */
.top table {
  grid-row: table;
  border-collapse: collapse;
  margin-top: -30px;
  margin-bottom: -20px; 
  font-size: 10px;
  text-align: center;
  padding: 10px 0;
}

.top table tr *:nth-child(1) {
  background: rgb(85, 93, 107);
  border: solid 0.5px;
  color: #ffffff;
  border-left: 0;
  border-right: 0;
}

.top table td {
  border: solid 0.5px;
  background: #ffffff;
  color: #000000;
  border-right: 0;
  font-weight: bold;
}

.top thead th,tfoot th {
  text-align: start;
  padding: 5px 5px 5px 15px;
}

.top th,td {
  color: #000000;
  text-align: center;
  font-weight: normal;
}

.top th {
  width:10em ;
}

/* ご案内・新着情報 */
section h2 {
  grid-column: 1 / -1;
  font-size: 17px;
  justify-self: center;
  padding: 1rem 2rem;
  border-left: 6px double #2b3d3d;
}

.top span {
  font-family: "YU Mincho";
  font-size: 12px;
  display: block;
  text-align: center;
  color: #067274;
}

/* 新着情報 */
.top #news {
  grid-row: news;
  grid-column: 1 / -1;
  background-color: #eeeeee;
  margin: 0;
  list-style-type: none;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 40px;
  font-size: 12px;
}

.top #news li p {
  border-bottom: 1px dotted #000000;
  font-size: 12px;
  text-align: start;
}

/* メニュー画像 */
section, aside ul {
  grid-row: recent;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px 10px;
  gap: 20px 10px;
}

/* メニュー画像説明 */
section a, aside a {
  color: #000000;
  text-decoration: none;
}

section a img {
  box-shadow: 5px 10px 5px #aaaaaa;
}

section h3, aside h3 {
  font-size: 12px;
  margin-top: 10px;
}

/* メニュー画像説明 */
.Facebook {
  width: auto;
}

/* フッター */
footer {
  grid-row: foot;
  justify-self: center;
  align-self: center;
  font-size: 15px;
  font-family: "YU Mincho";
}

/* フッターのバー */
body::after {
  content: "";
  background-color: #eeeeee;
  grid-column: 1 / -1;
  grid-row: foot;
  z-index: -1;
}

/* 記事ページ */
.post {
  grid-template-rows:
  [head] 100px
  [kiji] auto
  [submenu] auto
  [foot] 100px;
}

/* 記事ページ：バー */
.post::before {
  content: '';
  background: #eeeeee;
  height: 2px;
  grid-column: 1 / -1;
  grid-row: kiji;
}

/* 記事ページ：時計 */
.post article a img {
  width: 12px;
  height: 12px;
}

/* 記事ページ：タイトル */
.post h1 {
  font-size: 15px;
  font-weight: bold;
  background-color: #dddddd;
  padding: 0px 10px;
  margin-top: 20px;
}

.subtitle {
  font-size: 12px;
  font-weight: normal;
}

/* 記事ページ：メイン */
/* .post img p {
  grid-row: kiji;
  object-fit: contain; 
} */

.post article {
  grid-row: kiji;
  font-size: 12px;
}

.post article > * {
  margin-top: 1em;
  margin-bottom: 1em;
  display: block;  
}

.post article p {
  line-height: 1.5;
  margin-top: 1em;
  font-size: 15px;
}

.post article h2 {
  border-bottom: 1.5px solid #2b3d3d;
  font-size: 15px; 
}

.post article h3 {
  line-height: 1.5;
  margin-top: 1em;
  margin-bottom: 50px;
  font-size: 15px;
  font-weight: normal;
}

/* 記事ページ：オンライン予約 */
.yoyaku p {
  font-style: normal;
  background-color: #d8eff0;
  border: solid 1px #067274;
  display: inline-block;
  font-weight: bold;
  padding: 10px 30px;
  justify-self: center;
  align-self: center;
  border-radius: 10px;
}

.yoyaku p a {
  color: #000000;
  font-style: normal;
  text-decoration: none;
}

.yoyaku p:hover {
  background-color: orange;
  border: solid 1px orange;
}

.tel p a {
  color: #000000;
  font-style: normal;
}

/* 記事ページ：住所・地図 */
.post article h4 {
  line-height: 1.5;
  margin-top: 1em;
  font-size: 15px;
  font-weight: normal;
}

.post h4 a {
  color: #000000;
  font-style: normal;
}

iframe[src] {
  width: 100%;
  margin-bottom: 50px;
}

/* 記事ページ：お問い合わせ */
form p {
  margin-bottom: 20px;
}

input,textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

textarea {
  height: 120px;
}

input[type="submit"] {
  background-color: #ffaa00;
  border: none;
  -webkit-appearance: none;
  margin-bottom: 50px;
}

/* 記事ページ：料金表 */
.post article table {
  grid-row: table;
  border-collapse: collapse;
  font-size: 15px;
  text-align: center;
}

.post th,.post td {
  color: #000000;
  border: solid 0.5px #ffffff;
  text-align: left;
  font-weight: normal;
  background-color: #dddddd;
  padding: 5px 30px 5px 20px;
}


/* 記事ページ：サブメニュー */
.post div {
  grid-row: submenu;
}

aside {
  border: solid 1px #dddddd;
  padding: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

aside h2 {
  border-bottom: solid 1px #dddddd;
  padding-bottom: 20px;
  margin-bottom: 20px;
  color: #888888;
  font-weight: normal;
  font-family: 'Raleway' , sans-serif;
}

aside p {
  font-size: 12px;
}

aside:first-child img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

aside ul {
  list-style-type: none;
  padding: 0;
  text-align: left;
}

aside h3 {
  font-size: 12px;
}

/* 記事ページ：工事中です */
.kouji {
  border: thick double #067274;
  background-color: #d8eff0;
  padding: .5rem;
  display: flex;
  flex-direction: column;
  width: 200px;
  justify-self: center;
}

.kouji img {
  width: 100%;
}

.kouji p {
  font-weight: bold;
  font-size: 15px;
  
  text-align: center;
}

/* 記事ページ：工事中ですバー */
.koujibar {
  background-color: #d8eff0;
  padding: .2rem;
  display:  block;
  text-align: center;
  font-weight: bold;
}

/* ==== PC 版の設定 ==== */
@media (min-width: 768px) {
  
/* PC版：ページ全体の設定 */
body {
  grid-template-columns: 0.2fr repeat(6, 1fr) 0.2fr;
  grid-column-gap: 5%;
  column-gap: 5%;
  grid-template-rows:
    [head] 100px
    [notice] auto
    [title sub] auto
    [news] auto
    [recent] auto
    [foot] 100px
}
  
/* PC版：ヘッダー */
header {
  justify-self: start;
}
  
/* PC版：ナビゲーションメニュー */
nav {
  justify-self: end;
  align-self: center;
}
  
nav a {
  font-size: 15px;
}
  
/* PC版：メイン */
figure.hero {
  grid-row: title;
  margin-top: -20px;
}
  
/* PC版：静岡県～説明 */
.top h1 {
  grid-column: 1 / span 4;
  max-width: 460px;
  font-size: 25px;
}
  
/* PC版：いらっしゃいませ */
.top p {
  grid-column: 5 / span 3;
  align-self: center;
  font-size: 20px;
}
  
.top p img {
  width: 80%;
  max-width: 460px;
}
  
/* PC版：営業時間 */
.top table {
  grid-row: title ;
  grid-column: 5 / span 4;
  align-self: end;
  margin-bottom: 30px;
  margin-right: 10px;
}
  
.top td,th {
  font-size: 15px;
}
  
/* PC版：メニュー画像 */
section {
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
  column-gap: 20px;
}
  
/* PC版：記事ページ */
.post {
  grid-template-rows:
    [head] 100px
    [kiji submenu] auto
    [table] auto
    [foot] 100px;
}
  
/* PC版：記事ページ：タイトル */
.post h1 {
  font-size: 20px;
}
.subtitle {
  font-size: 16px;
  font-weight: normal;
}
/* PC版：記事ページ：バー */
.post::before {
  margin-top: -20px;
}

/* PC版：記事ページ：記事 */
.post article {
  grid-column: 2 / span 4 ;
  font-size: 16px;
  margin-top: -15px;
}

.post article {
  grid-column: 2 / span 4 ;
  font-size: 16px;
}

.post div {
  grid-column: 6 / span 2 ;
}

/* PC版：記事ページ:お問い合わせ */
  input[type="submit"] {
    width: 250px;
  }

}

/* ==== PC 版の設定ここまで ==== */