/*
  Skin Name: スーのページ　ピンク
  Description: スーのページ全般テンプレ
  Skin URI: http://suemari.com
  Author: スー
  Author URI: http://suemari.com
  Screenshot URI: 
  Version: 1
  Priority: 10
*/

/**************************************/
/* カスタムプロパティ */
/**************************************/
:root{
/* 基本色 */
--impact-color: #f45; /* インパクト色 濃いピンク */
--std-bg-color: rgba(255,0,0,0.1); /* 基本背景色 ピンク透明 */
--2nd-bg-color: rgba(255,140,160,0.8); /* 基本背景色２ 明るいピンク */
--transparent-white: rgba(255,255,255,0.5); /* 白透明 */

/* 全体 */
--body-color: #600021; /* 文字色 チョコレート色 */
--body-bg-color: #fcb; /* body背景色 薄いグリーン色 */
--header-bg-color: #e77; /* ヘッダー背景色 コーラル */
--navi-bg-color: #faa; /* ナビ背景色 肌色 */
--main-bg-color: var(--transparent-white); /* メイン背景色 透明 */
--side-bg-color: var(--transparent-white);; /* サイド背景色 透明 */
--bottom-bg-color: var(--navi-bg-color); /* スーペーリンク背景色 エメラルドグリーン */
--footer-bg-color: var(--header-bg-color); /* フッター背景色 水色 */

/* リンク */
--std-link-color: #03c; /* 基本の文字色 青 */
--std-link-hover: var(--impact-color); /* 基本のリンク色 hover */
--title-link-color: var(--body-color); /* タイトルリンクの文字色 黒 */
--std-link-bg-color-hover: var(--std-bg-color) ; /* 基本のリンクカード背景色hover */

/* ヘッダー */
--header-color: var(--std-link-color); /* 文字色 */

/* オリジナルリンクボタン */
--my-btn-color: var(--impact-color); /* 文字色 */
--my-btn-bg-color: var(--std-bg-color); /* 背景色 */
--my-btn-bg-hover-color: var(--2nd-bg-color); /* 背景色 hover */

/* ナビ */
--navi-color: var(--impact-color); /* 文字色 */
--navi-color-hover: var(--impact-color); /* hover文字色 */
--navi-current-bg-color: rgba(255,255,0,0.3); /* hover背景色 薄い黄色透明 */
--navi-li-bg-color: var(--transparent-white);  /* メニュー１個背景色 白透明 */
--navi-hover-color: var(--impact-color); /* hover文字色 */

/* 見出し */
--h-color: var(--impact-color); /* 文字色 */
--h1-bg-color: #fff; /* H1背景色 */
--h2-bg-color: var(--std-bg-color); /* H2背景色 */
--h3-bg-color: var(--std-bg-color); /* H3背景色 */
--h4-bg-color: var(--std-bg-color); /* H4背景色 */
--side-h3-bg-color: var(--std-bg-color); /* サイドバーH3背景色 */
--h-border-color: var(--impact-color); /* 線の色 */

/* カルーセル */
--carousel-arrow-color: var(--impact-color); /* 矢印アイコン色 */

/* リストカード home */
--list-home-desc-color: var(--impact-color); /* 説明文字色 */
--list-home-desc-bg-color: var(--transparent-white);/* 説明背景色 */

/* エントリーカード */
--update-color: var(--impact-color); /* 更新日文字色 */
--entry-title-color: var(--title-link-color); /* タイトル文字色 */
--entry-title-color-hover: var(--impact-color); /* 文字色 */
--entry-bg-color-hover: var(--std-link-bg-color-hover); /* 背景色 */
--list-entry-title-color: var(--title-link-color); /* リスト文字色 */
--my-entry-tag-color: #600021; /* myタグ文字色 */
--my-entry-tag-bg-home-color: var(--std-bg-color); /* myタグ背景色 */

/* ブログカード */
--bcard-border-color: var(--impact-color); /* 線の色 */
--bcard-box-shadow-color: var(--impact-color); /* 線の色シャドウ */
--bcard-bg-color: var(--transparent-white); /* 背景色 */
--bcard-bg-color-hover: var(--std-link-bg-color-hover); /* hover 背景色 */
--bcard-label-my-color: var(--impact-color); /* myラベルの文字色 */
--bcard-label-bg-my-color: var(--std-bg-color); /* myラベルの背景色 */
--bcard-title-color: var(--body-color); /* タイトル文字色 */
--bcard-title-hover-color: var(--title-link-color) ; /* タイトル文字色 hover */
--bcard-read--color: var(--body-color); /* 読む背景色 */
--bcard-read-bg-color: var(--2nd-bg-color); /* 読む文字色 */

/* 目次 */
--toc-color: var(--impact-color); /* 文字色 */
--toc-border-color: var(--impact-color); /* 線の色 */
--toc-title-bg-color: var(--std-bg-color); /* タイトル背景色 */
--toc-link-color: var(--impact-color); /* リンク文字色 */
--toc-link-hover-color: var(--impact-color); /* リンク文字色 hover */
--toc-link-bg-color-hover: var(--std-link-bg-color-hover); /* リンク背景色hover */

/* 目次一覧 */
--toc-list-color: var(--title-link-color); /* 文字色 */
--toc-list-color-date: var(--impact-color); /* 投稿日文字色 */
--toc-list-color-update: var(--body-color); /* 更新日文字色 */
--toc-list-border-color: var(--impact-color); /* 線の色 */
--toc-list-bg-color: var(--transparent-white); /* 背景色 */
--toc-list-bg-color-hover: var(--std-link-bg-color-hover); /* 背景色hover */

/* カテゴリ・タグラベル */
--label-cat-bg-color: var(--std-bg-color); /* カテゴリラベル色 */
--label-cat-bg-hover-color: rgba(255,255,0,0.3); /* カテゴリラベル背景色 */
--label-cat-count-bg-color: rgba(0,0,0,0.2); /* カテゴリラベル　カウント背景色 黒透明 */
--label-cat-count-color: #fff;/* カテゴリラベル　カウント色 白 */
--label-tag-bg-color: #fff; /* タグラベル色 白 */
--label-tag-bg-hover-color: rgba(255,255,0,0.3); /* タグラベル色 白 */

/* 次のページボタン */
--page-next-btn-color: var(--body-color); /* 文字色 */
--page-next-btn-bg-color: var(--2nd-bg-color);  /* 次のページボタン背景色 */
--page-next-btn-bg-hover-color: var(--std-bg-color); /* 次のページボタンhover背景色 */

/* ページネーション */
--pagination-current-bg-color: var(--std-bg-color); /* 現在のページ背景色 */
--pagination-bg-hover-color: var(--std-bg-color); /* 背景色 hover */
--pagination-color: var(--impact-color); /* 文字色 */

/* 次の記事・前の記事 */
--pager-border-color: var(--impact-color); /* 線の色 */
--pager-bg-color-hover: var(--std-bg-color); /* 背景色hover */
--pager-border-middle-color: var(--impact-color); /* 間の線 */
--pager-arrow-color: var(--impact-color); /* 矢印アイコン色 */
--pager-link-color: var(--title-link-color); /* リンク文字色 */

/* タイルリスト */
--tile-list-color: var(--impact-color); /* 文字色 */
--tile-list-bg-color: var(--transparent-white); /* 背景色 */
--tile-list-bg-color-hover: var(--std-bg-color); /* 背景色 hover */
--tile-list-border-color: var(--impact-color); /* 線の色 */

/* 写真付きカテゴリリスト */
--cat-list-color: var(--impact-color); /* 文字色 */
--cat-list-bg-color: var(--transparent-white); /* 背景色 */
--cat-list-bg-color-hover: var(--std-bg-color); /* 背景色 hover */
--cat-list-border-color: var(--impact-color); /* 線の色 */

/* 説明文・ノート */
--note-bg-color: var(--std-bg-color); /* 背景色 */
--note-color: var(--impact-color); /* 文字色 */

/* 拡張スタイル */
/* インフォメーション */
--info-list-check-color: #ffa952; /* チェックアイコンの色 */

/* リスト */
--list-check-color: var(--impact-color); /* チェックアイコンの色 */
--list-number-color: #fff; /* 番号リストの色 */
--list-number-bg-color: var(--impact-color); /* 番号リストの背景色 */

/* テーブル */
--table-color: var(--impact-color); /* 文字色 */
--table-th-color: var(--impact-color); /* 文字色 */
--table-border-color: var(--impact-color); /* 枠の色 */
--table-bg-color: var(--transparent-white); /* 背景色 */
--table-th-bg-color: var(--std-bg-color); /* th背景色 */
--table-th-bg-color-sticky: #ffdad6; /* th背景色 固定用 */

/* 水平線 */
--hr-color: var(--impact-color); /* 線の色 */

/* ラベル付ボックス */
--lbox-border-color: var(--impact-color); /* 線の色 */
--lbox-bg-color: var(--transparent-white); /* 背景色 */
--lbox-title-bg-color: var(--impact-color); /* タイトル部分の背景色 */
--lbox-title-color: #fff; /* タイトル部分の文字色 */

/* モバイルメニュー */
--m-slide-bg-color: var(--body-bg-color); /* 背景色 */
--m-slide-color: var(--body-color); /* 文字色 */
--m-menu-color: var(--impact-color); /* リンク文字色 */
--m-bottom-menu-color: var(--impact-color); /* 下メニュー文字色 */
--m-bottom-menu-bg-color: var(--body-bg-color); /* 下メニュー背景色 */

/* ボトム */
--bottom-top-border-color: var(--impact-color); /* 上の線の色 */
--bottom-color: var(--impact-color); /* 文字色 */

/* ホテル枠 */
--hotel-border-color: var(--impact-color); /* 枠の色 */
--hotel-bg-color: var(--transparent-white); /* 背景色 */
--hotel-title-color: var(--impact-color); /* タイトル文字色 */
--hotel-title-bg-color: var(--2nd-bg-color); /* タイトル背景色 */
--hotel-icon-color: #fff; /* アイコン文字色 */
--hotel-icon-bg-color: var(--impact-color); /* アイコンの背景色 */
}/* 色指定ここまで */

