/*以下にスタイルシートを記入してください*/
/*
  Skin Name: 口コミサイト用スキンテンプレート
  Description: 口コミサイト用ひな型スキン。
  Skin URI: https://fu-point.net/
  Author: KOt
  Author URI: https://fu-point.net/
  Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png
  Version: 1.0.2
  Priority: 9999000000
*/
/*以下にスタイルシートを記入してください*/

html, body {
  font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

/*------------------------------------
  サイト全体の文字・リンクカラー設定
------------------------------------*/

/* 本文の基本文字色 */
body {
  color: #454545;
}

/* リンクの通常時・訪問後 */
a,
a:visited {
  color: #454545;
  text-decoration: none; /* 下線を消したい場合はこの行を有効に */
  transition: color .2s ease;
}

/* リンクのホバー時（お好みで変化を付ける） */
a:hover,
a:active,
a:focus {
  color: #e91e63; /* ピンク系アクセント（例） */

}

/*------------------------------------
  フッターエリア カスタマイズ
  背景：#fb8bb7　文字：白
------------------------------------*/

/* フッター全体の背景と文字色 */
#footer,
.footer,
.site-footer {
  background: linear-gradient(to bottom, #fff 0%, #fb8bb7 20%); 
  color: #fff;
  position: relative;
  padding-top: 96px; /* 波領域の高さと合わせる */
}

/* 波コンテナをフッター内の最上部に固定配置 */
#footer-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;           /* 見た目の高さ */
  pointer-events: none;   /* クリック不可（下のリンクが触れるように） */
  z-index: 0;             /* フッター背景より上、コンテンツより下に調整したい場合は変更 */
}

/* 必要に応じて高さのレスポンシブ調整 */
@media (max-width: 640px) {
  #footer,
  .site-footer { padding-top: 80px; }
  #footer-wave { height: 80px; }
}

/* フッター内のリンクも白に */
#footer a,
.footer a,
.footer-bottom a,
.site-footer a {
  color: #fff;
  text-decoration: none;
  transition: opacity .2s ease;
}

/* ホバー時に少し透かす（上品な演出） */
#footer a:hover,
.footer a:hover,
.footer-bottom a:hover,
.site-footer a:hover {
  opacity: 0.8;
  text-decoration: underline; /* 下線を出したい場合 */
}

/* フッター内ウィジェットのタイトルなど */
#footer .widget-title,
.footer .widget-title {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

/* コピーライト部分（下部）も同色に */
#copyright {
  background-color: #fb8bb7;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.3);
}


/*------------------------------------
  カテゴリリンクの文字色を白に固定
------------------------------------*/
.cat-link,
.cat-link:visited {
  color: #fff !important; /* 白文字を最優先にする */
}

/* ホバー時も白文字のまま（背景色だけ変わるように） */
.cat-link:hover,
.cat-link:focus,
.cat-link:active {
  color: #fff !important;
}

/* ホテル個別ページのレスポンシブ対応（640px以下で縦並び） */
    .hotel-info dl { display:grid; grid-template-columns: 8em 1fr; gap:.5rem 1rem; margin:0 }
    .hotel-info dt { font-weight:600 }
    @media (max-width: 640px){
      .hotel-info dl { grid-template-columns: 1fr; }
      .hotel-info dt, .hotel-info dd { grid-column: 1 / -1; }
    }


/* ホテル情報 見出しを横幅いっぱいの枠に */
.hotel-info h2 {
  width: 100%;
  border: 3px double #62c3d2;   /* 枠線の色と太さ */
  border-radius: 6px;          /* 角を少し丸める（任意） */
  padding: 0.6em 1em;          /* 内側余白 */
  margin: 0 0 1em;             /* 下の余白 */
  box-sizing: border-box;      /* 余白を含めて100%に */
  color: #333;                 /* 文字色（任意） */
  background: #fff;            /* 背景色（任意） */
}