/**************************************/
/* 全体 */
/**************************************/
body{
background-color:var(--body-bg-color);
background-image:url("https://suemari.com/img/flower.png");
background-position: top left;
background-repeat: repeat;
background-size: auto;
background-attachment: scroll;
color: var(--body-color);
}

/*全体*/
.main{
background-color: var(--main-bg-color);
}
.sidebar{
background-color: var(--side-bg-color);
}
.header-container{
background-color: var(--header-bg-color);
}
#bottom {
border-top: 1px dashed var(--bottom-top-border-color);
background: var(--bottom-bg-color) url('https://suemari.com/img/flower.png') repeat-x 0 0;
color: var(--bottom-color);
}
.footer{
background: var(--footer-bg-color) url('https://suemari.com/img/flower.png');
}
/************************************
** ヘッダー
************************************/
.header{
background-image:url("https://suemari.com/img/flower.png");
background-repeat: repeat;
background-size: auto;
}
.site-name-text{
color: var(--header-color);
font-weight: bold;
}
/************************************
** アンカー
************************************/
a {
  color: var(--std-link-color);
}a:hover {
  color: var(--std-link-hover);
}
/************************************
** ナビメニュー
************************************/
.navi {
background-color: var(--navi-bg-color);
background-image:url("https://suemari.com/img/flower.png");
color: var(--navi-color);
}
.navi-in a {
  color: var(--navi-color-hover);
}
.navi-in ul li{
background: var(--navi-li-bg-color);
}
.navi-in a:hover,
li.current-menu-item a,
li.current-menu-parent a{
background: var(--navi-current-bg-color);
color: var(--navi-hover-color);
}
.navi-in ul li {
border-color: var(--impact-color);
}
.navi-in ul li ul.sub-menu{
background-color: var(--navi-bg-color);
}
/************************************
** カルーセル
************************************/
.carousel-in{
background-color: var(--transparent-white);
}
.carousel-in .card-title{
color: var(--std-link-color);
}
.carousel .slick-arrow::before{
color:var(--carousel-arrow-color);
}
/**************************************/
/* my カードリスト　ホーム */
/**************************************/
.list-home .desc{
color: var(--list-home-desc-color);
background-color: var(--list-home-desc-bg-color);
}
/**************************************/
/* my オリジナルエントリーカード */
/**************************************/
.my-entry-card, .my-entry-card a{
color: var(--entry-title-color);
}
.my-entry-card:hover{
background-color: var(--entry-bg-color-hover);
color: var(--entry-title-color-hover);
}
.my-entry-card a:hover{
color: var(--entry-title-color-hover);
}
.my-entry-card .cat-tag{
color: var(--my-entry-tag-color);
}
.my-entry-card .cat-tag:hover{
color: var(--entry-title-color-hover);
}
/*カテゴリタグ home色*/
.c_home{
background-color: var(--my-entry-tag-bg-home-color);
}
/************************************
** エントリーカード
************************************/
/* タイトル */
.entry-card-title, .new-entry-card-title, .related-entry-card-title, .popular-entry-card-title{
color: var(--entry-title-color);
}
.entry-card-title:hover, .new-entry-card-title:hover, .related-entry-card-title:hover, .popular-entry-card-title:hover{
color: var(--entry-title-color-hover);
}
.a-wrap:hover {
background-color: var(--entry-bg-color-hover);
}
.list .entry-card-title{
color: var(--list-entry-title-color);
}

.list .a-wrap{
border-bottom: 1px solid #ddd;
}
/* 更新日の色 */
.post-update {
color: var(--update-color);
}
/************************************
** ブログカード シンプルリンク用
************************************/
.slink{
/*color:  var(--bcard-title-color);*/
}
a.slink:hover{
background-color: var(--bcard-bg-color-hover);
}
/************************************
** ブログカード
************************************/
.blogcard-wrap{
/*border: 1px solid var(--bcard-border-color);*/
background-color: var(--bcard-bg-color);
box-shadow: 0px 0px 5px var(--bcard-box-shadow-color);
}
.blogcard-wrap:hover{
background-color: var(--bcard-bg-color-hover);
}
.blogcard-title{
color: var(--bcard-title-color);
}
.blogcard-title:hover{
color: var(--bcard-title-hover-color);
}
/* 右下に「読む」 */
.internal-blogcard::after, .external-blogcard::after{
background-color: var(--bcard-read-bg-color); /* 内部リンク右下枠の背景色 */
color: var(--bcard-read--color); /* 内部リンク右下枠の文字色 */
}
.blogcard-title .title{ /* 自由入力 */
color: var(--bcard-label-my-color);
background-color: var(--bcard-label-bg-my-color);
}
.bct-related .blogcard-label{ /* 関連記事 */
background:#fd79a8;
}
.bct-reference .blogcard-label{ /* 参考記事 */
background:#1abc9c;
}
.bct-popular .blogcard-label{ /* 人気記事 */
background:#ffa502;
}
.bct-together .blogcard-label{ /* あわせて読みたい */
background:#0984e3;
}
.bct-detail .blogcard-label{ /* 詳細はこちら */
background:#848ee3;
}
.bct-check .blogcard-label{ /* チェック */
background:#ED4C67;
}
.bct-pickup .blogcard-label{ /* ピックアップ */
background:#F79F1F;
}
.bct-official .blogcard-label{ /* 公式サイト */
background:#636e72;
}
/************************************
** リンクボタン
************************************/
.mybtn, .mybtn-f{
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
color: var(--my-btn-color);
background-color: var(--my-btn-bg-color);
}
.mybtn:hover, .mybtn-f:hover{
background-color: var(--my-btn-bg-hover-color);
}
/**************************************/
/* 見出し */
/**************************************/
/* h1 */
h1.entry-title, #archive-title{
color: var(--h-color);
background-color: var(--h1-bg-color);
border: var(--h-border-color) double 3px;
}
/* h2 */
.article h2, .under-entry-content h2, .popular{
color: var(--h-color);
background-color: var(--h2-bg-color);
border: 1px solid var(--h-border-color);
border-left: 20px solid var(--h-border-color);
}
/* h3 */
.article h3{
color: var(--h-color);
background-color: var(--h3-bg-color);
border: solid 1px var(--h-border-color);
}
.sidebar h3{
color: var(--h-color);
background-color: var(--side-h3-bg-color);
border: solid 1px var(--h-border-color);
}
/* h4 */
.article h4{
color: var(--h-color);
border-bottom: 10px solid var(--h4-bg-color);
}
/************************************
** 目次
************************************/
.toc{
color: var(--toc-color);
border: var(--toc-border-color) solid 2px;
}
.toc-title{
background-color: var(--toc-title-bg-color);
border-bottom: 1px dashed var(--toc-border-color);
}
.toc .toc-list a{
color: var(--toc-link-color);
}
.toc .toc-list li{
border-bottom: 1px dashed var(--toc-color);
}
.toc .toc-list li:last-child{
border-bottom: none;
}
.toc .toc-list li a:hover{
background-color: var(--toc-link-bg-color-hover);
}
/************************************
** 目次一覧
************************************/
.toc-all ul li{
color: var(--toc-list-color);
border-color: var(--toc-list-border-color);
background-color: var(--toc-list-bg-color);
}
.toc-all ul li:hover{
background-color: var(--toc-list-bg-color-hover);
}
.toc-all ul li a{
color: var(--toc-list-color);
}
.toc-all ul li a:hover{
}
.toc-all ul li .date{
font-size: 1em;
}
.toc-all ul li .post-date{
color: var(--toc-list-color-date);
}
.toc-all ul li .post-update{
color: var(--toc-list-color-update);
}
.toc-all ul li a:hover{
background-color: var(--toc-list-bg-color-hover);
}
/************************************
** リスト
************************************/
/* 番号付きリスト */
ol.list-number li:before{
color: var(--list-number-color);
background: var(--list-number-bg-color);
}
/************************************
** テーブル（Table）
************************************/
.article table{
background-color: var(--table-bg-color);
}
.article th{
color: var(--table-th-color);
border: solid 1px var(--table-border-color);
background-color: var(--table-th-bg-color);
}
.article td{
border: solid 1px var(--table-border-color);
}
/* 項目の色 ;*/
td.item {
background-color: var(--table-th-bg-color);
color: var(--table-th-color);
}
/* 項目の色 ;*/
td.mark {
background-color: rgba(236,152,0,0.2);
}
/************************************
** 汎用
************************************/
hr {
border-top: 1px dashed var(--hr-color);
color: var(--hr-color);
}

/* カテゴリー説明文 */
.category-page-content, #site-description, .note{
background-color: var(--note-bg-color);
color: var(--note-color);
}
/************************************
** 拡張スタイル
************************************/
.list-check li:before { /* リストのチェック色 */
color: var(--list-check-color); /* list-check内のチェック色 */
}
/**************************************/
/*ラベル付ボックス用*/
/**************************************/
.l-box, .l-box_img{
border: solid 2px var(--lbox-border-color);
background-color: var(--lbox-bg-color);
}
/* ラベル部分 */
.l-box .l-box-title,.l-box_img .l-box-title{
background: var(--lbox-title-bg-color);
color: var(--lbox-title-color);
}
/************************************
** 人気の記事
************************************/
/*カテゴリ　スラッグ別色*/
.wpp-list .c_diary{
background-color:rgba(85,255,204,0.3);/*カオヤイ日記　エメラルドグリーン*/
}
.wpp-list .c_travel{
background-color:rgba(255,0,0,0.3);/*観光スポット　赤*/
}
.wpp-list .c_food{
background-color:rgba(255,119,17,0.3);/*カフェ・レストラン　オレンジ*/
}
.wpp-list .c_cook{
background-color:rgba(255,242,0,0.3);/*自炊　薄い黄色*/
}
.wpp-list .c_thai{
background-color:rgba(204,119,221,0.3);/*タイ語　薄い紫*/
}
.wpp-list .c_story{
background-color:rgba(153,198,0,0.3);/*よもやま　グリーン*/
}

/************************************
** ページネーション
************************************/
.pagination .current {
background-color: var(--pagination-current-bg-color);
}
.pagination a:hover {
background-color: var(--pagination-bg-hover-color);
color: var(--pagination-color);
}

.page-numbers {
  color: var(--pagination-color);
  border: 1px solid var(--pagination-color);
}

/************************************
** 「次のページ」ボタン
************************************/
.pagination-next-link, .comment-btn{
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
background-color: var(--page-next-btn-bg-color);
color: var(--page-next-btn-color);
}
.pagination-next-link:hover, .comment-btn:hover{
background-color: var(--page-next-btn-bg-hover-color);
color: var(--page-next-btn-color);
}
/************************************
** 「次の記事」「前の記事」
************************************/
.pager-post-navi{
border: 1px solid var(--pager-border-color);
}
.pager-post-navi a .iconfont{
color: var(--pager-arrow-color);
}
.prev-post-title, .next-post-title{
color: var(--pager-link-color);
}
.pager-post-navi a:hover{
background: none;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 var(--pager-bg-color-hover);
}
.prev-post{
border-right: 1px solid var(--pager-border-middle-color); /* 横に線 */
}

/*480px以下*/
@media screen and (max-width: 480px){
.prev-post{
border-right: 0;
border-bottom: 1px solid var(--pager-border-middle-color); /* スマホは下線 */
}
}
/**************************************/
/* タイルリンク */
/**************************************/
.tile-list li{
color: var(--tile-list-color);
background-color: var(--tile-list-bg-color);
}
.tile-list li:first-child{
border: 1px solid var(--tile-list-border-color);
}
.tile-list li:nth-child(n+2){
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: var(--tile-list-border-color);
}
.tile-list a:hover{
background-color: var(--tile-list-bg-color-hover);
}
/**************************************/
/* カテゴリーリンク */
/**************************************/
.cat-list a{
color: var(--cat-list-color);
background-color: var(--cat-list-bg-color);
border: 1px solid var(--cat-list-border-color);
}
.cat-list a:hover{
background-color: var(--cat-list-bg-color-hover);
}
/************************************
** トップへ戻るボタン
************************************/

.go-to-top-button {
background-color: var(--2nd-bg-color);
color: var(--impact-color);
}
.go-to-top-button:hover {
background-color: var(--std-bg-color);
color: var(--impact-color);
}
/************************************
** スマホ　メニュー関連
************************************/
/* 上下メニュー */
.mobile-menu-buttons, .mobile-menu-buttons .menu-button > a, .menu-button > a:hover{
background: var(--m-bottom-menu-bg-color);
color: var(--m-bottom-menu-color);
background-image:url("https://suemari.com/img/flower.png");
}
.mobile-menu-buttons .menu-button {
border-right: 1px dashed var(--m-menu-color);
}

/* 左右スライドメニュー */
.menu-content{
background-color: var(--m-slide-bg-color);
background-image:url("https://suemari.com/img/flower.png");
background-position: top left;
background-repeat: repeat;
background-size: auto;
background-attachment: scroll;
color: var(--m-slide-color);
}
/* 左メニュー */
.menu-drawer a{
color: var(--m-menu-color);
border-bottom: 1px dashed var(--m-menu-color);
}

/**************************************/
/* サイドバー */
/**************************************/
/* カテゴリーラベル */
.label-cat a, .cat-link{
background-color: var(--label-cat-bg-color);
border: 1px solid var(--impact-color);
color: var(--impact-color);
}
.label-cat a:hover, .cat-link:hover{
color: var(--impact-color);
background-color: var(--label-cat-bg-hover-color);
opacity: 1;/* cat-linkの初期設定消す用 */
}
.label-cat .count {
background-color: var(--label-cat-count-bg-color);
color: var(--label-cat-count-color);
}

/*本文下タグ*/
.tag-link, .comment-reply-link {
color: var(--impact-color);
border: 1px solid var(--impact-color);
background-color: var(--label-tag-bg-color);
}
.tag-link:hover, .comment-reply-link:hover {
background-color: var(--label-tag-bg-hover-color);
  color: var(--impact-color);
}

/**************************************/
/* スーペーリンク */
/**************************************/

/* サムライキャット部分 */
.samuraicat{
border-bottom: 1px dashed var(--impact-color);
}
/* 下部のリンク部分 */
#bottom .bottom_link dl{
  border-bottom: dashed 1px var(--impact-color);
}
#bottom .bottom_link dt{
  border-left: solid 8px var(--impact-color);
}

/**************************************/
/* 旅系 */
/**************************************/
/*ホテル用枠*/
.hotel-item-box{
border: 2px solid var(--hotel-border-color);
background-color: var(--hotel-bg-color);
}
/*ホテル用ラベル*/
.hotel-item-box .box-title, .hotel-city-title, .tour-city-title, .review-city-title{
background: var(--hotel-title-bg-color);
color: var(--hotel-title-color);
}
/*ホテル用アイコン*/
.hotel-city-title:before, .tour-city-title:before, .review-city-title:before, .box-title:before{
color: var(--hotel-icon-color);
background: var(--hotel-icon-bg-color);
}